Nike
スポーツの偉業を収めたモノクロームのギャラリー――白い壁、芸術作品としての製品、背景に溶け込むクロム。
Nike.comは、モノクロームの製品優先ギャラリーとして機能します。ユーザーインターフェースはほぼ存在せず、すべての画面に製品写真が表示されます。インターフェース全体は黒、白、3種類のグレーで構成されており、アクセントカラー、装飾的なグラデーション、温かみのある特徴的なクロームは一切ありません。Nikeの特徴的なスタイルはギャラリーのロゴと写真に宿っており、ユーザーインターフェース自体にはありません。タイポグラフィはコンパクトで実用的で、カスタムデザインのHelvetica Nowフォントファミリーを12～20pxで使用し、見出しには76pxの特大のNike Futura NDロゴが1つだけ配置されています。コンポーネントはミニマルで、半径30pxのピル型のボタン、フラットな製品カード、細い境界線、高さの差はほとんどありません。ページは純白の製品表面と印象的なダークカラーの編集セクションが交互に表示され、装飾ではなくコントラストによってリズムを生み出しています。
このページは、力強い編集リズムに従っています。まず、1つの商品と大きなタイトルを特徴とする、印象的な全幅のダークヘッダーがあり、続いて全幅の2x2カテゴリグリッド、3列の商品カードの水平スクロールグリッド、そして最後に、密度の高い複数列のフッターが続きます。すべてのコンテンツブロックは、コンテナの最大幅なしでビューポートの全幅を占めます。最大幅の制限は、ナビゲーションとフッターのリンクグリッドにのみ適用されます。セクション間の遷移はシャープです。黒いヘッダー → 白いカテゴリグリッド → 白い商品グリッド → 白いフッター、唯一の視覚的な継ぎ目は細い灰色の境界線です。ナビゲーションは、ピン留め、背景の塗りつぶし、影のない、ミニマルな2段バー（補助リンクが上部、主要カテゴリが中央）です。コンテンツ密度は、商品グリッドではコンパクト（カード間隔が狭い）、ヘッダーではゆったりとしています（全幅ビューポート）。
写真は主要な視覚要素であり、ブランドのアイデンティティ全体を決定づけています。このシステムでは、高品質のフルフレーム製品写真を使用しています。アスレチックシューズは、暗い背景またはグラデーションの背景で個別に撮影され、フレームいっぱいにトリミングされ、ライフスタイルの文脈は含まれていません。ライフスタイル画像はカテゴリー内に表示され、アスリートの動きのある足と脚を紹介しています。コントラストが高く彩度の高い配色が使用されています。黒い背景に赤いシューズ、白いソールにネオンのアクセント、素材をドラマチックに見せるための暖色と寒色の照明などです。イラスト、抽象的なグラフィック、3Dレンダリングは使用されていません。画像は常にエッジがきれいで（写真コンテナの角は丸くありません）、ブロック内のスペース全体を占め、テキストオーバーレイは最小限です。アイコンは純粋に機能的で、検索、ウィッシュリスト、カート、アカウントのアイコンは、オブシディアンまたはスチールカラーのアウトラインアイコンです。
パレット
中性
- Obsidian
#111111— 濃い色は、ニュートラルなテキストやアイコンを引き立て、強いコントラストを生み出します。ただし、行動喚起のメインカラーとして使用することは避けてください。 - Paper White
#ffffff— ページ背景、カード表面、暗い背景上のボタンテキスト、アイコンのアウトラインなど、商品グリッドやカテゴリセクションのデフォルトのキャンバス。 - Concrete Gray
#e5e5e5— 境界線、区切り線、グリッドの各セクションを区切る細い線、入力フィールドの微妙な輪郭線。 - Soft Mist
#f5f5f5— 二次的な表面、ナビゲーションの検索フィールドの入力欄、タグの背景などに、控えめな背景色を使用します。 - Steel
#707072— 補助テキスト、控えめな補助テキスト、縮小されたアイコンの輪郭、パンくずリストのラベル、フッターのリンク区切り線。 - Faint Gray
#9e9ea0— アイコンの輪郭線、小さなUI要素、および最小限のハイライト表示が施された境界線は無効になっています。
タイポグラフィ
12～76ピクセル・6段階
- Helvetica Now Text Medium — 交換： Inter · 概要 500 · Helvetica Now Text Mediumフォント - スクレイピングされたデータには含まれているが、AIによって説明されていない。
- Helvetica Now Text — 交換： Inter or Helvetica Neue · 概要 400, 500 · ユーザーインターフェースの主要テキスト - ナビゲーションリンク、ボタンラベル、カードタイトル、商品名、フッターリスト、すべての本文テキスト。
- Helvetica Now Display Medium — 交換： Inter Medium or Helvetica Neue Medium · 概要 500 · セクションの見出し、カードのカテゴリラベル、中サイズの見出し - 中サイズのフォント (20～24px) は、大きなデザイン要素ではない Nike の見出しの特徴です。太字は使用せず、常に簡潔です。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8px |
| ボタンの半径 | 30px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 48px |
| ページ幅 | 1440px |
AI がNikeスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- Apple (España) — 白いギャラリー用ディスプレイケース
- Silencio — 白い部屋に、浮かぶようなオブジェが点在する。温かみのある紙で作られたギャラリー展示では、それぞれの要素が余白を背景にそれぞれの場所を占め、静寂は意図的なデザイン上の決定である。
- Oakâme — 陽光が降り注ぐ、温かみのある石を彫り出したプロヴァンス風の工房
- Arc — 真夜中の水面に浮かぶ工業用ホワイトギャラリー
- Rivian — ギャラリーのコンクリート壁にそびえ立つ、電気を帯びた巨大なモノリス。リビアンは、広大な白い空間を背景に、それぞれの車両を彫刻作品として展示している。巨大な文字は建築要素となり、単調な雰囲気を打ち破る温かみのある黄色が、まるでマットな表面に降り注ぐ太陽の光のようだ。
- Analogue — 黒いギャラリーのディスプレイケース – 商品が虚空に浮かぶ
- ddna — 未加工のリネンの上に置かれた、温かみのある博物館の展示ケース
- Zellerfeld — 白い大理石の彫刻家の工房――台座の一枚岩のような表面、一筋のコバルトの光、床から天井まで続く小文字のささやき
- UY Studio — 修道院の石造りの回廊は、コンクリートの壁に囲まれた静かな空間で、白い台座の上に香水瓶が並べられ、400ワットのランプ1つと温かみのある灰色の電球4つで照らされている。
- Basic.Space — 白い大理石のキュレーターギャラリー
- COS — 白い壁のおしゃれなギャラリー