Allbirds
白いリネン地に天然素材
Allbirdsは、落ち着いた自然な自信をもって運営されています。ほぼ完全に無彩色で統一されたキャンバスに、温かみのある砂色（#e0dacf）と、製品写真から直接抽出された落ち着いたアースカラーがアクセントとして添えられています。ユーザーインターフェースは製品体験を妨げません。白い表面、細い境界線、すべて大文字のナビゲーション、そしてウェブ要素というよりは物理的なボタンのようなピル型のコントロールが特徴です。Self Modern（カスタムセリフフォント）は、見出しやコレクション名など、編集上の注意が必要な重要な箇所に使用され、Geographは、3つのバランスの取れたウェイトで、各文字、本文、ボタンに使用されています。カテゴリカードはカラーシステムとなり、それぞれが特集製品の背景色を採用することで、ナビゲーションは生き生きとしたパントンパレットへと変化します。
最大幅は約 1200 ピクセルで、中央に配置され、両側に十分なパディングがあります。メイン要素は、温かみのある砂色の背景に、中央から放射状に広がる大きな商品カルーセルがある全幅の編集ストリップです。カテゴリナビゲーションは、4 つの列に 4 つの同じ色のカードがグリッド状に並び、各列には中央に 1 つの靴のモデルがあります。スクロールしないと見えない部分では、レイアウトは全幅の分割パネル (左側にライフスタイル写真 + 右側に商品サンプル) と、小さな下線付きのセクションタイトルの下にある中央の商品カルーセルを交互に表示します。全体のリズムは、全幅の編集パネル → 4 列のグリッド → 中央の商品カルーセル → 2 列の分割 → 中央の商品カルーセルです。セクション間の間隔は 40 ～ 56 ピクセルで、軽やかでありながら圧倒されないトランジションを作り出しています。ナビゲーションは、中央にプライマリ リンクがあるミニマルな固定トップ バーです。
写真はビジュアルシステム全体を構成する要素です。すべての製品写真は、靴のアクセントカラーに合う、または補完する単色の背景を背に、わずかな角度からクローズアップで撮影されており、それぞれの写真が効果的にカラースタディとなっています。ライフスタイル写真は、温かみのある明るいトーンで、自然の風景（リュウゼツラン畑、ウッドデッキ、起伏のある地形）で撮影され、控えめな色調に合わせて微妙に抑えられています。イラスト、3Dレンダリング、抽象的なグラフィックは一切使用されていません。パントンとのコラボレーションにより、実際のカラーパレットがグラフィック要素として使用されています。アイコンはミニマルでモノクロームです（ナビゲーションや補助的な位置にアウトラインアイコンが配置されています）。
パレット
中性
- Canvas White
#ffffff— ページ背景画像、カード表面画像、商品カード背景画像。 - Charcoal
#212121— 補助的なUI要素、区切り線、および控えめなラベルには、ニュートラルカラーがサポートされています。ただし、行動喚起のメインカラーとして使用しないでください。 - True Black
#000000— 見出し、アイコン、高コントラストのフレーム、ナビゲーションテキスト。 - Warm Sand
#e0dacf— メインセクションの背景、追加の表面シェーディング、大きな編集パネル。 - Olive Char
#222519— 補助的なUI要素、区切り線、および控えめなラベルには、ニュートラルカラーがサポートされています。ただし、行動喚起のメインカラーとして使用しないでください。 - Iron Gray
#525252— 二次テキスト、補助テキスト、目立たないフレーム。
タイポグラフィ
12～40ピクセル・6段階
- Self Modern — 交換： Playfair Display · 概要 400 · 見出しや論説は控えめに用いられ、重要なフレーズや作品集のタイトルが強調されている。セリフ体やイタリック体は、サンセリフ体の単調さを打破し、「これが物語の本質だ」というメッセージを伝えている。
- Geograph — 交換： Inter · 概要 400, 500, 700 · ユーザーインターフェースの主要フォントは、本文、ナビゲーションラベル、ボタン、製品見出し、フッター、入力フィールド、アイコンなどです。強調表示される見出しには500ポイント、製品名には700ポイントを使用します。ナビゲーションラベルとカテゴリの大文字には、広い文字間隔（0.025em～0.10em）を設けることで、一貫したブランドスタイルを確立します。
- HurmeGeometricSans3 — 交換： Inter · 概要 400 · バックアップ用またはボタン専用のラベルとして使用されることは稀です。Geographはこのシステムを日常的に使用しています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 8-16px |
| ボタンの半径 | 9999px (pill) |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 40-56px |
| ページ幅 | 1200px |
AI がAllbirdsスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Lightship — まるで映画に出てくるような、広大な道を描いたジオラマ。温かみのあるクリーム色のギャラリーの壁には、大きな風景写真が間隔を詰めて飾られ、額縁には細い黒文字がかすかに見え、単調な空間に鮮やかなオレンジ色のアクセントが、まるで草原の焚き火のように際立っている。
- Faire ES — 温かいクリームの卸売カタログ
- Adanola — 白い紙に印刷された、編集版ルックブック。清潔感のある白い表面に、タイポグラフィと写真が息づくファッション撮影。黒インクの文字と、ブランド全体のスタイルを反映した、さりげない特徴的なサンセリフ体フォント（Favorit）が用いられている。
- Oura Ring — 柔らかな自然光に包まれた、居心地の良いオートミール作りのワークショップ。
- Stykka — 白い光に包まれたスカンジナビアの工房――静かで手作りのショールーム。そこで聞こえるのは写真の音だけ。
- DJI — 航空宇宙をイメージした黒色のキャンバス地に、鮮やかなエレクトリックブルーのアクセントを1箇所加えたデザイン。
- Altitude Beverages — モノクロの雑誌見開きページ。ファッション雑誌の見開きページから、静止画以外のすべての色を取り除いたものを想像してみてください。テキストと余白だけで、物語のすべてが語られます。
- AATHER — 開いた手のひら、一本の炎――静寂の中に秘められた、ささやかな贅沢。
- Cowboy — 真っ白な磁器で統一された空間に佇むベルギーの自転車ギャラリー。マットな質感の表面、編集資料に用いられる大きなフォント、そして装飾を極力排除したショールームは、自転車とその中身に視線を引きつけるように設計されている。
- Refero — 白い大理石を背景にした編集レイアウト - タイポグラファーが作成した製品ページ。セリフ体の見出しがブランドの名刺代わりとなり、その他はすべて目立たないように配置されている。
- Face Formula — 北欧風の雑誌風ポートレート。落ち着いた雰囲気の誌面レイアウトで、モデルの視線と、凝縮されたセリフ体で書かれた見出しが、涼しげな霧の背景の中で雄弁に語りかけてくる。
- Shupatto — 白い大理石の博物館展示ケース