Peak Design
ギャラリーの壁、部分的に照明付き
Peak Designは、ギャラリー品質の商業体験を提供します。ほぼモノクロのキャンバス上で、編集用タイポグラフィと製品写真がすべてを担います。システムは、鮮明な白い表面と深みのあるほぼ黒のパネルを交互に配置し、印象的な分割レイアウトを作り出します。片側にはイタリック体のセリフ体見出しが、もう片側にはフルスクリーンの製品またはライフスタイル画像が配置されます。タイポグラフィはブランドの核となる声です。見出しには背が高く、凝縮された装飾的なセリフ体（Exposureスタイル）が、ユーザーインターフェースにはニュートラルなグロテスク体（Geist）が、文字、眉毛、ボタンには凝縮されたサンセリフ体（bryant）が使用されています。インターフェースはクリーンなままです。色付きのUI要素、装飾的なグラデーション、影はなく、控えめな境界線、2つの角丸（4と8）、そして強調のために時折使用される単一の赤いアクセントのみです。構成要素は装飾的というよりはむしろ考え抜かれたもののように見える。薄い仕切り、平らな商品カード、錠剤型のフィルター、そして建築的な注釈のような目立たないボタンなどだ。
ページの全幅セクションは白とほぼ黒が交互に表示されます。各セクションはビューポートの幅全体を占め、セクションレベルでの最大幅制限はありません。セクション内のコンテンツの最大幅は約1440pxで、中央に配置されます。メインのヘッダーパターンは50/50の分割で、片側にテキストブロック（ブラウジング＋見出し＋サブテキスト＋ボタン）、もう片側に全幅の製品またはライフスタイル画像が表示されます。スクロールしないと見えない部分では、製品グリッドは幅が等しい4列の製品カードを使用し、24～32pxの十分なガターがあります。カテゴリフィルターパネルは、メインナビゲーションのすぐ下に「ピル」の横一列に配置されます。セクションのリズムは、セクション間に80pxの垂直方向のインデントを設けた明暗のストライプを交互に配置することで定義され、編集雑誌のようなリズムを生み出しています。ナビゲーションは固定のトップバーで、その上に細い広告ストリップがあります。
ビジュアル言語は製品写真が中心で、バッグ、ベルト、カメラ機材などが日常生活の文脈を一切排除した純白の背景で撮影され、照明によって素材の質感やハードウェアのディテールが強調されています。日常的な画像は、全画面表示の編集セクション（例えば、カメラを持った手が円を描いている写真など）にのみ登場し、分割パネルの片側のビューポートの幅全体を占めます。メイン画像には角丸がなく（端と面一）、カード画像にも角丸はありません。イラスト、抽象的なグラフィック、機能的なUIアイコン以外のアイコンイラストは一切ありません。焦点は製品そのもの――一貫したアングル、一貫した照明、一貫した白い背景で撮影されたスタジオ品質の写真――であり、UIは背景に溶け込み、オブジェクト自体が語りかけるようになっています。
パレット
中性
- Carbon Ink
#1a211e— 本文、暗いサイドバー、本文、アイコン、明るい表面上のフレーム - 各見出しのベースとなるほぼ黒色の色が、分割されたセクションの暗い背景パネルを形成します。 - Paper White
#ffffff— 目立たない背景を作り出し、セクションを区切るための、軽い支持面です。行動喚起のメインカラーとして使用すべきではありません。 - True Black
#000000— コントラストが最大限に高い要素（白い背景にヘッダーを塗りつぶす、お知らせバー、フッターのデザイン、実線のアイコンの輪郭など）は、デザイン上最も明確な線が必要な場所に配置されます。 - Obsidian
#0c0c0c— 深みのあるパネル表面と画像オーバーレイ - 真の黒よりもやや柔らかく、画面全体を占める暗い領域に使用され、しっかりとした感触でありながら、フラットブラックのようにきつい感じがしないようにする必要があります。 - Fog
#eef1f0— 目立たない背景を作り出し、セクションを区切るための、軽い支持面です。行動喚起のメインカラーとして使用すべきではありません。 - Mist
#e0e0e0— 区切り線、無効化された状態、微妙な構造的区切り線――白いキャンバス上の各セクションの境界を定義する、中程度の明るさのグレーの色。
タイポグラフィ
14～80ピクセル・6段階
- Geist — 交換： Inter · 概要 400, 600, 700 · 本文、商品名、説明文、フォーム入力欄、リンクテキスト、フッターコンテンツ。フォントウェイトは、本文が400、強調表示が600、商品名と重要なインライン注釈が700です。ニュートラルなGrotesqueフォントを使用することで、Display SerifフォントとCondensed Sansフォントがブランドスタイルを反映できる一方、Geistフォントは機能性と読みやすさを提供します。
- Exposure-style serif (Exposure-10) — 交換： Playfair Display · 概要 400 · 見出しと主要見出し。イタリック体のセリフ体フォントで、単一のウェイト（400）を使用することで、編集上の権威を醸し出します。これらの単語はブランドのトーンを設定するものであり、ページ幅全体に広がる濃い色のパネルや主要セクションの冒頭に控えめに使用されます。文字間隔を狭く（-0.025em）することで、大きな文字が軽薄に見えず、抑制された印象を与えます。
- Bryant-style condensed sans (bryant) — 交換： Druk Wide · 概要 700 · ナビゲーションラベル、カテゴリフィルターボタン、ボタンテキスト、「アイブロウ」、セクションタグ、および追加の見出し。文字間隔を適切に保ちながら圧縮された大文字を使用することで、工業的なラベルのようなスタイルを作り出しています。これらの単語は識別と指示を行うものであり、決して説明的な意味合いを持ちません。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 24px |
| ボタンの半径 | 4px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1440px |
AI がPeak Designスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Arsenijs Fabrica — ギャラリーの照明の下で、編集コンテンツ本来の美しさが際立つ。ギャラリーの真っ白な壁、モノクロの背景にオレンジ色に点滅する温かみのあるストロボライト、ガラスのように薄い文字、そしてたっぷりの余白。
- 21 TSI — 深紅の虚空、ただ一つのシルエット――ユーザーインターフェースが大気に溶け込む、ハイファッションのエディトリアル。
- Aevi Wellness — 北欧の薬局を思わせる、軽やかな書体。全体的に無彩色で軽やかなレイアウトの中に、落ち着いたグレーブルーのアクセントが効いており、温かみのある白い背景に、細い枠線で囲まれたカードに商品写真が重ねて配置されている。
- Palmer — 柔らかな自然光が差し込む陶芸ギャラリー――壁との相互作用が生まれ、展示物は芸術作品となる。
- PLATFORM — ホワイトキューブギャラリーが注目を集める
- Assembly Coffee London — 暗い焙煎所の炭火。ほぼ黒に近いキャンバスに、温かみのある薄暗い照明の下、商品写真と筆記体のセリフ体文字が並ぶ――まるで深夜の地下印刷物で印刷されたスペシャルティコーヒーのメニューのような雰囲気だ。
- ARTWORLD — 白いリネンにファッション雑誌の見出しを付ける
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- VISIONNAIRE — 真っ白な背景にストリートウェアのエディトリアルギャラリーを配置。ブランドはまるで印刷されたルックブックのように、真っ白なキャンバスに鮮やかな黒インク、そして商品やロゴを際立たせるためのカラーブロックとして温かみのあるクリーム色のパネルを配している。
- Letter — 収蔵庫から発掘された、きらめく美術品を展示するプライベートギャラリー。黒い壁に囲まれた展示スペースでは、色付きの壁に飾られたクロム製の彫刻の上に、セリフ体の見出しが浮かび上がっている。
- Ramp — 編集部の財務部門。白黒のページに、たった一本のネオンカラーのマーカー。ほぼモノクロームの誌面において、鮮やかなライムグリーンの線一本が、あらゆるやり取りを金銭的なシグナルへと変える。