LUNCH
ベルベットの演台と温かい羊皮紙
LUNCH CONCEPTは、まるで印刷されたファッション誌の編集記事をウェブに翻訳したかのようだ。暗い全面写真のメイン要素には、クロームのアクセントが付いた拡大された3Dテキストとしてブランドロゴが配置され、その後に温かみのある羊皮紙のような落ち着いたカタログ風の製品ギャラリーが続く。ページは映画のような対決と静かな抑制が交互に現れる。メイン要素は攻撃的で、メインセクションはささやくような印象だ。控えめなラベンダー色は、広告行、「売り切れ」の状態、そしてフッターにのみ使用され、叫び声ではなくブランドステートメントとして機能している。単一の特徴的なサンセリフフォント（Good Sans）が主に控えめなサイズで使用され、メインロゴだけがタイポグラフィのスペクタクルとなっている。インタラクションはテキストリンクのみで行われ、塗りつぶされたボタン、グラデーション、装飾的なクロームは、メイン要素の3Dロゴを除いて存在しない。
中央揃えのコンテンツセクションの最大幅は約 1280 ピクセル。ページタイトルはページの端から端まで幅全体に広がります。ページのリズム: ページ幅全体 (ビューポートの高さ) に広がる暗いページタイトル → 暗い背景に中央揃えの紹介文 → 同じ背景に 4 ～ 5 列の製品グリッド → ライラック色のベールのフッター ストリップ。ナビゲーションは、ページタイトル (暗い背景に明るいテキスト) と紹介文 (明るい背景に暗いテキスト) の上に細いテキスト ストリップとして配置されています。製品グリッドは、画像間のインデントや視覚的な分離がなく、内部配置で密なレイアウトになっています。紹介文は、上下に十分な垂直方向のスペース (60 ～ 80 ピクセル) がある、狭い中央揃えの列 (約 600 ～ 700 ピクセル) です。全体的な密度: 編集セクションでは広々としていますが、製品グリッドでは圧縮されています。
デザインの中心は、エディトリアルファッション写真です。メイン画像には、暗くコントラストの高いモデル写真（重厚なスタジオ照明、前衛的なスタイリング―赤いレザーコルセット、チェック柄のタータンチェック、印象的なポーズ）が使われています。一方、グリッドには、フラットでニュートラルな背景に、鮮明な商品写真やルックブック写真が配置されています（モデルと商品は、ライフスタイルの文脈なしに、ライトグレー／ホワイトの背景で撮影されています）。画像はエッジがシャープで、半径はゼロ、グリッド内の隣接する画像とぴったりと揃っています。メイン画像はビューポートの四辺すべてを占め、3Dクロームロゴがオブジェクトに重なっています。グリッド内の商品画像は、行全体で高さと幅の比率が一定に保たれています。最小限のテキストナビゲーション以外に、イラストやアイコンはありません。ビジュアル言語は、「良い写真を撮り、シャープにトリミングし、写真そのものをブランドの顔にする」です。
パレット
ブランド
- Lilac Veil
#b8aad0— 背景のハイライト、装飾的なストライプ、そしてコンテンツの背後にある柔らかなアクセントとして、紫色の塗りつぶしを使用。
中性
- Ink Black
#000000— 本文テキスト、ナビゲーションテキスト、リンク枠、カード枠、アイコン枠はすべて、インターフェース全体の構造的なラインを形成します。 - Warm Parchment
#f4f1e4— 編集記事や商品紹介ページの各セクションの背景は、商品写真が配置される落ち着いた背景色になっています。 - Ivory Mist
#fcfaf1— 暗いメイン要素の上に配置されたナビゲーションテキストの色、微妙な質感の色合い、そして控えめな境界線は、暗いセクションのUIにおいて、純粋な白よりも温かみのある代替案を提供します。
タイポグラフィ
12～72ピクセル・5段階
- Good Sans — 交換： Söhne · 概要 400, 700 · ナビゲーション、本文、製品メタデータ、リンク、そしてあらゆるUIテキストに対応する汎用フォント。2種類のウェイト（本文・見出しにはレギュラー400、ブランド名、価格、ハイライトにはボールド700）を採用することで、サイズを大きくすることなく階層構造を表現できます。文字間隔がほぼゼロに近いため、幾何学的というよりは編集的な印象を与えます。
- Redaction — 交換： GT Sectra Display Bold · 概要 700 · 本文専用—これは、全画面表示の本文のベースとなる、大きなクローム文字「LUNCH」専用のカスタムフォントです。1ページにつき1回のみ使用され、再利用可能なコンポーネントではなく、タイポグラフィ上の署名として使用されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 20-30px |
| ボタンの半径 | 0px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 60-80px |
| ページ幅 | 1280px |
AI がLUNCHスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。
- Lamborghini — ショールームのスポットライトの下に展示された黒いボディカラーの車と、黄色い車が1台。
- amp — 温かみのあるオレンジ色とクールな白の背景。このデザインは、陽光が降り注ぐロフトで撮影された高級フィットネス製品を彷彿とさせる。一つのアイテム、一つのアクセント、そして自信に満ちたフォントが、すべてを物語っている。
- IKEA — 太陽の光が降り注ぐ、分解された状態のスウェーデン家具ショールーム
- Microsoft — 小売カタログでは、特徴的な青色が使われている。白いショールームの床に四角いロゴがあり、デザイン要素すべてが青色で統一されている様子を想像してみてほしい。
- Vibrants — 白い大理石に描かれたスカイボーン薬局 ― 濃い青色のインクはモルタル、虹色のスペクトルは薬を表している
- Isla Beauty — クリーム色の薬局風のインテリアに、手術用レッドのアクセントが効いている。温かみのある羊皮紙のような壁、琥珀色のボトル、そしてすべてのラベルに押された赤いスタンプが印象的だ。
- Swap — Mint編集ギャラリー：明るいライムグリーンのアクセントと繊細なセリフ体フォントが映える、淡いセージグリーンの部屋
- Cursor — くすぶる炭火に照らされた、居心地の良い羊皮紙工房
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Amplemarket — 紙吹雪が散りばめられた、陽光あふれる職場