2018/4/25更新

デザインにおける共通言語を作ることの重要性

Alan Power

Alanはアイルランド人のプロダクトデザイナー。専門はビジュアルデザイン、イラストレーション、ブランドアイデンティティ。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

Creating a Design System Language

デザインシステム言語（Design System Language、以下デザイン言語）という言葉が、デザイン業界でバズワードになっています。

編注：デザインシステム言語は、デザイン原則やパターンによって定義されたデザインに関する共通の言語。デザイン要素の名称やタイポグラフィ、配色などのルールを含みます。

しかし実際、デザイン言語は製品づくりにおいてどう有用なのでしょうか？　この記事では、デザイン言語がなぜ必要なのかを理解してもらえるよう、デザイン言語の基本について説明しようと思います。

基礎となる言語を作ることが、プラットフォーム内のデザイン哲学と方法論を１つに結びつける。

なぜデザイン言語が必要なのか？

デザイン言語が必要とされる理由を、内的視点と外的視点の２つから考えてみます。

内的視点

デザイン言語は、チーム全員が同じ方法論とパターンを守るための全体的な視点を提供します。チームのメンバー全員が、コンセプトに従う必要があり、また誰でも現在取り組んでいるプロジェクトのデザイン原則を参照できるようにすべきです。

デザイン言語の主目的は、デザイナーに集中するべき点と明瞭さを与えることです。ただし、ほかの言語と同じで、デザイン言語も誤解があればコミュニケーションの断絶の原因になります。

外的視点

一貫性のあるデザイン言語は、プラットフォーム内に調和をもたらします。ユーザーは、標準化された色やインタラクション、パターンに親しみやすさと安心を感じます。デザイン言語についてよく考え、その上で実際にデザインに適用することは、ユーザーが満足のいく体験のカギとなります。

たとえば、あなたがアイスランドでスターバックスに入るとします。あなたは、自分の近所のスターバックスと非常に似た感じを受けることでしょう。つまり、親しみやすさが、ユーザーに快適さと安心をもたらすのです。個々の要素に対するデザイン上の制約によって、プラットフォーム内に高いレベルでの一貫性が生まれます。

デザイン言語のメリット

良いデザイン言語には、以下のようなメリットがあります。

焦点：デザイナーがほかのことに注意をそらされることなく、目の前のプロジェクトに集中できるようにします。

明瞭さ：デザイナーが、プラットフォーム内のデザイン上の方針と制約について明瞭に考えられるようになります。

自信：デザイナーが、自分のデザインに対して自信を持てるようになり、またチーム内のほかの人と協調してデザインをしやすくなります。

一貫性：製品全体に一貫性を持たせます。さらに、一貫性があることによって、安心でき親しみの持てる体験を形成します。

効率性：チーム内の理解を促進します。これは重要性の低いことについて考える時間を減らすことにつながります。

デザイナーが集中することができ、デザイン言語を理解できれば、それは彼らの自信につながります。それにより一貫性と効率性が生まれ、ビジネスをより高いレベルで前進させることができるでしょう。

デザイン原則を定義する

チーム全体で作った確固たるデザイン原則があれば、チーム全員が同じ方法論とパターンに沿ったデザインをすることができます。

デザイン原則を構築したら、メンバーはチームが掲げるコンセプトに沿ってデザインをする必要があります。さらに、メンバーがプロジェクトのデザイン原則をいつでも参照できる状態でなければなりません。

デザイン原則には、以下のような要素が含まれます。

トーン

製品について一貫したトーンを作り出すことが大切です。デザイナー（または関わっている人）は、コンテンツを書くときに必要となる方法について知っておくべきでしょう。一貫したコンテンツを持つことは、一貫したユーザー体験を作る上で重要なので、デザイナーはすべてのコンテンツをトーンに沿ったものにするよう配慮するべきです。

チームの価値観

わたしたちはチームとしてどのように働いているでしょうか？　全員が同じ方向に進むことは大事です。さらに、幸せな職場環境を作る上で、価値観は重要なものであると全員が納得していることもまた大事です。

デザイン上のアイデンティティを形作る要素は、もっとたくさんあります。上に挙げたのは氷山の一角にすぎません。企業によって必要となる要素は異なるので、適切だと思う形に自由に変更してください。

ビジュアル・アイデンティティを構築する

ビジュアル・アイデンティティは一晩では完成しません。作るのには時間がかかります。

ビジュアル・アイデンティティを構築したら、ドキュメント化することが重要です。配色やタイポグラフィ、アイコンのスタイルのようなものは、プラットフォーム内の一貫性を作り出す上でカギとなります。

・色：プラットフォームで使われているカラーパレットは何ですか？　どこで、どのように、なぜその色を使うのかを説明してください。

・タイポグラフィ：プラットフォーム上で使われているフォントはどのような種類ですか？　太さ、サイズ、配置の原則を要約してみましょう。

・アイコン：アイコンはどのようなスタイルですか？　この問いについて考えることで、アイコンセット毎にスタイルについて論理的に説明できるようになります。

・グリッド／レイアウト：プラットフォーム上で使われているグリッドシステムは何ですか？　グリッドの使い方および、レイアウトの理想について説明してみましょう。

・インタラクション：ユーザーがサイトにアクセスするとき、どんなことを期待しているのでしょうか？　サイト内の標準的なインタラクションについてまとめてみましょう。

・アニメーション：アニメーションに対して、どのようなアプローチをしているでしょうか？　プラットフォーム上でそのアニメーションを使う理由および、使用上の制約を説明してみましょう。

・デザインリソース：外部のパートナーがデザインリソースを簡単にダウンロードできるようにすることは重要です。これには、色見本、ロゴ、アイコンセットなどが含まれます。

デザイン言語の実践

デザイン言語がプラットフォーム内でいかに重要かは理解できたでしょうが、「どこから始めよう？」と考えている人もいると思います。この記事は非常に抽象的で、実際にデザイン言語を作ることは上に述べた以上のことを含んでいます。

ここでは、仕事を始めるにあたって必要となるであろうことを紹介します。

ステップ１．UIの調査を行う

何かを始める前に、現在の状況がいかに一貫性がないかを確認するのが最善です。これには２つの効果があります。

まず、なぜ一貫性がない状態なのか突き止めるのに役立ちます。つまり、一貫性がない理由を明確にする効果です。

また、デザインシステムを作っている理由を明確にし、顧客からの支持を得るのにも貢献するはずです。つまり、プラットフォーム上での一貫性を作り出す効果です。UIの調査の方法をまとめたBrad Frost氏による素晴らしい記事があるので参照してみてください。

ステップ２．UI要素の優先順位を決める

一貫性を作り出す上で、どのUI要素のデザイン言語を優先して作るかはデザインチームによって異なるでしょう。しかし、一貫性のための基礎には、いくつかの重要な要素があります。それは、色やタイポグラフィ、アイコンなどで、これらは最初に取りかかるのに最適な部分です。

デザインチームと開発チームが密接に連携し、先程のUIの調査に基づく優先順位を作りましょう。そうすることで、近い将来のロードマップを描くことができるでしょう。Trelloは優先順位のリストを最新の状態に保つのに良い方法です。

これにより、以下のことが可能になります。

リストを作成し、優先順に並べること。たとえば、最初に何に取り組むかなど。
それぞれのコンポーネントでどの程度進捗しているかをトラックすること。

ステップ３．デザインチームとの議論を始める

最初に対処するべきことが理解できたら、今度はデザインチームと話し合いの場を持ち、最初に必要となるコンポーネントについてアイデアと意見を求めるべきです。

誰がデザインシステムのプロジェクトのオーナーとなるべきかについては、さまざまなアプローチがあります。しかし現段階では、１人のデザイナーがプロジェクトの管理責任を担うという例を挙げていきたいと思います。

このとき、作成したものに対してデザイナーが自ら提案できたと感じられるようにすることはきわめて重要です。

ステップ４．記録する

今度はいくつかの決定を下すときです。必要があればどんな場合でも対応できるように、作っているものを記録しましょう。

作っているものが主観的判断ではないと担保することはとても重要です。なぜその決定を下したかについて、理論的根拠がなければなりません。そうすることで、デザインチームにあなたの決定を説明できるでしょう。

ステップ５．うまくいくか見てみる

次のステップは、あなたの決定がうまくいくか試してみることです。紙の上で決定を下すことはとても簡単ですが、実践するとなると、うまくいかなくなることが現れてくるかもしれません。現在のデザインを使って、新しいスタイルの例を試してみましょう。

ステップ６．デザイン言語を整理する

結果に満足できすべての当事者から賛同を得られたら、デザイン言語を整理し、チームのほかのメンバーにデザイン要素がどのように使うのかを教えます。整理し終わっても、あまり良くない要素があると感じれば、必要に応じていつでも変更できると覚えておくことが大事です。

ステップ７．次の要素へ進む

チームに指導し、デザイナーがあなたの決定を尊重してくれていると思えるようになったら、今度は次の要素へ進みましょう。

一度に、いくつの要素を度に選ぶかはあなた次第ですが、無理をしすぎてはいけません。無理をすると、細部に集中する注意力が妨げられてしまうでしょう。わたしの場合は、色、タイポグラフィ、アイコン、インプットフィールド、表、リストと順に進めることが多いです。

新しいスタイルがどんなものか全員が理解できたら、すべてのデザイナーと開発者がそのスタイルを適切に実行することが重要です。全員が確実に同じデザイン原則のもとに作業しているかどうかチェックするには、毎週の会議がとても重要です。クラフト・バイ・インビジョンのような製品は、改善をしながら一貫性を持たせるのに非常に役立ちます。

デザイン言語の導入が成功だと判断するには

デザイン言語は、企業がそれを使い始め、価値を見いだしてくれるまでは成功とはいえない。

デザイン言語の例：

UI デザインシステムフォーム