文学部のためのWebエンジニア就職完全ガイド！プログラミング独学から内定獲得まで
- 「文学部でもエンジニアになれるの？」
- 「完全初心者だけど、どんな勉強をすればいいの？」
- 「Web系のエンジニアとして内定をとれる方法を知りたい！」
こんな悩みを解決できる記事です。
文学部出身の僕は、大学4年生の4月から約4ヶ月かけてこの方法を実践して、 プログラミング完全未経験の文学部出身にも関わらず、IT企業からWebエンジニアとして内定を獲得できました。
この記事を参考に行動していけば、 文学部出身でもエンジニアとして内定をとれるぐらいの知識にレベルアップしていますよ。
本記事の内容
- 文学部の学生がエンジニア就職で準備すべきこと3つ
- Webエンジニアとして内定を獲得した、超具体的なプログラミング勉強方法
これらをまとめた、【エンジニア就活完全ロードマップ】を公開します。
本記事の信頼性
この記事を書いている僕は、文学部を卒業してから、IT企業でWebエンジニアとして中小企業のホームページ制作・運用担当をしてきました。現在は中小企業様のホームページ制作とランディングページ制作をメインにお仕事しています。
今回は、エンジニア就職を考えている文学部のあなたへ、実際に元文学部の僕が、エンジニア就職で準備すべきことや具体的なプログラミング勉強方法についてご紹介していきます。
僕自身、パワポすらまともに使えない状態からプログラミング学習を始めたので、完全初心者の方でも一つずつステップを踏んでいけば、エンジニアとして就職できるチャンスはあります。
ですのでITに苦手意識がある方でも気にせず読み進めてみてください。
目次
文学部の僕がエンジニアとして内定を獲得するためにした3つのこと
- プログラミングの基礎を学ぶ
- Webサイト（ホームページ）を作る
- エンジニア専門の就職支援サービス【無料】を活用する
以上の3つをしたことで、文学部出身の僕でもIT企業のWebエンジニアとして内定をもらうことができました。エンジニア就活でしたことは、この3つだけです。とてもシンプルです。
この記事では、『プログラミングの超具体的な勉強方法【完全初心者可】』も解説しているので、プログラミング未経験でも大丈夫です。スタートはみんな同じです。一緒に頑張っていきましょう！
まず初めにWebサイトを作るのが重要な理由
- プログラミングの基礎を学べるから
- 基礎学習と同時に、エンジニア就活の材料が完成するから
- 就活エージェントに優良企業を紹介してもらいやすくなるから
理由はこの3つです。それでは、それぞれ深堀りしていきましょう。
プログラミングの基礎を学べるから
「Webサイトを完成させる」という目的があるため、プログラミングを挫折せずに学ぶことができます。注意すべきは、プログラミング初心者が陥るワナです。
それは、プログラミングを学ぶ目的がないため、どこまで勉強していいか分からず、挫折してしまう人が多いということです。
この記事では、「Webエンジニアとして内定を獲得するために、Webサイトを作れるプログラミングの知識を身につける」という明確な目的があるので、初心者でも最後まで挫折せずに学ぶことができます。
基礎学習と同時に、就活の材料が完成するから
プログラミングの基礎学習と同時にWebサイトを作ることで、就活するときに成果物として企業にアピールできます。どうせプログラミングを学ぶなら、基礎学習もできて就活の材料にもなったほうがいいですよね。一石二鳥を目指しましょう。
就活エージェントに優良企業を紹介してもらいやすくなるから
冒頭で僕が就活でしたこと3つを書きました。
- プログラミングの基礎を学ぶ
- Webサイト（ホームページ）を作る
- エンジニア専門の就職支援サービス【無料】を活用する
しかし、この手順を見て次のような疑問を持った方がいるかもです。
「わざわざ最初にWebサイトを作らなくても、先に就活エージェントを使えばよいのでは？」
たしかに、わざわざプログラミングの基礎学習をして、Webサイトを作るのは面倒くさいですよね。
しかし、あなたがエージェントになったつもりで考えてみてください。入りたい会社の面接官でもいいですね。次の2人が面接に来た場合、あなたならどちらを採用しますか？
プログラミングの経験はありませんが、エンジニアとして働く熱意は誰よりもあります！
プログラミングの経験は今までありませんでしたが、独学でWebサイトを５つ作りました。エンジニアとして働く熱意があります！
どうですかね。たぶん採用するのは後者ですよね。
就活エージェントであれば、後者の人を企業に紹介したほうが、入社後のミスマッチも防げそうですよね。会社の面接官であれば、どれだけ熱意があってもプログラミングの「プ」の字も知らない学生は採用しづらいです。
以上のことから、【プログラミングの基礎学習 → Webサイトを作る → 就活エージェントを活用する】 という順番を守ることがいかに大切か、理解していただけたと思います。
ここまで順番が大切なのはわかったけど、Webサイトってどうやって作るの？という疑問が浮かぶと思います。それでは早速、Webサイトの作り方【3ステップ】を解説していきます。
Webサイトの作り方【3ステップ】
Webサイト完成までは全部で3ステップあります。
- プログラミングの基礎を学ぶ
- Webサイトを作る
- ポートフォリオサイトを作る
以上の3ステップで完成です。
それでは各ステップを詳しくみていきます。
プログラミングの基礎を学ぼう
そもそもプログラミングとは
わたしたちは友達と会話するとき、言葉（日本人どうしなら日本語）を使いますよね。それと同じで、「機械と会話するための言葉」がプログラミングです。その言葉について学ぼう！というわけです。
用意するものは？パソコンは何を使えばいいの？
用意するものはノートパソコンのみで大丈夫です。
ちなみにパソコンはWindowsでもMacでもどちらでもOK。
「プログラミングするならMac Book！」こう言う人もいますが、最初の段階で購入する必要はありません。僕は大学の生協で購入したWindowsのノートパソコン（Let’s note）で就活を乗り切りました。
どのプログラミング言語を学べばいいの？
結論 ＝ Web系の言語を学ぼう。
理由 ＝ 短期間でWebサイトが作れて就活を有利に進められる & 文系の人でも学びやすい言語だから。
Web系の言語とは言い換えると、Webサイト(ホームページ)を作るために必要な言語です。Web系の言語を勉強することで、Webエンジニアを目指そう！ということですね。
プログラミング言語は、約1000種類以上あると言われています。
例えば、AI分野ではPythonという言語が使われています。iPhoneのアプリはSwift、WebサイトではHTML/CSS・JavaScriptなどが使われています。それぞれ用途に応じて使う言語が違うため、こんなにも種類が多いんですね。
また、Webサイトを1つ作るにしてもさまざまな言語が使われています。
どの言語をどの順番で学べばいいのでしょうか。次に詳しく解説していきます。
言語を学ぶ順番
HTML → CSS → jQuery → WordPress → PHP
人によって順番が前後することはありますが、HTMLからスタートするのが大事です。
HTMLやCSS、その他の言語の詳しい学習方法は『プログラミングの超具体的な勉強方法』で詳しく解説しています。
Webサイトを作ろう
Webサイトとは
ここで言うWebサイトとは、ホームページのことです。
HTMLとCSSだけで簡単なWebサイトは完成します。しかし、一般的なWebサイト(ホームページ)は、HTMLとCSSに加えて、ページに動きをつけるためにjQueryという言語を使います。
このあたりから少し難易度が上がりますが、100％理解しようとしなくて大丈夫です。必要最低限の動きを、jQueryを使ってできるようになりましょう。jQueryの詳しい学習方法も、『Webサイトに動きをつける【jQueryの基礎学習】』で解説しているので、そこを見ればできるようなります。
ポートフォリオサイトを作ろう
ポートフォリオサイトとは
ポートフォリオサイトとは、これまでに自分が作ったWebサイトをまとめたもののことです。要するに、まとめサイトですね。
このまとめサイトを作ることで、就活する際に自分を企業にアピールできます。これがあるか無いかで、今後の就活が大きく変わってきます。大半の就活生はポートフォリオなんて作っていません。簡単でいいので、作ってしまいましょう。
ポートフォリオの作り方に関しても、この先で解説しています。
以上でWebサイトの作り方3ステップのおおまかな流れがつかめたかと思います。
プログラミングの基礎学習 → Webサイトを作る → ポートフォリオサイトを作る
この流れがつかめたところで、次はプログラミングの勉強方法について超具体的に解説していきます！
エンジニアとして内定を獲得するためのプログラミング学習マップ
最初に、プログラミング学習マップの流れをまとめます。
- HTMLとCSSの基礎を学ぶ
- プロゲート
- プロを目指す人のための HTML& CSSの教科書
- ドットインストール
- ディベロッパーツールを使う
- CSSのFlexboxを学ぶ
- 模写コーディング【初級レベル2課題】
- Webサイトに動きをつける【jQueryの基礎学習】
- 模写コーディング【中級レベル1課題】
- ポートフォリオサイトを作る
HTMLとCSSの基礎を学ぶ
Webサイトはどれも、HTML/CSSと呼ばれる言語で作られています。すべてのWebサイトの基礎となる言語なので、まずはHTMLとCSSから学んでいきましょう。
プロゲート
HTMLとCSSを学ぶのにプロゲートという教材を使います。
イラスト中心のスライドで学習できるので、完全初心者の人におすすめです。Web版とアプリ版がありますが、手を動かすことが大切なので、パソコンを使ってWeb版を中心に学習しましょう。僕は移動中に、アプリ版のスライドを見て勉強していました。
※ここで注意点が3つあります※
・スライドを見て終わりではなく、同時に手を動かしましょう
・プロゲートのHTML&CSSコースは多くても2周までに。60％の理解でOKです。
・プログラミングはカンニングOKです。手が止まってしまうなら答えをみましょう。覚える必要はありません。
プロを目指す人のための HTML& CSSの教科書
プロゲートをやったことで、「HTML/CSSはこんな感じか」となんとなく理解できたと思います。しかし、これだけで本当にWebサイトが作れるのだろうか。不安ですよね。でも大丈夫です。
手元にプロを目指す人のための HTML& CSSの教科書を用意しましょう。
この書籍をこれからの学習で辞書的に活用していきます。パラパラと1周だけでいいので、目を通せたらGoodですね。60％くらいの理解で大丈夫です。
この先の学習で、理解が浅いなと思ったらこの書籍の巻末Indexを開きましょう。僕は分からないとこが出てきたら都度、巻末にマーカーを引いていました。ページ番号が振ってあるので、あとから探すのがラクになります。
補足：［HTML Living Standard準拠］とは、HTMLのバージョンのようなものと捉えてOKです。HTML5よりもHTML Living Standardの方が新しいんだな、くらいの理解で大丈夫です。また、僕が当時使用していた、『よくわかるHTML5+CSS3の教科書【第3版】』の最新版がこちらの書籍です。
※「わざわざ書籍を買わなくても、ググればいいのでは？」と思われた方へ。
たしかに、それでもいいと思います。しかし、この書籍のようにHTML/CSSが体系的にまとまっているサイトって少ないんですよね。唯一まとまっているのが、公式ドキュメントだったりするので、初心者が見ると情報量が多すぎて混乱してしまうんです。（僕自身そうでしたw）
一冊だけ辞書的なものを手元に用意しておくと、今後の学習がスムーズになります。
ドットインストール
ドットインストールは3分の短い動画でプログラミングを学べるサイトです。
ここでエディタを用意しましょう。
エディタとは、プログラミング言語を扱う際に必要な編集ソフトのようなものです。先ほどまでの学習では、プロゲートがエディタを用意してくれていました。しかし、ここからは自分でエディタをインストールして、Webサイトを作っていく必要があります。
そこで、マイクロソフト社が無料で提供しているVisual Studio Code（通称VSCode）をインストールしましょう。手順は以下のドットインストールで解説されています。
これでWebサイトを作る下準備ができました。
それでは、インストールしたエディタを使ってみましょう。こちらもドットインストールを使います。全ての講義を見るには、有料会員になる必要がありますが、ここでは【無料公開中】のところを見て、実際にエディタを使ってみましょう。
エディタに触れることが目的なので、ここでは【無料公開中】の動画しか見ていませんが、ご覧の通り、かなり上質な動画です。この先の学習で行き詰まったら、月1000円程度なので有料会員になるのも手の一つですね。
ディベロッパーツールを使う
ディベロッパーツールは、Webサイトを作る際に手助けしてくれる便利ツールです。
以下の記事が分かりやすいので、読みながら手を動かしてみましょう。
【Chrome検証ツール使い方】初心者が抑えておくべき便利な4つの機能の使い方
動画で学びたい人はこちらがオススメです。
Chrome DevToolsの使い方を徹底解説！（You Tube） ※開くと動画が再生されます
CSSのFlexboxを学ぶ
CSSのFlexbox を使うことで、Webサイトのレイアウトを簡単に変えることができます。
この先、パソコン版とスマホ版など、画面の大きさに応じてレイアウトを変える必要がでてきます（レスポンシブデザインと呼ばれます）。その際にとても便利なのが、CSSのFlexboxなんですね。しかし、便利な反面、覚えることが多いです。
なので、Webクリエーターボックスの【Flexboxのチートシート】を印刷して、手元に置いておきましょう。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
印刷ができたら早速、Flexboxについて学んでいきましょう。【Flexboxのチートシート】を作ったManaさんが、非常に分かりやすくYou Tubeで解説されています。感謝です。
CSS入門講座＃11：Flexbox（フレックスボックス）でレイアウトを組もう ※開くと動画が再生されます
ここまでの学習で、HTML/CSSの基礎が抑えられました。
この時点で、あなたは簡単なWebサイトを作れるスキルが身についています。次からは、HTML/CSSの実践学習をしていきましょう！
模写コーディング【初級レベル2課題】
ここからは模写コーディングという方法で学習していきます。
模写コーディングとは、既存のWebサイトを見ながら、それと同じサイトをHTML/CSSを使ってコーディングすることです。模写コーディングのやり方は以下の記事で詳しく解説されています。
記事を読んだら早速、模写コーディングしていきましょう。
ここでは、初心者の模写コーディングに最適なサイトを3つ用意しました。
まずは、パソコンで表示されるデザインだけで良いのでやってみましょう。余裕のある人はスマートフォン版のコーディングにも挑戦できるといいですね。上から順番に挑戦していきましょう！
初級レベル【2課題】
※たぶん、ここの模写コーディングが一番しんどいです。僕は何度も挫折しかけました。大切なので繰り返しますが、プログラミングはカンニングOKです。わからなくなったら、ディベロッパーツールを使ったり、本や動画の解説を見たり、ググったりしましょう。エンジニアの方に質問するのもいいですね。teratailというサイトで、プログラミングに関する質問が無料でできます。
多少の表示崩れは気にしないで大丈夫です。ここが一番の踏ん張りどころなので、なんとか進めてみましょう。
Webサイトに動きをつける【jQueryの基礎学習】
先ほど模写した2つのWebサイトは、HTML/CSSだけで作られています。動きがないので、このようなWebサイトは「静的サイト」と呼ばれます。
サイトに動きをつけるために必要なのが、JavaScriptです。
しかし、JavaScriptは難しいので、「jQuery」を学びましょう。jQueryはJavaScriptを書きやすくしたパッケージのことです。Webサイトに動きをつけるために、最低限必要な機能をjQueryで学びましょう。
ここでもプロゲートを使います。
初級編は無料で学べます。中級編からは有料ですが、ここではとりあえず初級編のみを学習して次に進みましょう。次にする中級編で必要になる機能が出てきたら、必要に応じて調べればOKです。それが一番効率いいです。
※初級編は多くても2周までにしましょう。模写をする中で、jQueryをさらに学びたいと思ったら、有料会員になるのもありです。（僕は有料会員になってjQueryの知識を深めました。）
ここまでで、jQueryの基礎中の基礎が理解できたかと思います。
それでは早速、実践していきましょう。
模写コーディング【中級レベル1課題】
ここまでjQueryの基礎を学んだことで、動的なWebサイトが作れるようになっています。
ここでは、中級レベルの模写コーディングに最適なサイトを1つ用意しました。
かなりボリューミーですが、パーツに分けてコーディングを進めていきましょう。
jQueryも適度に使われています(ハンバーガーメニュー、アコーディオン、スムーススクロールなど)。分からない箇所は、基本的にググればOKです。これが完成すればWebサイトを作るスキルの習得は完了です。
それでは、就活を有利に進められるように、今まで作ったWebサイトたちをまとめていきましょう。
ポートフォリオサイトを作る
ポートフォリオサイトとは、今までに作ってきたサイトをまとめて、自分のスキルや実績をアピールするものです。
デザインできないし、コーディングスキルはまだまだだし、ポートフォリオサイトなんて自分には作れない。過去の僕はそう思ってました。しかし、ここまで学習してきたあなたなら大丈夫です。難易度は模写コーディングと変わりません。デザインに関しては、HikoProさんのポートフォリオを参考にしましょう。
参考にすべきポートフォリオ：HikoProさんのポートフォリオサイト
ポートフォリオを作ることが大切なので、クオリティはそこまで気にしなくて大丈夫です。大半の就活生はポートフォリオなんて作っていないので。
ここまでで、エンジニア就活するための材料が揃いました。
お疲れさまでした！
ここまでやり切った人は、たぶん10％もいません。「プログラミング学習で挫折を経験した人は87.5％」という調査結果があるように、ここまでやり切ったあなたのスゴさがわかります。
ここまできたら、あとひと踏ん張りです。
次に、Webサイト（ポートフォリオサイト）が完成した後でやるべきこと3つについて解説していきます。
Webサイトが完成した後でやるべきこと3つ
- 就活エージェント（レバテックルーキー）を活用する
- 完成したポートフォリオサイトを公開する
- WordPressの基礎を学ぶ
以上がWebサイトが完成した後でやるべきこと3つです。
それでは詳しく見ていきましょう。
就活エージェント（レバテックルーキー）を活用する
まずはレバテックルーキーに登録しましょう。完全無料で使えます。
レバテックルーキーとは、エンジニア就職に強い就活エージェントです。
僕が大学4年生の時にレバテックルーキーを実際に活用してみて感じた、メリットとデメリットを以下にまとめました。
メリット
IT業界に詳しいエージェントが、マンツーマンで就活をサポートしてくれます。LINEでやり取りができるので、気軽に相談できます。初回のキャリア面接（無料相談）では、ZOOMを使って自分が今後、どのような働き方をしていきたいのか、どのような手順でこれからエンジニア就活を進めていけばいいのか、詳しく話が聞けます。
デメリット
自分が本当に行きたいと思える企業が、エージェントさんが紹介してくれる企業の中にあるか分からないことです。僕は実際に、5社の企業を紹介してもらいました。そのなかで、「エンジニアとしてこの企業で働きたい！」と思える企業が3社ほどあったので、良かったです。
紹介された企業に、絶対エントリーしなければいけないわけではないので、「いろんな企業を見てみよう」という気持ちで、まずは登録してみるのがいいですね。
※重要ポイント※
初回のキャリア面接（無料相談）で、これまでに作った自分のポートフォリオサイトを担当のエージェントさんに見せておきましょう。これをすることで、自分が行きたいと思える企業を紹介してもらえる可能性がぐんと上がります。デメリットの部分を消せますね。
レバテックルーキの登録は以下の公式サイトからできます。
無料で登録できて、その後のエンジニア就活サポートも完全無料です。
レバテックルーキに無料登録できたら、次はポートフォリオサイトの公開をしましょう。
完成したポートフォリオサイトを公開する
ここまでで完成したポートフォリオサイトは、いまのところあなたのパソコン上でしか見れません。そこで、誰でも見れるようにしましょう。自分のポートフォリオサイトをネット上に公開します。
そうすることで、これから面接を受ける際に、企業の人にアピールしやすくなります。実際に、二次面接あたりからエンジニアとして働いている方たちと、接する機会が出てきます。その際に、ポートフォリオサイトがあるのと、ないのでは大きな差がでます。
ポートフォリオをお金をかけずに公開する方法は、以下の記事がわかりやすいです。
【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】
※注意点※
模写コーディングしたサイトをポートフォリオサイトに載せる際は、必ず「アクセス制限（Basic認証）」をかけましょう。模写コーディングでもお世話になった、はにわまんさんの記事を参考にさせてもらいましょう。
Basic認証の設定方法！「.htaccess」と「.htpasswd」の2ファイルを作成する
ここの「完成したポートフォリオサイトを公開する」に関しては、ES・面接対策と同時に進められたらGoodですね。
WordPressの基礎を学ぶ
ここまでで、ポートフォリオサイトをネット上に公開できたかと思います。
このタイミングでWordPressの基礎学習をしていきましょう。
WordPressは誰でも簡単にWebサイトが作れるツールです。
「ポートフォリオサイトは完成したし、また勉強するの？」そう感じますよね。
なぜWordPressを学ぶのか？
実は今、「世界中のホームページのうち43.2%がWordPressによって構築されています(※)」※ 出典： Usage Statistics and Market Share of WordPress, February 2023。
世界の半分近くのサイトがWordPress で作られているんですね。そのため、Webエンジニアとして働くのであれば、WordPressの知識は必須になります。
ここでは、面接対策と同時に進めてほしいので基礎学習のみでOKです。
以下の動画で学習しましょう。有料版の教材もありますが、セール中だと90%オフで購入できるのでオススメです。
【無料】WordPress開発講座（You Tube） ※開くと動画が再生されます
【有料】ちゃんと学ぶ、WordPress テーマ開発講座（Udemy）
ここまで勉強してきて、WordPressはPHPという言語で作られていることがわかったと思います。WordPressについてさらに理解を深めるために、余裕がある人はPHPの基礎学習とデータベース（DB）の基礎を学んでみましょう。
※ここではエンジニアとして内定をもらうのが目的なので、PHPとDBの基礎学習に関しては、ES対策や面接対策と同時に進めるのを推奨します。僕は面接で、「PHPの環境構築はどうやってしたの？大変だったでしょ。」と聞かれました。ちゃんとインプットしつつ手を動かしていたので答えられました。
PHPとDBの理解を深めるなら、「WordPress開発講座」でもお世話になった、たにぐちまことさんの動画教材が分かりやすいです。有料ですが、高品質で圧倒的にわかりやすいです。
ここまでお疲れさまでした。
最後にWEBサイトが完成した後でやるべきこと3つを再びまとめておきます。
- 就活エージェント（レバテックルーキー）を活用する
- 完成したポートフォリオサイトを公開する
- WordPressの基礎を学ぶ
以上3つを、ES・面接対策と同時に進めていきましょう。
まとめ：エンジニアになるのに学部は関係ない【文学部でもなれた】
最後に、Webエンジニアを目指す学生が見るべきサイトを紹介して終わりにします。僕が就活中にお世話になったサイトです。
- 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】『manablog』
- 【独学でWeb制作】月5万稼ぐための学習マップ『HikoPro Blog』
また、当時は公開されていなかったのですが、しょーごさんという方が超有益な情報を発信されています。こちらも参考にさせてもらいましょう。感謝ですね。
この方たちのおかげで、Webエンジニアとして就職することができました。僕自身は文学部出身で、まわりにWebエンジニアを目指している友達がいませんでした。
しかし、ネットの情報を頼りに、プログラミング学習を進めていったことで、「文学部所属・大学4年生・プログラミング未経験」という割と絶望的な状態から、Webエンジニアとして内定を頂くことができました。
マナブさん、HikoProさんを始めとする、情報発信をしてくれた方には本当に感謝です。感謝の気持を込め、僕も1万文字近くのこの記事を公開することにしました。
過去に自分が悩んでいたように、この記事が誰かの背中を押すキッカケになれたらとても嬉しいです。応援してます！