レトロ・ヴィンテージ デザインインスピレーション
70年代から80年代のリバイバルデザイン。日焼けした紙の質感、バーントオレンジのアクセント、セリフ体の暖かい文字組み -- すべてが「ノスタルジア」を呼び覚ます。レコードショップ、ヴィンテージカフェ、古書店。使い込まれた革の手帳を開いたときの、あの懐かしい匂い。このページでは、レトロ・ヴィンテージのデザインシステムを豊富なビジュアル例とともに解説する。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。暖かみのあるカラーパレットとセリフ体のタイポグラフィを画面上で体感してください。
デザイン哲学 -- 暖かい記憶のデジタル復刻
ノスタルジアは最も強力なデザイン言語のひとつだ。
レトロ・ヴィンテージは「古い」のではない。時を経て価値が増したものを再解釈する行為だ。エイジドペーパーの黄ばみは汚れではなく味わい。セリフ体の書体は古臭さではなく品格。バーントオレンジは派手さではなく温もり。
以下が、この哲学を体現したレトロ・ヴィンテージUIのプレビューである:
カラーパレット -- 暖色の記憶
レトロ・ヴィンテージの色使いは、時間が経過した素材から着想を得ている。日焼けした紙、使い込まれた革、古い写真のセピアトーン。
Color Palette
アクセントカラーの使い分け
Burnt Orange #d35400
Retro Red #c0392b
Muted Blue #1a5276
Gold #b8860b
| Token | 値 | 役割 |
|---|---|---|
| bg-paper | #f4e8c1 | メイン背景 |
| bg-parchment | #e8d5a3 | セクション背景 |
| bg-dark | #3d2b1f | ダークセクション |
| text-primary | #3d2b1f | メインテキスト |
| text-secondary | #6b5035 | サブテキスト |
| accent-orange | #d35400 | CTA・重要アクション |
| accent-red | #c0392b | セールバッジ・警告 |
| border-warm | 1px solid #c9a96e | カードボーダー |
ソフトシャドウの温もり
レトロ・ヴィンテージのシャドウは暖色系でソフト。紙を一枚重ねた程度の、控えめな浮き上がり。
Shadow Levels
Subtle
Standard
Elevated
Maximum
コンポーネント -- 暖かさを手に取れる形に
ボタンバリエーション
Primary
Secondary
Sale
Ghost
Now Playing カード
Now Playing
Hotel California
Eagles -- 1976
バッジコレクション
VintageSaleNew ArrivalLimitedRare
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/RETRO_VINTAGE.mdをプロジェクトのDESIGN.mdにコピー- アクセントカラーをブランドに合わせて調整
- Stitch に「この DESIGN.md に従ってLPを作成してください」と指示
適したプロジェクト
- レコードショップ・ヴィンテージショップのEC
- カフェ・バーのウェブサイト
- 音楽イベントのランディングページ
- 古書店・アンティークショップ
- ノスタルジックなブランドのポートフォリオ
不向きなプロジェクト
- テック企業のSaaS製品
- 金融・フィンテックのダッシュボード
- 医療・ヘルスケアのサービス
- ゲーミング・eスポーツ系
タイポグラフィの注意
Google Fonts から Lobster / Playfair Display / Lora を読み込んでください。システムフォントのフォールバックは Georgia です。