2月28日（火）に渋谷で行われた「Service Design Night vol.4 ～事業会社とデザイン会社　デザイナーぶっちゃけトーク：スキルアップやキャリアパスについてどう思う？～」というイベントに登壇させていただきました。テーマは、事業会社と制作会社でデザインに関わる人がそれぞれの視点で、今後デザイナーはどのようにキャリアアップやスキルアップを図るのか？という問題を掘り下げて考えるというものです。 デザイナーに求められるスキルが多様化・細分化される中、数年後にどんな人材になっていれば良いのか？今後何を身につけていくべきなのか？という疑問は、多くの方が抱いている問題です。今回私は事業会社で働いたことのない、生粋の制作会社視点の立場でのスピーカーということで、お声がけいただきました。このエントリーでは、私自身が発表した内容を補足と合わせてご紹介してみたいと思います。 一緒に登壇された

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手

Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。

Webページで日本語のWebフォントを使いたいんだけどフォントファイルのサイズが大きくて諦めたなんて経験ないですか？ 例えばIPAゴシックだと6.2MBほどのファイルサイズがあるので、さすがにそのままWebフォントとして使うのには抵抗がありますよね。 じゃあ使いたい文字だけ引っこ抜いてフォントファイルを再構築すればいいじゃね？という考え方を元にした手法としてフォントのサブセット化というものがあります。 fontmin fontminはWebフォントフレンドリーなフォントのサブセット化をサポートするツールです。 nodeモジュールであり、CLIもサポートしているのでビルドプロセスに組込みやすいという点ではフロントエンダーには嬉しいところではないでしょうか。 出来ること 具体的に出来ることは下記になります。 フォントファイルを指定した文字でサブセット化したフォントファイルに変換 出力できる形式

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

by Patrizio Cuscito ウェブサイトやアプリを使っていると自分の意図するものとは違う操作が勝手に行われていて戸惑うことがありますが、ミスではなく、「わざと」そのようなデザインにしているユーザーインターフェースを「ダークパターン」と呼びます。なぜ善良なデザイナーがダークパターンを使う悪意あるデザイナーになってしまうのか、その仕組みがムービーで公開されています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは何か？ということは以下の記事を読むとわかります。 ユーザーをだますのが目的のデザイン「ダークパターン」いろいろ - GIGAZINE なぜデザイナーが暗黒面に落ちてしまうのかは以下のムービーで解説されています。 Dark Patterns:

一枚の絵には千の言葉に匹敵する価値がある「百聞は一見にしかず」は、コミュニケーションデザインにおいても有効です。わたし達は今までの経験と研究の両方の側面から、画像が多くのユーザーの目を引きつけることを知っています。 自身で撮影した写真画像、どこかでダウンロードした画像に一手間加えて、画像を魅力的にデザインするシンプルなテクニックを紹介します。 画像を美しく仕上げる一番簡単な方法がこの「クロップ」です。クロップは不必要だったり気を散らすエリアを取り去ることで、構図を見直し、焦点を強調することができます。 【注意】クロップするエリアが大きい場合は、可能な限り大きい画像を使用します。これは切り取った後の画像が小さくなってしまうからです。小さいからといって拡大してしまうと、ピクセレーションが起きてしまい、汚い画像になってしまいます。 クロップする時に便利なのが、「3分の1ルール」です。このテクニッ

こんにちは！ いつも元気ハツラツ・天真爛漫・平成生まれゆとり世代、のんちゃんです。 わたしは中学2年生の頃から携帯電話なるものを使用し、友達とコミュニケーションをとっていました。ちなみにPCは小学4年生くらいから夢中に触っていて、親に電源抜かれたこともありましたねぇ。 ガラケーからスマホにしたのは5年前の大学1年生の時だったと思います。最初はAndroidでしたが、その後はずっとiPhoneです。 昔のiPhoneであろうとも、いまの充電器があればカメラロールとかメールとかを見返せるのがおもしろくて、実家に帰ってとてつもなく暇な時は、ひとりでそういった遊びをしています。 ちなみにすごくどうでもいいのですが、わたしはiPhoneを変更しても、あえて写真とかは引き継いで移行させません。 思い出は、そっと大事に眠らせておきたいのです。 さて、前置きが長くなりましたが、過去のiPhoneを漁ってい

大企業だけのものではないデザイン原則は、ひとりのデザイナーがマニフェストとして明示することもありますが、最近は多くの企業がスタイルガイドと一緒に作られることが多くなりました。ここで言うデザイン原則とは、タイポグラフィや配置といったデザインするためのノウハウではなく、「我々が考える良いデザイン」が文章として表されたものを指します。つまり、自分たちのスタンス（立ち位置）を示したものです。 Material Design だと、以下の 3 つの原則があります : 実世界にも通じる空間と動きをメタファとして扱う力強く、視覚的であると同時に意図的動きを通して操作や表示の意味を伝えるまた、Facebook のデザイン原則だと、「ユニバーサル」「一貫性」「使いやすさ」など１単語でシンプルに表現されています。もちろんこれだけだと分かり難いので解説が添えられています。例えば「一貫性」であれば、再利用できるも

ガイドラインに従うだけがデザイナーの仕事？メジャーサービスUIから学ぶ『マテリアルデザイン』 新規会員登録 ログイン管理 Twitter facebook はてなブックマーク RSS 2024.7.3 WED

時代に合わせて様々な仕事における役割と社会的ニーズが変わる。その中でも最近はデザイナーに求められるスキルセットとそれに合わせた役職に大きな転換期が来ている。新たなテクノロジーとビジネスにおけるデザインの役割の変化は、デザイナーという人達の仕事内容にも少なからず影響を及びし始めたようだ。 時代の変化でこれから生まれる8のデザイナー職 下記のグラフは2012年と2014年でアメリカ全土におけるグラフィックデザイナーの報酬の推移を表している。ここ数年でデザイナーのニーズが高まっている事から、おおむねその給与もアップしている。しかし注目して欲しいのは、サンフランシスコ地域の変化だ。なんと2年でデザイナーの給与が14.6%も下がっている。 ニューヨークの30%をはじめ、各地域では着実に給与がアップしているのにサンフランシスコだけ下がっている。これはどういう事だろう？サンフランシスコの街は毎年物価が大

SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあるのですが、オブジェクトが重なっていくつもシャシャシャッと動くようなアニメーションを解説している記事となると極端に少なくなります。 というわけで、そんなアニメーションを勉強がてら作ってみました！ まずは全体のイメージを作る 今回は試しに、スマホ上にカード形式のタイトル・ディスクリプションが並ぶようなものを作ってみようと思います。 以下のような感じです。 Illustratorを使って作成しました。 Illustratorでなくても、パスが書けるようなツールで、なおかつsvg形式で書き出せるものであれば何でも良いと思います。（sketchとかで

6月22日、グーグルは地図サービス「Googleマップ」に、業種の翻訳情報が追加した。実はこの機能、日本が中心的な役割を果たす形で開発されたものだ。開発を担当した、ソフトウエアエンジニアの須之内 雄司さんとハーマン シェレメティエフさん、そして、マップ全体の開発を統括している、シニア エンジニアリング マネージャーの後藤正徳さんに話を聞いた。 日本語が読めない人にも「街歩き」を！ Googleマップでは、地図上のポイント情報も翻訳対象になっている。例えば、道の名前や駅の名前、有名な観光地などは「自分が設定した言語」で表示されるのが基本だ。 しかし、すべての地点の翻訳が終わったわけではない。 「翻訳が終わっていない部分も、カテゴリーだけでも翻訳し、ぱっと見で旅行者にわかるようにできないか、という発想で進めました」、須之内さんはそう語る。だが、言葉だけだとよくわからない。 「自分がロシア語の地

ユーザファーストと聞いて、何を思い浮かべるだろうか？よく、ユーザの声をしっかり聞いていないからユーザファーストではないとか、顧客第一ではない、なんて話を聞くけど、それは全くのナンセンスだ。 ユーザは自分のほしいモノはわかっていないし、無責任まず大前提として、ユーザは自分がほしいものは分かっていない。いくらグループインタビューを重ねても、そこからipodは生まれなかっただろうし、Appleもユーザヒアリングはしないことで有名だ。それから、ユーザに「このボタンの位置についてどう思いますか？」と問われれば、「そうですね、もっと右にあったほうがいいと思います」と、意見を言わないと！いう善意から、責任も伴わない思いつきの意見をどんどんいう。だから、ユーザに「どう思うか」と聞くのは愚の骨頂だ。 長期的視点と短期的視点それから、ユーザファーストという時に、それはユーザにとって短期的にいいものか、長期的に

こんにちは。技術基盤チームのけんちゃんくんさんです。 今年からはGMOペパボオーシーの ハンドメイド・手作りマーケット tetote(テトテ) の技術支援を行っており、その一環としてプラグマティック・ペルソナを作るワークショップをやってみました。 プラグマティック・ペルソナを作るに至った背景と目的 当初は、本物のペルソナを作ることで私達が本当に注力すべきユーザ層を明確にし、意思決定の根拠を固めてスピードを上げることを目的としていました。 しかしながら、書籍やWebでペルソナそのものに関する情報を集めていくにつれて、私達がまだペルソナを定義するだけの情報を整理しきれていないことと、それをするためには膨大なデータと分析する時間が必要であることがわかってきました。さらに、チームメンバーはだれもペルソナ作りを経験したことがなく、このままでは大切な時間とリソースを効果的に使うことができないのではない

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

jser.md はじめに JavaScript を使っていると「JavaScript出来るの？ jQuery / AngularJS / Node.js etc... で困ってるんだけどさー」みたいな話を振られることがあります。 そういった時に、自分は一般的なライブラリの使い方やフレームワークに対して大した知見も興味もないので、わざわざ説明するのも面倒なのでこうして文章にしておきます。(本当に届いて欲しい人に限って、こういう文章が届かないのはわかっていますが、文章を書くこと自体が気晴らしだと思って諦めます。) 「フロントエンドエンジニア」という言葉の汎用性 先ほどのような話は自分に限ったことではなく、たぶん経験のある人も多いでしょう。 振られた話が自分の分かる範囲、あるいは興味のあるものならばまだ良いのですが、そうでないことがあまりに多すぎます。 話を振られるだけならともかく「JavaSc