Shopify にインスパイアされたデザインシステム

Category: Eコマース＆小売 Eコマースプラットフォーム。ダークファーストのシネマティック、ネオングリーンのアクセント、超細字のタイポグラフィ。

1. ビジュアルテーマと雰囲気

Shopify.com はダークファーストのデジタルシアター——コマースプラットフォームを映画のプレミア上映のように演出するウェブサイトです。体験全体は、深い森の緑のかすかな囁きを帯びたほぼ黒い表面（#02090A、#061A1C、#102620）の上に展開され、SaaS のマーケティングページというより、テックカンファレンスでの限定製品発表のような夜の雰囲気を生み出しています。この暗さは冷たくも企業的でもなく——暗いホールの最前列に座っているような、ラグジュアリー体験の温かく包み込む暗さです。

タイポグラフィは紛れもなく主役です。NeueHaasGrotesk——洗練された Helvetica の後継——は記念碑的なスケール（96px）で、信じられないほど細いウェイト（330-400）で登場し、インクで印刷されたのではなく光で刻まれたような見出しを生み出します。ss03 OpenType 機能が字形に独特な個性を与え、Shopify のタイポグラフィを一般的な Helvetica の使い方から区別しています。ディスプレイ層の下では、Inter Variable が外科的な精度でボディテキストを処理し、同様に珍しい可変ウェイト（420、450、550）を使用します——これらは従来のウェイトストップの間の空間に存在します。この精密さは、すべての細部にこだわる企業のシグナルです。

カラーは極度の節制を持って使われています。メインアクセントは Shopify ネオングリーン（#36F4A4）——電気的なミントカラーで、フォーカスリングとアクセントハイライトにのみ現れ、暗いキャンバスに対して生物発光のシグナルのように脈打ちます。よりソフトなグリーンティント（アロエ #C1FBD4、ピスタチオ #D4F9E0）が雰囲気のウォッシュを提供します。白は暗い表面で唯一重要なテキストカラーで、亜鉛ベースのニュートラルスケール（#A1A1AA から #3F3F46）が静かな情報の階層を処理します。結果として、コマーステクノロジーがSFの未来に属するように感じさせるデザインが生まれます。

Key Characteristics：

• 深い森のティールアンダートーンを持つダークファーストデザイン（純粋な黒ではない）
• 記念碑的なスケール（96px）の超細ディスプレイタイポグラフィ（ウェイト 330）が幽玄な存在感を生む
• 暗闇に対する唯一の高エネルギーアクセントとしてのネオングリーン（#36F4A4）
• メインのインタラクティブシェイプとしてのフルピルボタン（9999px 半径）
• 写真的な奥行きを生み出す多層のボックスシャドウ
• 暗いUIコンテキストに埋め込まれ、周囲の暗さに溶け込む製品スクリーンショット
• テキスト階層のための亜鉛ベースのニュートラルスケール——ウォームとクールのバランス

2. カラーパレットと役割

プライマリ

• Shopify ホワイト（#FFFFFF）：暗い表面のプライマリテキスト、ボタンフィル、高コントラスト要素
• Shopify ブラック（#000000）：ボディ背景、白ボタン上のテキスト、最大コントラストベース（—color-shade-100）

セカンダリ＆アクセント

• ネオングリーン（#36F4A4）：シグネチャーアクセント——フォーカスリング、インタラクティブハイライト、アクティブ状態インジケーター。電気的で生物発光的
• アロエ（#C1FBD4）：デコラティブ背景、雰囲気カードのソフトグリーンウォッシュ（—color-aloe-10）
• ピスタチオ（#D4F9E0）：微妙な表面差別化のための最もライトなグリーンティント（—color-pistachio-10）

サーフェス＆バックグラウンド

• ボイド（#000000）：ルートページ背景——最大深度のための真の黒
• ディープティール（#02090A）：カードサーフェス、コンテンツコンテナ——緑のアンダートーンを持つほぼ黒
• ダークフォレスト（#061A1C）：明確な緑の個性を持つセクション背景
• フォレスト（#102620）：浮き上がった暗い表面、ヘッダー背景——最も温かい暗いシェード
• ダークカードボーダー（#1E2C31）：暗い表面のカードボーダー、微妙な境界定義

ニュートラル＆テキスト（亜鉛スケール）

• Shade-30（#D4D4D8）：最も明るいニュートラル、暗い場所でほとんど見えないボーダー（—color-shade-30）
• ミュートテキスト（#A1A1AA）：セカンダリテキスト、メタデータ、説明——静かな声
• Shade-50（#71717A）：ターシャリテキスト、タイムスタンプ、最も重要度の低い情報（—color-shade-50）
• Shade-60（#52525B）：無効テキスト、デコラティブニュートラル（—color-shade-60）
• Shade-70（#3F3F46）：微妙なディバイダー、ほぼ見えないUI境界（—color-shade-70）
• ライトボーダー（#E4E4E7）：明るい表面のボーダー（レア——ライトモードのモーダルのみ）

セマンティック＆アクセント

• Link Muted（#9797A2）：下線装飾を持つミュートリンクテキスト
• Link Sage（#9DABAD）：ティールティントのミュートリンク
• Link Lavender（#BDBDCA）：より明るいリンクバリアント
• Link Mint（#99B3AD）：テーマセクション用グリーンティントリンクバリアント

グラデーションシステム

• ダークティールウォッシュ：#102620 中心から #02090A エッジへのラジアルグラデーション——製品ショーケースの背後に使用
• グリーンアトモスフェリック：ヒーローセクションの背後の微妙なグリーンティントの環境グラデーション、ソリッドカラーなしで奥行きを生む
• スポットライト：黒へとフェードする集中した明るいエリア——基調講演スタイルのプレゼンテーション照明を生む

3. タイポグラフィルール

フォントファミリー

ディスプレイ： NeueHaasGrotesk（洗練された Helvetica の後継、可変フォント）

• フォールバック：Helvetica、Arial、sans-serif
• OpenType 機能：ss03（スタイリスティックセット 3——独特の字形代替）
• 利用可能なウェイト：330、360、400、500、750（可変）
• すべての見出し、ヒーローテキスト、大型ディスプレイ要素に使用

ボディ： Inter-Variable

• フォールバック：Helvetica、Arial、sans-serif
• OpenType 機能：ss03
• 利用可能なウェイト：400、420、450、500、550（可変）
• ボディテキスト、リンク、ボタン、UI要素に使用

モノ： ui-monospace

• フォールバック：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
• コードスニペット、データラベル、技術的コンテンツに使用

階層

原則

Shopify のタイポグラフィは可変フォントの精度における傑作です。ディスプレイ層はほぼ完全にウェイト 330-400 で構成されています——投影された光のように暗い背景の上に浮かんでいるような、羽のように軽いテキストです。これはほとんどの SaaS サイトが取る太くて重いアプローチとは正反対です：他のサイトが叫ぶところで、Shopify はスケールの上で囁きます。ウェイト 330 での 96px の見出しは、巨大なサイズと繊細なストロークの逆説を生み出し——記念碑的でありながら繊細に感じさせます。ss03 OpenType 機能は、特定の文字（おそらく ‘a’、‘g’、および特定の数字）をより洗練された外観にするスタイリスティックセットを有効にし、Shopify のタイポグラフィを標準的な Helvetica Neue の使い方から区別します。Inter Variable はボディ層を外科的な精度で処理し、従来のストップの間に存在する 420 や 550 などのウェイトを使用します——すべてのテキストが必要とする正確な視覚的ウェイトを持ちます。

4. コンポーネントスタイリング

ボタン

プライマリ（ホワイトフィル）

• 背景：ホワイト（#FFFFFF）
• テキスト：ブラック（#000000）
• ボーダー：2px solid transparent
• ボーダー半径：フルピル（9999px）
• パディング：12px 26px 12px 16px（非対称——視覚的バランスのため右パディングを多く）
• ホバー：わずかな不透明度の低下または背景のシフト
• フォーカス：2px #36F4A4（ネオングリーン）のアウトラインリング
• トランジション：all 200ms ease

セカンダリ（ゴースト/アウトライン）

• 背景：透明
• テキスト：ホワイト（#FFFFFF）
• ボーダー：2px solid ホワイト（#FFFFFF）
• ボーダー半径：フルピル（9999px）
• パディング：12px 26px 12px 16px
• ホバー：ブラックテキストのホワイト背景にフィル
• フォーカス：2px #36F4A4 アウトライン

バッジ/タグ（ニュートラルフィル）

• 背景：rgba(255, 255, 255, 0.2)（フロストガラス）
• テキスト：ホワイト（#FFFFFF）
• ボーダー：なし
• ボーダー半径：わずかに丸い（4px）
• パディング：12px 16px
• フォント：16px レギュラー

カード＆コンテナ

• 背景：暗いページではディープティール（#02090A）
• ボーダー：1px solid #1E2C31（ダークカードボーダー）——ほぼ見えない境界
• ボーダー半径：標準カード 8px、フィーチャードカード 12px、上部丸みカード 20px 20px 0 0
• シャドウ：多層システム：
  • 静止：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
  • インセットの白いハイライトが微妙な上縁のグローを生む
• ホバー：シャドウが広がり、カードがわずかに明るくなることがある
• トランジション：box-shadow 300ms ease、transform 200ms ease

インプット＆フォーム

• 背景：透明またはダークフォレスト（#061A1C）
• テキスト：ホワイト（#FFFFFF）
• ボーダー：1px solid #3F3F46（Shade-70）
• ボーダー半径：8px
• パディング：12px 16px
• フォーカス：2px solid #36F4A4（ネオングリーンフォーカスリング）
• プレースホルダー：Shade-50（#71717A）
• トランジション：border-color 200ms ease

ナビゲーション

• 背景：透明（暗いヒーローに重ねる）、スクロール時にフォレスト（#102620）になる
• 高さ：約 64px
• 左：Shopify ワードマークロゴ（SVG、暗い背景に白）
• 中央/右：18px/500 NeueHaasGrotesk のナビリンク、白、文字間隔 0.72px
• CTA：ホワイトピルボタン「Start for free」（右）
• セカンダリ CTA：ホワイトボーダーのゴーストボタン
• ホバー：リンクがミュートテキスト（#A1A1AA）に変化またはアンダーラインが付く
• モバイル：ハンバーガーメニュー、フルスクリーンダークオーバーレイ
• トランジション：スクロール時に背景 300ms ease

画像処理

• 製品スクリーンショット：暗いUIコンテキストに埋め込まれ、周囲の暗さに溶け込む
• 管理インターフェースプレビュー：微妙なカードボーダーを持つ暗い背景に表示
• アスペクト比：多様——ヒーロー画像はワイド（16:9 程度）、フィーチャーショットはフレキシブル
• すべての画像は暗いコンテナ内にフラッシュで配置——明るいボーダーやフレームなし
• 暗いプレースホルダーサーフェスを持つ遅延読み込み

信頼指標

• 統計を目立つように表示：「15+」（年）、「150M+」（バイヤー）
• NeueHaasGrotesk でディスプレイスケールで表示される数字
• パートナー/デベロッパーエコシステムのコールアウトセクション
• ページフローに統合されたダークテーマのテスティモニアル

5. レイアウト原則

スペーシングシステム

基本単位：8px

グリッド＆コンテナ

• 最大コンテナ幅：約 1280px（中央揃え）
• ヒーロー：全幅、エッジからエッジの暗い背景に中央揃えテキスト
• フィーチャーセクション：テキストと製品スクリーンショットの2カラムレイアウト
• 統計セクション：大きな数字を持つ水平レイアウト
• 水平パディング：デスクトップ 64px、タブレット 32px、モバイル 16px
• グリッドギャップ：主要コンテンツブロック間 24-32px

ホワイトスペース哲学

Shopify のホワイトスペース戦略はシアトリカルです。セクションは広大な暗いスペースで区切られています——80px から 120px の純粋な黒い呼吸空間——ウェブページではなくプレゼンテーションのテンポを生み出します。各コンテンツブロックは基調講演スタイルのスクロールの中で独自の「スライド」です。セクション内では、スペーシングはよりタイトで意図的で、広大な虚空に対してフォーカルデンシティを生み出します。マクロレベルの空白とミクロレベルの精度のコントラストが、サイトにそのシネマティックなカデンスを与えています。

ボーダー半径スケール

6. 深度と高度

Shopify のシャドウシステムは異常なほど洗練されています。単一値シャドウの代わりに、カードは積み重なった多層アプローチを使用します：境界定義のための 1px リング、自然な光の減衰のための 2px/4px/8px のプログレッシブブラー、そして上部照明のガラス表面をシミュレートする繊細なインセットホワイトグロー（rgba(255,255,255,0.03)）。暗い背景では、シャドウはすでに暗い表面からさらに暗くなるため、シャドウは従来の高度よりも「アンビエントオクルージョン」として機能します——カードは上に浮かんでいるのではなく、表面にわずかに沈み込んでいるように見えます。

デコラティブな深度

• ダークティールグラデーション：ヒーローセクションと製品ショーケースの背後のアンビエントラジアルウォッシュ
• スポットライト効果：黒へとフェードする明るい中心エリア、基調講演スタイルのシアトリカルな照明を生む
• エッジグロー：インセットボックスシャドウによる暗いカード上の微妙な明るい色のエッジ
• グリーンアトモスフェリックヘイロー：ブランドアクセントを反響させるバックグラウンドグラデーションの微かなグリーンティント

7. やるべきこととやってはいけないこと

やるべきこと

• 深度のためにダークティール-ブラックのサーフェス階層（ボイド → ディープティール → ダークフォレスト → フォレスト）を使用する
• ディスプレイタイポグラフィをウェイト 330-400 に保つ——幽玄な軽さがデザインのシグネチャー
• ネオングリーン（#36F4A4）をフォーカス状態とクリティカルアクセントハイライトのみに使用する
• すべてのプライマリ CTA ボタンに 9999px 半径を適用する——フルピルは譲れない
• カードの高度に多層シャドウシステムを使用する——単一シャドウはフラットに見える
• すべてのテキストで ss03 OpenType 機能を維持する——タイポグラフィアイデンティティの一部
• ボディテキストに Inter Variable、見出しに NeueHaasGrotesk を使用する——役割を混在させない
• シネマティックなペーシングのためにセクション間に劇的なスペーシング（80px+）を作る

やってはいけないこと

• 暗い背景のテキストに純粋な黒（#000000）を使用しない——白（#FFFFFF）のみを使用する
• 暖色（オレンジ、赤、黄色）を導入しない——パレットは厳密にクール（グリーン、ティール、ニュートラル）
• NeueHaasGrotesk のボディテキストに 500 以上のフォントウェイトを使用しない——重いウェイトは幽玄な感覚を壊す
• 大きな表面にグリーンアクセントを適用しない——ネオングリーンは小さく精密なハイライトのみ
• インタラクティブ要素にシャープなコーナー（0px 半径）を使用しない——すべてを丸める
• 明るい背景を追加しない——ダークテーマは根本的なもので、オプションではない
• 単一層のボックスシャドウを使用しない——積み重ねたアプローチがシステム
• ボディテキストの行高を 1.56 以上に設定しない——Shopify のテキストは比較的コンパクト
• 同じサイズ/役割で NeueHaasGrotesk と Inter を混在させない——ウェイトスケールが異なる
• 見出しに 0 以下のレタースペーシングを使用しない——Shopify の見出しはニュートラルまたはポジティブなトラッキング

8. レスポンシブ動作

ブレークポイント

タッチターゲット

• 最小タッチターゲット：44x44px（WCAG AAA）
• ピルボタン：最低 48px の高さと余裕のある水平パディング
• ナビリンク：44px のタッチエリア
• カードサーフェス：リンクされている場合、カード全体がタップ可能

折り畳み戦略

• ナビゲーション：全水平リンク → 1024px 以下でハンバーガーメニュー；ロゴと CTA ボタンは表示を維持
• ヒーローセクション：96px ディスプレイ → タブレットで 70px → モバイルで 48px；シングルカラム中央揃えを維持
• フィーチャーセクション：テキスト+画像の2カラム → 768px 以下でスタックシングルカラム
• 統計：水平行 → モバイルで垂直スタック
• セクションパディング：ビューポートが狭まるにつれ 64px → 40px → 24px → 16px
• カード：グリッド → スタック、モバイルでフル幅を維持

画像の動作

• 製品スクリーンショット：暗いコンテナ内でレスポンシブ、アスペクト比を維持
• ヒーロー画像：すべてのブレークポイントで全幅、暗いプレースホルダーで遅延読み込み
• 管理UIプレビュー：比例してスケール、モバイルでクロップされる場合がある
• すべての画像は CDN（cdn.shopify.com）とレスポンシブ srcset を使用

9. エージェントプロンプトガイド

クイックカラーリファレンス

• プライマリ CTA：Shopify ホワイト（#FFFFFF）
• ページ背景：ボイドブラック（#000000）
• カードサーフェス：ディープティール（#02090A）
• セクション背景：ダークフォレスト（#061A1C）
• 浮き上がった背景：フォレスト（#102620）
• アクセント：ネオングリーン（#36F4A4）
• ボディテキスト：ホワイト（#FFFFFF）
• ミュートテキスト：ミュート（#A1A1AA）
• ダークボーダー：ダークカードボーダー（#1E2C31）

コンポーネントプロンプト例

• 「真の黒（#000000）背景に、96px/330 NeueHaasGrotesk の白い見出し、20px/500 の #A1A1AA サブタイトル、2つのピルボタン（ホワイトフィル 9999px 半径 と 2px ホワイトボーダーのゴースト）を持つヒーローセクションを作成してください」
• 「ディープティール（#02090A）の上に、1px #1E2C31 ボーダー、12px 半径、多層シャドウ（1px リング + 2px/4px/8px ブラー、10% ブラック）を持ち、32px/360 の白い見出しと 18px/400 の #A1A1AA ボディテキストを含むフィーチャーカードをデザインしてください」
• 「ダークフォレスト（#061A1C）の上に、96px/750 の白い数字（NeueHaasGrotesk）、16px/400 の #A1A1AA 説明ラベル、統計ブロック間に 64px の余裕あるスペーシングを持つ統計セクションを構築してください」
• 「透明な背景（スクロール時に #102620 になる）、左に白い Shopify ロゴ、18px/500 の白いナビリンク（0.72px 文字間隔）、右に白いピル「Start for free」ボタンを持つスティッキーナビを作成してください」
• 「rgba(255,255,255,0.2) のフロストガラス背景、4px 半径、12px 16px パディング、16px の白いテキストを持つタグ/バッジをデザインしてください——暗いカードサーフェスの上に浮かんでいます」

イテレーションガイド

このデザインシステムで生成された既存の画面を改善する際：

1. 一度に 1 つのコンポーネントに集中する
2. このドキュメントの具体的な色名と16進コードを参照する
3. 覚えておいてください：これはダークファーストデザイン——明るい表面は例外であり、ルールではない
4. ディスプレイテキストは常に羽のように軽く感じさせる（ウェイト 330-400）——重く見える場合はウェイトを下げる
5. ネオングリーン（#36F4A4）は貴重——フォーカスとアクセントのみに控えめに使用する
6. ダークサーフェス階層（ブラック → ディープティール → ダークフォレスト → フォレスト）が微妙な深度を生む
7. シャドウは多層——単一の box-shadow 値では Shopify カードの感覚を再現できない
8. ss03 OpenType 機能はタイポグラフィの一貫性のためすべてのテキストで有効にする必要がある