Webデザイナー適正診断
1pxのズレを見抜けるか。「デザインの眼」実技テスト
2つのUIのうち、片方だけ余白・整列・配色・文字組みが1箇所崩れています。正しい方を選ぶ実技12問(約3分)で、Webデザイナーに必要な「違いに気づく観察眼」を5軸のレーダーチャートで スコア化します。後半は差がどんどん微細になり、最難問はわずか1pxのズレ。無料・登録不要です。
遊び方はシンプル。2つのUIから、崩れていない“正しい方”を選ぶだけ。1問ごとに答え合わせで「どこが違ったか」がわかります。全12問・約3分、次の5軸で採点します。
※ 後半は1px単位の差になります。ブラウザの表示は等倍(100%)のままでお試しください。
デザイナーの仕事は「違和感に気づく」ことから始まる
プロのデザイナーと未経験者の差は、作るスキルの前に「見える解像度」に表れると言われます。 ボタンの中でアイコンが1pxずれている、2つの入力欄で角丸が揃っていない、本文の行間が詰まりすぎている—— こうした細部の乱れに気づけるかどうかが、UIの品質を最後に決めます。 海外では同じ趣旨の「2つのデザインから正しい方を選ぶ」訓練クイズがデザイナーの間で広く遊ばれており、 本診断はその形式で「デザインの眼」を実技として測ります。
出題と採点の仕組み
出題は余白・整列・配色・文字組み・一貫性の5軸で、すべて実際のHTML/CSSでレンダリングした2つのUIの比較です。 前半は誰でも気づける大きな崩れから始まり、後半に進むほど差が小さくなります(最小は1px・微細な色差)。 難しい問題ほど配点が高く、総合スコアは100点満点。回答のたびに「どこが崩れていたか」の答え合わせが 表示されるので、遊びながら「どこを見るか」の型が身につきます。
よくある質問
本当にWebデザイナーの適性がわかりますか?
本診断は娯楽・自己理解のためのコンテンツです。測っているのは「2つのUIのわずかな違いに気づく観察眼」という、デザイン実務で日常的に使う力の一部であり、職業適性や採用可否を判定するものではありません。結果は楽しみながらの目安としてご利用ください。
どんな問題が出ますか?
2つのUIのうち片方だけ、余白・整列・配色・文字組み・角丸などが1箇所だけわずかに崩れています。正しい方を選ぶ実技12問(約3分)で、後半ほど差が小さくなり、最難問は「1pxのズレ」を見抜く問題です。回答のたびに、どこが崩れていたかの答え合わせが表示されます。
デザインの眼は鍛えられますか?
鍛えられます。余白を一定の倍数で揃えるルール、要素の端を揃える整列、WCAGのコントラスト基準、行間のセオリーなど、「どこを見るか」は知識として体系化されています。見るポイントを知ってから普段のWebサイトを観察するだけでも、気づける率は大きく変わります。
スコアは毎回同じになりますか?
問題プールから毎回組み替えて出題するため、スコアは多少変動します。また、ブラウザの拡大率(ズーム)や画面の明るさも見え方に影響します。等倍(100%)表示でのプレイをおすすめします。