Shopify
ミッドナイト・グリーンハウス - 深いターコイズブルーの背景に、ミントの炎が一つ灯り、商標が咲き誇る
Shopifyのデザインシステムは、コマースのための深夜の工房と言えるでしょう。ほぼ黒に近いキャンバスに、深みのあるターコイズグリーンが色付けされ、幅広で自信に満ちたサンセリフ体フォント、そしてインタラクティブな瞬間を活性化させる鮮やかなミントグリーンのアクセントが配されています。インターフェースは暗室を彷彿とさせ、商品やブランドが光源となります。写真やストアフロントはほぼ黒に近い表面を背景に輝き、クロームの要素は奥に引っ込みます。コンポーネントは幾何学的でありながら柔らかな印象を与えます。12pxの半径を持つカードには細い境界線があり、ピル型のボタン、そしてスケール感をささやくような330ウェイトのフォントが使われています。リンク、タグ、フォーカス状態には、単一の色付き句読点（#36f4a4）が控えめに使用され、色は機能的な瞬間にのみ使用されることで、販売者のストーリーが視覚的な焦点であり続けるように配慮されています。
最大幅は約 1280 ピクセルで中央揃え、写真コンテナを超えて広がる全幅のスプラッシュ ブロックがあります。ページのリズムは、(1) オーバーレイされた見出しとコール トゥ アクション ボタンを備えた全幅の暗いスプラッシュ ページ、(2) 2 列の最大幅のテキストと画像ブロック、または 3 列の画像グリッドを備えた快適な暗いセクション、(3) より深いキャンバス上に隆起したカードとして表示されるインタラクティブなショーケース パネル (製品カード、送料計算ツール、世界地図) が交互に表示されます。ナビゲーションは、ロゴ + 3 つのナビゲーション要素 + セカンダリ リンク + プライマリ コール トゥ アクション ボタンがすべて右揃えになった固定のトップ バーです。垂直方向のリズムは、セクション間に 80 ピクセルの間隔を使用し、滑らかな遷移で、暗いセクション間には区切り線はなく、表面のトーンが変化するだけです。
ビジュアルデザインは主に小売業者に焦点を当てており、フルサイズの製品写真やブランドイベントの写真が視覚的な要素の大部分を占め、多くの場合、大きな背景に白いテキストが重ねられています。画像はタイトにトリミングされ、コントラストが高く、祝祭的な雰囲気（ナスダックの鐘の音、グループでの挨拶、手に持った製品のクローズアップなど）を醸し出しています。暗い背景は、これらの写真がスポットライトで照らされているような印象を与えます。イラストはミニマルで、主な説明は埋め込まれた製品画像と店舗のスクリーンショットによって行われます。アイコンはモノクロで、線幅は1.5～2ピクセル、アクティブ状態の場合は通常白または#36f4a4です。
パレット
ブランド
- Shopify Mint
#36f4a4— アクティブなナビゲーションインジケーター、フォーカスリング、タグのハイライト表示、リンク上のホバーハイライト表示は、暗い背景に対してインタラクティブな操作が有効になっているという感覚を生み出す唯一の色彩的な輝きです。
中性
- Midnight Forest
#02090a— ページキャンバス、ヘッダーの背景画像、セクションの背景画像 - Deep Lichen
#061a1c— メインカードの表面、隆起パネル、コンテンツブロック。 - Shaded Fern
#072720— ナビゲーションパネル、追加カード、パネルのわずかな隆起。 - Spruce Border
#1e2c31— カード、区切り線、入力フィールドの枠線などに使用できる細い境界線。 - Abyss Indigo
#000a1e— 製品やデモンストレーションを埋め込むための追加面、機能説明パネル。 - Pure White
#ffffff— メインテキスト、ボタンの塗りつぶし、タイトル、ロゴ。
タイポグラフィ
12～70ピクセル・8段階
- Neue Haas Grotesk — 交換： Inter · 概要 330, 400, 500, 550, 600 · コアとなるタイポグラフィシステムは、見出しに70～96px（330～400）のフォントウェイトを使用し、派手さよりも控えめさを重視しています。本文は16～18px（400～500）、ナビゲーションとユーザーインターフェースは14～16px（500～550）のフォントウェイトを使用しています。大画面では330という極細のフォントウェイトを採用しており、ボリューム感ではなく抑制された表現で自信を伝えています。
- Inter Variable — 交換： Inter · 概要 400, 420, 450, 550 · ナビゲーションインターフェース要素、小さな注釈、タブコントロール、フッターのマイクロテキストなどに使用される補助的なフォントタイプです。小文字がやや大きく、文字間隔も標準的なため、コンパクトなサイズでも読みやすくなっています。また、標準フォントと中サイズフォントの中間的なサイズとして、420ウェイトのフォントが適している場合もあります。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 12px |
| ボタンの半径 | 9999px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1280px |
AI がShopifyスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Retool — 温かみのある黒曜石の工房――精密工具を置くための作業台であり、くすぶる残り火に照らされ、あらゆるものが生み出される場所。
- Elektron — 真夜中の機器操作パネルはほぼ真っ黒なキャンバスで、製品写真が鮮やかに映える一方で、インターフェースはほとんど見えない。
- REKKI — 写真ラボの飛行制御パネル
- OFFFICE : — 巨大なフォントに覆われたノワールギャラリー
- Clyde — ショールームは、たった一つのスポットライトが灯る、ほとんど真っ暗なギャラリーで、部屋の中で唯一色づいているのは、温かみのあるグラデーションの球体だけだ。
- Channel Studio — サンゴ色のランプシェードが1つ置かれたスタジオ写真ラボ
- Electronic Materials Office — 木炭で装飾されたギャラリーに燃える燃えさし
- ORYZO AI — 暗室をテーマにしたフォトエッセイ。温かい暗闇の中に浮かぶ孤独な物体、唯一の装飾はクリーム色のフォント。
- Factory — 真夜中の「作戦室」の端末。「工場」は、懐中電灯で照らされた指令書のように一枚の白いカードが置かれる、殺風景な黒い制御盤だ。部屋にある唯一の物体は、仕事そのものだけだ。
- Hungry Tiger — タンドールの壁には、ターメリックのように鮮やかな落書きが描かれている。金と錆びた茶色を基調とした統一感のある配色で、文字があまりにも大きいため、ウェブサイトというよりはスパイス市場の看板のように見える。
- Bibliothèque — スポットライトに照らされた黒い立方体型のギャラリー――広大な暗いホールにぽつんと置かれた、光り輝く一枚のプレート。
- Apple (España) — 照明器具を備えた黒い劇場