旅行・交通のデザインシステム

旅行、予約、モビリティ、物流のWebサイトから抽出したデザインシステムです。検索バー、日付選択、地図、一覧カードが中心にあり、たいていは1色の強いブランドカラーと、写真のための十分な余白を備えています。

このカテゴリーには2件のDESIGN.mdサンプルがあります(抽出元:AirbnbとUber)。各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。

AirbnbのWebサイトのプレビュー
旅行・交通・物流

Airbnb

Airbnbのデザインシステムは、独自のバリアブルフォント「Airbnb Cereal VF」を中心に構成されています。ほぼモノクロームのニュートラルなパレットで、濃いチャコール(#222222)とライトグレーを基調としています。ブランドのシグネチャーカラーである「Rausch」のコーラルピンク(#ff385c)は、プライマリーCTAとロゴにのみ限定して使われています。レイアウトはレスポンシブな写真カードグリッドで、画像とテキストの比率にゆとりがあります。カードには20pxのやわらかな角丸が付けられ、複数レイヤーのアンビエントシャドウによって、強いコントラストを避けながら控えめな奥行きを生み出しています。検索バーは目立つピル型のコンテナで、主要なユーザーアクションをまとめる役割を果たしています。

UberのWebサイトのプレビュー
旅行・交通・物流

Uber

Uberのデザイン言語は、クリーンなミニマリズムと鮮やかなイラストレーションを組み合わせ、親しみやすさとプロフェッショナルな印象を両立させた交通プラットフォームを実現しています。くっきりとした白黒の基調が明快さと可読性を生み出し、カラフルなヒーローイラストレーションが温かみと人とのつながりを加えています。タイポグラフィはブランドの一貫性のためにカスタムフォントファミリーのUberMoveを用いており、全体に余白を広くとることで、インターフェース全体に心地よい広がりを生んでいます。

自分で試す

お探しのサイトが見つかりませんか?

URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。