厳選・オープン・無料

Airbnb

写真に焦点を当てた、信頼感を重視した洗練された旅行マーケットプレイスのUI。

01

デザイン DNA

ユニークな滞在と体験をつなぐグローバルなコミュニティ・マーケットプレイス。

02

カラー

中立色のベースに高コントラストを実現し、鮮やかなブランドアクセントを単一配置。

03

タイポグラフィ

humanist-sans

• display28px · 700
• heading16px · 700
• body14px · 400
• caption12px · 400

04

余白

8pxの縦リズムと十分なパディング。

05

サーフェス (角丸 / 影 / 罫線)

1px solid rgba(0, 0, 0, 0.08)

rgba(0, 0, 0, 0.04) 0px 2px 6px 0px · rgba(0, 0, 0, 0.1) 0px 4px 8px 0px · rgba(0, 0, 0, 0.1) 0px 8px 24px 0px

06

レイアウト

中央に検索バーを配置したフルワイドのヘッダーと、複数カラムのカードグリッド。

07

モーションとインタラクション

hover時のtransformとbox-shadowの遷移。 · カルーセルのスムーズなスライド遷移。

box-shadowまたはopacityによる微細な高さの変化。 · 主要なボタンとカードにscale transform。

08

コンポーネント

• button 黒地に白文字のピル型、または鮮やかなピンクの円形検索アイコン。
• card 画像を主体とし、角丸を大きく、ハートアイコン、下に最小限のテキストを配置したカード。
• chip 黒いボーダーと白い背景を持つピル型タグ。
• input 柔らかなシャドウと目立つピンクのアクションボタンを備えた大型のピル型検索バー。
• hero 複数フィールドの検searchウィジェットを配置した、ミニマルなナビゲーションバー。

09

文体と禁止事項

• トーン フレンドリーで親しみやすく、かつプロフェッショナル。
• 見出し 直接的で明確な、会話調のスタイル。
• CTA 行動を促す簡潔な表現（例：「検索を始める」）。

• 暗い背景を使用しない — スクリーンショットでは、主に白と薄いグレーのレイアウトが示されている。
• セリフフォントを使用しない — スクリーンショットでは、洗練されたモダンなサンセリフ書体が全体に使用されている。
• 複雑で多色のパレットを使用しない — スクリーンショットでは、単一のピンクアクセントを持つほぼモノクロのパレットが使用されている。
• カードに鋭く四角い角を使用しない — スクリーンショットでは、画像とボタンに大きく角丸が施されている。
• 太く実線のボーダーを使用しない — スクリーンショットでは、非常に薄く微妙なボーダーまたはボックスシャドウが使用されている。
• 大きく詰まったテキストブロックを使用しない — スクリーンショットでは、十分なホワイトスペースと短くスキャンしやすいテキスト要素が使用されている。
• 避ける: 専門用語
• 避ける: 過度に-formalな表現
• 避ける: 攻撃的な販売戦術

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko