厳選・オープン・無料

Myafterglo

エディトリアル写真とミニマルなUIを融合させた、親密なウェルネス製品のための洗練されたギャラリーのようなEコマース体験。

01

デザイン DNA

ハイエンドデザイン誌の抑制された手法で提示された、親密なウェルネス・オブジェクトのキュレーションされたギャラリー。

02

カラー

温かみのある落ち着いたニュートラルが柔らかいキャンバスとなり、豊かな写真イメージが主役となるようにします。

03

タイポグラフィ

transitional-serif · humanist-sans

• display132px · 400
• heading50px · 400
• body15px · 400

大きく表現力のある見出しにはトランジショナル・セリフを用い、エレガンスを伝えます。 · ナビゲーションとUI要素には明瞭さのためにヒューマニスト・サンスを使用します。 · 大文字表示テキストには十分な文字間隔を保ちます。

04

余白

大きな写真要素の周りに広い間隔を取った、ゆったりとしたオープンなレイアウト。

05

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

06

レイアウト

中央揃えのテキストオーバーレイを持つフルブリードヒーロー、その後にエディトリアルな画像のための中央揃えコンテンツカラムが続きます。

07

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

製品カルーセルのための滑らかなスライドイントランジション。 · ヒーローセクションのテキストオーバーレイのための微妙なフェードイン効果。

インタラクティブ要素上の微妙なカーソル変化（pointer）。美学を保つための最小限のビジュアルフィードバック。 · 滑らかな状態トランジションによる即座の応答。

08

コンポーネント

• button 「探索を始める」のための、角丸（border-radius: 5px）の控えめなアウトラインボタン。
• card 高品質な写真とゆったりした余白に依存した、クリーンでボーダレスなカード。
• chip ヘッダー内のシンプルなテキストベースのナビゲーションリンク。
• input トップナビゲーションバーに統合された、ミニマルな検索とアカウントアイコン。
• hero 大きく重なるセリフ書体のタイポグラフィとシンプルなCTAボタンを持つ、フルスクリーンの分割画像ヒーロー。

09

文体と禁止事項

• トーン 洗練され、親密で、力強い。
• 見出し 写真イメージと融合する、大きく表現力のあるトランジショナル・セリフのタイポグラフィ。
• CTA シンプルで直接的、控えめで、しばしばアウトラインボタンを使用。

• 鮮やかなネオンカラーを使用しない — スクリーンショットは、温かいグレー、オフホワイト、濃い黒からなる落ち着いたパレットを示しています。
• ダークモードインターフェースを使用しない — メイン背景は温かいオフホワイト（#f3f2ec）です。
• 荒々しい幾何学的なサンセリフフォントを使用しない — 表示タイポグラフィは洗練されたトランジショナル・セリフです。
• 太いドロップシャドウや太いボーダーを使用しない — サーフェスはフラットで、最小限の微妙なインセットシャドウを備えています。
• 小さなギャップを持つごちゃごちゃしたグリッドを使用しない — レイアウトはセクション間にゆったりとした余白を持つ広々としたものです。
• 一般的な製品写真を使用しない — このサイトは、ユニークなライティングを用いた芸術的なスターコンポジションを使用しています。
• 避ける: 大げさでアグレッシブなマーケティング言葉
• 避ける: 技術的すぎる、または臨床的な記述
• 避ける: 太いボーダーやシャドウによるごちゃごちゃしたレイアウト

10

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

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

11

System Prompt

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