インターフェイスのライティング

（音楽）

こんにちは Kaely Coonです Jennifer Bushです 私たちは Appleのライターで Apple製品およびサービス 全般にわたる Human Interface Design チームの所属です 本日 私たちが共有する ベストプラクティスやコツで みなさんのAppやゲームの ライティングの助けになれば 幸いです UXライターやコンテンツ デザイナーとも呼ばれていて 書くものは文字列 コピーあるいは テキストと呼ばれたりしますが いずれにせよ私たちの仕事は 言語の視点を通したデザインです Appleは初期の頃から 誰もが使える デバイスのデザインを望んでいました つまり誰とでもコミュニケーション 可能なデバイスということです 最初の Macのデザイン原則は “目にするものが手に入る”で 言語もこれに含まれます Macは理解しやすいシンプルな 言語を使って作られました 使用者に焦点を当て 親しみを込めて迎え入れ 今では 全製品を通して 起動時に最初に出るのが “こんにちは”です 以来ずっと インターフェイスで 会話形式を保ってきています 言葉がデザインに馴染んでいて 気づかないかもしれませんが ユーザー体験の全てにおいて 非常に重要です やりたい事の実行を 言葉で援助するわけです ミー文字の作成や 映画鑑賞や 焦点合わせなどもです 言語を削除したAppを 見てみましょう 空っぽな感じがしますね Apple Music Appではビジュアルが 判断のヒントになりますが アルバムとプレイリストが 区別できますか？ ブラウズの仕方や ラジオの聞き方は？ スクリーン上に たくさんの言葉が なかったとしても 何があって 次に何をすればいいか 分かりやすくしています エラーが起これば 対処法を探してくれます ライティングは会話であって 当然 言葉を含みますが 言葉の構成や 表示されるタイミングや 読んだ時の印象なども 含まれているわけです UXライターが言語の視点から デザインすると言いました どういう意味なのかと 思われるかもしれませんね Appのデザインプロセスに ライティングを入れるのが 早ければ早いほど ユーザー体験が 向上するということです このセッションでは 製品のための言葉を練る際に 考慮すべき点について 具体的に説明していきます ライティングにおいて 考慮する事柄は 実にたくさんあるわけですが この内容が Appのためのライディングで 有益なフレームワークと なってくれれば幸いです それは “目的” “予測” “コンテキスト” そして“共感”です

頭文字で“PACE”ですね 考慮すべき大事な点です

こちらの伝える事に 読み手がついて来やすい 自然なフローを作るのが ペースの重要性です つまり 何をどのように いつ言うか という事ですね では Jenに「目的」について 話してもらいましょう

Appのスクリーン開発では その瞬間に何を知る事が 大切なのかを考えましょう それがスクリーンの目的です では どのように伝えますか？

最初に考えるのは 情報の階層構造で スクリーン上に要素を並べる 順番についてです 例を見ましょう メッセージのフローのための イントロ画面です 目的は一番上に出ていて すぐ分かります “名前と写真を友達と 共有しましょう” 最初に目に入るでしょう 次は“名前と写真を選ぶ”の ボタンですね スクリーンのテキストが 読まれる順番は色々なので ヘッダとボタンは必ず 明確にしておきましょう

残りのテキストにも 重要な目的があります カスタマイズできる内容や 共有相手を選べる事などを 伝えていますが 文字は少し小さいですね 情報の階層構造が 表示方法の手助けになります 除外すべき内容を決めましょう スクリーンの目的を知っていれば どの案を維持して どれを除外し どれを他の部分に動かすか きちんと選択できるはずです iPhoneの温度アラートスクリーンの ワイヤーフレームです "温度を下げる必要があります” タイトルは明確ですね ですが他にも文字が多く すっきりしません

スクリーンの目的を考えましょう iPhoneの冷却が 必要だと伝える事ですか？ その場合 直射日光か使用Appの 数が多過ぎると言っています 緊急電話はまだかけられると 伝える事でしょうか かなり大きなボタンが出ています まるで緊急電話をかけるのが 必須のような表示です 私たちの作成したものを 見てみましょう 大分シンプルになっています

ヘッドラインは単に “温度”だけになっています 温度計の画像が高温である事を 表しているので それほど説明は必要ありません 使用前に冷却が必要だと 単文で伝えています ボタンは“緊急”とあるのみで 緊急電話が必要なら 押せばいいと分かります

詳細を盛り込むより 簡潔さを狙いましょう スクリーンの目的を伝えるのは 難しいことではありません！ 例えば 新しい機能を 誰かに紹介する時も 機能がある理由とその重要性を 伝えるわけです このイントロ画面は “就寝準備ショートカット”とあり “スクリーンタイムの削減は 就寝前の最善の習慣です" としています これがこの機能の目的で それを設定する動機が 明確になります 各スクリーンに目的を持ちましょう 複数ステップあるフローの場合は フロー全体の目的を決め 各スクリーンの目的も決めましょう それによってスクリーンは簡潔になり 不要なステップを減らせます 最初に 親しみを込めて招き入れ 知るべき内容を伝える事です

Apple Cashのファミリー共有設定を 手伝うフローの スクリーンを少し見てみましょう

Apple Cashの対象が誰かを 伝えていますね “18歳未満の家族”であり 何ができるかも伝えていて “お金の送受信と購入における Apple Payの使用”です

次のステップの目的は 次に何をするか 伝えることであり それは “本人確認”です そしてデータとプライバシーについて 重要な情報を伝える事です このプライバシー情報は かなり場所を取りますが とても重要です プライバシーは Appleの コアバリューです 自分のAppのバリューを考え 一貫して示すようにしましょう

本人確認を終えると フローの最後部分ですが まだ機能を使うには 準備が足りていません この“もう少しで完了”の スクリーンが伝えるのは カードのアクティベートに 時間がかかるという事です

通知が来ました！ これで Apple Cashで送金できます スクリーンの記載内容の決定が 難しいと感じたら 目的に戻りましょう 情報の階層構造を考え 何を除外するべきか 各スクリーンに目的を与えれば その目的を表示できます 次は「予測」について お話していきましょう

App中の言葉を会話の一部だと 考えると便利です Appとその使用者との間に 会話が起こるわけです 通常 会話の中では 話のやり取りがありますね 聞き手だったり 話し手だったり 質問したりします Appでも同様で 各瞬間に 最善の会話方法を予測するわけです

例えば 週末で 朝寝坊したいと決めたら 時計Appを開けて アラームを変更しますね アラームの変更は明日のみで 毎日ではありません アクションシートがこの変更を スケジュールの全週末に 適用したいか聞いてきます 最初の選択肢は “次のアラームのみ変更”で 大概の場合は翌朝の 起床時間のみ考えていると 予測しているわけです ベッドに入るとロックスクリーンが “おやすみなさい”と言い “おやすみモード”に入った事を 伝えています 小さなボタンはアラームが 午前８時半に鳴ると示しています “おやすみなさい”というのは 親しみの込もった表現で 今から就寝すると 理解しているわけです 翌朝 アラームの鳴る前に起きて iPhoneを使い始めたら アラームが鳴るのを避けたい だろうと予測します すると “お目覚めのようですね” “アラームとおやすみモードを 解除しますか？”と聞いてきます デバイスは直感的な表現で 要求に応えているかのようです “会話的な表現”といえば ライターは表現とトーンについて よく言及します まずAppの表現を開発し それからトーンの変更ができます “何を言って 何を言わないべきか” それをまず考えましょう ワクワク楽しいゲームを 開発していますか？ それとも安全で信頼性のある 銀行Appですか？ 子供も使いやすいAppですか？ 誰に話しかけるのか考えれば 使う語彙の種類も 決めやすくなります よく使う単語のリストを作りましょう これはWebサイトやEメールや 他のタイプの会話でも 表現のあり方を決める手助けになります 人々が何を行っているか予測すれば トーンを考えやすくなります ここでは Apple Watchが “激しく転んだようですね”と言い 大丈夫なら “転んだけど大丈夫”と 応えられます 大変そうな状況でも 静かで明確なトーンです Appleの表現は一貫していて どのデバイスでも同じですが 一方 トーンは状況に応じて 変化しています 例えばみなさんの声のトーンも 友達の電話と 銀行相手の電話とでは 違ってきますよね アクティビティAppで ムーブを設定すると “１日の個人最長記録達成です” “記録継続期間：35日！”と出ます 祝っているトーンなので 感嘆符を使っているわけです ですが 使う頻度に気をつけましょう 頻繁過ぎると滑稽です

Appのライティングでは常に “次は何？”を考えます 次に起こる行動や質問を 予測することで 何を言うかが決めやすくなります Apple Watchの呼吸Appでは 指示が出ます “じっとして呼吸に集中しましょう”

始め方が分からない場合でも “吸って…” “吐いて…” 使い方の質問に対して 視覚要素によって応え タイミングを教えるために Watchが振動します マップの例を見ると 帰宅しようとしている時 帰路について通知が出ます “自宅まで８分” “オーデュボン通りを通れば 空いています” みなさんが次に行うことを予測し 決断しやすくしてくれます デザインとテキストが 緊密に連携すれば Appを使う際にシームレス感が出ます 予測とはAppを会話の一部として 考えるという事です

表現を開発し 状況に応じて トーンを変えていきましょう

そして 次に何が来るかという 質問に応えます 機能だけではない 素晴らしいApp体験にするのは 人に直接 適切な方法で 話すのと同じことだと考えましょう 次は「コンテキスト」の お話です まずはAppの外側を 考えましょう Appを使う状況は 自宅にいる時なのか 静かな場所なのか それとも混んだ空港でしょうか？ 何か他のことをしている時… 例えば 運転中や料理中 Appに完全に集中できる 状況なのでしょうか？ このリマインダーが Apple Watchに 表示されるのは ワークアウトの記録を開始せずに エクササイズしている時です コンテキストは “外を歩いている”なので 立ち止まって色々と 読む必要はありません １つの大きなボタンにハッキリと “屋外ウォーキングを記録”とあります その一方 エクササイズが終了すると コンテキストは変わります もう少し多くの情報を 取り入れることができ 合計距離や平均のペース アクティブカロリーなど出ます パノラマ写真の撮影では カメラAppと 被写体との間で 集中力が分裂しがちです “パノラマ撮影の時は連続的に 動かしてください”と 指示しながらスクリーン上の 矢印が導きます 言葉が矢印の直ぐ下なのは そこが目の行く場所だからです 今度は 役に立つアラートの書き方です 恐らくみなさんのAppにも アラートがあって アクションの確認や選択に 使われるためのものでしょう アラートは何かを中断させるので 明確かつ役立つような ものであるべきです このアラートは 天気Appを開けたところで 位置情報の使用の許可を 求めているものです Appを開いた時に表示されるので 状況に合っていると感じます アラートは使用許可を与える コンテキストも明示しています ローカルの天気を表示し 関連する通知を送る事ですね

アラートの中には 破壊的なアクションや アカウントからデバイスを削除するなど 取り返しのつかないものもあります 詳しく見てみましょう このアラートの質問は “iPhoneを削除しますか？”です そして答えのボタンは “削除”か“キャンセル”です ここでのコンテキストは 重要な選択を要するもので １つは情報の喪失に繋がります “削除”は破壊的アクションなので 赤いボタンで左に位置します “キャンセル”は右に位置して それを押すだけで アラートを解除します ですが “キャンセル”を使う時には 注意が必要です この架空のサブスクリプションの 模擬アラートで分かるように “キャンセルの確認”という タイトルのせいで どちらのボタンを選ぶべきか 分かりにくくなり 左のボタンの “キャンセル”か 右の ”承認“なのか混乱します 残りのテキストは “今 承認して このプランを終了すれば 2022年６月21日に アクセスを失います”とあります あまり助けになっていません

今 プランを終了するのか まだアクセスがあるのかも はっきりしません “このプラン”の表現も曖昧で 複数のサブスクリプションが ある場合はなおさらです

少し変えるだけで 分かりやすくなります “プラチナサブスクリプションを キャンセルしますか？“とすれば 何をキャンセルするのか明瞭で “サブスクリプションをキャンセル”や “サブスクリプションを続ける” のボタンにも合致しています メッセージ本文も完結で いつまでアクセス可能か はっきりしています

ボタンは“はい”だとか “いいえ”ではありません アラート用のライティングでは 常にボタンの意味する アクションについて 特定する事が大事です もしこのアラートで ボタンのラベルしか読まなくても 何を選んでいるのか きちんと分かります もう１つのアラートのコンテキストは 予測と違う何かが起きた時です エラーは往々にして この架空の例のように アラートとして表示されます タイトルの “おっと！ 無理です”は 無理な内容に触れていません エラーコード1234567と言われても 恐らく分からないでしょうし 残りの部分の “申し訳ありませんが 無効な入力です” “再試行してください”も 情報不足です “OK”と“キャンセル”の２つの ボタンについても曖昧です どちらを押しても 同じような気がします メッセージのトーンにしても “おっと！”のような間投詞は 偉そうに聞こえますし “申し訳ありません”なども 偽善のように思えるので 使用は控えめにしましょう

改善されたメッセージの例です タイトルは請求の問題だと 明確に表示していて テキストは具体策を 説明しています “サブスクリプションの継続を 希望する場合 新しい支払い方法を 追加してください" 上の“支払い方法の追加”の ボタンを押せば 問題解決の画面へと導かれ 下の“後で”のボタンは 後で戻った時に 解決させてくれます 次に話すのは 役に立つ 空のステートの作り方で Appの中でコンテンツが 何もない部分の事を言います 教育のためだったり やることリストの最後の項目を 完了した時のような お祝いにも使えますが それはコンテキスト次第です また例を見ましょう 架空のレストランAppで まだお気に入りに 何も保存していません “何もピンと来ませんか？”という タイトルがありますが 何だか妙な感じがします App全体の表現に 合っているならいいのですが この言い回しは他言語でも 通じるのか分かりません

テキストですが “食べたい物が見つかったら また来てください”は 有用な指示も無ければ コンテンツの現れ方も 示していません

一方 Apple Podcastの ライブラリは “番組がまだありません”と 明示しています そして 後で聞きたい番組を 保存すればここに表示されると 説明しています はるかに良いですね 以上をまとめると コンテキストを考える時は Appの外側について考え Appの使用時に人々が 何をしているか考えましょう

状況に相応しく 選択が明確な 役立つアラートを書きましょう

役立つ指示を伴った 空のステートを 適切なトーンで作成しましょう

最後に「共感」についてです

ユーザー体験のライティングでは 共感を持つという場合 その対象は全員になります Appの使用者は ミュージシャンやゲーマーや 他のデベロッパなど 特定されているかもしれませんが 他の人を排除してはいけません 簡潔な言葉を使うのがベストで イディオムなどは誤解されやすく 翻訳も困難で 表現によっては 排他的な場合もあります

大事なのは ローカライゼーションの 需要に応じるという事です Appは世界中の人々に 使われる可能性があり とても嬉しい機会です！ Appが多くの言語や文化に 適応されていなければなりません

ある言語から他の言語に 翻訳すると 単語の長さも変わります 縦のスペースを要する言語もあります Appを使う人の中には 左から右に読む言語を 使う人もいれば 右から左の人もいます 例を見ましょう iPhoneでの言語変更時に 表示される承認画面で この場合は 英語からタイ語に変えます

英語での通知は “適用するとiPhoneは 再起動します”で “タイ語に変更”と“キャンセル”の ボタンも出ます

タイ語では上のテキストが 少し長くて 縦長の文字が入る スペースになっています オランダ語では テキストはかなり長いですね 上のスペースが広がり ２行目が入ります そしてユダヤ語で 右から左に読みます

単語の長さ以外にも 考慮すべき点があります アメリカ英語では カレンダーの曜日の略語は１文字で Mが月曜日 Tが火曜日と 続いていきます

カタロニア語での曜日の略語は ２文字で… １文字の略語はありませんが… アラビア語では 曜日は全く略されません みなさんのUIも これらの言語変更に 適応できなければなりません

では アクセシビリティです 全ての人をAppに歓迎するのは 重要なことです Appをできるだけ多くの人に 使ってもらうためには できるだけ多くの人に 話しかける事が必要です 例えば 全盲または弱盲の方は 恐らくデバイス文字を 大きく太文字にしたり VoiceOverを使うでしょう

Appの要素のラベリングに 使う言語に気をつけましょう 目にする言語はそれだけの 人もいるわけですので 周到なデザインが必要です

全要素に思いやりのある 便利で明確なテキストが必要です リンクやボタンのような ナビゲーションアイテム用の Voice Overのテキストだけではなく あらゆるシンボルやグラフや画像もです ミー文字を Voice Overが どう表現するのか見てみましょう この最初のミー文字では “人が頭を横にかしげて” “秘密を話すかのように 手を口の横に添えている”です 表現されているのは 体の動きだけではなく “秘密を話すかのように”という 意図も含んでいます

次のミー文字では “人が瞑想をしていて” “腕をゆったりさせ 人差し指が触れている”です ここでも身体的詳細の… ゆったりした腕や人差し指と… 瞑想のコンテキストが 表現されています

３つ目もはやり コンテキストに加え 姿勢も含みます： 爪を噛んでいる緊張した人です ３つとも全て “人”という表現をしていて “男性”や“女性”ではありません 特定の性別を 不必要に言及しない事で Appの対象が 全ての人に広がります 区別的な言語の使用にも 注意深く考慮しましょう Appのライティングでは 共感する事は非常に重要です 全ての人のために書き シンプルな言葉を使いましょう

文字サイズの変更など ローカライゼーションも重要です

アクセシビリティのために 思慮深いテキストで VoiceOverでナビゲートする 人のためにデザインしましょう 何度でも言語を見直して 変更を加えましょう 言語は進化を続けるものであり Appの言葉も同じです これらのトピックについては 語りきれません Human Interface Guidelinesで 包括的なAppのデザインの 詳細をご覧ください 今日は “目的”と“予測”と “コンテキスト”と“共感”という Appやゲームのテキストの デザイン向上のための ４つの概念を見てきました ライティングをデザインプロセスの 一部として捉え 後付けではなく 早くから 着手してください 正しい言葉がなかなか 見つからないと感じたら とてもシンプルな 奥の手があります “書いた物を音読する”です 友人に話しているような 会話的な言葉になっているか 判断がしやすくなります また音読すれば 無駄な言葉や 繰り返しや 文法ミスや タイポも見つけやすくなります どれも重要です スクリーンの向こうに 誰がいるのか考えるのが UIライティングの始まりです 敬意と理解をもって話しかければ 正しい言葉はきっと見つかります

（音楽）