Bang & Olufsen
磁器に描かれた北欧ギャラリー。B&Oのページが暗いときは、作品がライトアップされ、まるで真夜中の小部屋にある彫刻のようです。ライトアップされると、作品は白い絹の上に浮かんでいるように見え、他に何ものも作品の美しさを邪魔するものはありません。
Bang & Olufsenは、ギャラリーや美術館のようなコンセプトで製品を展開しています。ほぼ白の磁器のキャンバスの上に、彫刻作品のように製品が浮かび上がり、時折、画面全体に広がる鮮やかな色彩のインサートが挿入され、感情的なアクセントを加えます。画面全体を覆う深いウルトラマリンバイオレットや、時には深みのあるテラコッタレッドなどがその例です。タイポグラフィは、カスタムデザインされたネオグロテスク書体（BeoSupreme）のみで、それ自体が雄弁に語りかけます。大きな画面ではほとんど目立たず、マイクロラベルには大文字がふんだんに使われており、他の書体は必要ありません。コンポーネントは最小限に抑えられています。半透明のピル型のコントロール、細い境界線、装飾的な影、グラデーションボタン、アイコンはありません。グリッドはゆったりとしており、余白は贅沢な空間です。各製品にはそれぞれ浮遊する台座が与えられ、周囲の白は空間となっています。色は貴重な素材のように配置され、現れると画面全体を占めます。
最大幅1440pxのコンテナは中央に配置され、両端に25pxの水平マージンがあります。ヒーロー要素はページ全体の幅を占め（コンテナを分割）、ウルトラマリン色のカメラは端から端まで広がっています。商品グリッドは4～5列に均等に配置され、25pxの間隔があり、モバイルデバイスでは水平方向にスクロールします。セクションは白い背景と全幅のカラーカメラが交互に表示されます。リズムは次のようになります。白い商品グリッド → ウルトラマリン色のヒーロー要素 → 白い商品グリッド → 鮮やかな赤の編集バナー → 白い商品グリッド → ウルトラマリン色のフッター。ナビゲーションは、白とカラーのセクションの上に浮かぶミニマルなトップバーです（テキストは暗い背景に白で反転表示されます）。ページは「呼吸」しており、セクション間の間隔は60～80pxで、個々の商品はセル内に独自のスペースを持ち、情報密度は高くありません。
商品写真が唯一の視覚要素です。ライフスタイル画像、モデル、環境コンテキストは一切ありません。商品は、素材（マットアルミニウム、レザーの質感、陽極酸化銅、マットシリコン）を際立たせるように制御されたスタジオ照明を使用して、純粋にニュートラルな背景（白、黒、グラデーションの濃い青）で撮影されます。トリミングはタイトで中央に配置され、メインの被写体が強調されます。色の表現は控えめで、素材にふさわしいものです。銅は「ゴールデンアワー」ではなく、銅として認識されます。二次的な視覚的モチーフには、ドラマチックな編集の瞬間のために、豊かなモノクロの平面（ウルトラマリン、テラコッタレッド）を背景にした、まばらなフルスクリーンの商品シルエットが含まれます。アイコン：細い1ピクセルの線、モノクロの白地に黒または暗い背景に白、幾何学的、塗りつぶしなし、マルチカラーなし。
パレット
ブランド
- Ultramarine Velvet
#060daa— ページの上部と下部の背景画像、ページ幅全体に広がる印象的なセクション、そしてフッターの塗りつぶし――フレーム全体を覆い尽くし、一つの製品に演劇的な雰囲気を与える、濃厚でほぼ黒に近い青紫の色。
中性
- Porcelain Canvas
#ffffff— ページ背景画像、商品カードのデザイン、ナビゲーションバーは、あらゆる製品が構築される上での基本的な基盤です。 - Bone
#fcfaee— 温かみのあるニュートラルな色調のブロックを配置するための二次的な表面、暗い背景にボタンのテキストを配置するための表面、白が無機質に感じられる場合の代替キャンバス。 - Obsidian
#191817— メインテキストと商品説明文は、白地の背景に純粋な#000000よりも柔らかく見える、温かみのある、ほぼ黒に近い色です。 - Pure Ink
#000000— アイコンの輪郭、マイクロタグ、繊細な境界線、そして最も鮮明なテキストコントラスト。 - Graphite
#555555— 二次テキスト、メタデータ、価格タグ、無音の補助テキスト - Mist
#e5e5e5— 入力データの境界が薄く、システム内で唯一の構造的な分離要素となっている。
タイポグラフィ
12～36ピクセル・5段階
- BeoSupreme — 交換： Neue Haas Grotesk Display Pro (closest) · 概要 400, 500, 700 · ブランドアイデンティティ全体を反映する単一のフォント。タイトルと見出しには、500～700のウェイト、24～36px、文字間隔を狭く（-0.056em → -0.014em）して、自信に満ちた簡潔な見出しを作成します。本文とUIには、400のウェイト、14～16px、通常の文字間隔、行間隔1.5～1.7を使用します。マイクロラベル（ナビゲーション、アイコン、「Founded in 1925」のスローガン）には、500のウェイト、9～12px、文字間隔を最大+0.143emまで広くし、目立たない建築注釈として使用するためにすべて大文字で表示します。他に競合するフォントはありません。
- object-fit: cover; object-position: center; — 交換： Inter · 概要 400 · object-fit: cover; object-position: center; - 抽出されたデータには存在するが、AI によって説明されていない。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-16px |
| ボタンの半径 | 40px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 60-80px |
| ページ幅 | 1440px |
AI がBang & Olufsenスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Apple (España) — オブシディアン・ギャラリーの展示室は薄暗い展示ホールで、そこにチタン製のオブジェが一つだけ、漆黒の背景に浮かび上がって光っている。
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- Custo — ガンメタルカラーのギャラリーに、巨大なフォントが配されている。落ち着いたグレーグリーンのトーンで統一されたショールームには、たった一つの暗いオブジェと57ピクセルのフォントが、それ自体で雄弁に語りかけてくる。
- Apple (España) — ホワイトミュージアムギャラリーの正午
- VITURE — 真夜中のガラス越しにネオンサインで商品を紹介する――薄暗いショールームに、一本のオレンジ色の光線が闇を切り裂き、台の上に置かれた一対の眼鏡を照らし出す。
- HNST Studio — 錆びたリネン生地が使われた居心地の良いスタジオは、スローファッションのギャラリーであり、クリーム色とチャコールグレーを基調とした修道院のような内装に、焦げ茶色のアクセントが温かみを添えている。
- OFFFICE : — 巨大なフォントに覆われたノワールギャラリー
- ARTU — 白い紙に描かれたギャラリーのような壁。ARTUは、鑑賞スペースをまるで美術館の展示のように扱い、大型の製品写真、さりげないマーキング、そして構図を完成させる下部のライムのアクセントを巧みに取り入れている。
- Specht Studio — 控えめな好奇心を掻き立てるギャラリーの壁。スタジオ独自のクロム仕上げは、白い表面に黒い文字があしらわれ、視覚的なインパクトはすべて、このプロジェクトのタイルワークの中に凝縮されている。
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。