Tours

Context

多くのプロダクト UI は、成長とともにぶれていきます。テーマが増え、ブレークポイントは画面ごとに継ぎ当てされ、システムと呼ばれていたものはやがて、一貫性を保証しない緩いキットになる。TOURS に必要だったのはその逆でした。テーマと画面サイズを越えた一貫性が、リリースのたびにデザイナーが手で確認するものではなく、構造として保たれること。そこまで厳密なコンポーネントの言語です。加えて、人間味を保つこと。プロフィールがデータベースではなく、人として感じ取れる採用プロダクトであること。

‍

‍

Approach

一貫性は、制作時の規律に頼るべきではない。コンポーネントの中に設計として組み込み、良い画面が例外への対処ではなく既定の出力になるようにする。レスポンシブとテーマをコンポーネントの層に組み込みます。プロフィールがどう再構成され、どうテーマを変えるかはシステムが決め、画面はそれを引き継ぐだけです。良い画面が必然になるシステムを設計すること。それが仕事であり、画面はその結果です。

‍

‍

Outcome

システムは、4つのテーマモードを備えます。グラス、ライト、ダーク、カスタムカラー。既定のキットではなく、グラスモーフィズムを自分たちの表現として設計したものです。ブレークポイントのグリッド（幅 400／688／872／∞、高さ 240／400／700／∞）を横断し、プロフィールカードはサイズを変えるだけでなく、中身の配置そのものを組み替えます。その上に、人間味のある画面が乗ります。スキルとコンディションのタグチップ、日々のスケジュールのタイムライン、面接 Q&A、「話してみたい」ボタンを備えたプロフィールモーダル。下のシステムが一貫しているから、画面も一貫します。

‍