テイスト比較

迷いやすい2つのテイストを並べて、同じサンプルUIで違いを確かめます。

左右

ミニマルMinimal

何も足さない、というデザイン。

モダン・クリーンModern / Clean

信頼できる道具の顔。

ミニマル

モダン・クリーン

コンセプト

「引き算の美学」。装飾を排し、余白・文字・1色のアクセントだけで階層と操作性を成立させる。ユーザーの注意を内容そのものに向ける。

「整っていて、速そうで、信頼できる」。ブランドカラー1色を機能的に使い、明快な階層と一貫したコンポーネントで、初見でも操作が分かるUIを作る。

キーワード

余白 / モノトーン / 静けさ / 精密 / 無駄がない

整然 / 信頼 / 機能的 / 明快 / システマティック

カラー

#FFFFFF#F7F7F7#171717#737373#E5E5E5#171717

#F8FAFC#FFFFFF#0F172A#64748B#E2E8F0#2563EB#16A34A#DC2626

見出し

本文と同じ書体、ウェイト差（600）とサイズ差で階層を作る。装飾書体は使わない

サンセリフ、ウェイト700、字間-0.02em。短く言い切る

本文

Inter / Noto Sans JP などニュートラルなサンセリフ

Inter / Noto Sans JP。UIテキストは14px基準

角丸・影

radius 2px/4px/8px

radius 6px/8px/12px

余白・線幅

unit 8px / border 1px

unit 4px / border 1px

動き

100ms / 150ms / 200ms
ease-out

150ms / 200ms / 300ms
cubic-bezier(0.2, 0, 0, 1)

ボタン

角丸4px、黒背景+白文字（primary）／枠線のみ（ghost）。シャドウなし。Hoverで不透明度0.85、Pressでscale(0.98)

角丸8px、高さ40px。primary=ブランド色塗り、secondary=白+ボーダー、danger=赤。Hoverで少し暗く、Pressでさらに暗く。Focusは2pxリング

カード

背景は白、1pxのボーダー。シャドウなし。Hoverでボーダーが本文色に近づく

白背景・1pxボーダー・角丸12px・極薄の影(0 1px 2px)。Hoverで影を1段強く

装飾

—装飾は基本ゼロ。ライン（1px）のみ許可
—グラデーション・ブラー・パターンは使わない
—アイコンは線画（stroke 1.5px）で統一
—写真を使う場合はモノクロまたは彩度を落とす

—シャドウは3段階（sm / md / lg）を定義し、それ以外を使わない
—グラデーションはヒーローやマーケ面のみ
—イラストは使うなら線画かフラットで、ブランド色に統一
—背景パターンは使わない

原則

—迷ったら消す
—階層は「色」ではなく「サイズ・太さ・余白」で作る
—1画面に主要アクションは1つ
—要素を足すときは必ず何かを引く
—一貫性は装飾より重要

—1画面のプライマリアクションは1つ
—状態（Hover / Focus / Disabled / Error）を全コンポーネントで定義する
—トークン（色・余白・角丸・影）以外の値を使わない
—文字は短く、動詞で始める
—アクセシビリティ（コントラストAA、キーボード操作）を標準装備

—多色使い（アクセントは1色まで）
—多段のドロップシャドウ
—装飾目的のアイコンやイラスト
—大きな角丸（16px以上）
—グラデーションボタン

—トークン外の色や余白のハードコード
—シャドウの多用・強いシャドウ
—多色のバッジ乱用
—アイコンだけのボタン（ラベルなし）
—ボタンサイズや角丸の不統一

向いている

ポートフォリオ、ドキュメント・ブログ、開発者向けツール、ノートアプリ

SaaS、管理画面、B2Bサービス、Webアプリ全般

参考

Apple のプロダクトページ、Notion、Linear、Vercel、Muji（無印良品）

Stripe、Linear、Vercel Dashboard、Tailwind UI、Slack