この Codelab について
1. 始める前に
マテリアル デザインのコミュニケーション ガイダンスをご覧ください。
明確で簡潔な文章は、ユーザー エクスペリエンスの質を高めるうえで重要な役割を果たします。マテリアル デザインの UX ライティングのガイドラインを理解し、ユーザーが目的を達成するのに役立つ UI テキストの原則を適用しましょう。
マテリアルのコミュニケーション セクションでは、UX ライティング以外にもさまざまなトピックを取り上げています。データ可視化、オンボーディング、空の状態のパターンなど、さまざまなトピックをご覧ください。
ライターの視点で考える
UX ライターやコンテンツ ストラテジストと連携するかどうかに関係なく、この Codelab では、誰でもインターフェースに適した言語を選択する方法を紹介します。ラベルや通知などのユーザー向けテキストの明確さや簡潔さなど、プロダクト エクスペリエンスを改善するためにライターが重視する可能性のある質問をいくつか行う方法を学びます。
学習内容
- UX ライティングの概要と重要性
- さまざまなコンテキストに適したトーンとボイスを判断する方法
- コンポーネント固有の記述に関する考慮事項
- 理解を深めるためのリソース
必要なもの
- ドキュメントを開くか、紙を用意して、Codelab の演習を行います。
前提条件
このラボは、マテリアル デザインのライティング、文法、デザインに関する基本的なコンセプトに基づいています。UI のインタラクティブな要素に関する一般的な知識があると役立ちます。
英語に特化していますが、幅広く活用できます
このラボでは、ユーザー エクスペリエンスを向上させるためのコミュニケーションの原則について説明します。ただし、例や単語の選択はアメリカ英語の慣例に基づいています。
コンテキストと文化の変化に配慮して、このガイダンスはあらゆる言語の UI に適用できます。英語以外の言語に関する考慮事項については、ステップ 9 に記載されているリソースをご覧ください。
2. UX ライティングとは
概要
UX ライティング（UXW）は、コンテンツ戦略またはコンテンツ デザインとも呼ばれます。これは、ユーザー インターフェースのテキストの背後にある規律であり、明確なナラティブ、単語の選択、情報の階層などを通じてユーザー エクスペリエンスを向上させる手段として言語を捉える独自の分野です。
UX ライターのように考えることで、タスクの完了率、ユーザー満足度、全体的な使いやすさを向上させることができます。
UX ライティングの特長
UX ライティングは、実際のユーザーに向けて書くことです。
ユーザー エクスペリエンスのためのライティングは、UI テキストの主な目的はユーザー ジャーニーをサポートすることであるという前提から始める必要があります。
テキストの言葉の選択、長さ、スタイル、構成は、ユーザーが機能やタスクの目的とメリットを理解する度合いに影響します。
スタイル
文体の選択は、読者のニーズと目標に沿って行う必要があります。UXW は、フォーマルな文体の学術的なルール（新聞やノンフィクションの本で読まれるような文体）と、オンラインでのコミュニケーション（メール、テキスト、チャット）で使われるフォーマルでない文体を組み合わせています。
アプリやインターフェース向けの文章は、次の 2 つの主な理由から、よりくだけたトーンで書かれています。
- オンライン コミュニケーションは、印刷物や学術論文よりも形式ばらない
- UI テキストは画面のスペースによって制限され、文字数も制限されます
ユーザー中心のライティング（「機能させる」）
UX ライティングでは、文法への準拠よりも目標指向のスタイルが優先されます。文法が明確さと一貫性にとって重要でないという意味ではありませんが、まずユーザーのニーズを考慮し、それに沿って文法を決定すると効果的です。
単語の選択やスタイルに関しては、スタイルを決定する際の基本原則は「機能させる」ことかもしれません。インターフェースに最適な選択肢は、正式な文章のルールと同じとは限りません。
ユーザーの読み方を意識して書く
UXW は、読者が段落全体を読むのではなく、F 字型のパターンでページをスキャンする方法を反映する必要があります。読者の行動を予測することで、テキストが実際にどのように読まれるかを考慮して書くことができます。
ウェブ コンテンツの場合、これは多くの場合、短い段落、スキャン可能な説明的な見出し、戦略的な書式設定に変換されます。
オンラインの読書パターンの研究におけるアイトラッキングの例。nngroup.com の画像と調査（2006 年、2017 年）。
テスト
同じテキストでさまざまな文化や年齢層のニーズを満たすのは難しい場合があります。メッセージを伝える適切な言葉を見つけるのは簡単そうに聞こえますが、言語と理解は非常に主観的なものです。
文章が意図したとおりに伝わるようにするには、テストを実施して、現実世界での明瞭さ、意味、有効性を評価することが重要です。
Approaches
簡単で低価格
- 書いた内容を声に出して読みます。実際に人に話しかけるような言い方になっているか確認します。表示されない場合は、書き直してみてください。
- 他の人に読んでもらい、自分の言葉の意味を説明してもらう
- UI のコンテキストでライティングの例を示して、複数のユーザーにアンケートを実施する
- Google トレンドまたは Google ブックス N グラム ビューアを使用して、特定の単語やフレーズが他の単語やフレーズよりも一般的かどうかを確認する
広範なコンテンツ テストでは、次のようなヒューリスティックが使用されます。
- 理解度と読みやすさ
- タスクの完了とタスクにかけた時間
- トーンと認識の評価
3. 原則
概要
Material のライティング ガイドラインの原則は、正確で簡潔な言葉遣いを通じて信頼を築き、わかりやすさを向上させるように設計されています。Material の原則に独自のニーズに合わせて追加または削除できます。
ガイドラインを使用すると、複数のユーザーがグループとしてより一貫性のある意思決定を行うことができます。
簡潔に、ただしロボットのような表現は避ける
限られた数のアイデアに焦点を当てた、短くスキャン可能なテキスト セグメントを作成します。
シンプルかつ直接的であること
わかりやすい簡潔な言葉を使用します。何かを書くときは、そのアイデアをより簡単に表現する方法がないか自問してください。
人称を適切に使い分けること
英語では、二人称（you または your）の方が直接的で明確な場合が多くあります。所有権を強調する必要がある場合は、一人称（I、me、my）を使用できます。
「お客様」や「お客様の」は、ユーザーに直接語りかける表現です。
「私」や「私の」は、ユーザーの立場や声とアプリの声を組み合わせているため、混乱を招く可能性があります。「私」や「私の」は、コンテンツやアクションの所有権を明確にするために使用できます。
一人称と二人称を組み合わせない
混乱を避けるため、「私」と「あなた」を同じフレーズで使用しないでください。
重要なポイントが伝わるようにすること
ユーザーが多くのオプションを解釈するのではなく、目の前のタスクに集中できるように、特定のコンテキストに必要な詳細のみを伝えます。ダイアログや通知では、オペレーションと重要な結果を説明するために必要な情報を検討します。
4. ボイスとトーン
概要
エクスペリエンスで作りたいトーンとボイスを考慮せずに、一貫性と明確さを実現することは困難です。
5 つの文をまとめて読むことを想像してください。ただし、各文は他の 4 つの文を見ていない別の人が書いたものです。UI の操作がちぐはぐに感じられることがあります。これは、個々の担当者が独自のボイスとトーンで記述しているためです。
複数の人がプロダクトにテキストを寄稿する場合、トーンとボイスのガイドラインがあると、共通の意味と目的を持って言葉を選ぶことができます。
明確で包括的な表現と直接的なトーンを使用した過去の Android キャンペーンの例。
ボイスとトーンとは
ボイスはエクスペリエンス全体で一貫している必要がありますが、トーンはコンテキストに依存し、変化する可能性があります。
音声
ボイスとは、エクスペリエンス全体を通して伝わる気分、態度、見通しを指します。ブランドの「個性」の 1 つであり、プロダクトの「音」に慣れることができます。
ボイスの原則は、言葉の選択を導くものであり、ボイスの実際の使用例を示す例を伴う場合に最も効果を発揮します。原則は、例がないと抽象的すぎて、グループのスタイルの決定を導くことができないことがよくあります。
音声原則の一般的な例をいくつかご紹介します。
- 役に立つ: 機械ではなく、人間が書いたような文章にします。エラーを説明し、解決策を提案します。
- アクセシブル: 新規ユーザーがテキストを簡単に理解できるようにします。専門用語や高度な用語は説明するか、別の用語に置き換えます。
- インスピレーション: エクスペリエンス全体を通してメリットと成果を強調します。目標と結果は、肯定的で能動的な表現で記述します。
トーン
文章のトーンは、意図しているかどうかにかかわらず、気分や感情を伝えます。
たとえば、ボイスが「親切」で「人間味がある」と定義されている場合、その目標を強化するトーンは、要求的で簡潔なものではなく、支援的でカジュアルなものになります。
最終的に、個人が「サポート的でカジュアル」と考える内容は異なるため、単語リストとコンテンツ マトリックスは、語調とトーンを実用的なものにするのに役立ちます。これについては、セクション 6 ～ 8 で詳しく説明します。
利点
適切なトーンは、ユーザーの信頼と安心感を高めます。たとえば、エラー メッセージがサポートではなくジョークの形式になっている場合、軽快なトーンでは、ユーザーの不満が合理的で解決可能であることを示すことができない可能性があります。
トーンマップを作成する
トーンマップは、音声とトーンを調整するための戦略を計画し、文書化するのに役立ちます。
まず、ユーザー ジャーニーの重要なポイントを検討します。ゲーム、金融ツール、ショッピング アプリなど、どのようなアプリを作成する場合でも、オンボーディング、確認、エラーなど、ユーザー ジャーニーのポイントに応じてトーンを使い分ける必要があります。
たとえば、ルーティンの確認に関する楽しい通知は、最初は良いアイデアのように思えますが、5 回も受け取ると、すぐに不快感に変わる可能性があります。
エラー状態も、トーン マッピングがカジュアルで会話的なトーンからサポート的で詳細なトーンへの変化を知らせるのに役立つ例です。
1. まず、望ましいトーンの範囲を表す 2 つのディメンションまたはスペクトルを選択します。
UX ライティングのトーンの重要な軸の例をいくつかご紹介します。
- 遊び心 vs 真面目
- 簡潔か詳細か
- 感情的か中立的か
- カジュアルと厳格
2. 2 本の交差する線でグリッドを描き、戦略を立てるトーンの 1 つのディメンションで各軸を特定します。
下の例では、楽しい vs. 真面目と簡潔 vs. 詳細がマップのディメンションです。
3. 次に、よく使用するメッセージ タイプまたはパターンをリストします。マッピングするメッセージ タイプには、次のようなものがあります。
- オンボーディング
- 確認と承認
- ヘルプとフィードバック
- エラー
- 通知
- ラベル
- 空の状態
4. 各メッセージ タイプを両方の軸に沿ってマップ上に配置します。
次の点に注意してください。
- 特定のメッセージに利用できる画面スペースはどのくらいですか？
- メッセージ タイプにとって理解はどの程度重要ですか？破壊的なアクションが伴うか？
- メッセージ タイプのインテントに関連して、ユーザーにどのようなことを知ってほしいですか？どのようなことを感じてほしいですか？たとえば、オンボーディングには、軽快でありながら実用的な意図が伴うことがよくあります。
5. 完成例
以下は、一般的なアプリ エクスペリエンスに基づいて分類されたメッセージ タイプの例です。
アプリで支払いまたは法律関連の事項を扱う場合は、理解が重要な場合に、より真剣で詳細なトーンに調整することがあります。一方、プライバシーや金銭が関係しておらず、詳細についてヘルプセンターも利用できる場合は、より簡潔にすることもできます。
5. コンテンツ構造
概要
ステートメントの構造を整えることで、理解しやすくなり、ユーザーが目の前のタスクに集中できるようになります。画像とテキストを組み合わせる場合、情報構造のもう 1 つの目標はアクセシビリティの向上です。
目標から始める
文はユーザーの目標から始めます。UX ライティングはタスク指向であるため、フレーズの一般的なパターンは、タスクの動機付けとなるフレームワークを確立する目標を強調し、タスクを完了するために必要なアクションを文で説明することです。
必要に応じて詳細を表示する
状況に応じて必要な情報を表示します。このアプローチは、プログレッシブ ディスクロージャーと呼ばれることがよくあります。ユーザーが機能を詳しく確認し、詳細情報を必要としたときに、機能の詳細を表示します。
情報を戦略的に開示するには、ユーザー ジャーニーのあらゆるポイントで情報のニーズを慎重に検討する必要があります。目標は、特に元に戻せないアクションの結果を隠したり省略したりすることではありません。ただし、目の前のタスクに焦点を絞ることで、ユーザーを助けることができることを念頭に置いてください。
アクセシブルなコンテンツ設計
効果的なライティングは、ロービジョンのユーザーやスクリーン リーダーを使用するユーザー向けの画像とテキストの組み合わせの検討にも及びます。マテリアルのアクセシビリティに関する記述のセクションには、ページのコンテンツ デザインがすべてのユーザーにとって使いやすいものになるように、画像とキャプションを組み合わせるためのガイダンスが含まれています。
表示されるテキストと表示されないテキスト
ユーザー補助テキストには次のものが含まれます。
- 表示テキスト: UI 要素のラベル、ボタン、リンク、フォームのテキスト
- 非表示のテキスト: 画面に表示されない説明（画像の代替テキストなど）
表示されるテキストと表示されないテキストの両方が説明的で意味のあるものであると、ユーザーは画面上の見出しやリンクを使って移動しやすくなります。スクリーン リーダーを使用すると、ユーザー補助テキストをテストして、追加できる場所を特定できます。
代替テキスト（alt テキスト）
代替テキストは、視覚的な UI をテキストベースの UI に変換するのに役立ちます。代替テキストとは、画像を表示できないユーザーのために画像を説明する短いラベル（最大 125 文字）のことです。
次の例では、スクリーン リーダーが画像の最も重要な説明を提供することで、周囲のテキストのコンテキストを提供しています。
代替テキストは画像専用であるため、代替テキストに「～の画像」や「～の写真」を追加する必要はありません。スクリーン リーダーは、画像の代わりに代替テキストを読み上げます。
6. 言葉の選択
概要
画面スペースが限られている場合は、メッセージとトーンを伝えるために適切な言葉を選ぶことが重要です。同じ単語を一貫して使用することで、ユーザーはエクスペリエンスに慣れやすくなります。
あらゆる読解レベルのユーザーが理解できること
すべての読解レベルで明確かつ簡単に理解できる一般的な単語を使用します。
専門用語を使わない
より簡単なフレーズで同じアイデアを同様に伝えられる場合は、業界固有の用語や UI 機能のために考案された名前を使用しないでください。
一貫した言葉を使用する
UI 機能全体で一貫した言葉を使用します。
現在形で記述する
商品の動作を説明するときは現在形を使用します。製品の動作を説明する際に、未来時制を使用することは避けてください。
過去形や未来形を使用する必要がある場合は、単純な動詞の形を使用します。
ラベルで UI 要素とコントロールを参照する
ラベルは、コントロールや要素の機能を識別します。ボタンやスイッチのテキストなど、コントロール自体の上または近くに表示されます。UI コントロールまたは要素を参照するには、ラベルテキストを使用して言及します。（要素やコントロールの種類は言及しない）。
重要なポイントが伝わるようにすること
ユーザーがタスクに集中するために必要な詳細情報のみを伝えます。
重要なポイント
- あらゆる読解レベルのユーザーが理解できること
- 目新しさではなく、一貫性のある言葉を使用する
- 現在形
- 数字を使用する
7. コンポーネントの作成
概要
マテリアルのコンポーネントには UI の意図があり、特定のコンポーネント向けに記述することで、その意図を強化できます。
これらのコンポーネントについては、Material.io にライティング ガイダンスがあります。
ダイアログ
ダイアログは次の目的で使用されます。
- アプリの正常な動作を妨げるエラー
- 特定のユーザー タスク、決定、確認が必要な重要な情報
コンポーネント | 優先度 | ユーザーの操作 |
スナックバー | 低い優先度 | スナックバーは自動的に消える |
バナー | 目立つ、優先度が中程度 | バナーは、ユーザーが閉じるか、バナーの原因となった状態が解決されるまで表示されます |
ダイアログ | 優先度が最も高い | ダイアログは、ユーザーがダイアログ アクションを実行するか、ダイアログを終了する（可能な場合）まで、アプリの使用をブロックします。 |
タイトル
ダイアログの目的は、タイトルとボタンのテキストで伝える必要があります。
タイトルには、簡潔で明確なステートメントまたは質問を含める必要があります。
スナックバー
スナックバーには、実行中のプロセスに直接関連するテキストラベルが含まれます。モバイル デバイスでは、ラベルに最大 2 行のテキストを含めることができます。
スナックバーには、アプリが実行したプロセスに対してユーザーがアクションを実行できるテキスト ボタンを 1 つ表示できます。
8. コンテンツ マトリックスにまとめる
概要
コンテンツ マトリックスは、文章で使う単語や選択肢を追跡し、再利用するための表です。コンテンツ マトリックスは、フレーズを一貫して作成し、追跡するための重要なリソースであり、今後のライターの参考資料となります。
スプレッドシートの別名です（「専門用語を使用しない」という言葉の選択に関するガイダンスに違反しています）。
コンテンツ マトリックスの設定
効果的な文章や単語の選択を追跡し、繰り返すことができるスプレッドシートまたは表を作成します。
コンテンツ マトリックスの目的は、メッセージが次のものにどのように関連しているかを特定して文書化することです。
- ユーザーの目標とコンテキスト
- 特定の目標を達成するために必要な情報を明確に記述する
- 情報ニーズを簡潔かつ専門用語を使わずに言い換えた、下書きと最終版の UI テキスト
コンテンツ マトリックスの UI テキストの決定には、次の内容も反映する必要があります。
- トーンと文体の原則
- コンポーネントのタイプ
最後に、コンテンツ行列に単語リストを含めることができます。
- 機能、アクション、目標を説明するために使用する単語や用語をリストアップする
- 同義語や役に立たないフレーズとして避けるべき単語をリストアップする
重要なポイント:
- 技術用語を置き換えるか定義する
- 動詞や名詞には最も一般的な単語を使用する
