Shop
白い大理石の上に浮かぶ交易の星座
オンラインストアは「ホワイトキャンバス」モデルを採用しており、商品はサムネイルのグリッドではなく、大きく湾曲した画像カードとして表示されます。インターフェース全体は非常に滑らかで、20～28pxの半径、ピル型のコントロール、そしてテキストを鮮明かつ太字にするタイトなネガティブトラッキングを備えたコンパクトな16px GT Standardボディが特徴です。システムで唯一大胆なアクセントとして使われているのは、鮮やかな紫（#5433eb）で、ロゴ、円形の検索結果フィールド、そして同じボタンの影に使用されています。その他のパレットは温かみのあるニュートラルカラーで、白い表面、控えめなクールグレーのキャンバス、控えめな境界線、そしてほぼ黒のテキストで構成されています。12pxのガターで密度はコンパクトに保たれていますが、ヒーローとカテゴリのストライプは64～80pxのゆったりとした垂直リズムのおかげでゆとりがあり、カタログを見るというよりはブラウジングに近い感覚でショッピングを楽しめます。
最大幅は 1200px で、半透明の #f2f4f5 キャンバスの中央に配置され、左側にはナビゲーション アイコンのみを含む 64px 幅のサイドバーが常時表示されます。メイン要素は全幅のストリップで、中央の紫色の「ショップ」ロゴの上に商品カードが配置され、そのすぐ下にピル型の検索バーがあります。カテゴリピルは、検索バーの下に中央揃えで 1 行に配置されます。コンテンツ セクション (女性、男性、美容、ホーム、ベビー＆キッズ) は、それぞれに商品画像を含む 4 列のグリッド、または「メイン要素とグリッド」の 2 列構成のストリップとして続くように指定されています。垂直方向のリズムはゆったりとしており、メイン セクション間の間隔は 64～80px です。フッターは、ページ下部の暗いストリップで、列型のリンク グループがあります。水平方向の商品パネルの右側にあるカルーセル矢印は、ページネーション ポイントのないスクロール可能なコンテンツを示しています。
写真が主要な視覚要素となっています。白い背景に1:1にトリミングされたフルスクリーンの商品写真と、温かみのあるアースカラー（ベージュ、テラコッタ、セージ、アイボリー）のライフスタイル画像が使用されています。商品画像には独自のカラーが設定されており、ユーザーインターフェースは無彩色のままなので、商品の色合いが視覚的な変化を生み出しています。ブランドロゴは、個別のアイコンではなく、暗いまたは明るいメイン画像の上にオーバーレイテキストとして表示されます。メイン構成では、商品カードがワードマークの上にわずかに重なり合うように配置されています。アイコンは、カテゴリアイコンを除いてミニマルでモノクロ（黒の輪郭線）ですが、カテゴリアイコンには単一のブランドカラーが使用されています。商品画像にはイラスト、3D効果、グラデーションは使用されていません。
パレット
ブランド
- Shop Violet
#5433eb— 送信ボタン、点線のテキストマーク、そしてブランドロゴだけが、白い背景の中でアクションと個性を際立たせるアクセントとなっている。 - Violet Wash
#c0b5f3— 紫色の送信ボタンの背後には、色合いを変えることなく輝きを保つ半透明の光輪がある。
中性
- Canvas Mist
#f2f4f5— ページ背景と、浮き彫りカードの裏面に追加の表面加工を施したもの。 - Pure White
#ffffff— カード、入力フィールド、フローティングサイン、錠剤型ボタンなどを配置するメイン画面。 - Ink Black
#000000— 本文、見出し、アイコン、ナビゲーション記号、および商品カードがダークモードで表示されます。 - Faint Border
#ebebeb— カード上の細い区切り線、入力フィールドの輪郭、そして錠剤型のボタンフレーム。 - Muted Gray
#787574— 非アクティブ時の補助テキスト、ナビゲーションラベル、アイコンのアウトライン - Cool Stone
#cccccc— プレースホルダー、無効化状態、および非アクティブなアイコンの背景
タイポグラフィ
11～16ピクセル・4段階
- GT Standard — 交換： Inter · 概要 400 · すべてのサイズでメインフォントとして使用されるのは、本文と見出しの両方に共通するGTStandard-MRegular（16px/-0.031em）です。本文、ボタン、ラベルのメインフォントはGTStandard-MRegular（20px/-0.05em）です。大きな見出しにはGTStandard-MSemibold（20px/-0.05em）が、マイクロキャプションにはGTStandard-MMedium（11～12px）が使用されます。各フォントの視覚的な重みは400で表示され、フォントの階層構造は、大胆なコントラストではなく、微妙なグラデーションと密なネガティブスペースによって実現されています。これはShopの特徴的なスタイルです。Shopは太字フォントで主張するのではなく、文字間隔によってテキストを形作ります。
- Shopify Sans — 交換： Inter · 概要 400, 700 · アプリの読み込みバナーやCookie同意テキストなど、システムレベルのメッセージ用に予約されています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 12px |
| ボタンの半径 | 9999px |
| カード半径 | 28px |
| 影 | 柔らかな影 |
| セクション間 | 64px |
| ページ幅 | 1200px |
AI がShopスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Cursor — くすぶる炭火に照らされた、居心地の良い羊皮紙工房
- Slush — パステルカラーの紙に貼られた、膨らませるステッカーの世界
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- Superr — 午後の柔らかな光に照らされた、温かみのあるノート。クリーム色のページ、キャップのないオレンジ色のマーカー、そして剥がされるのを待つラミネート加工された名前シールの束。
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Lamborghini — ショールームのスポットライトの下に展示された黒いボディカラーの車と、黄色い車が1台。
- Amplemarket — 紙吹雪が散りばめられた、陽光あふれる職場
- Getharvest — 夕暮れ時の机――温かみのあるクリーム色のキャンバス、キャンバスに掛けられた白いポストカード、そして一つの明るいオレンジ色の炎
- Agence Foudre — 雑誌の表紙は、口紅を思わせる淡いピンク色だ。
- Drive Capital — 温かみのある紙に印刷されたレトロなロードトリップポスター
- Apple (España) — 白いギャラリー用ディスプレイケース