はじめに
デザインガイドラインのwritingについて、AppleとGoogleのガイドラインを読んでみました👀
気になったところをメモします📝 何か参考になればうれしいです。
またチェックリストにしているので、ライティングに悩んだ時や客観的にチェックしたい時に使ってください✍️
読んだもの
Apple社が提供しているデザインガイドライン「Human Interface Guidelines」のwriting
Googleが開発したデザインシステム「Material Design 3（MD3）」のwriting
Human Interface Guidelines（writing）について
writingについて
アプリ内の単語選びは、UXの重要な部分
どんな場面でも言語の観点から設計することで、ユーザーがサービスを最大限活用できるようになる。
writingの始め方
サービス内での話し方を決める
決めるためには、大きく以下を考える
- どんな人に話しかけるのか考える
- 使う語彙の種類を決める
- 馴染みがある言葉を考える
- どんな感情に持ってほしいか考える
- ex)銀行アプリ -> 信頼できる・安定感がある
- 使用する用語のリストを作成する
- そのリストを参照して一貫性のあるwritingを設計する
状況に合わせて、決まったトーンを調整する
- ユーザーがサービスを使用している際に、現実の世界とサービス内両方でどんな状況か検討する
- テキストの内容と表示方法に反映する
- ex)ユーザーが危険な状況や重要な操作をするとき -> シンプルで直接的
気をつけることチェックリスト
-
明確にする *声に出して読んでみると◎
- 簡単に理解できる
- 冗長でない
- エラーメッセージ
- 問題の近くに表示している
- ユーザーが問題を解決するために何をするべきか明確
- ユーザーを不快にさせるテキストになっていない
- 設定ページなど
- 実用的なラベルになっている
- ラベルでは不十分の場合、説明を追加している（ONにした時何が起こるかなど）
- 直接リンクまたはボタンを提供してユーザーを誘導できている
- テキストフィールド
- わかりやすいラベルがついている
-
ユーザーがどう入力すべきか把握できる
- ヒントを近くに追加するなど
- エラーはフィールドのすぐ近くに表示されている
- エラーメッセージはユーザーが正しく入力する助けになっている
-
すべての人に対応している
- 専門用語や性別による用語を使わない
- 使用するテキストは誰にでも理解できる
- 有害・否定的な連想が含まれない
- 単語や表現の語源・現在の意味合いをふまえて文章を考えられている
-
文脈を考慮して文章を考えられている
- 意図した受け取り方がされるならOK
-
慣用句や口語表現が使われていない
- 翻訳により、意図しない受け取られ方になる可能性がある
- コンテンツで人物を描写する場合、多様性を意識できている
-
偏見や固定観念を強化するようなコンテンツでない
- ex)コンテンツで休日、食べ物、スポーツなどを言及する場合、特定の文化や経済状況だけを取り上げない
- ex)様々な家族のタイプを含める
-
性別に中立な表現を使用している（文脈による）
- 男女△ -> 人々◎と言い換えられるなど
-
障がいのある人を差別的な言葉遣いを使用していない
- ex)障がいのない人を標準であるかのような言葉を使用しない
- 特定の感覚の使用だけに言及していない
-
各ページの目的を考える
- 重要なテキストが先頭になっている
- 別の内容を伝える場合、分割する
-
アクション指向になっている
-
ボタンのラベルが明確になっている
- ex)操作を指す動詞やプロセスの場合は「次へ」など簡潔が良い
-
リンクのラベルが説明的な単語になっている
- ex)「ここをクリック」△、「~~の詳細」◎
- スクリーンリーダーを使用するユーザーにとって重要
-
ボタンのラベルが明確になっている
-
言語が一貫している
-
タイトルが大文字or小文字に一貫している
- 大文字:よりフォーマルな印象
- 小文字:カジュアルな印象
-
一人称or二人称に一貫している
- ex)サービスを通して人称を一貫する
- 一人称:「お気に入りアイテム」
- 二人称:「あなたが保存したアイテム」
- ex)サービスを通して人称を一貫する
- 同じ機能を持つボタンのラベルが一貫している
-
タイトルが大文字or小文字に一貫している
-
各デバイスの使用方法を考慮できている
-
デバイスの操作方法にあったテキストになっている
- ex)iPhoneやiPadでは、タップ◎ / クリック×
-
画面サイズを考慮できている
- ex)iPhone、Apple Watchは画面が小さいので、テキストを簡潔にする必要がある
-
デバイスの操作方法にあったテキストになっている
-
空白の画面の場合、次のステップを示している
- 次のステップのためのボタン・リンクを提供できている
- 一時的な状態のため、重要な情報はここだけに表示していない
-
適切な配信方法を選択している
- メッセージの緊急性・重要性を考慮する
- ユーザーがどの程度のサポート情報を必要としているか
- 状況に適した口調を使用する
Material Design 3（MD3）（writing）について
読んで抜粋したチェックリスト✅
-
単語の選択はどこにいる誰にでも伝わるか
- 例：特定の国や文化の祝日を取り上げず、休日（holidays）という表現を選ぶ
-
グローバルの単語を使用すると意味が伝わらない場合、説明があるか
- 場所や名前、気温、日付、通貨など
- ↓New Yorkをビデオ通話の背景にしてみようという文章で、注釈に「NewYork=それぞれ馴染みのある街」を意味することが追記されている
-
-
短くて簡単な文章か
-
他の言語は平均して英語の 1.5 倍の長さなので、短いテキストでも翻訳すると長くなる場合があります。
- UIも翻訳した時の見え方をある程度考慮する必要がある
-
-
略語は避ける
- 一般的ならOK
-
代名詞は明確か
- 名詞が不明瞭だと翻訳が難しくなる
- 「これ」「あれ」表現も直後でない限り避ける
-
慣用表現、口語表現、丁寧な表現を避ける
-
特にエラー メッセージでは、「お願いします」「申し訳ありません」「ありがとう」などの丁寧な表現は避けてください。ただし、ユーザーに不便なことをお願いする場合は、「お願いします」を使用できます。
-
- 専門用語・曖昧な単語を避ける
-
結果を伝える
- ユーザーを煽るような表現はやめる
- 例：⭕️ゴミ箱に移動しますか？ ❌ 本当にゴミ箱に移動させたいですか？
- 特に指定がない限り、文または句の最初の単語の最初の文字のみを大文字にする
-
省略語はあまり使わない
- 可能な限り単語でかく
- スクリーンリーダーが読みにくくなる
-
「あなた you」「あなたの your」を使用してユーザーの行動に言及していることを示しているか
- 「私 I」「私の my」の表現と混同しない
- 企業視点（we, our）ではなく、ユーザー視点が良い
- 規約同意系は「私 I」「私の my」が適切
- 所有権を強調する
- 不要な句読点は削除されているか
- do not -> don'tなど短縮系を使用する
- 感嘆符は控えめか
-
省略記号は控えめか
- 例：ボタンやメニューアイテムのテキストでは3点リーダー使わない
-
- 用語の定義には括弧を使う
-
文章の中で&を使うのは避ける
- headlineなどはOK
↓Altについて
読んでみた感想
Human Interface Guidelinesはブランディングの部分にも触れているのが印象的でした。新規サービスを始める時などは特に参考になりそうです👀
また、「すべての人に対応する」ための記述がcolorを読んだ時にも多めだと感じました。世界中の人が使うプロダクトを作る上では必須なのでしょう...！
Material Designは、例がわかりやすい＋多いので参考にしやすいです。文章の明確さ・わかりやすさのための記述が多い印象！
おまけ
SmartHRさんのデザインシステム（伝わる文章）も置いておきます。
日本語の表現でガイドラインが書いてあるので、参考にしやすいです！これだけでも気をつけると読みやすさが変わりそう👀
チェックリスト✅
- ユーザーが理解できる言葉を使っているか
- 与えたい印象にあった言葉を使っているか
- 正確＋客観的に内容を受け取ってもらえるか
- 短文か
- 主語を意識してかけているか
- 格助詞を省略してないか
- 読点（、）が正しい位置に打てているか
- 不要な二重否定がないか
- 記号の表記がガイドラインに沿っているか
まとめ
今回はwritingについて、二つのデザインシステムを読み比べてみました。
writing以外の読み比べも投稿する予定です📚
最後までお読みいただき、ありがとうございます！