Apple (España)
ほとんど聞こえないほどの小さな見出しが並ぶ、白い空間の大聖堂。広大で明るいホールには、700という巨大なフォントが空中に浮かび、パステルカラーと一本の青い糸だけでかろうじて繋ぎ止められている。
Appleの製品ページのデザインは、タイポグラフィの豊かさを体現している。オフホワイトの背景に巨大なSF Pro Displayの見出しが浮かび上がり、広大な余白に囲まれているため、どの単語も意図的に配置されているように感じられる。カラーパレットはほぼモノクロで、テキストは#1d1d1f、キャンバスは#ffffffと#f5f5f7が交互に使用され、インタラクティブな場面専用の青色アクセント（#0071e3）が1色だけ使われている。色は製品画像自体（パステル調）にのみ用いられ、装飾的なUI要素として使われることはない。コンポーネントはフレームレスで、半径28pxの丸みを帯びたカード、ページの端にほぼ接するピル型のボタンなど、コンテナやドロップシャドウは一切見られない。リズムは、区切り線や境界線ではなく、白とグレーのストライプを交互に配置することで生み出されている。
セクションはページの全幅を占め、十分なパディング（約 40〜100 辺）で端から端まで伸びています。コンテンツの最大幅は、各ストリップ内で効果的に中央に配置されます。メイン要素は中央に配置されたスタックで、眉毛型のラベル、拡大された見出し、単一のコールトゥアクションボタン、価格行、そしてビューポートの下部を埋める製品画像で構成されています。セクションは繰り返しパターンに従います。ストリップ内の左揃えの見出しに続き、製品説明を含む 2 列レイアウト (左にテキスト、右に画像、または交互に)、3 列のカードグリッド、または中央に配置されたビジュアルショーケースのいずれかが続きます。コンテンツのリズムは、100〜100 cm の垂直間隔を持つ白と 3 色の背景を交互に使用することで完全に制御されます。区切り線や要素を含むカードはありません。グローバルナビゲーションは、単一の固定バーです。製品仕様セクションでは、十分なパディングを備えた全幅のバンドを使用し、テキストはより広い視覚領域に対して狭い列 (約 560 ピクセル) で中央に配置されます。
Appleのビジュアル言語は、主に製品写真で構成されています。ライフスタイルの文脈や演出されたシーンはなく、純白またはカラーの背景に対してハードウェアのクローズアップが用いられています。メイン画像では、パステルグリーンのMacBook Neoを持つ手が写っています。人物は二次的な要素であり、感情よりもスケールと質感を表現しています。製品バリエーションのセクションでは、2つのデバイスが同じトリムカラー（ピンク、グリーン、シルバー、スカイブルー）の背景に並べて表示され、各カードは製品が中央に配置された単色のフィールドになっています。ディテールショットでは、ニュートラルな背景に対して極端なクローズアップ（ラップトップのヒンジ、カメラモジュールなど）が使用されています。イラストも抽象的なグラフィックも装飾的な画像もなく、製品そのものがビジュアル要素となっています。アイコンは至る所にあり、Appleシステムアイコンセットから取られた、SF Symbolsスタイルのモノクロの線画アイコン（太さ1.5～2ピクセル）が使用されています。写真は常にハイキーで撮影されており、均一で影のない照明によって、製品は3次元の物体ではなくグラフィックの形態に還元されています。
パレット
ブランド
- Electric Blue
#0071e3— 塗りつぶされたアクションボタンは、UIにおける唯一の色のアクセントであり、行動喚起のために控えめに使用されている。 - Link Blue
#0066cc— インラインテキストリンク、矢印とシェブロン付きリンク。 - Citrus Gradient
#3b3b23— この製品の特長となっているもう一つの仕上げは、ダークなベースカラーから黄緑色のハイライトへとグラデーションしていくものです。
中性
- Primary Ink
#1d1d1f— 見出し、本文、ボタンのラベルは、すべての表面において主要な前景の色調となっています。メインの商品画像の背景は、上部の単色の#1d1d1fから、鮮やかな青色へと滑らかに変化します。 - Mid Gray
#707070— 二次テキスト、非アクティブなナビゲーション状態、ミュートされたUIラベル - Deep Gray
#474747— ナビゲーションのテキストとアイコンは中程度のフォントサイズです。 - Hairline
#d6d6d6— セクション間およびUI要素間の境界線が薄い。 - Canvas
#f5f5f7— 交互に変化するセクションの背景色 - 白い部分を区切る灰色のストライプ。 - Paper
#ffffff— カード表面、メインページの背景、暗い背景にボタンのテキスト。
タイポグラフィ
12～96ピクセル・10段階
- SF Pro Display — 交換： Inter · 概要 600, 700 · 表示用のヒーロー見出しとサブ見出し — 700の太さで80～96px、文字間隔を-1.44pxに設定すると、Appleの特徴である「白地に浮かぶ巨大な見出し」が生まれます。代替フォント: Inter、system-ui
- SF Pro Display — 交換： Inter · 概要 600 · セクションの見出し、カードのタイトル、小見出しなどには、600ポイントのフォントを使用し、文字間隔をやや広めに設定すると、中程度のサイズでは、上記の短い見出しとは異なり、温かみと親しみやすさが感じられます。
- SF Pro Text — 交換： Inter · 概要 400, 500, 600 · 本文、ナビゲーション、補足段落、および短いキャプションには、インデックス400、17ピクセルのフォントをメインフォントとして使用します。文字間隔を狭くすることで、情報量の多いページでも本文をより簡潔に記述できます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-10px |
| ボタンの半径 | 980px |
| カード半径 | 28px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 100-120px |
| ページ幅 | 1200px |
AI がApple (España)スタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- AYOCIN — 健康を象徴する太陽のトーテム。温かみのある室内写真のようなスクリーンを創り出す。荘厳な書体、柔らかくぼかされた建築物の影、そして穏やかで柔らかな空間に置かれた、光り輝く一つのオブジェ。
- AXEL ARIGATO — 『アクセル・アリガト』は、飾らない都会の風景を捉えた写真集です。ページは、白い編集用フィールドと、丁寧にトリミングされた社会的に意義のあるファッション写真が連続して配置され、その間に簡潔な黒いキャプションが散りばめられています。
- Bose — 海岸沿いの撮影スタジオ。風になびく広告画像が画面いっぱいに広がり、その周囲には、まるで精密なディテールのように、鮮明な白黒のキャンペーン管理ツールが配置されている。
- AVNIER — AVNYEは夜間の撮影場所だ。コントロールルームの黒い映像の中に、白い制作サインとくっきりとしたグリッド線が浮かび上がっている。
- Bauhaus Clock — バウハウスにインスパイアされた時計 ― ターコイズブルーの機械式発光。落ち着いた明るい表面を、暗く映画のような時計のイメージで縁取り、ターコイズブルーを希少な発光ディテールとして用いる。
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- Peak Design — ギャラリーの壁、部分的に照明付き
- Ramp — 編集部の財務部門。白黒のページに、たった一本のネオンカラーのマーカー。ほぼモノクロームの誌面において、鮮やかなライムグリーンの線一本が、あらゆるやり取りを金銭的なシグナルへと変える。
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- Orderful — 産業物流管理デッキ - 黒インクと外科用赤色で印刷された物流ディスパッチャーのチェックリスト。各ページは、オペレーターが重要なことを大声で叫ぶことができるほど目立たないデザインになっている。
- Apple (España) — 白いギャラリー用ディスプレイケース
- teenage engineering — スタジオ照明の工業カタログでは、製品がページ上で唯一の重要な対象物であり、その他すべてはその製品を中心に説明されている。