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

Category: メディア＆コンシューマー 民生用電子機器。プレミアムな余白、SF Pro、シネマティックなイメージ。

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

Apple の Web 言語は、ギャラリーのような静けさと小売的な情報密度の高いブロックを交互に切り替える、精密なエディトリアルシステムです。ビジュアルのトーンは抑制的に保たれます。広大なニュートラルのキャンバス、控えめなクローム、そして表現上のウェイトをほぼすべて担う製品イメージ。インターフェースは姿を消すように設計されており、ハードウェア、素材、仕上げのオプションが物語の前景となります。

分析した 5 ページ全体を通して、リズムは一貫していますが一枚岩ではありません。マーケティング面（ホームページと Environment）はシネマティックな黒と光のチャプター構成を用い、コマース面（Store と Shop フロー）はより詰まった間隔、より多くのユーティリティコントロール、より密度の高いカードスタックを導入しつつ、ブランドの核となる文法を崩しません。その結果が、2 つのギアを持つ 1 つのシステム、すなわちショーケースモードとトランザクションモードです。

タイポグラフィが安定装置となります。SF Pro Display はコンパクトな行高と制御されたトラッキングでヒーローとマーチャンダイジングの階層を担い、SF Pro Text は製品メタデータ、ナビゲーション、フィルター、密度の高い選択 UI を扱います。タイポグラフィは控えめに保たれますが、スケールの範囲はビルボードのようなヒーローメッセージと極小のユーティリティラベルの両方を支えるのに十分なほど広くなっています。

主要な特徴:

• 二項対立のセクションリズム: 深い黒のシーン（#000000）と淡いニュートラルのフィールド（#f5f5f7）の交互
• アクションとリンクのセマンティクスのための単一のブルーアクセントファミリー（#0071e3、#0066cc、#2997ff）
• 1 つのシステムにおける 2 つの動作モード: シネマティックなショーケースモジュールと密度の高いコマースコンフィギュレーター
• イメージと素材仕上げへの強い依存。UI のクロームは視覚的に薄いまま
• 引き締まった見出しメトリクス（SF Pro Display、semibold）とコンパクトな本文／リンクのタイポグラフィ（SF Pro Text）の組み合わせ
• 署名的なアクション言語としてのピル＆カプセルのジオメトリ（18px から 980px、および円形コントロール）
• 奥行きは控えめに使用。コントラストとサーフェスの分離がレイヤリング作業の大半を担う
• 複数ページにわたるカラーブロックのリズム: 黒のヒーローチャプター -> 淡いニュートラルのマーチャンダイジングフィールド -> ユーティリティ的な白の小売サーフェス -> コントロール用のダークなマイクロサーフェス

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

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

プライマリー

• アブソリュートブラック (#000000): 没入型のヒーローキャンバス、ドラマ性の高い製品チャプター、深い UI アンカー。
• ペールアップルグレー (#f5f5f7): フィーチャーバンド、比較ブロック、エディトリアルの遷移のためのメインのライトサーフェス。
• ニアブラックインク (#1d1d1f): ライトキャンバス上のプライマリーテキストおよびダークフィルのコントロールカラー。

セカンダリー＆アクセント

• アップルアクションブルー (#0071e3): プライマリーアクションのフィルおよびフォーカスを示すブランドアクセント。
• ボディリンクブルー (#0066cc): 長文の可読性に最適化されたインラインリンクカラー。
• 高輝度リンクブルー (#2997ff): より強いコントラストが必要な暗いシーンでの明るいリンク処理。

サーフェス＆背景

• ピュアホワイトキャンバス (#ffffff): 小売／製品リストの背景および密度の高いトランザクションセクション。
• グラファイトサーフェス A (#272729): ダークカードおよびメディアコントロールのコンテキストレイヤー。
• グラファイトサーフェス B (#262629): コントロールのグルーピング用のやや深いダークなユーティリティレイヤー。
• グラファイトサーフェス C (#28282b): 持ち上げられたダークなサポートサーフェス。
• グラファイトサーフェス D (#2a2a2c): よりリッチなダークシーンでの分離に使用される、最も暗い持ち上げられたステップ。

ニュートラル＆テキスト

• セカンダリーニュートラルグレー (#6e6e73): 本文のセカンダリーコピー、ヘルパーの説明、ターシャリーのメタデータ。
• ソフトボーダーグレー (#d2d2d7): 区切り線、控えめなアウトライン、抑制されたユーティリティの囲い。
• ミッドボーダーグレー (#86868b): 製品構成およびフィルターのコンテキストにおけるより強いフィールドアウトライン。
• ユーティリティダークグレー (#424245): ストアのコンテキストにおけるダークニュートラルのテキスト／サーフェスのクロスオーバー。

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

• 選択／フォーカスシグナル (#0071e3): マーケティングとコマースのコンテキスト全体で共有されるフォーカスおよび選択状態のシグナル。
• エラー／警告／成功: 抽出されたサーフェスセットでは、一貫して見られる明確なセマンティックパレットはありませんでした。

グラデーションシステム

• 抽出されたページは圧倒的にソリッドサーフェス主導です。ビジュアルの豊かさは、持続的な UI グラデーションではなく、写真や仕上げのレンダリングから生まれます。

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

フォントファミリー

• ディスプレイファミリー: SF Pro Display、フォールバック SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• テキストファミリー: SF Pro Text、フォールバック SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
• 使い分け: ディスプレイファミリーはヒーロー／製品の見出しおよびマーチャンダイジングの見出しを扱い、テキストファミリーはナビゲーション、コントロール、ラベル、密度の高いコマースコピーを扱います。

階層

原則

• ページタイプを越えた連続性: 同じタイポグラフィの DNA がシネマティックなローンチと製品購入フローにまたがり、マーケティングとコマースの間のブランドの分裂を防ぎます。
• スケールにおける圧縮: ディスプレイ層は引き締まったレディングと制御されたトラッキングを用い、機械的かつ製品ファーストに感じさせます。
• 小売的な深さでの可読な密度: SF Pro Text はコンパクトさと、長い製品リストやオプションマトリクスのための十分な垂直リズムのバランスを取ります。
• 測定されたウェイトのはしご: 600 が支配的な強調ウェイトであり、700 は選択的に登場し、300 はより大きな行でのコントラストのために控えめに使用されます。

フォント代替に関する注記

• 最も近い自由に利用可能な代替: テキスト重視の実装には Inter、見出しには Inter Tight で近似した SF Pro Display-like メトリクス。
• 代替する際は、本文サイズで行高をわずかに増やし（+0.02 から +0.06）、可読性を保つために負のトラッキングの強度を減らします。

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

ボタン

• プライマリーフィルアクション: #0071e3 の背景、#ffffff のテキスト、8px の角丸、コンパクトな水平パディング（一般的に 8px 15px）。決定的な購入／進行アクションに使用。
• ダークフィルアクション: #1d1d1f の背景、#ffffff のテキスト、8px の角丸。ライトサーフェスが抑制された高コントラストのプライマリーを必要とするときに使用。
• ピル／カプセルアクションファミリー: 18px-56px の角丸の大きなカプセルアクションと、980px の極端なピルリンク。Apple のソフトながら精密な CTA のシルエットを確立。
• ユーティリティフィルター／ボタンシェル: 密度の高い構成コンテキストのための、控えめなグレーのボーダー（#d2d2d7 / #86868b）を持つライトシェル（#fafafc または半透明の白）。
• 押下時の挙動: アクティブなコントロールは一般的に、物理的な押下の確認を示すためにスケールを縮小したりフィルをわずかにシフトさせたりします。

カード＆コンテナ

• エディトリアル／製品カード: 最小限のフレーミングとイメージファーストの構成を持つ、#f5f5f7 または白のフィールド上のライトカード。
• ダークユーティリティカード: オーバーレイ、メディアコントロール、ダークコンテキストのモジュールに使用されるグラファイトのステップ（#272729 から #2a2a2c）。
• コンフィギュレーターパネル: 明確ながら抑制されたボーダー定義を持つ角丸コンテナ（多くの場合 12px-18px）。
• カルーセル／スポットライトモジュール: フィーチャーコンテンツのレーンのための、より大きな角丸シェル（28px-36px）。

入力＆フォーム

• 小売の入力フィールド: 半透明または白の背景、ダークテキスト（#1d1d1f）、ボーダー主導の囲い（#86868b）。
• 選択コントロール: 製品選択インターフェースでは、円形／トグルのようなコントロールジオメトリが頻繁に現れます。
• 密度の戦略: デバイスイメージと価格の階層を支配的に保つため、フォームフィールドは視覚的に静かなままに保たれます。

ナビゲーション

• グローバルマーケティングナビ: 小さな文字のリンクと抑制されたアイコノグラフィを持つ、コンパクトなダーク半透明バー。
• ストア／サブショップのナビレイヤー: カテゴリーや製品の絞り込みのための追加のユーティリティバー、チップ、セグメンテッドコントロール。
• リンク階層: ニュートラルなテキストが密度の高いナビゲーションセットを支える一方で、リンクのブルーが主要なインタラクティブシグナルであり続けます。

イメージ処理

• オブジェクトファースト写真: ハードウェアとアクセサリーが制御されたソリッドサーフェス上で前景化されます。
• 高忠実度の仕上げレンダリング: 反射的／素材的なディテールがビジュアルによる説得の中心です。
• 混合フレーミング: フルブリードのヒーローシーンが、角丸の小売カードや密にトリミングされたマーチャンダイジングのサムネイルと共存します。

その他の特徴的なコンポーネント

• 製品コンフィギュレーターマトリクス: チップ、ラジオ形式のコントロール、コンテキストに応じた価格／サマリーブロックを組み合わせたオプションスタックとセレクター。
• カルーセルコントロールのドット／矢印: ギャラリーの進行のための、抑制されたオーバーレイ内の円形コントロールの語彙。
• Environment ストーリーパネル: エディトリアルなタイポグラフィとシネマティックな製品／環境のビジュアルを融合した物語的なチャプター。

5. レイアウトの原則

スペーシングシステム

• 基本単位は実質的に 8px ですが、システムは精密な整列のための密度の高いマイクロステップをサポートします。
• ページ全体で頻繁に再利用されるスペーシング値: 2、4、6、7、8、9、10、12、14、17、20 px。
• マーケティングと小売の両フローで見られる普遍的なリズムの定数: コンポーネントのパディングとリストのスペーシングに 14-20px のユーティリティ間隔を伴う 8px 単位のスキャフォールディング。

グリッド＆コンテナ

• ショーケースページ: 広い水平方向の余白とフルワイドのカラーチャプターを持つ大きな中央カラム。
• コマースページ: 頻繁なモジュラースタッキングを伴う、より詰まったマルチカラムの製品およびコントロールグリッド。
• コンテナの挙動: デスクトップ幅では寛大な外側マージンを伴う、制約された可読なコア。

余白の哲学

• シーンのペーシング: 主要なビジュアルチャプターは広い上下の余白を使用します。
• 必要に応じた情報の圧縮: 小売ページは、ビューポートあたりのアクション可能な情報をより多く露出させるために、意図的にスペーシングを圧縮します。
• コントラスト主導の分離: セクションの遷移は、装飾的な区切り線よりもサーフェスの変化に依存します。

ボーダー半径のスケール

• 5px: 極小のユーティリティリンク／タグおよびマイナーな小さなシェル。
• 8px-12px: 標準的なコントロールおよびコンパクトなフィールド。
• 16px-18px: カード、モジュールフレーム、コマースパネル。
• 28px-36px: より大きなモジュールおよびスポットライトコンテナ。
• 56px / 100px / 980px: カプセル、大きなピル、署名的な細長い CTA フォーム。
• 50%: 円形のメディアおよび選択コントロール。

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

奥行きは意図的に抑制されています。Apple は、重厚なシャドウの積み重ねよりも、トーンのコントラスト、サーフェスのステッピング、構成上の階層を好みます。

装飾的な奥行き

• 装飾的な奥行きは主に、合成的な UI 効果ではなく、写真的なリアリズムと素材のレンダリングによって生み出されます。
• 半透明のオーバーレイとガラスのようなユーティリティバーが、ナビゲーションとコントロールに穏やかな雰囲気のレイヤリングを提供します。

7. すべきこと・すべきでないこと

すべきこと

• ニュートラルの三和音（#000000、#f5f5f7、#ffffff）を構造の基盤として使用する。
• ブルーのアクセントは真のアクションとナビゲーションのセマンティクスのために確保する。
• 特にディスプレイスケールで、タイポグラフィを引き締まった意図的なものに保つ。
• コントロールとキーアクションのためにカプセル／円のジオメトリ言語を維持する。
• 製品イメージにビジュアルのドラマを担わせ、クロームを控えめに保つ。
• 密度の高い小売コンテキストでは、重厚なカードの装飾の代わりにボーダー主導の囲いを使用する。
• ショーケースモジュールとトランザクションモジュールの間の明確な分離を保ちつつ、コアトークンは共有したままにする。

すべきでないこと

• Apple ブルーと競合する広範なセカンダリーアクセントパレットを導入しない。
• コアの UI クロームでシャドウ、グロー効果、装飾的なグラデーションを多用しない。
• 無関係なフォントファミリーを混ぜたり、無差別にトラッキングを緩めたりしない。
• すべての角を単一の半径に平坦化しない。Apple は目的を持った半径の層を使用する。
• コマースモジュールに太いボーダーや派手なビジュアル効果を詰め込みすぎない。
• ダークとライトのチャプター間のニュートラルなコントラストのケイデンスを取り除かない。
• マーケティングと購入フローを別々のデザインシステムとして扱わない。

8. レスポンシブ挙動

ブレークポイント

タッチターゲット

• プライマリーおよびセカンダリーアクションは、一般的にタップしやすいピル／ボタンのジオメトリで提示されます。
• 円形のメディアおよび選択コントロールは、モバイルコンテキストでの最小のタッチ可能な意図に揃えられています。
• 密度の高いコマース UI はコンパクトなラベルを使用しますが、周囲の形状パディングによって明確なヒット領域を維持します。

折りたたみ戦略

• マーケティングヒーローのタイポグラフィは、階層のコントラストを保ちながら離散的な層で縮小します。
• 製品およびコマースのグリッドは、セレクターの可視性を持続させながらマルチカラムからスタックされたカードへと折りたたまれます。
• ユーティリティナビゲーションは、キーアクションを保ちながらよりシンプルなリンク／コントロールのグルーピングへと圧縮されます。
• オプション／構成のクラスターは、小さな画面で購入フローを線形に保つために垂直に順序付けられます。

イメージの挙動

• 製品イメージはブレークポイントを通じてアスペクトと中心性を保ちます。
• ヒーローのビジュアルはモバイルでも支配的なままで、テキストはメディアの優先順位に合わせて再配置されます。
• 小売のサムネイルは、より引き締まったトリミングロジックとより密度の高いカードスタッキングによって判読可能なままに保たれます。
• イメージ主導のモジュールは、レイアウト密度が高まるにつれてリズムを固定し続けます。

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

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

• プライマリーアクションブルー: アップルアクションブルー (#0071e3)
• インラインリンクブルー: ボディリンクブルー (#0066cc)
• ダークチャプターキャンバス: アブソリュートブラック (#000000)
• ライトチャプターキャンバス: ペールアップルグレー (#f5f5f7)
• ライト上のプライマリーテキスト: ニアブラックインク (#1d1d1f)
• セカンダリーテキスト: セカンダリーニュートラルグレー (#6e6e73)
• 小売ボーダー（ソフト）: ソフトボーダーグレー (#d2d2d7)
• 小売ボーダー（ストロング）: ミッドボーダーグレー (#86868b)

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

• 「黒のキャンバス（#000000）上に Apple スタイルの製品ヒーローをデザインしてください。SF Pro Display の semibold 見出し（48-56px）、簡潔なサポートコピー、そして #0071e3 と #1d1d1f を使った 2 つのカプセル CTA を配置してください。」
• 「白（#ffffff）上にコマース構成パネルを作成してください。18px の角丸カード、#86868b のボーダーフィールド、SF Pro Text 17px の本文コピー、そしてコンパクトなオプションセレクターを使ってください。」
• 「#f5f5f7 と白のサーフェスを交互にしたマーチャンダイジングカードグリッドを構築してください。イメージファーストのカード、抑制されたシャドウ、そして 14-17px の SF Pro Text メタデータを使ってください。」
• 「円形ボタン（50% の半径）、抑制されたグレーのオーバーレイ、そしてギャラリーナビゲーションのための明確なアクティブフィードバックを使ったカルーセルコントロールのクラスターを生成してください。」
• 「マーケティング + 小売の混合ページリズムを構成してください: ダークなショーケースチャプター -> ライトなフィーチャーチャプター -> 密度の高い製品リストモジュール。ブルーのアクセントはアクションとリンクにのみ保ってください。」

イテレーションガイド

1. アクセントを調整する前に、まずニュートラルの基盤（#000000、#f5f5f7、#ffffff）を固定する。
2. ブルーのアクセントを希少で目的のあるものに保つ。すべてがブルーなら、階層は崩壊する。
3. この順序でタイポグラフィを調整する: ディスプレイスケール、本文の可読性、次にマイクロラベル。
4. 画一的な角丸ではなく、コンポーネントのクラス（フィールド、カード、カプセル、円）ごとに半径を合わせる。
5. ショーケースセクションからコマースセクションへ移行する際は、密度を徐々に高める。
6. 各リビジョンの後に、製品イメージが最も強いビジュアルレイヤーであり続けることを検証する。

既知のギャップ

• 明確なセマンティックステータスカラー（エラー／警告／成功）は、抽出されたページセットでは一貫して見られませんでした。
• 一部のインタラクションのマイクロステートはモジュールによって異なり、普遍的なシステムトークンとしては表現されていません。
• 一部の小売モジュールは、5 ページすべてにわたっては現れないコンテキスト固有のタイポグラフィのオーバーライドを露出しています。