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

Category: Eコマース・小売 アスレチックリテール。モノクロームUI、超大型アッパーケースタイポグラフィ、フルブリード写真。

1. ビジュアルテーマと世界観

Nike.com は躍動するリテールの大聖堂であり、スポーツの爆発的エネルギーをデジタルショッピング体験へと昇華させたサイトです。デザインの核にあるのは「徹底的なシンプリシティ」という原則——すべてをブラック・ホワイト・グレーに還元することで、アスレチック写真とプロダクトカラーが競合なく主役を張れる環境をつくります。その結果、ウェブサイトというよりも、高級誌の精度で組み上げたスポーツエディトリアルのような佇まいが生まれます。すべてのピクセルは商品を売るか、商品へと誘導するために存在しています。

「Podium CDS」（Nike社内のコアデザインシステム）は徹底的なモノクロームの基盤を築いています。UIはブラック（#111111）のテキストとホワイトのサーフェスの中に溶け込み、汗ばんだアスリート・空中に浮かぶシューズ・スタジアムのエネルギーといったヒーロー写真が感情的な重みを担います。UIにカラーが登場するのは、エラーを示すレッド・リンクのブルー・成功を示すグリーンといった機能的な場面にほぼ限られます。色のストーリーはプロダクト自身が語るのです。この抑制こそが視覚的パラドックスを生み出します——インターネット上で最もカラフルなページが最もミニマルに感じられるのは、すべての鮮やかさがインターフェースではなく商品から発せられているためです。

タイポグラフィシステムは Nike のビジュアルアイデンティティのもう半分を担います。Nike Futura ND——信じられないほどタイトなライン高（0.90）を持つカスタムの縮幅 Futura バリアント——による巨大なアッパーケースヘッドラインは、タイポグラフィの衝撃波のようにヒーロービジュアルを貫きます。ヘッドラインの下では、ワーキングホース的な Helvetica Now ファミリーがナビゲーションからプロダクト説明まで、スイス精度のクラリティをもって担います。表現力豊かなディスプレイ書体と機能的なボディ書体の分担は、Nike のブランドの二重性——インスピレーションと実行——を映し出しています。

主な特徴:

• プロダクト写真だけが唯一のカラーソースとなるモノクロームUI（ブラック・ホワイト・グレー）
• ヒーロー画像を貫く超大型アッパーケースディスプレイタイポグラフィ（96px、ライン高 0.90）
• ボーダーラジウスなし——画像があらゆる端を埋めるフルブリード写真
• 主要インタラクティブ要素としてのピル形ボタン（30px ラジウス）
• アスレチックな規律に基づく 8px スペーシンググリッド——すべての数値がシステムにスナップ
• 大型ナビゲーション画像カードによるカテゴリー主導のショッピングアーキテクチャ
• シャドウなし・ボーダー最小限のエレベーションモデル——グレーの変化のみでサーフェスを区別

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

プライマリ

• Nike Black (#111111): ファンデーション——プライマリテキスト、ボタン背景、ナビテキスト、ヒーローオーバーレイ。純粋なブラック（#000000）をあえて避けることで、わずかに柔らかい読書体験を提供
• Nike White (#FFFFFF): プライマリページキャンバス、ダーク上のボタンテキスト、カードサーフェス、ナビバー背景

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

• Snow (#FAFAFA): 最も明るいサーフェス、ホワイトに近いわずかな差別化（—podium-cds-color-grey-50）
• Light Gray (#F5F5F5): セカンダリ背景、検索インプット塗り、画像プレースホルダー、ローディングスケルトン（—podium-cds-color-grey-100）
• Hover Gray (#E5E5E5): ホバー状態の背景、無効ボタンの塗り（—podium-cds-color-grey-200）
• Dark Surface (#28282A): ダーク・反転セクションのプライマリ背景（—podium-cds-color-grey-800）
• Deep Charcoal (#1F1F21): インバース プライマリ背景、最も暗いノンブラックサーフェス（—podium-cds-color-grey-900）
• Dark Hover (#39393B): ダーク背景上のホバー状態（—podium-cds-color-grey-700）

ニュートラル・テキスト

• Primary Text (#111111): メインボディテキスト、ヘッディング、ナビリンク（—podium-cds-color-text-primary）
• Secondary Text (#707072): 説明コピー、メタデータ、タイムスタンプ、価格ラベル（—podium-cds-color-text-secondary）
• Disabled Text (#9E9EA0): 非アクティブ要素、利用不可オプション（—podium-cds-color-text-disabled）
• Disabled Inverse (#4B4B4D): ダーク背景上の無効テキスト（—podium-cds-color-text-disabled-inverse）
• Border Primary (#707072): 標準ボーダーカラー、セカンダリテキストと一致
• Border Secondary (#CACACB): 繊細なボーダー、インプットボーダー、区切り線（—podium-cds-color-grey-300）
• Border Disabled (#CACACB): 非アクティブなボーダー状態
• Border Active (#111111): アクティブ・フォーカスボーダー、プライマリテキストと一致

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

• Nike Red (#D30005): 重大エラー、セールバッジ、緊急通知（—podium-cds-color-red-600）
• Bright Red (#EE0005): Red-500、強調用のわずかに明るいレッド
• Nike Orange Badge (#D33918): バッジテキスト、プロモーションコールアウト（—podium-cds-color-text-badge）
• Orange Flash (#FF5000): 表現力豊かなオレンジアクセント（—podium-cds-color-orange-400）
• Success Green (#007D48): 確認、在庫あり、ポジティブな状態（—podium-cds-color-green-600）
• Success Inverse (#1EAA52): ダーク背景上の成功色（—podium-cds-color-green-500）
• Link Blue (#1151FF): テキストリンク、情報ハイライト（—podium-cds-color-blue-500）
• Info Inverse (#1190FF): ダーク背景上のリンク（—podium-cds-color-blue-400）
• Warning Yellow (#FEDF35): 警告背景、注意バナー（—podium-cds-color-yellow-200）
• Focus Ring (rgba(39, 93, 197, 1)): キーボードフォーカスインジケーターリング

拡張カラースペクトラム（Podium CDS）

各カラーランプはキャンペーンとプロダクトページでの表現用途のために 50〜900 の範囲で用意されています:

• Red: #FFE5E5 → #EE0005 → #530300
• Orange: #FFE2D6 → #FF5000 → #3E1009
• Yellow: #FEF087 → #FCA600 → #99470A
• Green: #DFFFB9 → #1EAA52 → #003C2A
• Teal: #D4FFFB → #008E98 → #043441
• Blue: #D6EEFF → #1151FF → #020664
• Purple: #E4E1FC → #6E0FF6 → #1C0060
• Pink: #FFE1F3 → #ED1AA0 → #4C012D

グラデーションシステム

NikeはUIグラデーションを避けています。グラデーションが登場する場合は写真的なもの——プロダクトヒーロー背景に適用されます（例: 赤いシューズを赤からより深い赤へのグラデーションの上に置く）。デザインシステム自体はフラットカラーのみで構成されています。

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

フォントファミリー

ディスプレイ: Nike Futura ND（Nike専用のカスタム縮幅 Futura バリアント）

• フォールバック: Helvetica Now Text Medium, Helvetica, Arial
• 大型アッパーケースディスプレイヘッドラインのみに使用
• 特徴的なタイトなライン高（0.90）とアッパーケース変換

ヘッディング: Helvetica Now Display Medium

• フォールバック: Helvetica, Arial
• 24〜32pxのセクション見出しとプロダクトタイトルに使用

Body Medium: Helvetica Now Text Medium（ウェイト 500）

• フォールバック: Helvetica, Arial
• リンク、ボタン、キャプション、強調ボディテキストに使用

Body: Helvetica Now Text（ウェイト 400）

• フォールバック: Helvetica, Arial
• 標準ボディコピー、説明文、メタデータに使用

アラビア語: Neue Frutiger Arabic——ロケール専用の代替書体

階層

原則

Nike のタイポグラフィはテンションの研究です。ディスプレイ層——0.90 という圧倒的なライン高を持つ 96px の Nike Futura ND——はスタジアムのスコアボードのように感じさせるよう設計されています。巨大で、凝縮されていて、アッパーケースで、無視できない。ヘッドラインを戦いの雄叫びへと変換します。ディスプレイ層の下では、Helvetica Now が臨床的な対極点を提供します——快適なプロダクトブラウジングのための 1.75 のゆったりしたライン高を持つスイス精度の可読性。ウェイト 500（Medium）がボディテキスト全体にわたって支配的で、Nike の文章にボールドの重さを持たせることなく、わずかな主張を与えます——すべての文が叫び声ではなく、自信に満ちた推薦として読まれます。

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

ボタン

プライマリ

• 背景: Nike Black (#111111)
• テキスト: White (#FFFFFF)、16px/500、Helvetica Now Text Medium
• ボーダー: なし
• ボーダーラジウス: 完全丸ピル（30px）
• パディング: ~12px 24px
• ホバー: 背景が Grey-500 (#707072) に変化、テキストホバーカラー
• アクティブ: 透明度 0.5 の scale(0) リップルエフェクト
• フォーカス: rgba(39, 93, 197, 1) の 2px ボックスシャドウリング
• トランジション: background 200ms ease

ダーク上のプライマリ

• 背景: White (#FFFFFF)
• テキスト: Black (#111111)
• ホバー: 背景が Grey-300 (#CACACB) に変化

セカンダリ（アウトライン）

• 背景: transparent
• テキスト: Nike Black (#111111)
• ボーダー: 1.5px solid #CACACB（grey-300）
• ボーダーラジウス: 30px
• ホバー: ボーダーが #707072 に濃くなり、背景が grey-200 に

無効

• 背景: Grey-200 (#E5E5E5)
• テキスト: Grey-400 (#9E9EA0)
• カーソル: not-allowed

アイコンボタン

• 背景: Grey-100 (#F5F5F5)
• 形状: 30px ラジウス（または円形の場合 50%）
• パディング: 6px
• ホバー: Grey-500 背景

カードとコンテナ

• 背景: White (#FFFFFF)——ほとんどの場合、カードの境界は見えない
• ボーダーラジウス: プロダクト画像カードは 0px（端から端まで画像）、インタラクティブコンテナは 20px
• シャドウ: なし——Nike はカードシャドウを一切使用しない
• ホバー: プロダクトカードにリフトエフェクトなし、カード内テキストリンクにはアンダーライン
• プロダクトカード: 上部に画像（ラジウスなし）、下に 12px ギャップでテキストメタデータ
• カテゴリカード: ダークグラデーション上にテキストオーバーレイのフルブリード写真
• トランジション: ホバー時の画像スワップに opacity 200ms ease

インプットとフォーム

• 背景: Grey-100 (#F5F5F5)
• ボーダー: 表示時は 1px solid #CACACB、検索ではボーダーレス
• ボーダーラジウス: 24px（検索インプット）、8px（フォームインプット）
• フォント: Helvetica Now Text、16px
• フォーカス: ボーダーが #111111（border-active）に変化、rgba(39, 93, 197, 1) の 2px フォーカスリング
• エラー: ボーダー #D30005（クリティカル）
• プレースホルダー: Grey-500 (#707072)
• トランジション: border-color 200ms ease

ナビゲーション

• 背景: White (#FFFFFF)、スティッキー
• 高さ: デスクトップ ~60px
• 左: Nike Swoosh ロゴ（24x24px SVG）
• 中央: カテゴリリンク（New & Featured、Men、Women、Kids、Sale）、16px/500 Helvetica Now Text Medium
• 右: 検索（24px ラジウスインプット）、お気に入り、カートアイコン
• ホバー: テキストカラーが Grey-500 (#707072) に変化
• モバイル: ハンバーガーメニュー、フルスクリーンオーバーレイ
• トップバナー: ダーク背景（#111111）とホワイトテキストのプロモーションメッセージバー

画像処理

• ヒーロー画像: フルブリード、ボーダーラジウスなし、端から端まで
• プロダクトグリッド: 正方形（1:1）または 4:3 アスペクト比、ボーダーラジウスなし
• カテゴリカード: 16:9 または 4:3、テキストオーバーレイのフルブリード
• 画像プレースホルダー: Grey-100 (#F5F5F5) のソリッド背景
• 遅延読み込み: ネイティブ loading=“lazy”、スケルトンは #F5F5F5 背景を使用
• プロダクトホバー: セカンダリ画像スワップ（フロントビュー → サイドビュー）

プロモーションバナー

• フルワイドのダーク（#111111）背景にホワイトテキスト
• タイトなパディング（縦 8〜12px）
• センタリングされたテキスト、12px/500 Helvetica Now Text Medium
• 送料プロモーション、メンバー特典、セール告知に使用

5. レイアウト原則

スペーシングシステム

基本単位: 4px（プライマリグリッドは 8px の倍数）

グリッドとコンテナ

• コンテナ最大幅: 1920px
• 標準コンテンツ幅: 水平パディングを持つ ~1440px
• プロダクトグリッド: デスクトップ 3カラム、タブレット 2カラム、モバイル 1カラム
• カテゴリグリッド: フルブリード画像の 3カラム
• グリッドギャップ: プロダクトカード間 4〜12px（意図的にタイト）
• 水平パディング: デスクトップ 48px、タブレット 24px、モバイル 16px

ホワイトスペース哲学

Nike のホワイトスペース戦略は意図的に積極的です——ファッションブランドのような贅沢で息をするやり方ではなく、すべてのピクセルをコンテンツまたは意図的な空白で満たすという圧縮・高密度な方法です。プロダクトグリッドは最小限のギャップ（4〜12px）を使って豊かさと選択肢の感覚を生み出します。セクション区切りは大きめ（48〜80px）でショッピングの文脈を区切ります。全体の効果は、商品で溢れながらもナビゲートしやすい店のような感覚——よく整理された大型スポーツ用品店のようです。

ボーダーラジウスのスケール

6. 奥行きとエレベーション

Nike のエレベーション哲学は徹底的にフラットです。カードシャドウなし、ホバーリフトなし、フローティング要素なし。奥行きはカラーのみで伝えられます——ダークセクションが後退し、ライトセクションが前進し、グレーの変化が状態変化を示します。このフラットさはアスレチックで実直なブランドパーソナリティを強化します——視覚的な装飾ゼロ、ダイレクトなコミュニケーションのみ。システム全体における唯一の「シャドウ」は 1px のインセット区切り線と、アクセシビリティ要件のフォーカスリングだけです。

デコラティブな奥行き

• ヒーロー写真オーバーレイ: テキスト可読性のためのフルブリード写真上のダークグラデーションスクリム
• プロダクト背景グラデーション: ヒーロープロダクトショット背後のカラー背景（例: 赤いシューズを赤いグラデーション上に）
• バナーバー: ページ上部のソリッドダーク（#111111）プロモーションストリップ

7. すべきこと・してはいけないこと

すべきこと

• プライマリテキストには Nike Black（#111111）を使用——純粋な #000000 は避ける
• ボタンはピル形（30px ラジウス）を維持し、プライマリ・セカンダリのバリアントのみに限定する
• ヒーローセクションにはフルブリード・端から端への写真を使用——画像にボーダーラジウスを付けない
• プロダクト写真がすべてのカラービビッドさを提供できるよう、UIはモノクロームに保つ
• Nike Futura ND のアッパーケースはディスプレイヘッドライン（96px以上）にのみ使用する
• 豊かさと選択肢の感覚を出すため、プロダクトグリッドのギャップをタイトに（4〜12px）保つ
• すべてのインプットとプレースホルダー背景には Grey-100（#F5F5F5）を使用する
• カラーはセマンティックな意味（赤=エラー、緑=成功、青=リンク）のみに予約する
• すべてのインタラクティブテキスト要素にはウェイト 500（Medium）を使用する

してはいけないこと

• カードにシャドウを追加しない——Nike のエレベーションモデルは完全にフラット
• プロダクト画像にボーダーラジウスを使用しない——丸い角はUI要素のみ
• UI要素のグレースケール以外にブランドカラーを導入しない
• Nike Futura ND を 24px 未満で使用しない——これはあくまでディスプレイ書体
• ホバーリフトエフェクトを追加しない——Nike のカードはホバー時にアニメーションしない
• ボタンやリンクに通常ウェイト（400）を使用しない——常に 500 を使用する
• UI要素の背後にカラー背景を置かない——カラーはプロダクトコンテキストのために予約されている
• カードあたりのテキスト階層を 2 レベル以上（タイトル+ボディ）にしない
• 装飾的な区切り線を追加しない——1px インセットが唯一の区切りパターン
• コントラストを柔らかくしない——Nike のデザインはブラックオンホワイトのコントラストを最大限に押し上げている

8. レスポンシブ挙動

ブレークポイント

タッチターゲット

• 最小タッチターゲット: 44x44px（WCAG AAA）
• モバイルナビアイコン: 48x48px タッチエリア
• プロダクトカード: サーフェス全体がタップ可能
• フィルターピル: 最小高さ 36px、12px パディング

折りたたみ戦略

• ナビゲーション: 960px 以下でフルカテゴリリンク → ハンバーガーメニュー、検索・お気に入り・カートアイコンは引き続き表示
• プロダクトグリッド: 3カラム → 960px で 2カラム → 640px で 1カラム
• ヒーローセクション: ディスプレイテキストが 96px → 64px → 48px にスケール、ヒーロー画像はすべてのサイズでフルブリードを維持
• カテゴリカード: 3カラム → 2カラム → 1カラム、フルブリード画像を維持
• セクションパディング: ビューポートが狭まるにつれ 80px → 48px → 32px → 24px
• プロモーションバナー: テキストが折り返しまたはトランケート、ダーク背景を維持

画像の挙動

• Nike CDN（c.static-nike.com）を通じた幅パラメーター付きレスポンシブ画像
• プロダクト画像: 複数の解像度による srcset（w_320、w_640、w_960、w_1920）
• ヒーロー画像: すべてのブレークポイントでフルブリード、アスペクト比がシフト（デスクトップ 16:9 → モバイル 4:3）
• 遅延読み込み: ネイティブ loading=“lazy”、読み込み中は grey-100 プレースホルダー
• アートディレクション: デスクトップとモバイルでヒーロークロップが変わる

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

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

• プライマリCTA: Nike Black (#111111)
• 背景: White (#FFFFFF)
• セカンダリサーフェス: Light Gray (#F5F5F5)
• 見出しテキスト: Nike Black (#111111)
• ボディテキスト・ホバー: Secondary Text (#707072)
• ボーダー: Border Secondary (#CACACB)
• エラー: Nike Red (#D30005)
• リンク: Link Blue (#1151FF)

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

• 「ボーダーラジウスなしの端から端へのフルブリード写真、テキスト用ダークグラデーションオーバーレイ、0.90 のライン高を持つ Nike Futura スタイルの 96px/500 の巨大アッパーケースヘッドライン、Nike Black（#111111）のピルボタン（30px ラジウス）を使ったプロダクトヒーローセクションを作成してください」
• 「正方形画像（ボーダーラジウスなし）、カード間 4px ギャップ、16px/500 Nike Black（#111111）のプロダクト名、14px/500 の価格、Grey-500（#707072）のセカンダリテキストを持つ 3カラムプロダクトカードグリッドをデザインしてください」
• 「左寄せのロゴ、16px/500（#111111）・ホバーカラー #707072 のセンタリングされたカテゴリリンク、右寄せの検索（24px ラジウス、#F5F5F5 背景）・お気に入り・カートアイコンを持つスティッキーなホワイトナビゲーションバーを構築してください」
• 「#111111 背景、ホワイトの 12px/500 センタリングテキスト、8px 縦パディング——フルワイド、ボーダーラジウスなしのプロモーションバナーストリップを作成してください」
• 「transparent 背景、1.5px #CACACB ボーダー、30px ピルラジウス、16px/500 #111111 テキスト、ホバー時にボーダーが #707072 に濃くなるセカンダリアウトラインボタンをデザインしてください」

改善ガイド

このデザインシステムで生成した既存の画面をブラッシュアップする際:

1. 一度に一つのコンポーネントに集中する
2. このドキュメントの具体的なカラー名と16進コードを参照する
3. プロダクト写真こそがカラー——UIはモノクロームに保つ
4. 状態変化にはグレースケールを使用する: #F5F5F5 → #E5E5E5 → #CACACB → #707072
5. UIで何か色が付きすぎていると感じたら、おそらくそうです——Nike は UIをグレースケールに保つ
6. ディスプレイタイプ（Nike Futura）は常にアッパーケースで、24px 未満には使わない
7. ボディタイプ（Helvetica Now）はインタラクティブ要素にはほぼ常にウェイト 500 を使用する