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 年）の画像と調査。
テスト
さまざまな文化や年齢層のニーズを同じテキストで満たすのは難しい場合があります。メッセージを伝える適切な言葉を見つけるのは簡単そうに思えますが、言語と理解は非常に主観的なものです。
ライティングが意図した意味を伝えるようにするには、テストが、現実世界での明確さ、意味、有効性を評価する重要なステップ です。
アプローチ
簡単で安価
- 書いた内容を声に出して読んでみましょう。実際に人に話しかけるような感じでしたか？そうでない場合は、書き直してみてください。
- 他の人に読んでもらい、自分の言葉が意味すると思うことを説明してもらいましょう。
- UI のコンテキストでライティングの例を提示して、複数の人にアンケートを実施する
- Google トレンドまたはGoogle ブックス Ngram Viewerを使用して、特定の単語やフレーズが他の単語やフレーズよりも一般的かどうかを確認する
広範なコンテンツ テストでは、次のようなヒューリスティックを使用します。
- 理解度と読みやすさ
- タスクの完了とタスクの所要時間
- トーンと認識の評価
3. 基本原理
概要
マテリアルのライティング ガイドラインの原則は、正確で簡潔な言葉で信頼を築き、明確さを向上させるように設計されています。マテリアルの原則を必要に応じて追加または削除して、独自のニーズを満たすことができます。
ガイドラインを使用すると、複数の人がグループとしてより一貫した意思決定を行うことができます。
簡潔に、ただし機械的にしない
限られた数のアイデアに焦点を当てた、短くてスキャン可能なテキスト セグメントを作成します。
シンプルかつ直接的であること
テキストを理解しやすくする、シンプルで直接的な言葉を使用します。何かを書くときは、アイデアを表現する簡単な方法がないか自問してください。
人称を適切に使い分けること
英語では、2 人称（you または your）の方が直接的で明確な場合が多くあります。所有権を強調する必要がある場合は、1 人称（I、me、my）を使用できます。
「You」と「your」 は、ユーザーに話しかけるより直接的な方法です。
「I」または「my」 は、ユーザーの立場や声とアプリの声を組み合わせているため、混乱を招く可能性があります。「I」または「my」は、コンテンツやアクションの明確な所有権を強調するために使用できます。
1 人称と 2 人称を組み合わせない
混乱を避けるため、「me / my」と「you / your」は同じフレーズで使用しないでください。
重要なポイントが伝わるようにすること
特定のコンテキストに必要な詳細情報のみを伝えて、ユーザーが多くの選択肢を解釈するのではなく、目の前のタスクに集中できるようにします。ダイアログや通知では、操作と重要な結果を説明するために必要な情報を検討してください。
4. 語調とトーン
概要
エクスペリエンスで作成するトーンとボイスを考慮しないと、一貫性と明確さを実現するのは困難です。
5 つの文を一緒に読んでいるとします。各文は、他の 4 つの文を見たことのない別の人が書いたものです。個々のユーザーが独自のボイスとトーンで書いているため、UI の操作がバラバラに感じられることがあります。
複数の人がプロダクトにテキストを提供する場合、トーンとボイスのガイドラインは、単語が共通の意味と目的で選択されるようにするのに役立ちます。
直接的なトーンで明確で包括的なボイスを使用する過去の Android キャンペーンの例。
ボイスとトーンとは？
ボイスはエクスペリエンス全体で一貫している必要がありますが、トーンはコンテキストによって異なり、変化する可能性があります。
音声
ボイスとは、エクスペリエンス全体で伝わるムード、態度、見通しを指します 。ブランドの「個性」の 1 つであり、プロダクトの「音」に慣れることができます。
ボイスの原則は単語の選択を導き、ボイスの動作を示す例を添えることで効果を発揮します。例がないと、原則が抽象的すぎて、グループのスタイルの決定を導くことができないことがよくあります。
ボイスの原則の一般的な例をいくつか示します。
- 役立つ: 機械ではなく人間のように書く。エラーを説明し、解決策を提案します。
- アクセス可能: 新規ユーザーでも理解しやすいテキストにする。専門用語や高度な用語は説明または置き換えられていることを確認してください。
- インスピレーションを与える: エクスペリエンス全体でメリットと成果を強調する。目標と成果をポジティブな能動態で記述します。
トーン
ライティングのトーンは、意図しているかどうかにかかわらず、ムードと感情を伝えます 。
たとえば、ボイスが「役立つ」と「人間的」と定義されている場合、その目標を強化するトーンは、要求的で簡潔なトーンではなく、サポート的でカジュアルなトーンになります。
最終的に、個人が「サポート的でカジュアル」と考えるものは異なるため、単語リストとコンテンツ マトリックスはボイスとトーンを実用的にするのに役立ちます。これについては、セクション 6 ～ 8 で詳しく説明します。
このソリューションが重要である理由
適切なトーンは、ユーザーの信頼と自信を築くことができます。たとえば、エラー メッセージがサポートではなくジョークの形式になっている場合、軽快なトーンでは、ユーザーの不満が合理的で解決可能であることを示すことができない可能性があります。
トーンマップを作成する
トーンマップは、ボイスとトーンを調整するための戦略を計画して文書化するのに役立ちます。
まず、ユーザー ジャーニーの重要なポイントを検討します。ゲーム、金融ツール、ショッピング アプリを作成する場合でも、トーンは、オンボーディング、確認、エラーなど、ユーザー ジャーニーのポイントに応じて変化する必要があります 。
たとえば、ルーティン確認の楽しい通知は最初は良いアイデアのように思えますが、5 回目に受信すると、喜びがすぐに不快感に変わる可能性があります。
エラー状態は、トーンマッピングがカジュアルで会話的なトーンからサポート的で詳細なトーンへの移行を知らせるのに役立つもう 1 つの例です。
1. まず、望ましいトーンの範囲を表す 2 つのディメンションまたはスペクトルを選択します。
UX ライティングのトーンの重要な軸のアイデアをいくつか紹介します。
- 遊び心があるか、真面目か
- 簡潔か、詳細か
- 感情的か、中立か
- カジュアルか、厳格か
**2. 2 本の交差する線でグリッドを描き、戦略を立てるトーンの 1 つのディメンションで各軸を識別します。
次の例では、楽しいか真面目か と簡潔か詳細か がマップのディメンションです。
3. 次に、よく使用するメッセージ タイプまたはパターンをリストします。マッピングするメッセージ タイプには、次のようなものがあります。
- オンボーディング
- 確認と承認
- ヘルプとフィードバック
- エラー
- 通知
- ラベル
- 空の状態
4. 各メッセージ タイプを両方の軸に関してマップに配置します。
次の点に注意してください。
- 特定のメッセージに使用できる画面スペースはどのくらいですか？
- メッセージ タイプにとって理解度はどの程度重要ですか？破壊的なアクションが関係していますか？
- メッセージ タイプの意図に関連して、ユーザーにどのようなことを知ってもらいたいですか、または感じてもらいたいですか？たとえば、オンボーディングには、軽快でありながら実用的な意図が伴うことがよくあります。
5. 完成例
一般的なアプリ エクスペリエンスに基づいてグラフ化したメッセージ タイプの例を以下に示します。
アプリが支払いまたは法的事項を扱う場合、理解度が重要な場合は、トーンをより真面目で詳細なものに調整できます。一方、プライバシーや財務が関係しておらず、詳細情報についてはヘルプセンターも利用できる場合は、より簡潔にすることができます。
5. コンテンツ構造
概要
ステートメントの構造は、理解度を高め、ユーザーが目の前のタスクに集中できるようにします。画像とテキストを組み合わせる場合、情報構造のもう 1 つの目標はユーザー補助を強化することです。
目標から始める
文はユーザーの目標から始めます。UX ライティングはタスク指向であるため、フレーズの一般的なパターンは、タスクの動機付けとなるフレームワークを確立する目標を強調し、次にタスクを完了するために必要なアクションを詳しく説明することです。
必要に応じて詳細を表示する
情報はコンテキストに応じて、必要に応じて表示します。このアプローチは、プログレッシブ ディスクロージャー と呼ばれることがよくあります。ユーザーが機能を探索し、詳細情報を必要とする場合は、機能の詳細を表示します。
情報を戦略的に開示するには、ユーザー ジャーニーのすべてのポイントで情報のニーズを慎重に検討する必要があります。目標は、特に元に戻せないアクションの結果を隠したり省略したりすることではありませんが、目の前のタスクに焦点を絞ることでユーザーを支援することを念頭に置いてください。
アクセス可能なコンテンツ デザイン
効果的なライティングは、ロービジョンのユーザーやスクリーン リーダーを使用するユーザー向けの画像とテキストのペアリングの考慮事項にも及びます。マテリアルのユーザー補助ライティング セクションには、ページのコンテンツ デザインがすべてのユーザーに機能するように、画像とキャプションをペアリングするためのガイダンスが含まれています。
表示されるテキストと表示されないテキスト
ユーザー補助テキストには次のものがあります。
- 表示されるテキスト: UI 要素のラベル、ボタン、リンク、フォームのテキスト
- 表示されないテキスト: 画面に表示されない説明（画像の代替テキストなど）
表示されるテキストと表示されないテキストの両方が説明的で意味のある場合、ユーザーは画面の見出しやリンクを使用して移動できます。スクリーン リーダーを使用すると、ユーザー補助テキストをテストし、追加できる場所を特定できます。
代替テキスト（alt テキスト）
代替テキストは、ビジュアル UI をテキストベースの UI に変換するのに役立ちます。代替テキストは、画像を見ることができないユーザー向けに画像を説明するコード内の短いラベル（最大 125 文字）です。
次の例では、スクリーン リーダーが画像の最も重要な記述子を提供することで、周囲のテキストのコンテキストを提供します。
代替テキストは画像専用であるため、代替テキストに「image of」や「picture of」を追加する必要はありません。スクリーン リーダーは、画像の代わりに代替テキストを読み上げます。
6. 言葉の選択
概要
画面スペースが限られている場合は、メッセージとトーンを伝える適切な言葉を選ぶことが重要です。同じ単語を一貫して使用すると、ユーザーはエクスペリエンスに慣れることができます。
あらゆる読解レベルのユーザーが理解できること
あらゆる読解レベルのユーザーが明確かつ簡単に理解できる一般的な単語を使用します。
専門用語は使用しない
よりシンプルなフレーズで同様のアイデアを伝えることができる場合は、業界固有の用語や UI 機能用に考案された名前は使用しないでください。
一貫した単語を使用する
UI 機能全体で一貫して単語を使用します。
現在形で書く
現在形を使用して、プロダクトの動作を説明します。プロダクトが常に動作する方法を説明するために未来形を使用しないでください。
過去形または未来形で記述する必要がある場合は、シンプルな動詞の形を使用します。
ラベルで UI 要素とコントロールを参照する
ラベルは、コントロールまたは要素の動作を識別します。ボタンやスイッチのテキストなど、コントロール自体またはその近くに表示されます。UI コントロールまたは要素を参照するには、ラベルテキストを使用して言及します（要素またはコントロールのタイプは記述しないでください）。
重要なポイントが伝わるようにすること
ユーザーがタスクに集中するために必要な詳細情報のみを伝えます。
重要ポイント
- あらゆる読解レベルのユーザーが理解できること
- 目新しさではなく、一貫して単語を使用する
- 現在形
- 数字を使用する
7. コンポーネントのライティング
概要
マテリアルのコンポーネントには UI での意図があり、特定のコンポーネントのライティングはその意図を強化できます。
これらのコンポーネントには、Material.io にライティング ガイダンスがあります。
ダイアログ
ダイアログは次の目的で使用されます。
- アプリの正常な動作を妨げるエラー
- 特定のユーザー タスク、決定、確認が必要な重要な情報
コンポーネント | 候補 | ユーザーの操作 |
スナックバー | 低い優先度 | スナックバーは自動的に消えます |
バナー | 目立つ、中程度の優先度 | バナーは、ユーザーが閉じるまで、またはバナーの原因となった状態が解決されるまで表示されます |
ダイアログ | 優先度が最も高い | ユーザーがダイアログ操作を行うか、ダイアログを終了するまで、ダイアログはアプリの使用をブロックします（利用可能な場合） |
タイトル
ダイアログの目的は、タイトルとボタンのテキストで伝える必要があります。
タイトルには、簡潔で明確なステートメントまたは質問を含める必要があります。
スナックバー
スナックバーには、実行中のプロセスに直接関連するテキストラベルが含まれます。モバイル デバイスでは、ラベルに最大 2 行のテキストを含めることができます。
スナックバーには、アプリが実行したプロセスに対してユーザーが操作できる 1 つのテキスト ボタンを表示できます。
8. コンテンツ マトリックスにまとめる
概要
コンテンツ マトリックスは、ライティングで使用する単語と選択肢を追跡して再利用するための表 です。コンテンツ マトリックスは、フレーズを一貫して記述して追跡するための重要なリソースであり、今後のライターの参考になります。
スプレッドシートの正式名称です（「専門用語は使用しない」という単語の選択に関するガイダンスに違反しています）。
コンテンツ マトリックスを設定する
適切に機能し、繰り返すことができるライティングと単語の選択を追跡できるスプレッドシートまたは表を作成します。
コンテンツ マトリックスの目的は、メッセージが次のものにどのように関連しているかを特定して文書化することです。
- ユーザーの目標とコンテキスト
- 特定の目標をサポートする、明確に述べられた情報のニーズ
- 情報のニーズを簡潔で専門用語を使用しない言葉で言い換えた下書きと最終的な UI テキスト
コンテンツ マトリックスの UI テキストの決定には、次のものも反映する必要があります。
- トーンとボイスの原則
- コンポーネントのタイプ
最後に、コンテンツ マトリックスに単語リストを含めることができます。
- 機能、アクション、目標の説明に使用する単語と用語をリストする
- 同義語または役に立たないフレーズとして避けるべき単語をリストする
重要なポイント:
- 専門用語を置き換えるか定義する
- アクションまたは名詞に最も一般的な単語の選択を使用する
9. 高度なトピックとリソース（省略可）
概要
この Codelab では、UX ライティングを始めるためのベスト プラクティスと方法について説明します。紹介する例はほんの一部です。
リソース
10. 完了
これで明確で効果的な UI テキストを作成できるようになりました。
