エンジニアとして、デザイナーが作成した意図を忠実にブラウザやアプリ上に再現することは、非常に重要な役割の一つです。私自身、日々の業務でデザインの実装に携わっていますが、フォントのバランスや要素の配置など、その「意図」を正確に汲み取る難しさを常に感じています。
今回はエンジニアが、デザインの微細な差異やトンマナを合わせるための感覚を養えるサイト「Can’t Unsee」をご紹介します。
デザインの正解を「検証」する
Can’t Unsee は、並べられた2つのデザイン案を比較し、どちらがより適切に構成されているかを選択していくトレーニングサイトです。より適切だと感じた方の画像をクリックして進めていきますが、その判定プロセスにはエンジニアにとって役立つ仕掛けがあります。
- 正解した場合：選択した画像と共にチェックマークが表示され、正解であることを教えてくれます。
- 不正解の場合：赤いバツ印と共に、「どこが間違っているのか」を具体的に示す解説コメントが表示されます。
また、画面下部の「Compare」ボタンをクリックすると、画像が瞬時に正解・不正解で切り替わります。
私は、この「不正解を経験すること」こそが、トンマナを合わせる目を養う近道だと考えています。すぐにどこが間違っているのかが視覚的にも言語的にもわかるため、デザインの「正解」を納得感を持って理解することができます。
数値の先にある「トンマナ」を捉える
このサイトで行うトレーニングの目的は、単に数ピクセルのズレを指摘することではありません。
- アクセシビリティに配慮した、適切な画像や文字のコントラスト比
- 要素のまとまりを感じさせる適切な余白
- 情報の優先順位に合ったフォントの太さの選択
- 視線の誘導をスムーズにする、より適切な文字揃え
こうした「トンマナ（トーン&マナー）」を合わせるために必要な要素を、クイズ形式で客観的に検証していくことができます。難易度が上がるにつれて非常に繊細な判断が求められるようになりますが、ここで培われる視点は、実装時のセルフチェックの精度を大きく引き上げてくれます。
デザインの意図を理解し、共通言語を持つ
エンジニアがデザインの細部に対する解像度を高めることは、結果としてデザイナーとの共通言語を増やすことにも繋がります。指示された数値をただ入力するだけでなく、「なぜこの構成が適切なのか」という意図を理解した上でコードを書く。こうした比較検証を通じて、デザインへの観察眼を鋭い状態に保つことができます。
デザインの再現性にこだわり、よりクオリティの高いアウトプットを目指したいエンジニアの方は、ぜひ一度ご自身の「目」の感度をアップデートしてみてください。
実際に検証してみた結果
最後に、私自身がこのトレーニングに取り組んでみた結果を共有します。
結果は SILVER（上位25%） でした。……正直に申し上げます。「うう、後半は本当に難しかった……！」
序盤こそスムーズでしたが、後半に進むにつれて、一見しただけでは判別不能なレベルの差異が登場します。しかし、そこをじっくりと見極めるプロセスこそが、「デザインの微妙な違いを見分ける観察力」を養うための良い訓練になると実感しました。
ただ単に「どっちが正解か」を当てるだけでなく、「微妙に違うデザインのどちらがプロダクトとして適しているのか」を選び取る判断力が、エンジニアとしての実装クオリティに直結するのだと思います。
皆さんも、開発の合間のトレーニングとしてぜひ挑戦してみてください。私はまず、このシルバーランクをゴールドに引き上げられるよう、日々の業務でもさらに「観察」の精度を高めていこうと思います。
