Airbnb
静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
Airbnbは「ホワイトキャンバス」スタイルで運営されており、写真が主役です。ほぼすべての画面は静かなモノクロのフレームで、物件の全画面画像が全体的な印象を伝え、アクションを示す唯一の色として、鮮やかなコーラルレッドのアクセント（Rausch）が使用されています。本文、インターフェース、セクションの見出し（22-22）には、主に小さく自信に満ちたサイズの幾何学的なサンセリフ体（Airbnb Cereal VF）が使用され、行間隔は狭く、行間隔は広く、テキストが密集したカードも読みやすくなっています。インターフェースはフラットでフレームレス、丸みを帯びています。カードとコントロールには半径12-3、丸いピル型のボタン、検索バーなどの目立つ要素にはソフトなレイヤードシャドウのみが適用されています。カード、リスト項目、リンクなど、その他の要素はすべて、クロームのアクセントではなく、ホワイトスペースと細い線に依存しています。
最大幅の制限がない全幅レイアウトで、コンテンツは表示領域内で端から端まで伸び、デスクトップでは左右に約40pxの水平方向のパディングがあります。ヒーローは、画像やタイトルのないニュートラルな白いキャンバスの中央に配置されたフローティング検索カプセルです。検索バー自体がヒーローです。検索の下は、縦に積み重ねられ、水平方向にスクロールするセクション（4行が表示されます：注目の住宅、素晴らしいホテル、その他の都市、来月利用可能）にページが遷移し、各セクションは約320pxの高さで、48pxの垂直方向のガターで区切られています。各セクションは、水平方向のオーバーフローと矢印ナビゲーションを備えた7カードグリッドを使用しています。フッターは、#f7f7f7の背景上の3列のリンクグリッドで、その下に著作権情報、言語/通貨オプション、ソーシャルメディアアイコンを含む下部バーがあります。ナビゲーションは、中央にタブナビゲーション、右揃えのコントロールを備えた固定上部バーです。
ビジュアルシステムは写真が中心で、不動産物件のフルスクリーン画像が主要なコンテンツタイプとなっています。すべての写真は、実際の住宅やホテルの温かみのある明るい室内外の写真で、自然な色補正（過度なフィルターやデュオトーンは使用せず）が施されています。物件カードには、1:1のアスペクト比で画像がぴったりとトリミングされ、カードの端まで余白なく表示されます。インターフェース全体にわたるアイコンはモノクロのアウトライン（線幅約16～16）で、ナビゲーションカテゴリやUIコントロールにのみ使用されています。ロゴは唯一のマルチカラーのグラフィック要素です（Rausch）。イラストも3Dレンダリングも抽象的なグラフィックも一切なく、ビジュアル言語は純粋な写真と、柔らかな白いキャンバス上のミニマルなモノクロアイコンで構成されています。
パレット
ブランド
- Rausch
#ff385c— 赤色は、アイコン、看板、小さなグラフィック要素などの装飾的なアクセントとして使用されます。行動喚起のメインカラーとして使用すべきではありません。 - Rausch 600
#e00b41— ラウシュ塗料のプレス加工された濃い色バージョンで、ホバーサーフェスやアクティブサーフェス上のブランドアクセントとして使用される表面向け。
中性
- Hof
#222222— 本文、メインテキスト、見出し、アイコンの輪郭、反転背景は、黒に近いニュートラルカラーで、これが全体の無彩色システムの基盤となっている。 - Foggy
#6a6a6a— カードタイトルの下に、二次テキスト、ミュートされたキャプション、補助テキスト、無効化されたアイコン塗りつぶし、および目立たないメタデータが表示されます。 - Grey 500
#c1c1c1— ステータスを目立たなくする必要がある場合は、テキストを無効化したり、入力フィールドにプレースホルダーテキストを表示したり、アイコンの輪郭を薄く表示したりします。 - Bebe
#ebebeb— 細い枠線、下線付きの入力フィールド、リスト行間の区切り線、そして目立たない区切り線。 - Deco
#dddddd— 非アクティブなコンテナ、プレースホルダー、および無効化されたカード状態用のカード背景画像。 - Faint
#f7f7f7— ページキャンバスの背景画像、フッターの表面、およびインタラクティブ要素のホバー状態は、このページを純白のカードとは一線を画す、柔らかくクリーミーな色合いになっています。
タイポグラフィ
11～28ピクセル・5段階
- Airbnb Cereal VF — 交換： Circular · 概要 400, 500, 600, 700 · Airbnb向けにデザインされたカスタム幾何学サンセリフフォント。本文は14px/400、UIラベルは16px/500、セクション見出しは20px/600、22px/500（文字間隔は-0.02em）、ページ見出しは28px/700に配置されています。文字間隔はサイズが大きくなるにつれて小さくなりますが、これは大きな画面サイズにおける幾何学サンセリフフォントの特徴です。「salt」代替グリフ機能を有効にします。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 12px |
| ボタンの半径 | 9999px |
| カード半径 | 12px |
| 影 | 柔らかな影 |
| セクション間 | 48px |
| ページ幅 | 1440px |
AI がAirbnbスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Apple (España) — 白いギャラリー用ディスプレイケース
- Silencio — 白い部屋に、浮かぶようなオブジェが点在する。温かみのある紙で作られたギャラリー展示では、それぞれの要素が余白を背景にそれぞれの場所を占め、静寂は意図的なデザイン上の決定である。
- Oakâme — 陽光が降り注ぐ、温かみのある石を彫り出したプロヴァンス風の工房
- Nike — スポーツの偉業を収めたモノクロームのギャラリー――白い壁、芸術作品としての製品、背景に溶け込むクロム。
- Arc — 真夜中の水面に浮かぶ工業用ホワイトギャラリー
- Rivian — ギャラリーのコンクリート壁にそびえ立つ、電気を帯びた巨大なモノリス。リビアンは、広大な白い空間を背景に、それぞれの車両を彫刻作品として展示している。巨大な文字は建築要素となり、単調な雰囲気を打ち破る温かみのある黄色が、まるでマットな表面に降り注ぐ太陽の光のようだ。
- Analogue — 黒いギャラリーのディスプレイケース – 商品が虚空に浮かぶ
- ddna — 未加工のリネンの上に置かれた、温かみのある博物館の展示ケース
- Zellerfeld — 白い大理石の彫刻家の工房――台座の一枚岩のような表面、一筋のコバルトの光、床から天井まで続く小文字のささやき
- UY Studio — 修道院の石造りの回廊は、コンクリートの壁に囲まれた静かな空間で、白い台座の上に香水瓶が並べられ、400ワットのランプ1つと温かみのある灰色の電球4つで照らされている。
- Basic.Space — 白い大理石のキュレーターギャラリー
- COS — 白い壁のおしゃれなギャラリー