厳選・オープン・無料

Sometimesalways Com Au

興味深いドリンクを扱う、温かく、遊び心があり、キュレーションされた美学のブティックオンラインボトルショップ。

01

デザイン DNA

キュレーションされたエディトリアルな美学を備えた、フレンドリーなローカルなボトルショップ。

02

カラー

温かみのある土色の背景に、コントラストの高い黒タイポグラフィと、インタラクティブ要素用の鮮やかなオレンジアクセントを採用。

03

タイポグラフィ

didone-serif · grotesque-sans

• display50px · 400
• h140px · 400
• body20px · 400
• caption12px · 400

メインのディスプレイロゴとセリフのアクセントにはSunsetSerial-Lightを使用。 · 本文、ナビゲーション、UI要素にはすべてFounders Groteskを使用。 · boldウェイトは控えめに、主に文内での強調に使用。

04

余白

インタラクティブ要素には広めのパディング（20px）、グリッドレイアウトには一貫した間隔（20px）を設定。

05

サーフェス (角丸 / 影 / 罫線)

1px solid black or #333333

0px 2px 0px 0px rgba(0, 0, 0, 0.035) · 0px 5px 40px 0px rgba(0, 0, 0, 0.16) · 0px 8px 24px 0px rgba(0, 0, 0, 0.16)

06

レイアウト

フルワイドのプロモーションバナー、角丸のヒーローセクション、その後にレスポンシブなグリッドによる商品一覧を配置。

07

モーションとインタラクション

ボタンやリンクのホバー状態に対する不透明度とトランスフォームのトランジション。 · インタラクティブ要素に対する滑らかな色の変化。

リンクやボタンに対する微細な不透明度の変化または色のシフト。 · 滑らかなトランジションによる即座の応答。

08

コンポーネント

• button パッドィングを広めに設定したピル型ボタン。しばしば1pxの細いボーダー付き。
• card 大きな角丸（20pxまたは40px）で画像を前面に出したカード。テキストは最小限。
• chip 1pxのボーダー付きの小さなピル型タグ（例：'Progressive'、'Traditional'）。
• input 最小限のスタイリングを施したシンプルなテキスト入力欄または検索フィールド。
• hero ブランド名をセリフフォントで重ねた、大型の角丸画像コンテナ。

09

文体と禁止事項

• トーン フレンドリーで親しみやすく、少し遊び心のある。
• 見出し 直接的でカジュアル。ダッシュの代わりに遊び心のある矢印（→）を使用することも。
• CTA 明確でアクションを促すもの。しばしば大文字テキストを使用。

• 冷たくクリニカルな白い背景を使用しない — スクリーンショットは温かい桃色の背景を示しています。
• 厳密にミニマルで隙間の多いレイアウトを使用しない — スクリーンショットは密集した、画像豊富なエディトリアルなレイアウトを示しています。
• カードにシャープな0pxの角丸を使用しない — スクリーンショットはすべてのカードや画像に20pxまたは40pxの大きな角丸が使用されていることを示しています。
• 硬い、igidなフォントを使用しない — スクリーンショットは遊び心のあるセリフとクリーンなゴロテスク・サンセリフの組み合わせを示しています。
• コントラストの高いダークモードを使用しない — スクリーンショットは温かみのある明るいパレットを使用しています。
• 複雑なマルチカラーグラデーションを使用しない — スクリーンショットはソリッドな暖色と写真に依存しています。
• 避ける: 過度にフォーマルで硬い言葉遣い
• 避ける: 密集し、読みにくいテキストブロック
• 避ける: 硬い、企業的デザインパターン

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko