厳選・オープン・無料
Shopping Google
トレンドのあるホリデープロダクトを強調する、キュレーションされたエディトリアル主導のショッピング体験。
CurationEditorialConsumerCleanProduct
01
デザイン DNA
キュレーション発見トレンドホリデーショッピング
高級雑誌のホリデーギフトガイドをミニマルなウェブ体験に翻訳したもの。
02
カラー
#1A0DABAccent
#1F1F1FInk
#515151Ink soft
#FFFFFFBG
#70757AMuted
rgba(0,0,0,0.04)Line
クリーンな白キャンバス、深いインクテキスト、プライマリアクション用の1色の鮮やかなGoogleブルーアクセントを持つ、ハイコントラストのエディトリアルパレット。
03
タイポグラフィ
transitional-serif · humanist-sans
- display
80px · 200 - body
14px · 400 - subtitle
24px · 400
ディスプレイ見出しは、エレガントでエディトリアルな雰囲気のために、タイトなトラッキングを持つライトウェイトのトランジショナルセリフを使用します。 · 本文テキストとUI要素は、クリーンで非常に可読性の高いヒューマンサンセリフを使用します。 · 製品タイトルは、グリッドレイアウトでの最大限の可読性のために、標準ウェイトのサンセリフでレンダリングされます。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
製品カードを区切り、クリーンで息の通ったレイアウトを維持するために、豊富なホワイトスペースと異なるガター（16px、24px）を持つ柔軟なグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 20px
lg · 24px
pill · 9999px
rgba(0,0,0,0.04) 0px 0px 0px 1px · rgba(0,0,0,0.2) 0px 4px 8px 0px · rgba(60,64,67,0.25) 0px 2px 8px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
目立つフルワイドのヒーローセクションに続く、柔軟なメーソンリー風の製品カードグリッドを持つ、センタリングされた最大幅コンテンツコンテナ。
07
モーションとインタラクション
100msmicro
250mssmall
500msmedium
cubic-bezier(0.2, 0.0, 0, 1.0)easing
ドロップダウンやオーバーレイの滑らかな表示トランジション。 · hover状態での微細な背景色の変化。 · インタラクティブ要素の標準的なborder-radiusトランジション。
背景色の変化やシャドウのシフトなど、微細な視覚的合図がカードやボタンのインタラクティビティを示します。 · 直接的なナビゲーションまたは製品詳細の展開。
08
コンポーネント
- button ハイコントラストの背景色と白テキストを持つピル型プライマリボタン。
- card 20pxボーダーラadiusと最小限のテキストを持つ、柔らかいグレー背景上の大型高品質写真を特徴とする製品カード。
- input 微細なボーダー、丸みのある角、統合された音声/レンズ/検索アイコンを持つ、大型でセンタリングされた検索バー。
- hero ライトウェイトのセリフフォントを使用し、大型ライフスタイル写真の上にセンタリングされた、巨大でエディトリアルスタイルの見出し。
09
文体と禁止事項
- トーン インスピレーションを与える、エディトリアルで、かつ親切であり、単なるマーケットプレイスではなく、キュレーションされたガイドとしてプラットフォームを位置付けます。
- 見出し 高級ファッションやライフスタイル雑誌の表紙を彷彿とさせる、大型でエレガントなセリフ主体のスタイル。
- CTA ハイコントラストのピル型ボタンを使用した、直接的でアクション志向のスタイル。
- メインキャンバスに暗い背景を使用しない — スクリーンショットではヒーローと製品グリッドにクリーンな白背景が示されています。
- メイン見出しに太く重いサンセリフを使用しない — スクリーンショットでは'Holiday 100'がライトウェイトのトランジショナルセリフで表示されています。
- 製品カードに鋭く四角い角を使用しない — スクリーンショットではすべてのカードと画像に目立つ20pxのボーダーラadiusが示されています。
- ヒーローにカオスまたは複数カラムのレイアウトを使用しない — スクリーンショットでは厳格にセンタリングされた単一カラムのエディトリアルヒーローが示されています。
- メイン背景に明るいプライマリカラーを使用しない — スクリーンショットでは製品画像を目立たせるために純白（#FFFFFF）キャンバスが使用されています。
- 本文テキストにモノスペースやスラブセリフフォントを使用しない — スクリーンショットでは可読性のためにクリーンなヒューマンサンセリフが使用されています。
- 避ける: 発見に焦点を当てたフレージングを採用し、アグレッシブな「今すぐ購入」の言葉を避ける。
- 避ける: 雑然としたレイアウトや圧倒的なCTAを避ける。
- 避ける: 製品写真から注意をそらすような暗く重いカラーパレットを避ける。
11
System Prompt
これはGoogleショッピングのキュレーションガイド「Holiday 100」で、エディトリアルな発見ツールとして位置付けられています。デザインDNAは、クリーンな白（#FFFFFF）キャンバス、深いインク（#1F1F1F）テキスト、プライマリ「Sign in」アクション用の1色の鮮やかなブルーアクセント（#1A0DAB）を中心に据えています。タイポグラフィは重要な差別化要因です：メインヒーローはエレガントで雑誌のような雰囲気のために、ライトウェイトのトランジショナルセリフフォント（Crimson Pro）を使用し、UIと本文テキストはヒューマンサン（Google Sans）を使用しています。レイアウトはセンタリングされ、息の通ったもので、大型のライフスタイル写真と、柔らかい20pxボーダーラadiusを持つ製品カードを特徴としています。重要な禁止事項：決して暗い背景を使用せず、ディスプレイ見出しに太いフォントウェイトを使用せず、画像コンテナに鋭い角を使用しないこと。
このセンスを AI エージェントへ
この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。
OpenDesign スキル ↗en · zh-CN · zh-TW · ja · ko