参考画像をデザインルールに分解する
「この画像がいい」を、グリッド・階層・密度のルールに落とす
これは私が好きな参考画像です：［添付または説明］。この画像を再現したいのではなく、他のページにも使えるルールに分解したいです。次の 6 層で抽出してください：1）グリッドと版面幅；2）余白のリズム（4 または 8 の倍数で数値を明記）；3）文字サイズの階層と行間；4）色の役割（背景・面・文字・アクセントがそれぞれ占める面積）；5）角丸・罫線・影の値；6）情報密度（1 画面に視覚ブロックがいくつ乗るか）。各ルールは数値か検証できる条件文にしてください。あわせて、この画像に固有の偶然（写真の内容、文言の長さ）でルールにできないものを指摘してください。最後に、内容がまったく違うページをこのルールで記述してください。
使い方
同じ出所の参考画像を 3 枚渡してください。1 枚では、システムとその画面だけの判断を切り分けられません。
向いている場面
- 好きな画面のスクリーンショットを見つけても、どこが良いのか言葉にできず、「うちより整って見える」としか言えません。グリッド・余白・文字サイズの数値に分けて初めて、直す場所が分かります。
- 既存ブランドのビジュアルがある中で新しいページを任され、ゼロから発明できません。公式の素材 2〜3 点から同じルール一式を抜き出せば、別会社のページのようになりません。
向いていない場面
- 参考がイラスト、ポスター、3D レンダリングの場合です。魅力は画面の中身そのものから来ており、UI のルールに変換すると実装できない制約ばかりが残ります。
- 画像が 1 枚しかない場合です。1 枚では、システムなのかその画面だけの一時的な判断なのかを切り分けられません。同じ出所の画面が 3 枚ほど必要です。
例
入力
モバイルバンキングのホーム画面 390×844。上部に暗いグラデーションのカード、その下に 4 つの入口アイコン、さらに 2 列のカード一覧で 1 画面に約 2.5 枚
得られるもの
グラデーションカードを「ファーストビューで唯一の高コントラスト面、画面高の 38%」と読み、入口アイコンは 4 列の 8pt グリッド・間隔 24、カードは角丸 16・内側余白 20・間隔 12 と数値化します。偶然の要素として、残高の桁数と販促画像はルールにできないと指摘します。最後に同じルールで「返済履歴」ページを書き換え、グラデーションカードを高さ 24% に下げ、カードの間隔 12 は密度を保つため維持します。
よくある誤用
- 参考画像から色をスポイトで拾ってルールとする場合です。拾えるのはその 1 枚の完成色であって、色の役割の関係ではありません。内容が変われば配色を一から作り直すことになります。
- 「余白が広い」で結論を止める場合です。倍数も上限下限も示さなければ、実装する人ごとに違う余白になります。
こう変えると効く
- 「ルールを抽出する」を「この画像が自分自身のルールを破っている 3 か所を探す」に変えます。逆方向の練習で不整合が見えるようになり、欠点まで真似ずに済みます。
- CSS 変数の一覧（--space-1 から --space-6、--radius-*、--text-*）で出させます。ルールがそのまま受け渡せるトークンになります。