ミニマルライト デザインインスピレーション
白を基調としたミニマルデザインは、Vercel、Notion、Linear（ライトモード）に代表される現代ウェブデザインの到達点のひとつである。「要素を足す」のではなく「引く」ことで洗練を生むこのアプローチは、一見簡単に見えて実は最も設計が難しい。余白の1pxの違いが全体の印象を変え、グレーの1段階の違いが情報階層を壊す。
このページは、Vercel/Notion のデザイン言語から抽出したミニマルライトテーマのデザインシステムを、インラインHTMLのビジュアル例とともに解説する。SaaS、ポートフォリオ、ドキュメントサイト、管理画面 -- あらゆるプロダクトのライトモード設計に応用できる。
このページの使い方
スクロールするだけでデザインの全体像が把握できます。各セクションにインラインHTMLのビジュアル例を配置しているので、コードを読まなくても視覚的にパターンを理解できます。
デザイン哲学 -- 余白が語る
余白は「何もない」のではない。「意図的に空けた」空間である。
ミニマルデザインの本質は「シンプル」ではない。**「不要なものを削り落とした結果として残る本質」**である。Vercelのランディングページを見れば分かる -- そこには膨大な設計判断の痕跡がある。1pxのボーダー、8pxの余白の違い、#111111と#333333のテキストカラーの使い分け。全てが意図的だ。
ミニマルデザインの3原則
- 引き算の美学: 要素を追加する前に「これは本当に必要か?」と問う。答えがNoなら削る
- 余白の意味: 要素間の距離は情報の関連性を暗示する。近い=関連が深い、遠い=独立
- モノトーンの力: 黒・白・グレーだけで情報構造を表現する。色は最後の手段
以下が、この哲学を体現したミニマルライトUIのプレビューである:
カラーパレット -- モノトーンの階層
ミニマルライトテーマのカラーパレットは、基本的にグレースケールだけで構成される。ここに彩度のある色を加えるのは最後の手段であり、セマンティック（成功・エラー等）とCTA以外では使わない。
背景サーフェス階層
Background Surface Hierarchy
テキスト階層
ボーダーのみの分離 vs シャドウ
推奨: ボーダーのみ
ボーダーのみで区切る。フラットで洗練された印象。
余白とボーダーだけで十分な視覚的分離。
避ける: 重いシャドウ
影が強すぎてミニマル感が失われる。
カードが「浮いて」いて落ち着きがない。
コンポーネントギャラリー
ボタンバリエーション
Button Variations
入力フォーム
Form Elements
バッジ / ステータス
Badges & Pills
使い方ガイド
このテーマが適するプロダクト
- SaaSのランディングページ・ドキュメント
- ポートフォリオサイト
- ブログ・メディア
- 管理画面（データ密度が低〜中の場合）
- 設定画面・プロフィール編集
このテーマが適さないプロダクト
- データ密度の高いダッシュボード（SaaS Dashboardテーマを推奨）
- 暗い環境で長時間使うツール（Dark Themeを推奨）
- ECサイト（Ecommerceテーマを推奨）
Stitch向けプロンプト例
このDESIGN.mdに従って、プロジェクト一覧ページを作成してください。
背景は#ffffff、カードはborder: 1px solid rgba(0,0,0,0.08)のみで区切り、
影は使わないでください。CTAボタンは黒(#000000)背景、8px角丸です。
テキスト階層は #111111(見出し) / #333333(本文) / #666666(補助) を使用。