1章 デザインシステム 内容紹介（2）
1章「デザインシステム」の一部紹介、つづけます。デザインシステムに欠かさない命名や言葉遣いなど、共有言語についての話。
このマガジンは、12月21日に全国書店、25日ごろにAamazonで発売になる「Design Systems − デジタルプロダクトのためのデザインシステム実践ガイド（仮）」を編集している私が、個人アカウントでこの本の作りかけの断片を紹介するものです。予約ヨロシクでございます。
1章「デザインシステム」
「デザインシステム」という言葉は、標準の定義があるわけではなく、さまざまな用途で使用されています。この章では、デザインシステムとは何か、そして何がデザインシステムを構成しているのかを明確にします。
1.デザインパターン
2.共有言語 ※この記事で一部を紹介しています
3.パターンライブラリとその限界
4.効果的なデザインシステムを構築するには
5.例：10分レシピサイト
− − − − −
2.共有言語
言語はコラボレーションの基本です。チームで作業している場合、プロダクトの開発に携わるメンバー間でデザイン言語を共有する必要があります。言語を共有していなければ、効率的にプロダクトを開発できません。各メンバーが別々のメンタルモデルを持って取り組むことになります。
ボタンの例に戻りましょう。こうしたインターフェースの基本単位でさえ、複数の意味を持つことが可能です。ボタンとは正確には何でしょうか？ クリックできる囲まれた領域？ どこかにリンクされているページ上のインタラクティブな要素？ それとも、ユーザーがデータを送信できるフォーム要素でしょうか？
アビー・コバート（Abby Covert）は著書『今日からはじめる情報設計 ─センスメイキングするための7 ステップ』（原題：How to Make Sense of Any Mess）で、言語に関する取り決めについて話し合い、審査し、明文化することで共有言語を確立してから、インターフェースについて考えるべきだと述べています。
この考え方は、大まかなコンセプトの説明にも、デザイン上の判断について話し合うために普段用いる言葉遣いにも当てはまります。共有できる言語があれば、インターフェース要素の命名やデザインパターンの定義に同じアプローチで取り組んだり、デザインファイルとフロントエンド実装で同一の命名規則を使用できます。
これでもまだ十分とは言えません。チームで同じ言葉を共有して、その言葉を表現豊かに操っていて、メンバー同士が深く理解し合っているように見えたとしても、解釈が根本的に違っていることもあります。たとえば、プロジェクトのメインコンセプトとして「シナリオ」という言葉を1 年間使用した後、その解釈がメンバー間で統一されていなかったことが明らかになる場合もあります。
共有できる言語を開発するだけでは不十分です。言語の使用方法も統一しなくてはなりません。ボタンという言葉に対して理解を共有するだけでなく、ボタンを使用する理由、ボタンを使用するコンテキスト（文脈）、ボタンの果たす目的なども把握する必要があります。
インターフェースに「シーケンス」という名前の要素があるとしましょう。これを「シーケンス」と言い表すのは、特定の順序で手順を見る必要があることをユーザーに伝えたいからです（図は、「シーケンス」モジュールの例）。
理想を言えば、プロダクトの開発に関わるすべての人が、この要素の名前と目的、このようにデザインされた理由、いつどのように使用されるのかを知っているべきです。この共通認識が強固であるほど、要素が適切に使用される可能性が高くなります。デザイナーとフロントエンドの開発者にはこの共通認識が欠かせませんが、コンテンツ企画、マーケティング、プロダクトマネージメントなどその他の担当者もある程度知っておくことが望ましいです。
「ウィザードコントロール」でも「ファンシーバブル」でもなく、「シーケンス」であることを、全員が知っておく必要があります。デザイナーがその要素を「ファンシーバブル」と呼んでいるにも関わらず、開発者は「ウィザードコントロール」と呼び、ユーザーは一連のオプションタブと解釈していたら、その言葉遣いは機能しません。
【訳注】
同じようなたとえ話として、「ハンバーガーメニュー」なのか「オプションメニュー」なのか「ドローワーナビゲーション」なのかなどもあります。同じ要素でもWeb業界、アプリ業界（しかもiOSとAndroidでも違う）で同じ機能に対しても違った言い方をする場合もありますので、言語として統一することはとても重要です。
ところでなぜユーザーの解釈も重要なのでしょうか？ ドン・ノーマン（DonNorman）の先駆的な著書『誰のためのデザイン？─認知科学者のデザイン原論』（原題：The Design of Everyday Things）を思い出してください。この本では、システムイメージ（システムのインターフェース）とユーザーモデル（インタラクションを通じてユーザーが認識するインターフェース）の間にあるギャップについて語られています。
ユーザーの持つインタラクションのメンタルモデルが、デザインチームが提供するシステムイメージと一致しない場合、ユーザーはシステムの予期せぬ動作に苦しみ続けることになります。効果的なデザイン言語は、システムイメージと想定されるユーザーモデルの間のギャップを埋めてくれるものです。
言語がリッチで複雑になるほど、効率的な方法で言語を理解し、共有することが求められます。現在のWebの世界では、デザインシステムを補助する主な成功事例として、「パターンライブラリ」があります。
− − − − −
noteの機能では表現しにくい画像のキャプションや、発言の引用や脚注などは省略しています。あくまで、書籍の概要としてイメージしてもらえれば幸いです。全貌はぜひ書籍でお確かめください。
短めだったので、今日はもう一つマガジンを更新しますね。では、次回をお楽しみに。
この記事が気に入ったらサポートをしてみませんか？