厳選・オープン・無料
Limonoslo No
大胆なタイポグラフィ、暖色、没入型フードフォトグラフィを融合したモダンレストランのウェブサイト。
ConsumerPhotographicWarmBold TypographyClean
01
デザイン DNA
レストランフレッシュモダン温かい歓迎的
フレッシュな食材と大胆でクリーンなタイポグラフィを融合した、活気のあるモダンレストラン。
02
カラー
#F7EA48Accent
#1D0B0DInk
#141414Ink soft
#FCF9F0BG
#103B15Muted
rgba(16,59,21,0.2)Line
クリーム色の背景、ダークな自然のインク、鮮やかな黄色のアクセントを組み合わせた、暖かく歓迎するパレット。
03
タイポグラフィ
sans-serif
- display
56px · 700 - heading
36px · 700 - body
16px · 400 - caption
15px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
4の倍数による一定の垂直リズムを確立し、バランスの取れた余白を確保。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 32px
pill · 999px
強調用のダークグリーン(#103B15)の実線ボーダー、区切り用の薄いライトグレー(#D6D6D6)。
rgba(0,0,0,0.3) 0px 32px 68px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
明確な構造的区画と十分な余白を持つ標準グリッドレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
背景色と透明度の微細なトランジション。 · 動的レイアウト調整のための幅と高さのアニメーション。
インタラクティブ要素のカラーシフトと微細なトランジション。 · アクティブステートでのトランジションによる即座の視覚的フィードバック。
08
コンポーネント
- button ダークの頭文字大文字テキストを載せたソリッドイエロー(#F7EA48)ボタン、または白の頭文字大文字テキストを載せたダークソリッドボタン。
- card オーバーラップするテキストと微細なドロップシャドウを持つ写真レイアウト。
- chip 最小限の使用。主に構造的なナビゲーション要素。
- input 明確な視覚的フィードバックとダークボーダーを持つ標準フォームフィールド。
- hero 高品質なフードフォトグラフィを特徴とするフルワイドの没入型ヒーローセクション。
09
文体と禁止事項
- トーン 歓迎的、モダン、そして情熱的。
- 見出し 背景に対して高いコントラストを持つ、太字の頭文字大文字タイポグラフィ。
- CTA 強力なカラーアクセントを持つ、直接的で頭文字大文字のコマンド。
- クールでモノクロのパレットは使用しない — スクリーンショットは温かく歓迎的なトーンを示している。
- すべてのUI要素に重いドロップシャドウを適用しない — スクリーンショットは選択的な使用を示している。
- 繊細で低コントラストのタイポグラフィを使用しない — スクリーンショットは太字で非常に読みやすい字体を特徴としている。
- 明確なコンテンツ配信よりも複雑なアニメーションを優先しない — スクリーンショットは最小限のモーションを示している。
- 明確なラベルのない抽象的なアイコンを使用しない — スクリーンショットはテキストベースのナビゲーションに依存している。
- フルブリード写真を避けてはならない — スクリーンショットは没入型フードイメージを前面に使用している。
- 避ける: 厳しすぎる言葉遣い
- 避ける: 控えめなテキストのウェイト
- 避ける: くすんだカラーパレット
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
フレッシュな食材と鮮やかな味わいを強調する、モダンで歓迎的なレストランのウェブサイトをデザインしてください。クリーム色の背景(#FCF9F0)、深い自然のインク(#1D0B0D)、明るい黄色のアクセント(#F7EA48)を基調とした暖かいカラーパレットを使用。見出しには太字で非常に読みやすいサンセリフ、本文にはクリーンで可読性の高いサンセリフを採用。レイアウトは十分な余白と標準グリッドで構成。重要な制約:クールで臨床的なカラースキームは決して使用せず、控えめで繊細なタイポグラフィを適用せず、没入型フードフォトグラフィが欠如したミニマルなレイアウトは避ける。大胆で表現力豊か、歓迎的なビジュアルアイデンティティに焦点を当ててください。
en · zh-CN · zh-TW · ja · ko