最初に伝えることを一つ選ぶ
閲覧した人に最初に理解してほしいことを短い見出しへまとめ、説明、根拠、次の操作を続けます。詳細を探す人のために、比較や手順へ進める見出しも用意します。
原稿から配置へ進める
- 情報に役割を付ける
見出し、説明、仕様、注意事項、操作を分けます。同じ内容が繰り返される箇所を整理し、読む順に並べます。
- 画像で補う内容を決める
形や雰囲気は写真、関係や順序は図解など、文章だけでは伝わりにくい点を選びます。画像全体と説明を一緒に見られる配置を試します。
- 小さい画面から確かめる
見出しの折り返し、文字の大きさ、操作の順序を確認します。大きい画面では余白や並べ方を調整し、同じ情報へ進めるかを見比べます。
表現を選ぶときの観点
| 表現を選ぶときの観点 | 確かめること | 案に反映すること |
|---|---|---|
| 文章 | 見出しだけで内容を予測できるか。 | 具体的な語を使い、長い説明を段落へ分ける。 |
| 写真・図解 | 主題と必要な部分が見えるか。 | 掲載比率と余白を決め、説明を画像の外へ置く。 |
| 操作 | 次の行動と、その結果が分かるか。 | 目的が伝わるラベルと、見つけやすい位置を選ぶ。 |
| 動き | 理解を助け、必要なときに止められるか。 | 停止操作と静止時の表示を合わせて設計する。 |
長文と状態の変化も、設計に含める
翻訳で文章が長くなった場合、文字を拡大した場合、画像や動画が読み込めない場合を同じ構成で考えます。枠に収めるために必要な情報を隠さず、縦に続けて読める配置を試します。
操作できる場所はキーボードでもたどり、選択中の位置が見えるかを確認します。設計案の段階で挙げた確認点は、実装後の品質確認へ引き継ぎます。
デザイン案を比べるときに
参考サイトの雰囲気を伝えてもよいですか。
気に入った点を、文字、色、余白、写真、動きなどに分けて共有できます。その表現が今回の文章量や利用場面に合うかを、構成案で確かめます。
画像や文章が完成する前に設計できますか。
想定する文章量と画像の役割を置いて配置を試せます。仮素材と確定素材を区別し、置き換え後の折り返しや見え方を再確認します。