作る順番
1件のサイトを作るとき、どの順で何を決めるか。飛ばした工程は、あとで必ず戻ってきます。
図の中身を文字で読む
- 上から順に決める。飛ばした工程は、あとで必ず戻ってくる
- 決める
- 誰に、何を、どんな態度で
- 載せるものと、その順
- デザインスタイルを1つ選ぶ
- ここが決まっていないと、この先の判断が全部好みの話になる。
- 組む
- 版面と余白の刻み
- 文字の階段
- 色の役割
- 値に名前を付けてから先へ進む。
- あとから付け直すのは高い。
- 詰める
- 部品を作る
- 4つの状態を作る
- 動きを足す（要るなら）
- 正常だけを作ると、空とエラーの画面が最後まで残る。
- 確かめる
- 使えるか
- 速いか
- 伝わっているか
- 機械で見るものと、人が見る
- ものを分けて通す。
- ここで見つかると、決める段まで戻る
- 後戻りの原因になりやすい3つ
- ✕ 色から決める
- 見た目の話から入ると、態度が決まっていないので好みの押し付け合いになる。
- ✕ 正常な画面だけ作る
- 空・エラー・読み込み中が抜けたまま実装に入り、後から場当たりで足すことになる。
- ✕ 最後に確かめる
- コントラストとキーボードは構造の問題なので、後付けだと組み直しになる。
- 工程は行ったり来たりするが、決める順序は動かさない。「誰に」より先に「何色か」を決めない。
- 作る前に、どうなったら完成かを書いておく。書いていないものは検証できない。
工程は行ったり来たりします。それでも決める順序は動かしません。「誰に」より先に「何色か」を決めない、ということです。
決める#
読者と態度を決める#
読者を1行で書きます。年齢や属性ではなく、何を片づけたくて来たのかで。そのうえで態度を1つ選びます。信頼されたいのか、親しみたいのか、目立ちたくないのか。
ここが決まっていないと、この先の判断がすべて好みの話になります。
載せるものと順序#
利用者の言葉で分けます。組織図では分けません。ページを分けるか、1枚にまとめるかも、ここで決めます。
デザインスタイルを1つ選ぶ#
格式か親しみか。静かかにぎやかか。2つの軸で位置を決めると、候補が絞れます。最後に制約で絞ります。読む量、更新する人、回線です。
組む#
版面と余白の刻み#
先に版面を決めて、コンテナに与えます。行長を文字数で指定しません。余白は4か8の倍数で階段を作り、その中からしか選びません。
文字の階段#
本文16px、比1.2〜1.25の階段、1ページで4段まで。行間は和文の本文で1.7〜1.9。書体は役割で選びます。
色の役割#
地、文字、強調の3役だけを決めます。値ではなく、役割で名前を付けます。暗い表示の分もここで一緒に決めておくと、あとで破綻しません。
この段の値には、名前を付けてから先へ進みます。 あとから名前を付け直すのは高くつきます。
詰める#
部品を作る#
同じ形が3回出たら部品にします。2回目までは複製でかまいません。ボタンとリンクは、見た目ではなく動作で選びます。
最初の1枚は 見出し＋本文＋ボタンのカード から始めます。余白・文字・ボタンの3テーマを1枚に集約する演習です。10分以内にコピーと調整が終わるか試してください。
4つの状態を作る#
読み込み中、空、エラー、正常。正常だけを作ると、残りの3つが最後まで残ります。
動きを足す（要るなら）#
その動きが何を説明しているのかを一言で言えないなら、入れません。入れるなら、動かすのは transform と opacity だけです。
確かめる#
使えるか#
キーボードで一周します。フォーカスが見えるか、順序が見た目と合っているか。読み上げで見出しだけを拾って、ページの中身が分かるか。
速いか#
画像から見ます。表示寸法の2倍以下に縮め、AVIF か WebP にし、最初の画面より下は遅らせます。
伝わっているか#
機械で見るものと、人が見るものを分けて通します。ここで見つかった問題は、決める段まで戻ることがあります。だから最後に回しません。組みながら測ります。
後戻りの原因になりやすい3つ#
| やりがちなこと | 何が起きるか |
|---|---|
| 色から決める | 態度が決まっていないので、好みの押し付け合いになる |
| 正常な画面だけ作る | 空、エラー、読み込み中を、あとから場当たりで足すことになる |
| 最後に確かめる | コントラストとキーボードは構造の問題なので、あと付けだと組み直しになる |
作る前に、どうなったら完成かを書いておきます。 書いていないものは検証できません。