デザインの名前を知ると、画面の見方が変わる。
曖昧な「ミニマル」から一歩先へ。デザインの流派、UI のパターン、CSS の道具を分けて整理するノート。
研究ノート01
スタイルと道具を分けて考える。
名前を整理すると比較しやすい。
「ミニマル」「北欧風」だけでは、文字、余白、構成のどこを指しているのか曖昧になる。考え方、ビジュアル、レイアウト、デザインシステムに分けると伝えやすい。
デザインムーブメント、ビジュアルスタイル、UI パターン、デザインシステムは同じ言葉ではない。
- POINT
- デザインムーブメント、ビジュアルスタイル、UI パターン、デザインシステムは同じ言葉ではない。
02
Swiss Style：情報を読みやすく。
装飾より読みやすさ。
Swiss Style で印象的なのは、グリッド、非対称の構成、サンセリフ体、情報の優先順位。モノクロで余白が多ければスイス風というわけではない。
ルールのある配置は、すべてを左右対称にすることではない。
- POINT
- ルールのある配置は、すべてを左右対称にすることではない。
03
Bauhaus、和風、北欧と Editorial。
違いを知る。
Bauhaus は機能と幾何学を重んじる。日本的なミニマリズムには余白と抑制があり、北欧には明るさ、温かさ、使いやすさがある。Editorial は雑誌のように写真と文字で読者を導く。
Neo-Brutalism は太い線と強い対比、Contemporary Luxury は抑制と細部で個性をつくる。
- POINT
- Neo-Brutalism は太い線と強い対比、Contemporary Luxury は抑制と細部で個性をつくる。
04
Bento は流派ではなくレイアウト。
カードの役割を考える。
サイズの違うカードで機能や情報をまとめる Bento Grid は、近年の SaaS サイトでよく見かける。ただし歴史的なデザイン運動ではなく、レイアウトパターンだ。紹介ページには向くが、操作画面の全要素を巨大なカードにする必要はない。
Linear に見られる細い境界線や高い情報密度も、必要な場面だけ取り入れたい。
- POINT
- Linear に見られる細い境界線や高い情報密度も、必要な場面だけ取り入れたい。
05
CSS の道具とデザインは別。
実装と美学を分ける。
CSS Grid と Flexbox は配置を担う。Tailwind は utility class、Bootstrap はコンポーネント、CSS Modules はスコープ管理、Sass はスタイルの整理を助ける。どれも単体で美学を決めてくれるわけではない。
shadcn/ui は編集できるコンポーネントコード、Radix と React Aria はアクセシビリティ、Motion はアニメーションの選択肢になる。
- POINT
- shadcn/ui は編集できるコンポーネントコード、Radix と React Aria はアクセシビリティ、Motion はアニメーションの選択肢になる。
06
見た目より使う場面を考える。
用途から考える。
文章なら行長、字の大きさ、余白を優先する。機能紹介なら Bento、情報量の多い業務画面なら明快な表とナビゲーション。流行の名前より、誰が何をする画面なのかが先だと思う。
角丸、ガラス、影、色、フォントを一度に足しても情報は整理されない。
- POINT
- 角丸、ガラス、影、色、フォントを一度に足しても情報は整理されない。
GRID.Clarity · hierarchy
余白Space · calm