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最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Studio — 動くギャラリーの壁。それぞれのスクリーンは、静かで灰色の展示面を表しており、そこではタイポグラフィ素材と重なり合うクリエイティブな作品が、人々の注目を集めようと競い合っている。
- Mollie — カシミヤのカウンター、濃い色の帳簿。黒いテキストの周りには編集デザインのための十分な余白を残し、温かみのあるクリーム色やエスプレッソブラウン、実際の支払い方法の触覚的な写真を使って、製品関連のポイントを強調する。
- Basis Theory — デザインスタジオに設置された決済端末。白いテクニカルペーパー、重なり合う半透明のトランザクションレイヤー、そして単一のターコイズブルーの操作要素が、視覚的な方向性を決定づけている。
- CleanShot X — 青い照明で照らされたデスクトップを備えたスタジオ。コンパクトな黒いテキストの周りに落ち着いた白い空間を作り、鮮やかな青色のコントロールパネルと重ね合わせたMac製品の画像が主役となるように配置します。
- Modern Treasury — 方眼紙に書かれた財務台帳。静かで白い作業シートのようなページを作成し、そこにキャッシュフローを細い線、ラベル付きのノード、そして正確で隠されたコントロールで表示します。
- Basha-Franklin — 白いまぐさの下にギャラリーグリッドを配置します。温かみのある#f4ede6の色調、控えめな黒の構造、そして印刷された建築ポートフォリオのような写真に基づいた非対称の柱を使用します。
- Bajgart Office — 編集ギャラリーの壁面。控えめなセリフ体フォントやポートフォリオの断片が、クロムメッキのようなインターフェース要素よりも視覚的に強い印象を与える、広い白いスペースを活用しましょう。
- Heptabase — 陽光が差し込むデスク。温かみのある紙のような質感の表面、チャコールグレーのコントロールパネル、そして研究用の浮遊窓が、ソフトウェアの操作パネルというよりも、整理されたワークスペースという印象を与える。
- Bejamas — パジャマ――黒いガラスを通して見える酸性ライムグリーン。落ち着いた淡いグレーの編集ページを、ぼやけた緑色の光の筋が表面を横切る魅惑的な黒いパネルで区切る。
- Baba — 赤い太陽光をイメージしたケアノート。人物写真を感情的な中心として用い、白、ピンク、クリーム色の親密な情報面を囲むように、幅広の赤い物語性のあるストライプを配置する。
- Grafana Labs — サンライズ信号所の制御室。静かで落ち着いたグレーと白を基調とした作業空間に、幅広の4色グラデーションの水平線と、精緻な青色のインターフェース信号が組み合わされている。
- Kagi — 独立した読書室。大胆な鉛筆の文字を中心に、広々とした白い空間を作り出し、さりげない紫のアクセントと温かみのあるパステルカラーの表面を用いることで、静寂に変化をつける。