厳選・オープン・無料

Away

高品質な写真とミニマルなデザインを融合した、クリーンで理想を追求するDTC旅行ブランドです。

01

デザイン DNA

プレミアムなDTC旅行ライフスタイルブランド

02

カラー

高品質な写真とタイポグラフィに焦点を当てた、クリーンでミニマルな配色です。

03

タイポグラフィ

transitional-serif · humanist-sans

• display56px · 500
• headline32px · 500
• body16px · 400
• label12px · 500

本文とナビゲーションには「Graphik」を使用します。 · ヒーローの見出しにはトランジショナル・セリフ体を使用します。 · ナビゲーションや小さなラベルには大文字と文字送りを使用します。

04

余白

4px ベース、8px サブ、16px スタンダード、24px メジャー

05

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

1px solid rgba(17,17,17,0.1)

rgba(0, 0, 0, 0.06) 0px 2px 2px 0px · rgba(0, 0, 0, 0.07) 0px 4px 3px 0px · rgba(0, 0, 0, 0.24) 0px 1px 2px 0px

06

レイアウト

フル幅のヒーローイメージの後に、たっぷりとした余白を含むコンテンツセクションが続きます。

07

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

スクロール時のコンテンツセクションへの繊細なフェードイン。 · ホバー時のスムーズなカラーおよびbackground-color遷移。

繊細なカラーまたはbackground-colorの変化です。 · 軽微なスケール変化やカラー変化による、即座の視覚フィードバックです。

08

コンポーネント

• button 白地に黒文字のミニマルなデザイン。1pxの黒いボーダー、またはボーダーなしです。
• card 高品質な写真と最小限のテキストオーバーレイを用いたシンプルなカードです。
• chip フィルターやカテゴリー用のピル型ボタンです。
• input 最小限のスタイリングを施した、クリーンな下線付きまたはボーダー付きインプットです。
• hero 明確なCTA（行動喚起）と大きなセリフ体またはサンセリフ体の見出しを持つ、フルブリードの写真ベースヒーローセクションです。

09

文体と禁止事項

• トーン 自信に満ち、理想を追求し、率直なトーンです。
• 見出し 短く、インパクトがあり、強調にはしばしばセリフ体が使用されます。
• CTA 直接的で行動を促すスタイルで、しばしば大文字で表記されます。

• メインコンテンツ領域にダーク背景を使用しないこと — スクリーンショットでは白（#FFFFFF）の背景が使われています。
• プライマリボタンに明るく彩度の高いアクセントカラーを使用しないこと — スクリーンショットでは白ボタンに黒文字、黒いボーダーが使われています。
• メインの見出しにサンセリフ体フォントを使用しないこと — スクリーンショットでは「Get Away」にトランジショナル・セリフ体フォントが使われています。
• カードやボタンに角丸を使用しないこと — スクリーンショットではシャープな角（スコアコーナー）が使われています。
• メインヒーローに複数カラムレイアウトを使用しないこと — スクリーンショットでは単一のフルブリード画像が使われています。
• ナビゲーションに小さく詰まったテキストを使用しないこと — スクリーンショットでは大文字で文字送りされたラベルが使われています。
• 避ける: ごちゃごちゃしたレイアウト
• 避ける: 過度に複雑なカラースキーム
• 避ける: 装飾要素の多用

10

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

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

11

System Prompt

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