この記事では、フロントエンドエンドエンジニアの採用面接で実際に質問されたことを下記の3パターンに分けて整理しています。
- 誰でも共通の質問&回答例
- エンジニア未経験者の質問&回答例
- 経験者の質問&回答例
どれも筆者がこれまで経験してきた実際の質問を元にして、ガイドブックのようにまとめています。
筆者の私はこれまで、フロントエンド未経験からの採用面接、他職種からの面接、キャリアップのための中途面接や、逆に面接する側として人事や先輩と同席させていただいた経験もあるので、それらの実体験がきっと参考になるはず。
最後にはおすすめの逆質問例もまとめているので、ぜひ対策に使ってもらえればと思います。
WRITER
Tsukasa｜現役エンジニア
Frontend Engineer / Web Creator / SEO Writer / Web Media Manager
現役のフロントエンドエンジニアで、「在庫管理アプリのフロントエンドリード」「プロ野球球団公式サイトの運用保守リーダー」「ECサイト実装」「Webサイト・LP実装」などの実績を積みながら、現在もWebクリエイティブ会社で活躍中。未経験からフロントエンドエンジニアに転職成功した実体験も活かして、当メディアを運営させていただいております。
AID-TRUTHは、バックエンドエンジニアやディレクター、人事で活躍する人など、現役で活躍する人たちが実体験を活かしてコンテンツ発信をしています。
INDEX
フロントエンドエンジニアの面接対策で重要なポイントを現役が解説
質問集&回答例に移る前に、先に面接対策で重要なポイントだけ下記にまとめておきます。
- 技術面だけでなく「コミュニケーション力・興味関心・自己管理力・自走力」が試される
- フロントエンド実装でのエラーや課題への対応力が見られる
- 充実した気持ちでフロントエンドの業務に取り組んでくれるか気にされる
技術面以外も対策することが重要で、フロントエンドエンジニアってバックエンド・デザイナー・ディレクターなど関わる職種が多いからこそ、特にコミュ力を見られるケースが多かったです。
それから、フロントエンドエンジニア職に対する熱意や楽しさを問われることもあるので、技術面以外も幅広く対策をするよう心がけましょう！
転職エージェントと連携して最新の面接情報や模擬面接で対策を
また、プロのキャリアアドバイザーから企業別の面接情報を貰ったり模擬面接ができる「転職エージェント」に素直に甘えるのが安牌。エージェントは企業からマージン貰っていて、こっち側は無料で利用できるので、私的には使わない理由がないくらいの感覚です。
下記のどの状況の人でもメリットがあるので、まだ使っていない人は無料相談から進めておきましょう。
| シチュエーション | メリット |
|---|---|
| 既に採用面接を控えている人 | 模擬面接や面接企業の分析をしてくれる |
| 応募先企業の固有の 質問を気にしている人 | 応募先企業の頻出質問や気にしていることなど、企業ごとの対策をしてくれる |
| 応募企業がまだ少ない人 | 応募したい企業をヒアリングしてくれ、ベストな求人をピックアップしてくれる |
| 転職に自信がない人 | 転職理由や希望条件をヒアリングの上、ベストな応募企業や採用面接のコツをレクチャーしてくれる |
筆者が実際に使った時は、応募先企業が気にしていることや頻出質問など、企業ごとの対策もしてくれました。最初から最後まで面倒な手続きやしつこい勧誘も無いので登録推奨。
それでは、実際の質問集を見ていきましょう！
【誰でも共通】フロントエンドエンジニア面接の質問&回答５選
1/5｜どんな風に情報収集していますか？
フロントエンジニア職への興味関心や情報収集能力、アウトプット能力を知るために尋ねられることが多いです。
そもそも普段から様々なメディアを見る癖をつけておいて、入社後も情報収集とメンバーへのアウトプットを欠かさない印象をアピールしましょう。
回答例
普段から「コリス」というテック系メディアサイトを見るようにしています。ビューポートの書き方や@containerの情報等、最新の知識をインプットしながら、他の人にも積極的にアウトプットする癖をつけています。
【おまけ】おすすめの情報収集サイト
- Coliss：フロントエンドやデザイン系のブログ
- JSer.info：フロントエンド技術系メディア
- Zenn：エンジニアのための情報共有コミュニティサイト
- S5 Sty!e：ハイクオリティなWebデザインのキュレーションサイト
- UI Pocket：日本のUI/UXアプリのキュレーションサイト
2/5｜最近気になっているフレームワークや制作ツールはありますか？
こちらも同様に、情報収集能力やフロントエンドの技術トレンドに付いていけそうか、といった点が見られています。
Web系エンジニアは特に、最新技術やトレンドの移り変わりが激しいので「入社後も積極的に最新技術を拾っていけるか」という視点で回答するのがおすすめ。
回答例（技術系）
最近は、Next.jsのApp Routerを公式ドキュメントを見ながらトライしています。React.jsを使っているプロジェクトは扱うフレームワークや周辺ツールが結構幅広いと思うので、これから新規制作や改修で役に立つ場面があればと思って、少しずつ勉強していっています。
回答例（ツール系）
ちょっと特殊かもしれないですが「Epic Easing」というCSSのイージングをプレビュー&生成できるツールを使ってみています。UI/UX系のアプリでもクリエイティブなWebサイトでも、CSSイージングのバリエーションが広がれば便利だと思って、トライしてます。
3/5｜プログラミングしていて楽しいと思う場面は？
興味関心を持ってフロントエンドの制作に取り組んでいるか確かめられています。気持ち的にも充実して開発・制作に取り組んでいる人の方が、チームの一員として魅力的ですし、純粋に気になって尋ねているケースもあります。
経験者であれば実際のプロジェクトに絡めて応えて良いですし、未経験者の人も実際に手を動かしてみて楽しいと感じた場面を応えると良いでしょう。
回答例
デザインにプラスアルファの機能やインタラクションを自分のアイデアで取り入れられた時が、一番楽しさを実感します。フロントエンドエンジニアはユーザーの目に見える範囲を担当する職種ですし、ユニークなアイデアが実際にメンバーやユーザーの心に刺さると「作って良かったな」と実感できます。
4/5｜デザインについてどれくらい興味がある？
UI/UXのアプリ系の開発であっても、Webサイト制作系であっても、フロントエンドエンジニアはデザイナーと密にコミュニケーションを取る必要があるので、デザインの関心も問われることがあります。
普段見ているデザイン系のメディアやトレンドを絡めたり、純粋にデザインが好きであればその熱意を答えても好印象。
回答例
普段から「S5 Sty!e」というWebデザインギャラリーサイトを見ていて、どんなデザインがユーザーの目に留まるのか考えるようにしています。実際の仕事でデザイナーと関わる機会が多いからこそ、自分がデザインしなくても、知識やアイデアのタネを蓄えておこうと努めています。
5/5｜自分では答えの出せない問題に直面したらどうしますか？
実際にフロントエンドエンジニアをしていると、独りで解決できない問題ばかりです。そういった時に、周りのメンバーをうまく巻き込みながら解決できる人かどうか確かめられます。
いきなり他の人に甘えてもダメだし、全て独りで抱え込むのもNG。自分である程度トライして具体的な質問・相談をいかに展開できるかがポイントです。
回答例
例えば、Webサイトの表示が異様に遅い時があって、ソースを見てみると最近追加されたセクションの画像が重たすぎたのが原因と分かりました。でも、自分の担当外の領域で不明点も多かったので、担当者に相談の上、遅延読み込み機能を調整して解決しました。こういったイメージで、原因と自分では解決できない範囲を極力ハッキリさせた上で、相談するように心がけています。
【エンジニア未経験】フロントエンドエンジニア面接の質問&回答５選
1/5｜エンジニア職になろうと思った理由は？
未経験からの転職なので、当然その転職のきっかけを尋ねられます。
ひとまず「何となく」「深い考えはない」「稼げそう」「楽そう」といったNGな理由を避ければ無難で、できるだけフロントエンドエンジニアへの熱意を伝えて「今後続けられそうか」をアピールするように意識しましょう。
回答例
ユーザーにとって使いやすくて印象的なWebサービスを実装したいと思ったからです。最近「dozo」というギフトサービスを使った機会があって、自分もこんなインタラクションや機能開発をしたいと思って、実際に学習や制作をしてみても熱意は冷めなかったので、本格的に転職しようと思いました。
2/5｜プログラミングの学習方法を教えてください
入社後も積極的に技術や知識をキャッチアップしてくれる、学習意欲はあるかを確認するために問われます。
「スクールでカリキュラム通りに学習した」「とりあえずHTML・CSS・JavaScriptは必要と思って本で学んだ」のように自主性に欠けていたり機械的な回答はNG。積極的に行動している印象を伝えましょう。
回答例
私はプログラミングスクールで学習をしたのですが、どんなカリキュラムでもオリジナル機能を創ってアウトプットするよう心がけていました。例えば、JavaScriptで条件分岐や一通りのオブジェクトを学んだ後は、入力したテキストに特定の文字列が何個含まれているか確認する機能を自作してみたり、積極的にソースを書く意識をしていました。
3/5｜エラー等の問題が起きた時にどう対処する？
この質問はプログラミングの技術力や地頭の良さを問われている訳ではありません。解決に悩む問題に直面した時の「対応力の良さ」を気にされています。
実際にフロントエンドエンジニアになっても、エラーなんて日常茶飯事で、自分で解決する時もあればチャットツールで先輩に聞く時もあります。そんな風に臨機応変に解決できそうな印象を伝えましょう。
回答例
初めにエラー文章をしっかりと読み解くのはもちろんですが、読んでも分からなければ、まずは自分で色々試します。スペルミスや構文ミスがないか慎重に確認したり、Chat GPTで質問をしてみたり...それでも分からない時も多いのでエラー文を検索して同様の問題を抱えている人の解決例を参考にしたりしています。
4/5｜他職種の人とのコミュニケーションで意識することは？
これエンジニア経験者でもよく尋ねられますが、未経験者には特に聞かれる所感があります。フロントエンドエンジニアは、ディレクター・デザイナー・バックエンド...と関わる職種も多いことから、円滑なコミュニケーションが取れる人かを確認されます。
人によって応え方は分かれる質問ですが、自分の専門外の領域に対する「素直さ」を意識してみると好印象ですよ。
回答例
例えば、デザイナーと新規制作のインタラクションを考える場面があったとしたら、どんなジャンルのデザインを参考にすれば良いか、まずは素直にデザイナーの専門知識を伺うようにします。その上で、自分からも方針に合うような参考例をピックアップしてみたり、実装できるか実現可能性を考えたり、積極的に話を進めるよう意識します。
5/5｜ポートフォリオでこだわったポイントは？
質問の意図は色々考えられますが...単純に「制作能力」「興味関心」を気にしていたり、「独自性」や「工夫を凝らせるか」を意識されているケースもあります。
「高度な技術を使いたかった」や「参考デザインを模倣した」のような安直なポイントではなく、自分の頭で考えたオリジナリティを絡めるようにしましょう。
回答例
ユーザーにとって印象に残るインタラクションになるように拘りました。私のポートフォリオでは全体的にポップな印象に仕上げているので、例えばメニューを開く時にも、ギャラリーサイトで見たアプリを参考にしつつ、少し弾むようなインタラクションを施したり、ユーザーの使い心地を担保しつつ、独自性を感じられるようにしました。
【エンジニア経験者】フロントエンドエンジニア面接の質問&回答５選
1/5｜CSSの命名規則は何を使っている？
アプリ開発系でもWeb制作系でも、CSS命名規則の話題は多い印象でした。
応募先の企業で採用しているルールに合致していればスムーズにジョインできることを伝えれば良いですし、合致していなくても柔軟にルールに合わせた対応ができる印象を伝えると良いです。
回答例
現職ではOOCSSを使っています。ネイティブのJavaScriptを使ったアプリ開発も多く、コンポーネント毎の状態変化がなかなか多いので、構造と見た目をシンプルに整理できるOOCSSを採用していました。その他もBEMの経験もあったりするので、比較的柔軟に合わせられるかと考えています。
2/5｜〇〇の技術/ツールは使った経験がありますか？
応募先の企業で必ず使っているフレームワークや技術はあるはずなので、社内の制作/運用方針にどれだけ合わせてくれそうかを確認されます。
例えば、ある程度テンプレ化されている制作/拡充や普段の保守にアサインしてもらう場合は、既に導入している技術へのキャッチアップ能力が問われますので、現状を素直に応えましょう。
回答例（Vue.jsの経験を問われた場合）
Vue.jsは、前の職場の新規制作で1度だけ経験したことがあります。実は、現職では React.js をメインに扱っているので、Vueは慣れ親しんでいるフレームワークではないのですが...React.jsでの業務経験を活かして、ドキュメントや御社のソースを拝見して、分からない箇所は相談しながらアサインできればと考えています。
3/5｜普段どのように保守性を担保していますか？
新規制作であれど改修/保守であれど、保守性の担保は非常に重要な項目となります。
例えば、固定化された社内の運用ルールに従って制作する機会が多いと、逆に保守性を意識する場面は少なかったりします。下記のように「可読性・再利用性・拡張性」を意識して回答できるとベストです。
回答例
保守性については「可読性・再利用性・拡張性」を担保できるように意識しています。例えば、メソッドの引数の扱い方が分かるようJsDocでコメントを残して可読性を意識したり、単体で機能が完結するようなコンポーネント組みをして再利用性を担保したり、状態変化の多いボタンは後から機能調整しやすいようにSassで構成と見た目をで分けて拡張性を持たせるなど...できるだけメンテナブルなソースにするよう心がけています。
4/5｜使いやすいWebサイトやアプリを作るために工夫していることは？
少し抽象的な質問ですが、フロントエンドエンジニアとしての知見はもちろん、Webサイト・アプリへの標準的な知識や技術を持っているかどうかを問われているケースがあります。
応え方は自由ですが、実際に担当したプロジェクトを参照しながら、具体例を交えてできる限り詳細に答えるのがポイント。
回答例
例えば、大規模なWebサイトを実装する際は特に、読み込み速度の改善のため画像ファイルサイズを抑える意識をしました。アイコン系にはSVGを使ったり、ボタン背景くらいであれば等倍で書き出すなど心がけました。
どんなユーザーでも利用しやすいアプリになるように、セマンティックなHTML構造にすることはもちろん、必要に応じてrole属性も付与するよう心がけてきました。今の時代はユニバーサルなデザインは大切ですし、メンバーと話しながらユーザービリティの知見も案件で取り入れるよう工夫しています。
5/5｜これまで関わったプロジェクトで印象深かったものは？
こちらも抽象的ですが、フロントエンドエンジニアとして案件に関わる際の熱意や、応募先企業の仕事との親和性を気にされているケースが多いです。
これまで自分が活躍できた案件や、達成感のあるプロジェクトを思い返して、盛らずにリアリティのある印象で答えるようにしましょう。
回答例
新規公開予定のサービスのティザーサイト制作が一番印象的なプロジェクトでした。ティザーということでボリュームもコンパクトだったのですが、先方としてもユーザーへの印象付けを意識していたようで、デザイナー・ディレクターと協力しながら、MVアニメーションやスクロール時のインタラクションに拘りました。結果、先方にもユーザーにもインパクトは残せて、本番サービス公開時にも貢献できて、私自身かなり嬉しかったです。
フロントエンドエンジニアの面接で使える逆質問３選
最後に、こちら側から採用担当者に質問をする「逆質問」についてまとめておきます。面接の終盤では「最後に何か質問はありますか？」と問われるので、しっかり対策しておきましょう。
1/3｜社内体制やチームの様子を尋ねる質問
「内の会社に興味を持ってくれていそう」「チームに馴染んでくれそう」このような印象を質問後の話の中で展開できるので、おすすめの逆質問です。
質問例
- 新規制作や拡充・改修などをする時、どのくらいのチーム規模で取り掛かっていますか？
- 新規案件にアサインするメンバーはどのような形で決めていますか？
- Slackのチャンネル等で仕事以外の会話をされているメンバーもいらっしゃいますか？
2/3｜将来的にチャレンジできる仕事を伺う質問
直近の仕事だけではなく、応募先の企業で今後も活躍・貢献していきたいという印象を伝えられるので、効果的な逆質問です。チャレンジする仕事内容は、企業分析をした上で、現実感のある内容にしましょう。
質問例
- 将来的には複数人のエンジニアをリードして新規案件に取り組みたいのですが、目指せられるポジションですか？
- フロントエンドとして仕事を熟すことはもちろんですが、インタラクションの提案もできるようになりたいのですが、先方と関わる機会もありますか？
3/3｜入社前にインプットすべき技術/知識があるか確認する質問
「入社を想定していること」「スムーズに社内の案件にジョインしてくれそうなこと」「熱意があること」等など、良い印象をアピールできる逆質問です。
応募先企業の業務内容を採用面接内で理解した上で、その仕事に絡めた質問をするように心がけましょう。
質問例
- 御社では、Vue.jsを使われているとのことでしたが、見ておくべきリファレンスやおすすめのインプット方法はありますか？
- 御社では、デザイン提案をする案件が多かったと思いますが、フロントエンドエンジニアとしても見ておくと学びになるギャラリーサイトや本などはありますか？
プロのキャリアアドバイザーに模擬面接をお願いして転職成功させよう
最後に改めて転職エージェントについて載せておきます。下記のどの状況の人でも効果を発揮できるので、登録推奨です。
| シチュエーション | メリット |
|---|---|
| 既に採用面接を控えている人 | 模擬面接や面接企業の分析をしてくれる |
| 応募先企業の固有の 質問を気にしている人 | 応募先企業の頻出質問や気にしていることなど、企業ごとの対策をしてくれる |
| 応募企業がまだ少ない人 | 応募したい企業をヒアリングしてくれ、ベストな求人をピックアップしてくれる |
| 転職に自信がない人 | 転職理由や希望条件をヒアリングの上、ベストな応募企業や採用面接のコツをレクチャーしてくれる |
