このページの中身

Backpack

実物のデザインシステム / 一覧

Backpackの雰囲気で組んだ架空の予約画面
図を大きく見る

雰囲気の見本#

見本を新しいページで開く

この見本は公式サイトの画面ではありません。公開されているトークンの値(色・角丸・影・密度)で、この資料の架空の画面を組み直したものです。文言・図版・ロゴ・独自書体は使っていません。

どんなシステムか#

Skyscanner が公開しています。旅行予約向け。日付や価格など、実データの見せ方の例が多い。分類は「企業のプロダクト向け」です。

見た目の骨格#

決めごとこの見本で使った値
主色#0770e3
文字#161616(薄い文字は #626262)
面と地面 #f1f2f8 / 地 #ffffff
角角丸 12px
影薄い影
行の高さ1.5

値は公開されている資料から採っています。共通の部品は全件で同じ内容(見出し帯・タブ・ ボタン一式・入力一式・カード・表・通知・タグ・進捗・ダイアログ・文字の段・色)なので、 ほかのシステムと横に置いて、色・角・影・密度・書体・部品の形の違いを見比べられます。 「特有」と印を付けた節は、そのシステムだけが持つ部品です。

ここから借りるもの#

丸ごとまねる相手ではありません。借りるのは、トークンの名前の付け方と、 同じ部品をどう分けているかです。見た目は結果です。

公式#

近いものと比べる#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。