0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Material3を読んでみた③【Content design】

Posted at

一旦寝かせるか悩んだ末に続きました!
連続で読み切るかはともかく亀の歩みでも着実に進めていきたい所存です。

Content design

UX writingと情報デザインがUIを使いやすいものにする

【Altテキスト】

  • スクリーンリーダーのアクセシビリティソフトウェアに使用される画面外のテキスト
  • 画像が読み込まれない場合にも表示される

素敵なaltテキストを書くために

  • 画像をページから削除しても情報が失われない場合は、装飾扱いなのでaltテキストやキャプションは不要
  • 端的に、文脈と全体的な意味を説明する
  • スクリーンリーダーは"image, ~~"と読み始めるため、"image of"で始めない

文脈と隣接するテキスト

  • altテキストの文脈と単語を考える際には隣接するテキスト(本文、キャプション、見出しなど)を利用
  • altテキストでキャプションを繰り返さない
  • 用語に一貫性を持たせる
    • 例:キャプションで「アンティーク」、altテキストで「ヴィンテージ」などは避ける
  • altテキストで何を強調したいかは各自の目的によって変化
  • キャプションの内容は画像を見ることができるユーザーにとっても有益なものにする
    • 画像の情報と重複させない

画像の種類

  • 画像の種類に名前をつけると効果的な場合がある
    • チャート
    • インフォグラフィック
    • 地図
    • グラフ
    • スクリーンショット
    • ヘッドショット
    • ダイアグラム
  • チャートやグラフの視覚化において、altテキストは重要
    • すべてのデータを詳しく説明するのではなく、要点を文脈に沿って説明
    • チャートのaltテキストの一般的な書き方は[データの種類]+[チャートを示す理由]
    • 編集用のチャート(例:ヘルスケアのweeklyダイジェスト)
      • 本文、ラベル、グラフ内のテキストを活用
    • 分析用のチャート(例:SNSの種類と年代別の利用率)
      • バイアスを与えないよう、データの出典リンクなどを強調
      • 重要なデータを強調、得られるものが1つでないことに言及
    • インタラクティブなチャート
      • 特に分析に用いられる複雑なビジュアライゼーションには静的な画像でなく、インタラクティブなチャートを推奨
  • 動画とモーション
    • 静止画同様にaltテキストが必要なケースもある
    • 長編のコンテンツでは動画説明を別途するためaltテキストは不要
    • 動画やアニメーションを要約

【Global writing】

  • 多くの文化圏を包摂し、ローカライゼーションに対応した文章を書くこと
  • 誰にとっても読みやすく、理解しやすく、翻訳しやすい文章にする

言葉選び

  • 地域の名前や祝日、企業に関する内容はグローバルな読者には適さない
  • グローバルな例を用いて伝わりにくくなる場合は、参照を説明し、翻訳する場合に各地の言葉で代用できるようにする
    • 場所
    • 名前(一般的なファーストネームやニックネーム)
    • 通貨
    • 気温
    • 日付の形式
    • プロバイダー
  • 短く簡潔に記載する
    • 箇条書きを使ったり、見出しを付けて内容をセクションにわけるなど文章を短く区切る
    • 英語を他の言語にすると平均1.5倍の長さになるため注意
  • 略語は避ける
    • 誤訳を招くため可能な限り避ける
    • 時間を表す一般的な略語はOK
  • 代名詞は明確に
    • 翻訳時に混乱を招くため、名詞を繰り返すか説明で明確にする
  • "This"と"That"の明確化
    • 翻訳が困難になるため名詞が続かない場合は"This"や"That"で始めない
  • 慣用句、口語表現、丁寧な表現は避ける
    • 使用する場合はそのフレーズの意図と文脈を明確にし、翻訳者が適切に訳せるようにする
    • エラーメッセージでは"Please", "Sorry", "Thank you"は避ける
      • ただしユーザーに不都合なことを依頼する場合は"Please"を用いてよい
  • 専門用語を減らす
    • 翻訳時に混乱を招くため
  • あいまいさを明確に
    • 単語には複数の意味を持つものがあるため、同じ文字列や本文中で両方の意味の単語を使うことは避ける
      • 例:"traffic", "change"

【Notifications】

  • 下記を満たすべき
    • 製品ではなくユーザーに関する内容
    • 正確で、タイムリー、実用的
    • ユーザーが容易にオプトアウト可能
    • 同意していない広告の送信には使用されないこと
  • 重要な情報は先頭に持ってくる
  • ユーザーに行動を促す場合は簡潔で明確にする
  • 各ユーザーに関連性のあるものにする(パーソナライズする)
  • 動的テキストは避ける
    • 動的テキスト:ユーザーのログイン時に「こんにちは」と表示するなど、ユーザーやコンテキストに応じて変化するよう実装されたもの
    • 特にヘッドラインを翻訳する場合に切り捨てられやすい
  • 文字数に注意
    • 文字が見切れないよう、下記の目安に従うこと
    • タイトル:29文字
    • Collapsed body:40文字(🐈‍⬛通知の一部だけ表示されてるやつか……?)
    • Expanded body:80文字
    • ボタン:1~2個(各1~2単語)
  • SMSメッセージは一定の文字数を超えると複数に分割されるためコストが増加する
    • そのため下記の文字数制限を遵守
    • ラテン言語:160文字
    • 非ラテン言語:134文字
  • 絵文字は翻訳されないケースが多く、文化圏によっても意味が変わるため使用する場合は控えめに
  • 日付を指定すること
    • 約20%のユーザーが通知の送信日を確認しないため、"today", "tomorrow", "tonight"などは使わない
  • オンボーディング関する通知やメールは、その最中に送信しない
  • アプリ名やロゴは通知のデザインに含まれるため、改めて製品名を含めない
  • 文脈に応じて通知をオプトアウトする方法を示す
    • その場合はユーザーのメリットもしくはデメリットを明確化
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?