厳選・オープン・無料

Ilia

温かみのあるニュートラルと洗練されたタイポグラフィを用いた、クリーンで写真主導のビューティーECサイト。

01

デザイン DNA

日当たりの良いギャラリーに置かれたミニマリストなビューティーカウンター

02

カラー

背景は暖かみのあるニュートラルが支配し、主な前景色としてダークブラウンを採用。高コントラストでありながら、柔らかいエストティックを生み出しています。

03

タイポグラフィ

geometric-sans · humanist-sans · ui-monospace

• display40px · 400
• body16px · 400

ナビゲーションとボタンラベルには大文字を使用 · 大きなディスプレイテキストには tighten された字間を設定 · 階層的な強調のために複数のフォントウェイトを混在

04

余白

ベース4システムを採用し、一貫した16pxのガターとpaddingを実現

05

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

区切り線には1px solid rgb(229, 231, 235)、プライマリボタンには2px solid rgb(39, 31, 31)を適用

0px 4px 6px -1px rgba(0, 0, 0, 0.1) · 0px 2px 4px -2px rgba(0, 0, 0, 0.1)

06

レイアウト

左側に中央配置の白いカード、右側にフルブリードのライフスタイル写真を配置したモーダルオーバーレイ

07

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

モーダルオーバーレイの滑らかな不透明度トランジション · hover時のカラーおよびbackground-colorのトランジション · インタラクティブ要素のTransformアニメーション

0.4秒をかけてカラーおよびbackground-colorのトランジションを実行 · インタラクティブ要素へのTransformエフェクト

08

コンポーネント

• button ダークブラウン（#271F1F）の塗りつぶしボタンで、白の大文字テキストを配置。8pxの角丸を持つ四角形デザイン
• card 12pxのボーダー半径を持つ白（#FFFFFF）のモーダルカード
• chip 一貫した8pxの間隔で配置された、グリッドレイアウトのカテゴリ選択ボタン
• input スクリーンショットには未表示
• hero モーダルオーバーレイとライフスタイルの製品写真を用いた、フルビューポートの分割レイアウト

09

文体と禁止事項

• トーン 親しみやすく、自信に満ち、アプローチしやすい
• 見出し 大きな幾何学的サンセリフを用いた、直接的なプロモーション言語（例：「15%割引です」）
• CTA 大文字による明確なアクション指向のカテゴリラベル

• ダークモードを使用しない — スクリーンショットでは明るい#FAF7F8の背景を採用
• 明るいアクセントカラーを使用しない — スクリーンショットでは単色の暖かみのあるニュートラルを採用
• スクリプトや装飾的なフォントを使用しない — スクリーンショットではクリーンな幾何学的およびヒューマニストサンセリフを採用
• 重いドロップシャドウを使用しない — スクリーンショットでは低不透明度の微妙なボックスシャドウを採用
• 丸みのあるピルボタンを使用しない — スクリーンショットでは8pxの角丸を持つ四角形ボタンを採用
• 複雑なレイアウトを使用しない — スクリーンショットではシンプルな中央配置モーダルオーバーレイパターンを採用
• 避ける: 明るい飽和色の使用は避ける
• 避ける: 装飾的なスクリプトフォントの使用は避ける
• 避ける: ダークモードの使用は避ける
• 避ける: 複雑なグラデーションの使用は避ける
• 避ける: アグレッシブなシャドウの使用は避ける
• 避ける: ネオンや蛍光色のアクセントの使用は避ける

10

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

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

11

System Prompt

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