ナチュラル / オーガニック デザインインスピレーション
Aesop の店舗に入ったことがあるだろうか。木とコンクリートの素材感、控えめな照明、そしてプロダクトだけが静かに語りかけるあの空間 -- ナチュラル/オーガニックデザインは、この「自然の温もりと品格」をデジタルに翻訳する試みだ。Patagonia のウェブサイトに流れる「急がない時間」、北欧家具ブランドの「素材への敬意」。アースカラー、セリフフォント、オーガニックシェイプ、そして何よりも豊かな余白が、「長く見ていたい」デザインを生む。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。温かみのあるベージュ基調のカラーパレットと、セリフフォントの品格を体感してください。
デザイン哲学 -- 自然の時間で
急がない。飾らない。素材の質感を感じさせる。
デジタルプロダクトの多くは「速さ」を追求する。ページロード、アニメーション、情報消化。しかしナチュラルデザインは逆のアプローチを取る。ゆっくりスクロールしたくなるページ。立ち止まって読みたくなるテキスト。良い本を読むように、良いカフェに座るように、ユーザーの時間の質を高めることを目指す。
Aesop のアプローチ -- 素材が語る
Aesop のウェブサイトの特徴を分解すると:
- セリフフォントの品格: 見出しにセリフ体を使い、「歴史と伝統」を暗示する
- アースカラーの一貫性: ベージュ・ブラウン・グリーンだけの限定パレット
- 画像の色温度: 彩度を少し落とし、フィルムカメラのような温かみ
- 余白という贅沢: 情報密度を極限まで下げ、1画面に1メッセージ
以下が、この哲学を体現したナチュラルデザインのプレビューである:
カラーパレット -- アースカラーの温もり
背景サーフェス
Background Surface Hierarchy
テキスト階層 -- ブラウンの深み
アクセントカラー -- 森と大地
#2d6a4f
#1b4332
#d8f3dc
#b45309
#fef3c7
| Token | 値 | 役割 |
|---|---|---|
| bg-canvas | #faf8f5 | ページ基盤（未晒し紙） |
| bg-base | #f2ede4 | メイン背景 |
| bg-surface | #e8e0d4 | カード・パネル |
| text-primary | #2c2416 | 見出し（深いブラウン） |
| text-secondary | #4a3f2f | 本文 |
| text-muted | #786d5c | 補助テキスト |
| accent-primary | #2d6a4f | フォレストグリーン |
| accent-secondary | #b45309 | アンバー |
オーガニックシェイプ -- 非対称の角丸
ナチュラルデザインの特徴的な要素が、非対称の border-radius だ。border-radius: 20px 60px 20px 60px という指定が、自然界の「完璧ではないが美しい」形状を再現する。
12px
20px 60px 20px 60px
9999px
コンポーネント -- 温かい部品群
ボタン
バッジ
入力欄
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/NATURE_ORGANIC.mdをプロジェクトのDESIGN.mdにコピー- accent-primary をブランドカラーに変更（グリーン系が最適）
- Stitch に「この DESIGN.md に従ってトップページを作成してください」と指示
適したプロジェクト
- オーガニック/ナチュラルコスメのECサイト
- カフェ・レストランのブランドサイト
- ウェルネス・ヨガスタジオのLP
- サステナビリティ関連のコーポレートサイト
- 手作り・クラフト系のブランドページ
- 北欧家具・インテリアのECサイト
不向きなプロジェクト
- テック/AI系のダッシュボード
- ゲーム関連サイト
- 速度・効率を訴求するSaaSのLP
- ダークモードが主体のアプリ
セリフフォントの日本語対応
Playfair Display は欧文フォントです。日本語テキストの見出しには Noto Serif JP を併用してください。font-family: "Playfair Display", "Noto Serif JP", serif の順序で指定します。