デザインスタイルの選び方
好みでは選びません。読者が期待している態度の位置に置き、制約で絞ります。順番はこの4手です。
図の中身を文字で読む
- デザインスタイルは好みで選ばない。読者が期待している態度の位置に置く。
- 格式・信頼
- 選ぶ順
- エディトリアル 1. 読者が誰かを書く
- スイススタイル はじめて店を持つ人／既存の取引先／
- ダークUI 保護者／採用候補者
- ミニマリズム
- フラット 2. 期待されている態度を1つ選ぶ 信頼されたい／親しみたい／
- マテリアル 驚かせたい／目立ちたくない
- モノクローム グラスモーフィズム
- 3. 左の図で位置を決める
- 静か・引き算 アイソメトリック にぎやか・足し算 その位置にあるデザインスタイルが候補になる
- 4. 制約で絞る
- ニューモーフィズム 手描き マキシマリズム 読む量が多い → 静か側
- バウハウス 更新する人が非専門 → 規則が単純な側
- 回線が細い → 画像に頼らない側
- ネオブルータリズム 先に外すもの
- コラージュ コントラストが確保できないもの
- ヴェイパーウェイヴ Y2K 境界が読めないもの（長文には向かない）
- 親しみ・遊び
- この図は目安。同じ業種でも、狙う相手が変われば位置は動く。位置を決めずに部品だけ真似ると、デザインスタイルは崩れる。
ひと目で#
好みで選ばない。読者が期待している態度の位置に置く。
- 読者が誰かを書く
- 期待されている態度を1つ選ぶ。信頼されたい、親しみたい、驚かせたい、目立ちたくない
- 2軸の図で位置を決める
- 制約で絞る
業種からの目安#
| 業種 | 位置 | 候補 |
|---|---|---|
| 会計、法務、医療 | 格式、静か | スイススタイル、エディトリアル、ミニマリズム |
| 飲食、小売 | 親しみ、中間 | エディトリアル、手描き、コラージュ |
| 福祉、教育、子ども | 親しみ、にぎやか寄り | 手描き、バウハウス |
| 製造、建設 | 格式、静か | スイススタイル、モノクローム |
| SaaS、業務システム | 中間、静か | フラット、マテリアル、ダークUI |
| 文化、音楽、催し | 親しみ、にぎやか | マキシマリズム、コラージュ、レトロフューチャリズム |
| 作品集、写真 | 静か | ミニマリズム、モノクローム、エディトリアル |
制約で絞る#
| 制約 | 寄せる方向 |
|---|---|
| 読む量が多い | 静かな側。飾りは減らす |
| 更新するのが専門外の担当者 | 規則が単純な側。崩れにくい型を選ぶ |
| 回線が細い。年配の利用者が多い | 画像に頼らない側 |
| 印刷物や看板と併せて使う | 白黒に落ちる側 |
| 載せる情報が次々に増える | 一覧の型が決まっている側 |
図の中身を文字で読む
- 位置「格式 × 静か」で出た候補を、制約で絞る
- 例: 料金と手続きの説明が多い会計事務所
- スイススタイル
- ミニマリズム
- ○ 残る
- 格子と表の型が、量の多い説明に耐える
- ✕ 落とす
- 採用はこの1つ。ここから出発点の CSS に落とす
- 情報量が多いと成り立たない
- モノクローム ✕ 落とす
- 種別や注意書きを色で分けられない
- エディトリアルデザイン ✕ 落とす
- 短い項目の集まりには過剰
- 落とす理由は、デザインスタイルの使い分けの「弱いところ」の欄をそのまま使う。
位置から採用まで通した実録は、選定の実録に2件置きました。同じ珈琲業でも、読者が違えば別のデザインスタイルになります。
先に外すもの#
- コントラストが取れないデザインスタイル（ニューモーフィズム、淡い色のグラスモーフィズム）
- 境界が読めないデザインスタイル。長文と表には向かない
- 数年で古びると分かっているデザインスタイル。長く使う面には使わない
間違えやすいところ#
- 参考サイトを1つ決めて全部寄せる業種も読者も違えば、同じデザインスタイルは合わない
- 見た目から入る位置を決めずに部品だけまねると崩れる
- 社内の好みで決める読者の期待とずれる。誰に向けたものかへ戻る
- 全ページを同じ濃さで作るトップと下層で強さを変える
- 「今っぽさ」を要件にする判定できない。位置と制約に翻訳する
- 決めたデザインスタイルを途中で足し引きする規則が壊れ、寄せ集めに戻る
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、美容室と整骨院を並行で受けたら、どちらの発注者も「参考はここ」と同じ高級ホテルのサイトを持ってきました。参考のまま作ると、両方とも読者とずれます。美容室の読者は新しい店を探す20代で、整骨院の読者は痛みを抱えた年配の常連です。位置が別なら、デザインスタイルも別です。参考サイトは捨てずに「余白の取り方だけ借りる。配色はまねない」と条件に読み替えます。この2件は最後まで別のデザインスタイルで通し、共通にしたのは出発点の CSS だけです。
確認する#
- デザインスタイルを選んだ理由を、読者と業種の言葉で1文で言える
- 「先に外すもの」に挙がったデザインスタイルを、途中から混ぜていない
- 数年で古びるデザインスタイルを、長く使う面に選んでいない
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
読者が期待している態度を1つ選ぶ。信頼されたいのか、親しみたいのか。そこから位置を決める。
信頼 / 親しみ のどちらを優先するか決める
数年で古びるデザインスタイルを、長く使う面に使わない。読者の期待から選ぶ。
長く使う面には流行のデザインスタイルを使わない
格式か親しみか、静かかにぎやかか。2軸で位置を決めると候補が絞れる。
格式↔親しみ × 静↔にぎやか の2軸で位置を決める
更新する人が非専門なら、崩れにくい型を選ぶ。規則が単純なデザインスタイルに寄せる。
崩れにくい型=余白の刻みが単純なデザインスタイル
この場面のほかの困り事と、そのまま貼れる部品は見た目を決める、出す前と出したあとにまとめてある。逆引きには全188件。
位置で選ぶ#
まず象限を押して、読者が期待している態度の位置を決めます。候補はそこから絞られます。読者とデザインスタイルを書き入れると、そのまま共有できる選定メモが下に組み上がります。
候補: スイススタイル、ミニマリズム、モノクローム、エディトリアルデザイン
信頼を確かめに来る読者には、飾りを減らした静かな組みが期待に合う。
# デザインスタイルの選定メモ
読者: 開業2年目の飲食店主。決算を任せる相手を探している
位置: 格式 × 静か
デザインスタイル: スイススタイル
理由: 信頼を確かめに来る読者には、飾りを減らした静かな組みが期待に合う
確認: デザインスタイルの使い分けで、弱いところを読んでから決めるこの道具は JavaScript で動きます。無効の場合は、上の業種からの目安の表で選んでください。