デザインの推進は簡単なことではありません。デザインの定義が広がり過ぎてしまったことで人によって解釈や期待が異なりますし、デザイナーの責任範囲も様々です。あれこれ挑戦を続けても物事は思うように早く進まないですし、時には悲観的になるかもしれません。 物事が進むのが遅いのはごく自然なことです。何か実践するだけであれば、一週間あればできるかもしれません。ただ、そこで作ろうとしている価値を組織全体に浸透させるのは時間がかかります。組織が大きければ数年かかることもあります。長期戦だからこそ難しいですし、諦めてしまうこともありますが、うまく進める方法もあります。 中核へいくほど進みが緩やかですが、インパクトが大きくなります手段の目的化にある罠例えば UI ライブラリを作ることを目標とします。とりあえず作ることはできるかもしれませんが、作業コストに担う効果は得ることができるでしょうか。 UI ライブラリを

デザインを決める5つの要素誰もが『自分の正しさ』『良さ』といった価値観を抱きながら、目指すゴールに向かって働いています。私にしても「こうありたい」というミッションがあり、それを達成するための活動をしています。 それぞれが良かれと思って活動していたとしても、チームメンバー全員が同じ価値感をもっているとは限りませんし、優先順位も異なります。私たちデザイナーが抱える価値の重さを、他人が同じように感じているわけではありません。私はそれを「デザインの理解が足りない」ではなく、「価値観の重きの置き方が異なっている」と捉えるようにしています。 デザインフィードバックが難しい理由のひとつは、どう考えても正しいと言い切れる成果物が作れない（説明できない）ところ。ひとりが「良い」と評価したデザインが、他の人に尋ねると「そうでもない」と言う場合があります。人によって意見が変わる場合もあれば、タイミングやコンテキ

リモートのプレゼンは進化がない かれこれ 15 年近くKeynoteを使ったプレゼンを続けています。10名以下の小規模のものから 1,000 人を超える大規模のものまで数多くのプレゼンをしてきました。自分にとって Keynote はプレゼンに欠かせない大事なツールですが、最近は利用する機会がかなり減りました。 凝ったアニメーションを作るのも楽しみのひとつ ありがたいことに今でもイベントで登壇する機会がありますが、今年は COVID-19 の影響もあって、ほぼすべてのイベントがフルリモートに切り替わりました。イベントの形が大きく変わったと共に自分のプレゼンスタイルも少しずつ変わり、結果的に Keynote が活躍するタイミングがなくなりました。 国内外のリモートイベントに幾つか参加して感じたのが、リアル会場からリモートに変わったにも関わらず、プレゼンのスタイルが以前からまったく変わっていない

寛大姿勢と厳格構造の間 デザインシステム開発における課題はいろいろありますが、いつも迷うのが『落とし所』を見つけることです。デザインシステムは下図のような軸のどこかにプロットされると考えています。コンポーネントやドキュメンテーションがほとんど用意されてない「寛大姿勢」と、様々な要素が細かいところまで決まっている「厳格構造」の 2 つです。 寛大姿勢 表現に自由があり過ぎる サポート体制がない 一貫性がない 改修コストが高い 厳格構造 トップダウン 守るべきルールと捉える人がいる 周りからの反発を受けやすい ユーザーニーズより現存コンポーネントを優先 デザインシステムはいずれかの状態に極度に寄るものではなく、軸のどこかにあります。ただし、間のどこが良いかは組織によって違うので落とし所が難しいわけです。デザイン組織の成熟度はもちろん、何を達成すると次のステップへ進めるのかを長・中・短期それぞれ

UIデザインにもあるバグ 今年の WWDC 2019 で印象に残っているセッションのひとつが「Introducing SwiftUI: Building Your First App 」。SwiftUI は開発がよりスマートにできるようになるだけでなく、デザインツールの新しい可能性を示しているように見えました。SwiftUI はとてもエキサイティングですが、個人的に刺さったのが上の写真。改めて意訳した図を作りました。 UI デザインは単に理想型を作れば良いのではなく、様々な状態（ステート, State）を考慮する必要があります。情報量に応じてどう見せるかだけでなく、様々な種類のエラーにどう対応するか考えなければいけません。How to fix a bad user interface で紹介されている UI Stacks のように、少なくとも 5 つのスクリーンデザインが必要になります。

難易度が高過ぎな海外事例 Web で公開されているデザインシステムは、インスピレーションにはなりますが、最初に目指すものとして相応しくない場合があります。好例として紹介される Salesforce の Lightning Design System が最初に GItHub にデプロイされたのが 2015年の9月。プロジェクトが始まったのはもっと前だと思うので 4 年くらい続けているはずです。Salesforce で働くデザイナーの数は分かりませんが、 LinkedIn で調べると 300 名以上のデザイナーが検索結果に表示されます。 少なくとも 300 名のデザイナーが働いている組織が 4 年くらいかけて作っているものと同等なものは作れません。欧米の事例は「自分たちでツールを作ることもあります」と言うような大規模組織が多いことから、参考にならない場合があります。 ひとまず原則や色から始める

今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ

デザインツールのもうひとつの未来 「次世代デザインツールはどこへ向かうのか（後編）」で、デザインプロセスはよりチームスポーツのようになると書きました。デザインツールはより開発との連携がしやすくなり、より実装を考慮したデザインがしやすくなるのでは？と仮説しました。しかし、デザインと実装の溝がなくなることだけがデザインツールの未来の姿ではないと思います。 デザインツールにあるもうひとつの可能性が、ジェネレーティブデザイン（generative design）です。 ここでいう『ジェネレーティブ』とは、コンピューターアルゴリズムで何かを生成・構築するもの。ジェネレーティブアートであれば随分昔からあります。例えば Gerg Nees の Computergrafik は、コンピューターアルゴリズムによって作られたグラフィックアートを 1965 年に発表しています。最近だと Processing の

「分からない」が将来を潰す 「インターネットってどうせ流行りでしょ？」 「FAXのほうが良いじゃないですか」 「今までのやり方で上手くいっているから必要ない」 小さな頃から web を当たり前のように使っていた人には信じられないですが、昔はそんなことを言っていた人がいました。企画提案をするにしても、過ぎ去っていく流行ではないことを説得するところからスタートすることもありました。 若い頃は昔の価値観にしがみついている人たちにどう伝えれば良いか分からなくて苦労しましたし、自分が『オジサン世代』になったら絶対こうなりたくないと思っていました。自分には分からないから、周りにはさせないみたいな態度が成長を遅れせてしまうのではないでしょうか。 『オジサン世代』になってしまった今でもそう考えながら仕事していますが、周りが次第に閉鎖的になっているのを見ると「ヤバいな」と感じることがあります。 「TikTo

色やタイポグラフィだけでなく、言葉でプロダクトの雰囲気が決まることがあります。早期からダミー文字を避けてコンテンツをデザインするべきですが、簡単に作れるものではありません。 良い事例を探そうとすると必ず辿り着くのが Mailchimp の Voice and Tone 。「Mailchimp らしさ」が明文化されているだけでなく、ライティングの基礎も書かれている優良コンテンツです。しかし、英語の壁がありますし、文化の違いもあるのでそのまま真似するのは困難です。 そこで今回はラベルのライティングというミクロの視点と、出来上がるまでのプロセスを把握するマクロの視点からコンテンツの課題と対策を紹介します。 ラベルデザインにある3つの特徴 UI のラベルをどのようにデザインすれば良いのかを考える上で、 Airbnb アプリは好例です。ローカライズの視点も加えるとさらに面白いので今回は日本語のインタ

次へ進むための『何か』 プロトタイプは今日の設計プロセスにおいて必須の役割を果たしている … といった論調を見かけることがあります。特にアプリの場合、Web サイト制作以上に開発者とデザイナーの密接なコミュニケーションが必要になるので、単なる静止画データの受け渡しでは不十分です。そこで「プロトタイプを作りましょう」となるわけですが、他のツールと同様、手法を取り入れただけで制作における課題が解決されることはごくまれです。 プロトタイプは、紙で作るものから、Principle のようなアプリケーションを使ってインタラクションを加えるものまであります。プロトタイプの完成度も制作スピードもツールによってまちまちなので、どのように扱えば良いのか迷う方も少なくありません。また、新しいツールを採用してプロトタイプ（のようなもの）を作ってみたけど、以前と状況が変わらないどころか、大変になってしまうこともあ

なぜスケールすべきなのか よく多くの改善、より早い提案・対応が求められている今日。エンジニアは昔から大規模化して動くための施策と実践を続けていますが、デザイナーは大規模化の歴史がないといっても過言ではありません。エンジニアのように確固したワークフローの構築が難しいというのもありますが、デザインは『個人プレー』で作るものというニュアンスが強かったという背景もあると思います。 しかし、いつまでも個人に依存したデザインをしていると、新しい施策や改善がひとりのデザイナーの動き次第になります。もちろん、それでも運用可能な環境はありますが、増え続けるビジネスサイドの要望に対応するために、ひとりでデザインを続けるのは困難です。ひとつひとつ対応してるときは、「分かりやすい一貫性のあるデザインを作ろう」と思って取り組んでいたとしても、全体を振り返ると実はそうではないということはあります。 ではどうやってデザ

メンタルモデルから始めるデザインする上でユーザーのメンタルモデルの理解は欠かせません。 UI やコンテンツに出くわしたとき、それをどう解釈・判断し行動するかを決めるのがメンタルモデル。 Web サイトであれば青色の文字に下線が入っていればリンクであると判断するのも、過去の経験や知識を基にメンタルモデルが築かれているからです。私たちが「使いやすい」「直感的」と感じるのもメンタルモデルとインタラクションが一致しているからと言えます。 同じデザインでも評価は変わるデザインをチームで評価するとき、メンタルモデルが共有されていないために議論が思わぬ方向へ進む場合があります。Web サイトのリンクのように広く使われているものであれば共通のメンタルモデルが築かれていますが、多くの場合そうでははありません。オンボーディング、アイコンの見た目、通知のコピーなど、UI に関わるあらゆる部分で意見の相違が発生し

フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法」をはじめ、記事やイベントを通して維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を

上図は、Facebook, Instagram, Snapchat をはじめとしたサービスが提供している「ストーリー」でよく見かける動きです。ストーリーはここ 1, 2 年で一気に広まりましたし、毎日観覧している人もいると思います。 UIデザインも成熟期に入ってきて、ベストプラクティスと呼ばれるものが出揃ってきました。タイムラインのUI、ナビゲーションのUI、ギャラリーのUI など、様々なコンポーネントがどのアプリを見ても大して変わらなくなりましたし、そこから大きく外れたものは「使いにくい」と言われる場合もあります。 ストーリー式 UI も他のコンポーネントと同様、似たり寄ったりになってきていますが今までの UI になかった特徴的なところがあります。 操作のための UI が極めて少ない: 従来であればスキップしたり次の動画を見るための操作 UI があったところが、ストーリー式 UI にはそ

身近にいるかもしれないモンスター達 「モンスターペアレント」なんて言葉が流行した時期がありましたが、そのデザイナー版もありそうです。一見、平穏そうな装いをしたデザイナーの中に潜む恐ろしいモンスター達。彼らがデザインの行程を台無しにしたり、品質を落としてしまう場合があります。 今回紹介するモンスター達は web やアプリのようなデジタルプロダクトをデザインしている人たち向け。特にデザイナーとしてキャリアを始めた頃に陥りやすいモンスターたちです。 俺一番モンスター 問題解決することがデザイナーの仕事ですが、自分が考えた解決案が絶対正しいとは限りません。誰でも自分が考えたアイデアを大事にしたいですが、過保護になるとかえって視野が狭くなります。デザインに関わる様々な手法がありますが、それが解決を導き出す唯一の方法ではありません。課題解決ができるのはデザイナーだけではないわけですから、「自分が絶対正

崩れない色名にする 前回「デザインシステムに採用する色を決める5つのルール」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん（@witch_doktor）が「ウェブサイトに使われる色に固有の名前をつけてみる」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。 前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。 色名＝変数 色の名前を付けるのに困っている方は、Kromatic がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで、色名を提示してれます。他にも color-names という 10,000 以上の色名が収録されたライブラリもありますし、Wikipedia にも色名は幾つかあります。

文体のトンマナづくりについて実践されていること、意識されていることがあれば教えてください。 @mjmjsachi ライターを雇うのが理想的ですが、予算の都合上それが難しい場合があります。ライターを雇わなかったとしても、複数人でコンテンツを作ることもあるので、それぞれトーン＆マナーがバラバラになることがあります。私はライターと呼べるほどのスキルも経験もないですが、以下のようなことを気をつけています。 構造が意味を生み出す 大学時代ジャーナリズムを受講した際に「逆ピラミッド」というメタファーを学びました。どのような優先順位をつけて構造化するべきかを考える際に逆ピラミッドの考え方が役立ちます。逆ピラミッドは以下のような情報構造を持っています。 最も価値のある情報 その情報に関する詳細 その他、知っておきたい情報 重要な情報を最優先に掲載することで、使いやすさも向上するとヤコブ・ニールセン博士も提

クリエイティブは機械化できる？デザイナーは作ることがすべてではないですし、代わりに作ってくれるツールも年々増えてきます。感性が必要なデザインですから機械化が難しいように見えますが、そんなことはありません。デザインには科学的に説明できるところが少なくありませんし、機械化が進めばよりバラエティに富んだデザインを瞬時に作り上げることができるようになるはずです。 デザインの自動化・機械化という文脈で象徴的な出来事といえば、Adobe Sensei の発表です。Sensei は、人工知能（AI）と機械学習を活用して、写真補正、3Dモデリング、アニメーションなどデザイン作業の効率を劇的に変える技術です。 デザイナーにとってプラスになる技術であることは間違いないですが、デザインツールの中に留まることではないと思います。エンタープライズ向けソリューション Experience Cloud との連携で、CM