フロントエンドエンジニア適正診断
指示どおりの実装を見抜けるか。ピクセルパーフェクト検品テスト
デザイン指示と2つの実装を見比べて正しい方を選ぶ「スペック照合」と、CSSコードから正しい描画結果を選ぶ 「CSS読解」の実技12問(約3分)で、フロントエンドエンジニアに必要な「実装を見抜く眼」を 5軸のレーダーチャートでスコア化します。最難問は1〜2pxの差分。無料・登録不要、コーディング未経験でも遊べます。
遊び方はシンプル。2つのUIから、お題(デザイン指示 または CSS)に忠実な“正しい方”を選ぶだけ。1問ごとに答え合わせで違いがわかります。全12問・約3分、次の5軸で採点します。
※ 後半は1〜2px単位の差になります。ブラウザの表示は等倍(100%)のままでお試しください。コーディング未経験でも遊べます。
ピクセルパーフェクトは、今も現場の共通言語
フロントエンドエンジニアの仕事の多くは「デザインカンプを寸分違わず再現する」ことから始まります。 paddingが2px違う、枠線が1px太い、色がわずかにずれている——こうした差分に自分で気づけるかどうかが、 実装のクオリティとレビューの速さを決めます。さらに、box-sizingやマージン相殺、Flexboxといった CSSの挙動を正しく読める力は、バグの原因を一目で見抜く土台になります。 本診断はこの「検品眼」と「読解力」を、実際のHTML/CSSレンダリングを使った実技として測ります。
出題と採点の仕組み
出題はボックスモデル・レイアウト読解・色の再現・文字の再現・細部の再現の5軸です。 2つのUIはすべて実際のHTML/CSSでレンダリングされ、片方だけが指示やコードから外れた「誤実装」になっています。 前半は大きな崩れ、後半に進むほど微細な差分(最小1px・微妙な色差)になり、難しい問題ほど配点が高い 100点満点方式です。回答のたびに「どこが違っていたか」の答え合わせが表示されるので、 遊びながらCSSのハマりどころを体験できます。
よくある質問
何を測る診断ですか?
デザイン指示(スペック)と実装済みUIを見比べて差分を見抜く「ピクセルパーフェクト検品眼」と、CSSコードから正しい描画結果をイメージする「CSS読解力」の2つを、実技12問(約3分)で測ります。いずれもフロントエンド実装の日常業務(デザイン再現・コードレビュー・検品)で使う力の一部です。
どんな問題が出ますか?
2形式あります。1つは「padding: 24px」のようなデザイン指示と2つの実装を見比べ、指示どおりの方を選ぶ問題。もう1つはCSSスニペットを読み、その正しいレンダリング結果を選ぶ問題(box-sizing・マージン相殺・Flexboxなど)です。後半ほど差分が小さくなり、最難問は1〜2px単位。回答のたびに答え合わせと解説が表示されます。
コーディング未経験でも遊べますか?
遊べます。スペック照合問題は見比べる観察力だけで挑戦でき、CSS読解問題も知らなかった挙動は答え合わせの解説で学べます。むしろ「これからフロントエンドを学ぶ人」がCSSのハマりどころを先に体験できる内容になっています。
スコアは毎回同じになりますか?
問題プールから毎回組み替えて出題するため、スコアは多少変動します。また、ブラウザの拡大率(ズーム)や画面サイズも見え方に影響します。等倍(100%)表示でのプレイをおすすめします。本診断は娯楽・自己理解コンテンツであり、職業適性や採用可否を判定するものではありません。