選定の実録
同じ業種でも、読者が違えばデザインスタイルは分かれます。架空の珈琲店2件で、ブリーフから出発点のCSSの調整までを通します。
図の中身を文字で読む
- 格式
- 峰岡焙煎所（通販が主・贈答向け）
- 読者: 贈り物を探す人 → ミニマリズム
- 静か にぎやか
- たもと珈琲（商店街の店主ひとりの店）
- 読者: 徒歩圏の常連 → エディトリアルデザイン
- 同じ業種でも、読者が違えば位置が変わる
- 親しみ
案件A たもと珈琲（商店街の店主ひとりの店）#
ブリーフ#
| 項目 | 内容 |
|---|---|
| 読者 | 徒歩圏の常連と、店の前が気になっていた人 |
| 目的 | 今週の豆と営業日の「便り」を読んでもらい、来店につなげる |
| 制約 | 更新は店主。写真は店主のスマホ。読み物が毎週増える |
位置と候補#
期待されている態度は親しみです。読み物が主役なので、にぎやかには振りません。位置は親しみ × 静か、候補は手描き、エディトリアルデザイン、フラットデザインの3つです。
制約で絞る#
- 手描き ✕ 描ける人がいない。お知らせを足すたびに絵が要る型は、店主の更新で崩れる
- フラットデザイン ✕ 向くのは業務画面とアプリ。店の便りの温度が出ない
- エディトリアルデザイン ○ 読み物の型が決まっている。文章を差し替えるだけで崩れない
出発点のCSSの調整#
出発点のCSSをそのまま貼り、差し替えは見出しの書体に絞ります。
このコードで動いている見本です
余白の刻みと文字の段は starter のまま使います。触らない決断も調整のうちです。
案件B 峰岡焙煎所（通販が主・贈答向け）#
ブリーフ#
| 項目 | 内容 |
|---|---|
| 読者 | 贈り物を探す人と、卸先を選ぶ仕入れ担当 |
| 目的 | 定番8種の豆の通販と、贈答包装の案内 |
| 制約 | 写真は物撮りに投資済み。商品説明は短い。限定品は色の帯で区別する |
位置と候補#
贈答と卸で信頼が要るので、態度は格式です。位置は格式 × 静か、候補はスイススタイル、ミニマリズム、モノクローム、エディトリアルデザインの4つです。
制約で絞る#
- スイススタイル ✕ 冷たく見えることがある。贈り物の柔らかさと合わない
- モノクローム ✕ 限定品の色の帯が使えない。種別を色で分けられない
- エディトリアルデザイン ✕ 商品説明は短い。短い情報には過剰
- ミニマリズム ○ 定番8種なら「情報量が多いと成り立たない」に当たらない。写真と余白に語らせる
出発点のCSSの調整#
このコードで動いている見本です
余白の段をひとつ上げ、見出しの太さを落とします。値はどちらも starter の階段の中から選んでいます。
2件を並べて#
| たもと珈琲 | 峰岡焙煎所 | |
|---|---|---|
| 読者 | 徒歩圏の常連 | 贈り物を探す人 |
| 位置 | 親しみ × 静か | 格式 × 静か |
| 採用 | エディトリアルデザイン | ミニマリズム |
| 決め手 | 読み物の型が崩れない | 少ない情報量と写真 |
分かれたのは好みではなく、読者と目的です。業種はデザインスタイルを決めません。