Apple
白い部屋に青いスイッチが一つだけ
Appleのデザインは抑制の極みと言えるでしょう。ほぼ真っ白なキャンバス、十分な余白、そして鮮やかなブルーのアクセントが、あらゆる動作に意図的な印象を与えます。主眼はタイポグラフィにあり、SF Proフォントを採用。文字間隔はサイズが大きくなるにつれて狭くなり、見出しに重苦しさを感じさせない建築的な明快さを与えています。製品そのものがデザインの中心であり、大きな製品写真やライフスタイル画像が画面を支配し、クロームの要素は細いフレーム、半透明のナビゲーション、そして繊細なラインの中に溶け込んでいます。各セクションは、ライトグレーの背景にフルカラーのブロックを配し、プロモーション素材を配置することで、装飾的な要素ではなくスケールの変化によってリズムを生み出しています。
ページレイアウトは、コンテナの最大幅が固定されていない全幅ページで、セクションは端から端まで伸び、テキストブロックは中央に約980pxで配置されます。ナビゲーションは、スクロール時に表示される各製品用のサブフォルダを備えた、単一の固定グローバルバーです。メインレイアウトは常に中央に配置され、大きな製品名、1行のタグライン、2つのピルボタン、そして残りのビューポートを埋める製品画像が表示されます。セクションは、#f5f5f7とカラーの背景を交互に使用し、十分な垂直リズム（セクション間64px以上）で垂直方向に積み重ねられています。ページ下部は、全幅のサービスカード（Apple TV+、Fitness+、Music、Arcade）が水平方向に1列に並び、それぞれがオーバーレイテキストとピルボタンが付いた写真ブロックです。サイドバーも、複数列のコンテンツレイアウトも、非対称な構成もありません。すべてが中央に配置され、積み重ねられ、対称的です。
写真が主要な視覚言語です。製品写真は、背景が白または淡いグレーで、文脈は一切なく、デバイスそのものが主役として際立ち、明るく照らされています。ライフスタイル写真は、多くの場合、被写体をタイトにトリミングしたフル幅のバナーで表示されます。カラーグラデーション（パステルブルー、ピンク、グリーン）は、装飾ではなく、製品セクションの背景として使用されます。アイコンはミニマルで線ベース、太さは1～2ピクセル、テキストと同じグレースケールです。製品写真以外には、イラスト、抽象的なグラフィック、3Dレンダリングは一切使用されていません。
パレット
ブランド
- Apple Blue
#0071e3— 塗りつぶされたアクションボタン、選択された状態 ― 唯一のインタラクティブな有色色は、それぞれの表示が意味を持つように控えめに使用される。 - Link Blue
#0066cc— 強調表示されたアクションの境界線、埋め込まれたリンクなど、タブレット全体を塗りつぶすと派手になりすぎる箇所には、アップルブルーよりも彩度の高い色が使用されています。 - Signal Blue
#2997ff— 装飾フレーム、画像の輪郭、アイコンの境界線など、システム内で最も薄い青色が使用され、ユーザーとのインタラクションではなく、雰囲気作りに用いられています。
中性
- Carbon
#1d1d1f— 本文、見出しの枠線、ナビゲーションライン、カードの枠線など、主なインクの色は、わずかに温かみのある、ほぼ黒に近い色です。 - Frost
#f5f5f7— ページキャンバス、メインテキストの背景、フッターの表面は、Appleの特徴であるライトグレーで、純白よりもややクールな色合いです。 - Ice
#f4f8fb— 表情豊かな表面の塗りつぶし、繊細な色合い、暗い背景にボタンのテキスト――目立たせることなくセクションを活気づける、控えめな青色。 - Smoke
#333333— 補助テキスト、ナビゲーションの塗りつぶし、ボタンの枠線 - 中程度のグレーよりもインパクトのある枠線やアイコンに適した、汎用性の高いニュートラルカラー。 - Graphite
#474747— ナビゲーションテキスト、ナビゲーション境界線、リンク境界線 - 要素階層において、CarbonとSmokeの中間の位置を占めます。 - Ash
#707070— フッターテキスト、リストの枠線、ナビゲーションの枠線、控えめな本文テキスト - 表示する必要はあるが目立たせたくないコンテンツには、中程度のグレーを使用します。
タイポグラフィ
12～56ピクセル・8段階
- SF Pro Display — 交換： Inter · 概要 400, 600, 700 · 見出しや大きなテキスト（40ピクセル以上）は、より狭い開口部とより強いネガティブトラッキングを実現するディスプレイフォーマットを使用します。700ピクセルは広告レイアウト用に予約されており、400ピクセルは編集コンテンツ内の商品名用に予約されています。
- SF Pro Text — 交換： Inter · 概要 300, 400, 600 · 本文、ナビゲーション、ボタン、小見出し — 作業用フォント。本文は400、小見出しと修飾ラベルは300、ナビゲーション要素とボタンテキストは600。文字間隔はサイズに比例して減少します（-0.022emから12px、-0.01emから44px）。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 12px |
| ボタンの半径 | 980px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1440px |
AI がAppleスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Ui — マット紙に印刷された臨床計画
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- monopo saigon — 編集部の沈黙の背後にある、液体のような虹色の輝き――溶けた光の上に浮かぶモノクロの編集ギャラリー
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- Dub — リンクのマットな和紙製コントロールパネル
- Seline Analytics — 温かい紙の上に静かに置かれた分析表
- Ventriloc — 温かみのある紙にデータを蓄積した編集上の観測所――単色の精緻さを際立たせるオレンジ色の燃えさし一つ
- Duolingo — 白い紙に描かれた、遊び心のあるクラスのマスコット
- Stripe — すりガラスに藍色のインクで書かれた帳簿
- Notion — 真昼の太陽の下、温かい紙のノート
- Hyer Aviation — 夕暮れ時のコックピット、羊皮紙の上。淡い夜明けの空が機体サイズのセリフ体ロゴと出会い、温かみのある粘土色のアクセントが単色の抑制を打ち破る。