Latest thinking
すぐに使えるノウハウではなく、「なぜそうなっているのか」を考える記事を書いています。デザインの仕事で感じるモヤモヤに、構造から向き合いたい人のための場所です。
結局デザインシステムは何なのか
フロントエンドからの影響 昨年開催されたワークショップ「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法 [http://www.yasuhisa.com/could/article/ui-pattern-workshop/]」をはじめ、記事やイベントを通して 維持・管理ができるデザインついて情報発信しています。CMS が広く普及して以来、コンテンツ配信を長く続けるための仕組み作りが模索されているものの、デザインは発展途上です。早く作る、効率よく作るまで議論されるものの、デザインをどう維持するのか、どうすれば最低限の品質を担保できるかまで発展しないことがあります。 1977 年に建築家クリストファー・アレグザンダーの著書「 Pattern Language [http://amzn.to/2gfm74M] 」で、パターンが街作りに柔軟性と拡張性を持たせると説いています。彼に異論を唱える人もいますし、街に個性が失われるという意見にも一理あります。しかし、彼の考え方が今の情報設計（IA）に多大な影響を及ぼしていることは間違いありません。情報や装いに一貫性を持たせることは、作
デザインしやすい部品の分け方を考える
Atomic Design の課題 デザインシステムを作っていく際、Atomic Design [http://bradfrost.com/blog/post/atomic-web-design/] は非常に参考になる考え方です。Atomic Design は以下の 5 つの要素によって構成されていて、Pages へ近づくほど、より複雑で大きなものになります。 1. Atom : UI を構成する最小かつ基礎要素。ラベルやボタンなどが含まれる。 2. Molecules : 2 つ以上の Atom によって構成された小さなグループ。ラベル、インプット、ボタンで構成された検索フィールドはその一例。 3. Organisms : 2 つ以上の Molecules もしくは Atoms によって構成されており、画面上で独自の枠組みになっていることが多い。 4. Templates : コンテンツ構造が分かる大きな枠組みで、利用文脈によって分類できるレイアウトになっている。 5. Pages
制作者が自分の価値や課題を伝える方法
2017年2月25日、東京の東京ガーデンテラス紀尾井町で Inside Frontend [http://inside-frontend.com/] が開催されました。単なる小手先のテクニックではなく、複雑な課題にどのように取り組んだら良いのかという考え方も学べる 1 日でした。また、大企業で働くエンジニアが多数登壇していたころから、チームでどのように開発するのかといった話も聞くことができました。当日の様子は #insideFE まとめ [https://togetter.com/li/1084968] を見ると分かりますが、中級者以上の内容を聞ける集まりではあるものの、雑談もできる良い雰囲気のイベントでした。たくさんのツイートが流れ続けていたところもエンジニアのイベントらしいなと思いました。 人は変化を好まないという事実 今回はフロントエンドエンジニアの前で登壇するという理由から「フロントエンドの課題を啓蒙する方法 」という題名にしたものの、話の内容はデザイナーでもディレクターでも共通するものだと考えています。ツールだけでなく、コミュニケーション手段も充実してきているとはい
必要なコンテンツを発見するための簡単調査方法
コンテンツ発見のために必要な調査 現存コンテンツの課題を発見するためにコンテンツ・イベントリー [http://www.yasuhisa.com/could/article/creating-content-magic-sheet/] は欠かせない存在です。スプレッドシートにひたすらデータを入力するという地味な作業が伴いますが、コンテンツを一望することで「なんとなく」と察していた課題を目に見える形にして共有できるようになります。コンテンツを気軽に作って配信できるようになりましたが、それが利用者にとって意味のあるものなのか評価も必要ですし、そもそも現存コンテンツは誰がどう管理しているか把握しておかなければ改善すらできない場合があります。 自分たちが持つコンテンツから課題を発見するだけでなく、利用者が求めるコンテンツは何かも知る必要があります。そのためにユーザー調査があるわけですが、調査を通してコンテンツに関わる以下の課題を解決することができます。 * 言葉 : 配信側の言葉遣いや分類の仕方が、利用者と同じとは限りません。ニュアンスが似ているだけでまったく違う言葉を使っている可能
デザイナーがデザインシステムに参加するための課題と対策
実装寄りの情報だけでは不十分 コンテンツだけでなくデザインも運用していきたいと考えたとき、デザインシステム [http://www.yasuhisa.com/could/article/design-system-language/] を作ることが不可欠です。属人性を省きつつ、最低限の品質を担保することが可能なデザインシステムですが、作りさえすれば組織で広まるのかというと、そんなことはありません。 Salesforce の Lightning Design System [https://www.lightningdesignsystem.com/]、MailChimp の Design Patterns [https://ux.mailchimp.com/patterns] をはじめ、自社でデザインシステムを取り入れるためのインスピレーションは幾つか見つけることができますが、フロントエンド寄りになりがちです。早く Web サイトやアプリを実装するためのガイドラインなので当然ではあるものの、これだけではデザイナーがデザインシステムへの参加が難しくなる場合があります。多くの要因
今必要とされている時間を作るためのデザイン
集中できる時間が少ない現在 今の仕事で最も難しいのは、集中できる時間を作ること。作るためのツールは充実していますし、一緒に作ることができる優秀な人も周りにいます。いろいろなものに恵まれていたとしても時間を作ることは簡単なことではありません。1 日 24 時間が、突然 32 時間にはならないわけです。 時間は有限であるのはもちろんですが、その貴重な時間を有効に使うのは非常に難しいです。特に集中するのが難しい時代に生きています。誰かが声をかけるくらいなら良いですが、メール、チャット、ソーシャルメディアなど絶え間なく注意を引こうする通知が鳴り続けています。たとえ通知をオフにしたとしても「あれはどうなっているだろう？」と、ついついスマートフォンを開いて画面を再読み込みしたり、スクロールを続けている方は少なくないはずです。 The Telegraph が 2015 年に公開した記事によると、私たちは年間 759時間も時間を無駄にしている [http://www.telegraph.co.uk/finance/jobs/11691728/Employees-waste-759-hours-
日本の新聞サイトから学ぶパフォーマンスの現在
パフォーマンスはすべてに関わる課題 パフォーマンスは利用者体験を向上するだけでなく、ビジネスにもプラスになります。コンテンツと同様、パフォーマンスはデザイン、エンジニアリング、ビジネスすべてに関わる重要な課題です。それを裏付ける事例をたくさん見つけることができます。 * 表示に 3 秒待たせることで 40% の利用者が離脱してしまう（Gomez [http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf] ） * 表示速度を 68% 改善したことで、コンバージョン率が 7% 向上した（Ancestory.com [https://www.dropbox.com/s/8rffw1px0yn05gm/Velocity-NY-Jed-Wood-Ancestry-User-Centered-Metrics.pdf?dl=0] ） * 4 秒遅くなったことでページビューが 11% 低下。20秒遅くなると 44%
会話から考える情報設計のコツ
会話はデザインの基盤 2016年は、Facebook Platform [https://messengerplatform.fb.com/] や Slack Bot [https://slack.com/apps/category/At0MQP5BEF-bots] のようなチャットを利用した会話式 UI [http://www.yasuhisa.com/could/article/ai-and-conversational-ui/] が話題になりました。人工知能（AI）の話題とも重なって『バズった』UI デザインでしたが注意が必要です。利用者の期待をコントロールしなかったり、情報のインプットとアウトプットの工夫がないと「やっぱり使えない」「会話型でないほうが便利」という結果になります。何でも会話式 UI ではなく、現実的かつ有効な活用例が今後出てくることを期待しています。 『会話』とは、チャットのような見た目のインターフェイスだけを指しているわけではありません。Amazon Echo [https://www.amazon.
コンテンツモデルからデザインシステムを作り出す
テンプレート化されているだけで運用の課題、利用者のニーズに応えられないコレクションになっているものがあります。