コトラ（広報チーム） 
未経験からフロントエンドエンジニアを目指す前に知るべき現実
未経験歓迎でも求められる基礎知識と自主学習の実績
未経験歓迎の求人であっても、入社後にすべてを教えてもらえるとは限りません。HTML、CSS、JavaScriptの基礎を理解し、自分で調べながら簡単なWebページや機能を作れる状態が求められます。
採用では、知識量だけでなく、継続して学べる人材かどうかも見られます。学習記録、制作物、ソースコードの公開などを通じて、自主的に取り組んだ実績を示すことが重要です。
コーダー・Webデザイナー・フロントエンドエンジニアの違い
コーダーは、デザインをもとにHTMLとCSSを使ってWebページを組み立てる役割です。見た目を正確に再現し、さまざまな画面サイズで崩れないように調整します。
Webデザイナーは、色、文字、配置、画像などを考え、利用者にとって見やすい画面を設計する役割です。デザイン作成に加え、簡単なコーディングを担当する場合もあります。
フロントエンドエンジニアは、WebサイトやWebサービスで利用者が直接操作する画面を開発する職種です。HTMLやCSSに加え、JavaScriptを使って検索、入力フォーム、表示切り替えなどの機能を実装します。職場によって担当範囲は異なるため、求人票で業務内容を確認する必要があります。
転職までに必要な学習期間と確保したい学習時間
転職までの期間は、現在の知識、学習に使える時間、目指す求人の内容によって異なります。基礎から始める場合は、数か月単位で計画を立て、学習と作品制作を並行する考え方が現実的です。
重要なのは、期間の長さよりも継続して手を動かすことです。平日は短時間でも学習を続け、休日にまとまった制作時間を確保すると進めやすくなります。応募を急ぎすぎて作品が不足することも、学習だけを続けて応募時期を逃すことも避けるべきです。
未経験採用で評価されやすい前職経験と強み
前職がIT業界以外であっても、転職活動で生かせる経験はあります。たとえば、接客や営業の経験は利用者の要望をくみ取る力につながります。事務経験は、正確な作業、手順の整理、期限管理を示す材料になります。
チームでの業務経験がある場合は、報告、相談、進捗共有、後輩指導なども強みになります。前職の経験をそのまま並べるのではなく、フロントエンドエンジニアの仕事でどう役立つかまで説明することが大切です。
都市部・地方・フルリモートで異なる求人の傾向
都市部は求人の選択肢が比較的多く、未経験者向けの募集も見つけやすい傾向があります。一方で応募者も多いため、基礎スキルとポートフォリオの準備が必要です。
地方では、地域の企業向けWeb制作や自社サイトの運用を含む求人が中心になることがあります。フロントエンド開発だけを担当する求人が少ない場合もあるため、周辺業務の内容を確認しましょう。
フルリモートの求人は、居住地を問わず応募できる可能性がありますが、未経験者向けの募集は限られる場合があります。研修期間は出社が必要か、居住地域に制限があるか、業務開始後も定期的な出社があるかを確認する必要があります。
転職に必要なスキルを優先順位に沿って学ぶ
HTMLとCSSでWebページを正確に作る力を身に付ける
最初に身に付けるべきなのは、HTMLとCSSです。HTMLはページの見出し、文章、画像、ボタンなどの構造を作るために使います。CSSは、色、余白、文字の大きさ、配置など、見た目を整えるために使います。
学習では、単に画面を再現するだけでなく、意味に合ったHTMLを書くことを意識しましょう。また、パソコンだけでなく、スマートフォンでも見やすく表示されるように調整する力が必要です。
JavaScriptで画面に動きや機能を加える基礎を学ぶ
JavaScriptは、Webページに動きや操作性を加えるための言語です。メニューの開閉、画像の切り替え、入力内容の確認、一覧の絞り込みなどに使われます。
はじめは、変数、条件分岐、繰り返し、関数といった基礎から学びます。その後、ボタンを押したときの処理や画面上の要素を変更する方法を練習すると、作品制作につなげやすくなります。
GitとGitHubでソースコードを管理する方法を学ぶ
Gitは、ソースコードの変更履歴を管理する仕組みです。変更前の状態に戻したり、複数人で作業したりする際に使われます。GitHubは、Gitで管理したコードをオンラインで共有するためのサービスです。
未経験者であっても、基本的な操作を学んでおくと、開発現場で使われる流れを理解していることを示せます。作業ごとに変更内容を記録し、読み手に分かる説明を付ける習慣を付けましょう。
React・TypeScriptなど求人で見かける技術の学習順序
求人では、ReactやTypeScriptといった技術を目にすることがあります。Reactは、複雑な画面を部品ごとに整理して作りやすくするための仕組みです。TypeScriptは、JavaScriptに型の考え方を加え、記述ミスを減らしやすくする言語です。
ただし、HTML、CSS、JavaScriptの基礎が不十分なまま応用技術に進むと、理解が浅くなります。まずはJavaScriptで簡単な機能を自力で作れるようになり、その後にReact、必要に応じてTypeScriptを学ぶ順序が適しています。
画面の見やすさ・使いやすさと表示速度の基礎を押さえる
フロントエンドエンジニアには、機能を実装するだけでなく、利用者が迷わず操作できる画面を作る視点も必要です。文字が読みにくくないか、ボタンが押しやすいか、入力時に分かりやすい案内があるかを確認しましょう。
また、画像が大きすぎるとページの表示が遅くなる場合があります。画像の容量を抑える、不要な処理を増やさないなど、表示速度への配慮も基本として身に付ける必要があります。
未経験者向けの学習ロードマップ
最初の1か月でWeb制作の基礎を固める
最初の1か月は、HTMLとCSSを中心に学びます。見出し、文章、画像、リンク、フォームなどの基本要素を使い、複数ページの簡単なサイトを作れる状態を目指します。
この段階では、画面の幅に応じて配置を変える方法も学びましょう。教材の例を写すだけで終わらせず、色や文章、構成を変更して、自分で考えた部分を増やすことが大切です。
2〜3か月目でJavaScriptを使った作品を作る
2〜3か月目は、JavaScriptの基礎を学び、画面の操作に反応する作品を作ります。たとえば、タスク管理、メモ、簡単な検索、質問に答える形式のページなどは、基礎的な機能を示しやすい題材です。
作品では、どのような課題を解決したいのかを考えます。機能を多く詰め込むよりも、目的が明確で操作しやすいものを完成させることを優先しましょう。
4〜6か月目で実践的な開発と応用学習に進む
4〜6か月目は、これまでに学んだ内容を使い、より実践的な作品を作る期間です。外部の情報を取得して表示する方法、ログインを想定した画面構成、データの追加や削除など、求人で求められやすい開発の流れに触れます。
この時期にReactやTypeScriptを学ぶ場合も、基礎を復習しながら進めます。作品の改善、コードの整理、公開準備まで行い、応募時に見せられる状態に整えましょう。
学習教材を選ぶ基準と独学を継続する工夫
教材は、現在の理解度に合うものを選ぶことが重要です。説明を読んでも理解できない状態が続く場合は、より入門向けの教材に戻る判断も必要です。一つの教材を最後まで進め、学んだ内容を自分の作品で使う流れを作りましょう。
独学を続けるには、学習時間を予定として確保し、毎回の目標を小さく設定する方法が有効です。「ログイン画面を作る」「ボタンを押したら文字を変える」といった単位に分けると、進捗を実感しやすくなります。
学習が停滞したときに見直すべきポイント
学習が進まないと感じたときは、難しい技術に進みすぎていないかを確認しましょう。基礎を理解しないまま複雑な作品を作ろうとすると、エラーの原因が分からず停滞しやすくなります。
また、インプットが多すぎて作品制作が少ない場合もあります。学んだ内容を使う小さな課題を作り、実際に動かしながら理解を深めてください。一人で長く悩み続けず、公式の説明や技術情報を確認し、質問できる環境を活用することも必要です。
採用担当者に伝わるポートフォリオを作る
未経験者のポートフォリオに必要な作品数と構成
ポートフォリオでは、作品数を増やすことよりも、一つひとつの完成度と説明の分かりやすさが重要です。学習段階が分かる複数の作品を用意し、HTMLとCSSによる制作、JavaScriptを使った機能、応用技術を使った作品をバランスよく掲載するとよいでしょう。
各作品には、制作の目的、想定する利用者、使用した技術、工夫した点、苦労した点を記載します。作品を見ただけでは伝わらない考え方を補足することで、学習姿勢も伝えられます。
模写だけで終わらせず自分の工夫を示す方法
既存サイトを参考にして画面を作る練習は、基礎力を身に付けるために役立ちます。ただし、模写のみでは、設計や実装を自分で考える力を判断しにくくなります。
参考にした作品を掲載する場合は、学習目的で制作したことを明記し、その後に自分で追加した機能や改善点を示しましょう。架空の店舗やサービスを題材にする場合も、実在する企業やサービスと誤解されない表現にする必要があります。
掲載する作品に盛り込むべき機能と制作過程
JavaScriptを使った作品では、利用者の操作に応じて画面が変わる機能を入れましょう。たとえば、入力内容の確認、一覧の検索、表示の切り替え、データの追加や削除などが考えられます。
制作過程も評価材料になります。要件を整理したメモ、画面構成の案、使用した技術を選んだ理由、改善の記録があれば、完成品だけでは分からない思考の流れを伝えられます。
コードの読みやすさと公開前に確認したい項目
コードは、動作すればよいわけではありません。役割が分かる名前を付ける、同じ記述を必要以上に繰り返さない、不要なコードを残さないなど、他者が読みやすい状態に整えましょう。
公開前には、リンク切れ、誤字、スマートフォン表示、入力フォームの動作を確認します。ページを初めて見る人の視点で操作し、説明がなくても使えるかを見直すことが大切です。
ポートフォリオサイトとソースコードの見せ方
ポートフォリオサイトには、自己紹介、スキル、作品一覧、連絡先を分かりやすくまとめます。装飾を増やしすぎるよりも、採用担当者が短時間で作品にたどり着ける構成を優先しましょう。
ソースコードを公開する場合は、作品ごとに説明文を用意します。動かすための手順、使用技術、主な機能を記載すると、確認する側の負担を減らせます。公開してはいけない情報や個人情報が含まれていないかも確認が必要です。
求人を見極めて応募先を選ぶ
未経験歓迎・実務未経験歓迎の意味を求人票で確認する
未経験歓迎という表現だけで、応募しやすい求人だと判断するのは早計です。社会人経験がない人も対象なのか、IT業界は未経験でも何らかの開発経験が必要なのか、実務経験はないが学習済みの人を想定しているのかを確認しましょう。
応募条件、担当業務、必要な技術、選考内容を読み、現在の自分との差を把握することが大切です。すべての条件を満たしていなくても、必須条件と歓迎条件を分けて考えると応募判断をしやすくなります。
研修内容と研修後の配属先を具体的に確認する
研修がある求人では、研修期間、学ぶ内容、研修中の待遇、研修後の業務を確認します。「研修あり」という記載だけでは、実際にどの程度の学習支援を受けられるか分かりません。
研修後にフロントエンド開発へ関われるのか、それ以外の業務から始まる可能性があるのかも重要です。面接では、未経験者が担当する最初の業務や、技術面の相談先について質問しましょう。
自社サービス・受託開発・常駐支援の働き方を比較する
自社サービスの開発では、一つのサービスを継続的に改善する働き方になりやすく、利用者の反応を見ながら機能を育てられる場合があります。
受託開発では、顧客から依頼されたWebサイトやシステムを作ります。案件ごとに異なる業種や要件に触れられる一方で、納期に合わせた進行が求められます。
常駐支援では、取引先の職場で開発を支援する形態があります。担当業務、教育体制、勤務場所、チームの構成は案件によって異なるため、配属の決まり方や希望を伝える機会を確認することが必要です。
給与・休日・残業・評価制度で確認すべき条件
給与を確認する際は、基本給だけでなく、固定残業代の有無と対象時間、試用期間中の条件、昇給や賞与の扱いを確認します。数字だけで比較せず、仕事内容や学習支援、将来の成長機会も含めて判断しましょう。
休日数、休暇の取りやすさ、残業の状況、評価基準も重要です。どのような成果や行動が評価されるのかを把握すると、入社後の働き方を具体的に想像しやすくなります。
リモート可の条件と地方在住者が確認すべき点
リモート可と書かれていても、入社直後から完全に在宅勤務とは限りません。研修中や試用期間中は出社が必要な場合、週に数回の出社が必要な場合、特定地域への居住が条件となる場合があります。
地方在住者は、出社頻度だけでなく、交通費の扱い、緊急時の出社可否、貸与される機器、通信環境の条件も確認しましょう。生活拠点を変える必要があるかどうかを、応募前に判断できる情報を集めることが重要です。
応募書類と面接の準備を進める
履歴書と職務経歴書で未経験を補う伝え方
未経験者の応募書類では、学習中である事実だけでなく、何をどのように学び、何を作ったのかを具体的に書きます。使用した技術を並べるだけではなく、作品内で担当した機能や工夫を説明しましょう。
職務経歴書では、前職の業務をフロントエンドエンジニアに関係する強みに置き換えて伝えます。課題を見つけて改善した経験、周囲と連携した経験、継続して成果を出した経験などは、業界が違っても評価につながります。
学習内容・ポートフォリオ・前職経験を一貫して説明する
応募書類、ポートフォリオ、面接で話す内容に一貫性を持たせましょう。たとえば、利用者の困りごとを解決する画面作りに関心があるなら、前職で感じた課題、作品の目的、志望理由をつなげて説明します。
一貫した説明ができると、思いつきで転職を考えているのではなく、目的を持って学習と応募準備を進めていることが伝わります。
志望動機で仕事への理解と入社後の意欲を示す
志望動機では、「成長できそうだから」といった抽象的な表現だけでは不十分です。応募先の事業内容、開発するもの、求める役割を理解したうえで、自分の経験や学習内容がどうつながるかを説明します。
入社後は、まず基礎を確実に身に付け、チームの一員として役に立つ姿勢を示しましょう。未経験である点を隠すよりも、足りない部分を学び続ける具体的な行動を伝えることが大切です。
技術面接で聞かれやすい基礎質問への備え
技術面接では、HTML、CSS、JavaScriptの基本的な役割や、制作した作品について質問されることがあります。暗記した説明を用意するだけでなく、自分の言葉で説明できるように準備しましょう。
特に、作品については、なぜその技術を使ったのか、難しかった点をどう解決したのか、改善するなら何をしたいかを整理しておきます。分からない質問が出た場合は、知ったかぶりをせず、現時点での理解と調べる方法を伝える姿勢が必要です。
応募数の目安と選考結果を次の応募に生かす方法
未経験からの転職では、一社ごとの結果に過度に左右されず、条件に合う求人へ継続して応募することが重要です。ただし、応募数だけを増やすのではなく、求人内容を確認し、応募先ごとに志望動機を調整しましょう。
書類選考が通らない場合は、作品の見せ方、書類の分かりやすさ、応募条件との一致を見直します。面接で不採用が続く場合は、質問への答え方や作品説明を振り返ります。結果を記録し、改善を次の応募につなげることで、転職活動の精度を高められます。
