Tours

Context

プロダクトの UI は、機能が増えるにつれて揃わなくなっていきます。テーマが増え、画面サイズごとの調整が場当たり的になり、デザインシステムが一貫性を守れなくなります。

TOURS では、これを最初から避ける必要がありました。テーマや画面サイズが変わっても、リリースのたびにデザイナーが目で確認しなくて済むようにすること。そのためには、コンポーネントの段階でルールを決めておく必要があります。

‍

Approach

一貫性を、作業する人の注意力に頼らないことにしました。レスポンシブ対応とテーマは、コンポーネントの中で処理します。プロフィールカードがどう組み替わり、どう色が変わるかはコンポーネントが決め、UI画面はそれを採用するだけです。画面ごとに例外を直すのではなく、特別な調整をしなくても整った画面が出てくる状態をつくりました。

‍

‍

Outcome

テーマは4種類です。グラス、ライト、ダーク、カスタムカラー。グラスは既存のキットを使わず、TOURS のために設計しました。

ブレークポイントは、幅（400／688／872／∞）と高さ（240／400／700／∞）の両方で区切っています。プロフィールカードは大きさが変わるだけでなく、中の要素の並びも組み替わります。

その上に、人となりが見える画面を載せています。スキルやコンディションのタグ、1日のスケジュール、面接での質疑応答、「話してみたい」ボタンのあるプロフィール画面です。

‍