Blog

設計システムには多くの利点があります。しかし、コンテンツがどのように表示されるかについて非現実的な仮定をする可能性があります。あなたのデザインシステムはどれくらいコンテンツに優しいですか？

設計システムは現在、企業の設計業務で広く使用されています。彼らの重点の多くは、再利用可能なUIコンポーネントを提供することにより、画面開発の生産性を向上させることにありますが、設計システムは生産性ツール以上のものです。

より成熟した設計システムは、ユーザーエクスペリエンスの構築方法をガイドします。そのガイダンスを提供するには、設計システムはコンテンツ要件に対応する必要があります。

デザインシステムにおけるコンテンツの役割

「拡張し、永続化し、進化するのに十分なリソースを獲得するためには、 設計システムにコンテンツを含める必要があります」と、コンテンツストラテジストのKateKenyon氏は述べています。

デザインシステムは、コンテンツの表示方法に関するルールを提供しますが、デザインシステムでは、コンテンツに限定的な重点が置かれることがよくあります。

一部の組織では、設計システムにコンテンツガイダンスが含まれています。それらは、単語リスト、声と声調のガイダンス、および従うべきサンプルのマイクロコピーパターンを提供するスタイルガイドラインを組み込む場合があります。デザインシステムの一部である間、コンテンツセクションは他のライターが使用できるようにライターによって作成されます。これは、すべてのインターフェイスコピーに適用され、個々のUIコンポーネントに固有ではない一般的な記述アドバイスを提供します。スタイルガイドラインは、UIコンポーネントに関する仕様とは組織的に分離されています。

これとは対照的に、このディスカッションでは、UIコンポーネントと、それらがコンテンツ作成者にガイダンスを提供する方法について詳しく説明します。特に、デザイナーがUIコンポーネントについて作成者に伝える必要があることを探ります。

デザインシステムはコンテンツ構造を可視化します。 「アトミックデザイン」の概念を開発したBradFrostは、「巧妙に作成されたデザインシステムは、その中に存在するコンテンツに対応します」と主張します。彼は「コンテンツスケルトンの視覚化」について語っています。彼の発言で重要なのは、構造の役割に重点を置いていることです。デザインコンポーネントには構造があり、コンテンツにも構造があります。

一貫性を提供するには構造が必要です。オートデスクのPeterZogas氏は、次のように述べています。「コンテンツとマイクロコピーは、設計システムコンポーネント全体に表示されます。 早期に標準化する努力がなければ、コンポーネントを実装するたびにコピーをどのように表示するかを決定することになります。」

コンテンツのデザインシステムの利点

デザインシステムはコンテンツの再利用性を促進することができます。この利点はしばしば過小評価されています。

人々がコンテンツを表示するさまざまな方法を見ることができるとき、彼らはさまざまなシナリオでそのコンテンツを利用する傾向があります。同じ見出しや画像が表示される場所が表示されます。

コピーを再利用すると、より詳細に制御できます。ヘッドレスCMSのコンテンツモデルのコンテンツ要素をさまざまなデザインコンポーネントで再利用できます。たとえば、見出しがプロモーションやリストに表示される場合があります。チームは、テキストの再作成（または手動でのコピー）を停止できます。そうすることで一貫性が得られます。再利用すると、UIコピーの多くのディメンションの管理が容易になります。

• つづり
• キャピタライゼーション
• 句読点
• 命名規則
• ブランド適合性

コンテンツに関連して設計システムが指定する必要があるもの

多くの設計システムは不完全です。彼らは主にデザイン言語といくつかの単純なパターンの作成に焦点を当てています。 IntercomのEmmetConnollyは、次のように述べています。「ほとんどのパターンライブラリは、すべてのUI要素のさまざまなスタイルを一覧表示するWebページの形式を取ります。」彼は次のように付け加えています。「パターンライブラリにはいくつかの問題があります。はい、すべての最小要素の一貫性を保つことができます。しかし、彼らは彼らがどのようにまとめられるべきかについて意見を持っていません。」

多くの設計システムに欠けているのは、複数のコンテンツ要素を提示し、調整する、より大きく、より複雑なコンポーネントへの注意です。

多くの場合、設計システムは、コンテンツを多用するコンポーネントに関する詳細を明確に表現するのが苦手です。多くの人は完全にスタイリングに焦点を合わせており、どのコンテンツを表示するかについては不可知論者です。

ハンバーガーメニューアイコンなど、いくつかのデザイン要素は完全に象徴的です。しかし、ほとんどの設計コンポーネントは、コンテンツなしでは意味を伝えません。

コンテンツを提示するためのデザインシステムコンポーネントが存在します。使い慣れたデザインコンポーネントからコンテンツを取り除くと、それがどのように機能するのかわかりません。数多くの指示やリンクの存在を推測することができますが、それらが意味するのは謎です。

グラフィックと比較したテキスト専用のピクセルの比率を見てください。テキストが多い場合は、コンテンツが重要であるという強いシグナルです。

デザインシステムコンポーネントには、特定のシナリオでコンテンツを表示するための一貫した構造を提供する「構造」があります。これらのコンポーネントは、ユーザーが表示および操作するコンテンツ要素に優先順位を付けます。

UIコンポーネントは次のように答える必要があります。

• コンポーネントはその目的を明確に伝えていますか？
• コンポーネントの微細構造は何ですか？
• どのような要素が必要ですか？
• さまざまなユーザーシナリオにバリアントが必要ですか？

コンポーネントはコンテンツコンテナ以上のものです：カードの例

カードは、最も一般的なデザインコンポーネントの1つです。柔軟性が高く、さまざまな種類のコンテンツを表示できますが、どこにでもあるため、ユーザーが解読しにくくなる可能性があります。また、コンテンツが整然と見えるだけでなく、均質に見えるようになります。コンテンツの役割に関する重要な違いを隠すことがあります。

カードは小さなスペースに多くの意味を詰め込む必要があります。 EightShapesのNathanCurtisは、次のように述べています。「 カードは、単なる一般的なコンテナではなく、オブジェクトのバイタルのスキャン可能なスナップショットです。識別するのに十分なプレビューです。それは私たちに、この順序で、より多くを学び、相互作用することを勧めます。」彼は、「必要な要素が不足している場合、カードはどうなりますか？」と尋ねます。

New York Timesの人気の料理アプリは、コンテンツタイプとデザインコンポーネントを調整することの重要性を示しています。私の家族はこのアプリを広く使っています。多くのアプリと同様に、さまざまな種類のコンテンツを表示するためにカードに依存しています。

ジェイン・リー、NYT調理チームのプロダクトデザイナーは、書いている：「 私たちのカードは、コンテンツに簡略な外観を提供し、それはレシピ、コレクションまたはガイドであるかどうか、。これらの3つのコンテンツタイプは根本的に異なるため、視覚的に区別できるようにしました。」

レシピ、コレクション、ガイドは目的の異なる別個のオブジェクトです。ただし、カードで表示する場合は、外観が微妙に異なるだけです。おそらく、初心者やカジュアルなユーザーには微妙すぎて気付かないでしょう。カードのレイアウトが同じであるため、わずかな違いが圧倒されています。おそらく、コンテンツタイプを区別するために視覚的なスタイルだけに依存するのではなく、追加のコンテンツ要素を使用することで、違いがより明確になり、わかりやすくなります。

このアプリは、コンテンツがすでに作成された後にデザインシステムを作成する際の課題にも焦点を当てています。デザインコンポーネントは、コンテンツに適応しようとする必要がありますが、これは理想的なほど予測できない場合があります。

Lee氏は次のように述べています。 「コンテンツの表示方法については厳格なルールがあります。カードのコンテンツの階層は、画像、タイトル、署名記事、アクションです。私たちのレシピには、複数行のテキストに分割される長いタイトルを含めることができ、長いまたは二重の署名記事を含めることができます。カードコンテナを少し拡大して、できるだけ多くのコンテンツをカードに表示しようとしました。」彼女のコメントは、ガバナンスが欠如している既存のコンテンツに設計システムを後付けするときに表面化する可能性のある問題を強調しています。画像がテキストよりも重要である場合は、一部のテキストが途切れる可能性があります。

「コンテンツブロック」について具体的に説明する

多くのデザインシステムに共通する弱点は、コンテンツがどのように表示されるかについての詳細に立ち入ることなく、一般的な「コンテンツブロック」について話すことです。

すべてのテキストは同じではありません。さまざまな方法で表示できます。デザインシステムでは、テキストの表示方法を指定する必要があります。さらに、テキストを機能させるために作成者が何を書く必要があるかを指定する必要があります。

テキストには長さや書式設定などのプロパティがあります。テキストはフォーカスのあるメッセージを表します。これらの要素はテキストメッセージの読みやすさに影響します。デザインシステムは、適切な強調を促進し、メッセージの明瞭さを高めるために、利用可能なスペースを最適に利用する必要があります。

基本的なレベルでは、メッセージには短いテキストまたは長いテキストのいずれかを含めることができますが、これらの区別でさえさらに詳しく説明することができます。

コピーのプロパティは、その表示に影響します。著者は、コピーが提示される方法と一致するように、使用するいくつかの標準を持っている必要があります。

退役軍人省のデザインシステムからの情報コールアウトでテキストがどのように表示されるかを確認できます。この例では、箇条書き、見出し、太字を使用してコピーがどのようにフォーマットされているかを示す実際のテキストを取り上げています。

コンテンツがデザインコンポーネントのユーザビリティにどのように影響するか

設計システムは、さまざまな詳細レベルに対応します。すべてのレベルで、提示されるコンテンツは、ユーザーにとってのエクスペリエンスの効果に影響を与えます。

設計要素（または「原子」）

設計システムの最も基本的な構造は、ブラッド・フロストがアトムと呼んでいる個々の要素です。これらは、他のコンポーネントへの入力であるため、「ベース」コンポーネントまたは「プリミティブ」と呼ばれることもあります。

アトムのコンテンツは、何かが何であるか、または何をすべきかを識別します。要素のいくつかの例には、次のものが含まれます。

• フォームのラベル
• キャプション
• 見出し
• ボタン
• 画像
• 説明ラベルなしでタグまたはステータスの値を示し、場合によってはリンクであるピルまたはチップ

設計システムは、コンテンツの表示が一貫する時期とバリエーションが可能な時期を指定する必要があります。たとえば、画像はさまざまな方法でフォーマットできます。デザインシステムでは、作成者向けのガイドラインと、プレゼンテーションがコンテンツに与える影響に関する制限を指定する必要があります。たとえば、リンクとして表示されるのではなく、ボタン内にテキストを表示するタイミングに関するルールを提供できます。

単純なコンポーネント（または「分子」）

単純なコンポーネント（Brad Frostの分類では「分子」）は、複数のコンテンツ要素を表します。すでに、要素間の調整が重要になっています。

単純なコンポーネントは、特にアクションに関連する重要なメッセージを伝えることができます。重要なコンテンツを提示するいくつかの単純なコンポーネントには、次のものがあります。

• メリットモーダル
• メニュー
• ダイアログ
• カード
• 通知、アラート、およびバナー

シンプルなコンポーネントで提示されるコンテンツは、タスクのドロップアウトまたは取り込みに影響を与えます。このコンテンツは注目と行動を引き付けることを目的としているため、その目的をユーザーに明確に伝えることが重要です。これらのコンポーネントの一部はユーザーに割り込むでしょう。表示されるメッセージとコンポーネントの動作を調整する必要があります。

設計システムは、類似しているように見えるさまざまなコンポーネントの期待される役割を明確にする必要があります。ユーザージャーニーシナリオのコンテキストでコンポーネントをどのように表示する必要があるかを検討します。注意が必要なエラーや問題に関するメッセージは、必ずしも同じ特性を持つとは限りません。支払いエラーとログインエラー、またはオンボーディングまたは更新プロセスの一部として発生します。これらの要因は、メッセージの表示方法に影響を与える可能性があります。

設計システムは、適切な設計コンポーネントが重要なメッセージを提示することを著者に確信させて、コンテンツを最適化してその提示パラメーター内で機能させることができるようにする必要があります。

複雑なコンポーネント（または「生物」）

複雑なコンポーネントは、より複雑なメッセージをサポートするレイアウトです。これらは多くの場合、コンテンツを大量に消費しますが、設計システムで確実に定義されていません。

これらのコンポーネントには、多くの場合、テキスト、画像、機能コントロールなどの混合要素が含まれていました。これらの要素間の関係により、ユーザーのアクションまたは経路の選択に影響を与えるメッセージ階層が作成されます。

いくつかの複雑なコンポーネントは次のとおりです。

• ヒーローズ
• フッター
• ステッパー
• CTA
• サイドバー
• エラーメッセージ
• コーチマークまたは製品ツアー

退役軍人省の設計システムは、フィードバックメッセージに関連付けることができる複雑な構造を強調しています。メッセージには、サブ条件だけでなく、ユーザーに次のアクションに関するさまざまなオプションを提供する必要がある場合があります。作成者は、このデザインコンポーネント内で効果的に表示できるように、このコンテンツを構成する方法を知っている必要があります。

シェル、テンプレート、および相互作用パターン

シェルは、他のコンポーネントを表示するための高レベルのレイアウトまたは編成を提供します。それらは、複数のアイテムを提示するためのパターンを指定します。これらのアイテムは、関連する（同じコンテンツタイプの）または補完的な（コンテンツタイプの混合）ことができます。デザインシステムのこの部分は、提示される特定のコンテンツに割り当てられた可視性と重要性に影響を与えます。

デザインシェルの例は次のとおりです。

• ランディングページのレイアウト
• フォームのレイアウト
• ヘルプレイアウト
• グリッドレイアウト
• セクションとサブセクションを含む複雑なレイアウト
• チャットボットコンテンツのプレゼンテーション用のテンプレート

一部のレイアウトは静的ページに関連していますが、多くのレイアウトは、さまざまなコンテンツ要素を表示または強調しないインタラクティブなデザイン要素を備えています。

レイアウトは、その役割または目的を反映し、チャネルのコンテキストと関連するジャーニーを構成します。レイアウトは、コンテナーコンテンツタイプによって構造化されたコンテンツを表示する方法を示すことができます。

シェルを使用すると、個々のアイテムを予測可能な方法で交換できます。

画面レイアウトの場合、チームはアイトラッキングを使用して、ユーザーが気づき、見つけたものをテストできます。レイアウトは特定のコンテンツに依存しないため、さまざまなコンテンツでテストして、その有効性を評価できます。

ARや音声ボットなどの新しいチャネルの場合、設計システムはインタラクションの動作を説明して、作成者が各プラットフォームのユーザーにコンテンツを表示する方法と、効果的なナビゲーションとアクションをサポートするためにコンテンツが提供する必要のある手がかりを理解できるようにする必要があります。

著者に自信を与えるデザインシステムを作成する

設計システムの構築は長期的な取り組みです。多くの組織は設計システムのコアを備えていますが、それでもそれを拡張および強化する多くの機会があります。より複雑なユーザーシナリオとブラウザ以外のチャネルの拡大に関連する標準を開発することにより、現在のシステムを拡張します。

注意：ヘッドレスコンテンツは多くのエンドポイントに配信できます。著者は、コンテンツがどのように表示されるかについて予測可能性を望んでいます。そのような予測可能性を持つことで、より効果的なコンテンツを開発できるようになります。

作成者やその他のコンテンツ作成者は、フロントエンド開発者と同じようにデザインシステムのユーザーです。著者は、設計システムのドキュメントに独自の資料を追加するだけでなく、設計者が作成したドキュメントを使用できる必要があります。

効果的なデザインシステムは、作成者とコンテンツ作成者に、自分たちが開発したものがユーザーにとって正しいものであるという自信を与えます。切り捨てられたコンテンツや非表示のコンテンツなど、不快な驚きについては耳にしません。

設計システムをレビューするためのチェックリストを作成します。設計システムの中心的な約束は、UIコンポーネントの再利用性です。システムに適切なUIコンポーネントが使用可能であり、それらが正しく使用されることを確認してください。次の点に注意してください。

• UIコンポーネントの目的を示して、作成者にどのような種類のコンテンツが表示されるかを知らせます。
• コンポーネントのレイアウトとスタイルが、提示するコンテンツの目的を明確に伝えていることを確認してください。これにより、ユーザーは、さまざまな目的に関連するコンテンツを提示するコンポーネントを視覚的に混乱させないようになります。
• 実際のコンテンツを表示するコンポーネントの例を提供します。
• コンテンツに関連するガイダンスを含め、コンポーネントの使用方法と使用方法に関するルールを提供します。
• 既知の制約やユーザーテストのフィードバックなど、ルールの根拠を提供します。

これらの機能強化は、コンテンツの同僚を満足させるだけでなく、デザインシステムがユーザーのニーズをサポートする方法を改善します。