1章 デザインシステム 内容紹介（5）
さて、1章「デザインシステム」は、このノートが最後です。ここまでみてきた流れを念頭に、架空のレシピサイトを題材にして、パターン言語を検討していく過程をみていきましょう。
このマガジンは、12月21日に全国書店、25日ごろにAamazonで発売になる「Design Systems − デジタルプロダクトのためのデザインシステム実践ガイド（仮）」を編集している私が、個人アカウントでこの本の作りかけの断片を紹介するものです。予約ヨロシクでございます。
1章「デザインシステム」
「デザインシステム」という言葉は、標準の定義があるわけではなく、さまざまな用途で使用されています。この章では、デザインシステムとは何か、そして何がデザインシステムを構成しているのかを明確にします。
1.デザインパターン
2.共有言語
3.パターンライブラリとその限界
4.効果的なデザインシステムを構築するには
5.例：10分レシピサイト ※この記事で一部を紹介しています
− − − − −
例：10分レシピサイト
ヘルシーな食事が好きだけど、料理に時間をかけたくないという人向けのレシピサイトを作成するとしましょう。システムを念頭に置き、早期にデザインパターンを定義するには、何から始めたらよいでしょうか？
前提として、チームは料理という分野を理解しており、デザイン上の決定を下すのに十分な調査を終えているとします。このため、最初に検討すべき内容は、どのようなエクスペリエンスを提供するかではなく、どうやってこの新しいWebサイトのデザインシステムを確立するかです。
▷目的と価値
第一に、このWebサイトの対象ユーザーとその目的、ニーズ、動機を理解することが重要です。わかりやすいよう、対象ユーザーは多忙な社会人で、彼らの目的はおいしくて健康的な食事を短時間で調理することとしましょう。この目的の達成を支援する方法には、シェフを紹介する、食事を家に届ける、会話アプリを開発するなど色々ありますが、今回はWebサイトに10 分レシピを掲載することにします。10 分以内においしい料理を作れるようにしたいので、レシピの手順数は少なくする必要があります。
目的を一文で表現すると、「10 分以内においしくて健康的な食事を作るためのやる気と能力を与えること」となります。この目的はプロダクトの中核なので、デザインおよびサイト制作に反映させなければなりません。チームはこの目的を理解し、信条とする必要があります。押しつけと感じるようではいけません。
もうひとつ重要な要素は、Webサイトを通じて表現したい価値と精神をとらえたエートスです。ここでのエートスは簡単で健康的な食べ物と、手に入りやすい食材を使ったレシピです。他の料理サイトでは、手の込んだ高級料理や、調理技術のマスターをエートスとして掲げる場合もあるでしょう。
▷デザインの原則
あらゆる要素を通じて明確にプロダクトの目的を表現するには、基盤となる原則と価値を確立する必要があります。非公式に話し合うこともあれば、マニフェストとして明文化することもありますが、重要なのはプロダクトの作成に関わる人々が価値に賛同し、その実現に尽力することです。
たとえば、10 分レシピサイトの制作メンバー全員が、時間の価値を理解していなくはなりません。レシピにタイムリミットを設けることが原動力となるので、メンバーは全員、Webサイトでのインタラクションを短く、簡潔で、高速かつスムーズにすることに注力します。この原則は、デザインパターンだけでなく、サイトのパフォーマンス、トーン、チームの運営方法にも表れます。
これらの原則は、公式である必要も、明文化されている必要もありません。ただし、メンバー間で優先順位が違わないよう、全員が原則を認め、理解することが必須です。原則は、さまざまな意思決定の基準でもあります。初めに構築する機能やアプローチを決めたり、UXフローを明確にしたり、ボタンの見た目や書体を決めたりする際は、原則に従う必要があります。
▷行動と機能型パターン
目的の達成に向けて、主にどのような行動をユーザーに促したいのか考えましょう。
● このサイトの目的は、ファストフードやレンジ調理の食事よりも、自分で調理した健康的な食事を常に選んでもらうことです。このため、このWebサイトの料理はレンジ調理の食事よりもおいしく、健康的で、魅力的に見えなくてはなりません。美味しそうだけど簡単に見える料理の写真が必要です。
● 10 分以内においしい料理を作れるようにしたいので、レシピの手順数は少なくする必要があります。短く、わかりやすく、集中力がとぎれないような手順です。10 分という約束を守るため、各手順にタイマーを用意してもよいでしょう。
● ユーザーには、自然と、いつでも好きな時に調理できるような気持ちになってもらいたいものです。このため、すでに手元にある食材で始めましょう。わざわざ買い出しに行くことも、高価な食材を入手する必要もありません。UIは、わかりやすいラベルをつけた、容易に選択可能な食材のサムネールの使用をおすすめします。
● ユーザーが創造力を持って、自発的に楽しく調理できるよう手助けしましょう。なくてもかまわない食材や、代用食材を提示します。好奇心をそそるような、意外な組み合わせも紹介しましょう。
当然ながら、デザインの細部はWebサイトの制作過程で変化していきます。しかし、ユーザーにうながしたい行動は同じままです。食材のサムネール、レシピカード、手順、タイマーといったWebサイトの主軸となる機能型モジュールとインタラクションは、こうした行動によって特徴づけられます。
▷美しさと認知型パターン
この10 分レシピサイトをどのように認知してほしいかについても、明確にする必要があります。簡素で実用的なものにするか、華やかで洗練されたものにするか。まじめな雰囲気にするか、遊び心を盛り込むか。主張を強くするか、控えめにするか。実用に徹するか、感情に訴えるか。私たちがインターフェースを通じて表現したい個性やエートスを反映させると、どのような外観になりますか？ ブランドについて考えていきましょう。
このWebサイトは健康的な食事に熱意を持っているので、それがサイト全体のテーマとなります。オーガニックな、温かくて健全な雰囲気が適しているかもしれません。また、料理に計画や下準備があまり必要ないというのも、このWebサイトの信条です。料理は自発的で楽しいものであり、10分という限られら時間で試行錯誤できます。
この時点では、ブランドにふさわしい雰囲気が見つかるまでムードボードをまとめたり、さまざまな外観を試してみます。その後、タイポグラフィ、カラーパレット、トーンといった主な視覚的ブランド要素を定義します。イラスト、画像のスタイル、特定の形状や、Webサイトのサービスの真髄をとらえ、最善の方法でコンテンツを表示するユニークなインタラクションなど、ブランドを特徴づける要素も定めます。
今回は温かみのあるアースカラーの配色、手描き風のアイコン、読みやすさを重視したタイポグラフィ、健康的な食べ物の高画質画像、いくつかのシンプルなインターフェース要素とコントロールを選んだとしましょう。これらのスタイルが、このWebサイトの認知型パターンです。
▷共有言語
このプロセスと並行して、概念に対して意味づけを行うことで、言語に関する取り決めを行います。「レシピ」とは？ 「手順」とは？ 何をもって「シンプルで軽快」なインタラクションとするか？ ここで選ばれた言葉は、チームの思考に影響します。そして間接的にデザインを形作ります。
選択されたパターンと言葉遣いは、初めは非公式に共有されます。しかし、チームとプロダクトが成長するにつれて、言葉遣いも成長します。最終的には、より構造化された方法でデザイン言語として保存、共有、編成する必要があります。
ここまでは架空のWebサイトを例に簡単にデザインプロセスを見ました。次は、システムがどのように進化するのか、デジタルプロダクトや企業を例に見ていきましょう。
− − − − −
noteの機能では表現しにくい画像のキャプションや、発言の引用や脚注などは省略しています。あくまで、書籍の概要としてイメージしてもらえれば幸いです。全貌はぜひ書籍でお確かめください。
1章はこのノートで終わりです。いかがでしたか？（読み進めるの大変ですよね💦） 次回から第2章「デザインの原則」へと進みます。
では、次回をお楽しみに。
この記事が気に入ったらサポートをしてみませんか？