Web制作の独学が評価され制作会社に転職成功！ポートフォリオやアピール方法を成功者に深堀りインタビュー！

【ゲストプロフィール】
りょうさん（@ryo_designweb）

公務員を10年努めた後退職し、事務所立ち上げ。その後独学でWeb制作を身に着け、第一志望の制作会社に一週間でスピード内定！

はい！はじめまして。りょうと申します。

大学卒業後、公務員として10年程勤めました。

その後、在勤中に取得した士業資格を活用して独立し、1年程個人事業主として事務所運営をしておりました。

令和6年5月中頃から転職活動を始め、5月の末頃に無事に制作会社から内定をいただくことができました。

今後Web制作の分野での転職やフリーランスとして活動して行きたい方の参考になれば幸いです。

どうぞよろしくお願いいたします。

士業として独立開業した際に、事務所HPをWordPressで制作したことが一番のきっかけです。

コードが書けなかったのでブロックエディタを使って制作しましたが、その作業がとても楽しかったことを覚えています。

そこで、自分の思い通りのデザインで作れたらもっと楽しくなるんじゃないかと考えて、本格的にWeb制作を学ぼうと決意しました。

他には、バックエンド側のフリーランスになって稼いでいた友人からの勧めも後押しされた要因です。

フロントエンドとバックエンドで勝手は違えど、「プログラミングの技術を身に付ければどこでも生きていけるよ」と言われたのがとても印象的でした。

ちなみに、事務所を開業して１か月程度しか経っていない中での決断だったので、そっちはどうした！という感じではありますが。笑

事務所運営のためにお金を残しておきたかったこともあり、費用をなるべくかけずにコーディングの勉強ができる方法がないかを探していました。

たくさんの方がWeb制作ロードマップを発信している中、どこよりも詳細な発信をしているしょーごさんのロードマップに出会い、

それに従って学習を進めていこうと決めました。

基本的にはしょーごさんのロードマップに示されたとおりの順序でコーディングの勉強をしていました。

上級編を除いて、初級編・中級編で示されていた書籍を活用しつつ、足りない情報やあまり理解できない部分が出てきた際に、

しょーごさんのブログ記事、YouTubeやGoogle検索で補足して進めておりました。

ロードマップに記載されていた書籍については、購入はしたもののほとんど使用していない教材もあります。

特にWordPressの学習に際しては、書籍はほとんど使用していません（理由は後述します）。

ヘビロテした教材3点は以下になります！

特に、2冊目のコーディングの強化書は何度もお世話になりました。

コーディングで再現したいデザインと似たデザインを本書から探し、HTMLの構造とCSSの構造を理解→実践を繰り返すことで、

自然とよくあるパターンのコーディングはできるようになったと思います。

CSS設計に関しては、まずはBEMをマスターしようと考え、CSS設計完全ガイドの該当部分を3周ぐらい読み込んだと思います。

これも3つありまして、以下ですね。

ロードマップに従って、『HTMLサイトをWordPressにする本』を使用して静的サイトをWordPress化することを試みましたが、

これまでと違いほとんど理解できず、全然手が動きませんでした。

本書に記載のとおりにphpのコードを書いていれば、確かに書籍に掲載されているモデルサイトはWordPress化できますが、

他のサイトを自分でコーディングできるようになるイメージが全く持てなかったんですよね・・・

本書を最後まで読み進めずに、早々に諦めてしまいました。

そして、ちょうど本業の方で相談が重なったこともあり、数か月コードを書いていませんでした。

令和5年の8月中旬にしょーごさんのコーディング課題全部盛りを購入して、

と1か月に1つは課題をクリアしていましたが、上級編をクリアしたのは年が明けて3月中旬でした笑

挫折したまま腐っていても仕方がないので、WordPressを本質的に理解するための教材を探していたところ、

学習プラットフォームunazukiのWordPressコンプリートコースを見つけました。

WordPress理解の肝となる、テンプレート階層・メインクエリ・サブクエリについて詳細に説明されている印象だったので、迷わず購入しました。

書籍で学習していたときとは違い、WordPressの構造をしっかりと理解でき、他のサイトにも応用可能な汎用的な知識を身に付けることができたと思います。

お値段19,800円でしたが、価格設定を間違っているのではないかと思う程のクオリティでした。

しょーごさんのブログに、「デザインカンプからのコーディング課題のオリジナルポートフォリオ化事例集【Web制作】」という記事があり、そこに掲載されることを目標にしておりました。

私は中級・中級Ex・上級の計3つの課題でオリジナルポートフォリオを作成しましたが、ありがたいことに中級・中級Exで作成したサイトを掲載いただきました。

ありがとうございます！

目標があった方が制作のクオリティを上げようというモチベーションが湧いてきますし、結果が出ることでその後の学習意欲も高まると思うので、おすすめです。　

いえ、初めはフリーランスになることも検討しましたが、本業の方で大苦戦していた経緯もあり、実績がない中で戦っていくことに若干の不安がありました。

また、自分の実力を相対化する機会がなかったため、お客様にしっかり価値提供ができないのではないかとも考えました。

そこで、実績を作るためにも、自分自身を揉むためにも、一線で活躍している方々のいる環境に飛び込もうと思い、転職を決めました。

とにもかくにもフィードバックを得られる環境に身を置きたかったという感じです。

まずは転職サイトで求人を探すところから始めました。

実際に登録した求人サイトは、

この２つだけです。

転職が初めてだったこともあり、まずは情報収集をしました。

具体的にはYouTubeで転職について発信しているチャンネルを探し、役立ちそうな動画を視聴していました。

特に参考にしていたのは、『転職のサラタメさん』というチャンネルです。

正直、この人の動画さえ見れば転職用の書籍などはいりません。

はい！収集した情報をもとに、履歴書・職務経歴書・スキルシートを作成しました。

Web制作の実務経験がなかったためスキルシートの作成が一番困りましたが、ありのままの現状と今後の学習予定を記載し、なんとかやる気をアピールしようと努力しました。

これらの書類を作成するにあたって重要な考え方があるのですが、『転職のサラタメさん』チャンネルの以下の動画、

これを見ればOKです。これ一本でほぼほぼ面接・履歴書等作成は大丈夫です。

ＨＰの制作会社には特に限定せず、自社メディア運営のためのコーディングスタッフや、自社開発でアプリケーションを作っている会社など、

コードを書ける環境がありそうならＯＫというスタンスで応募しておりました。

用意したポートフォリオサイトはこちらです。

デザインが全くできないので制作には苦労しました。

必要と思われる情報を整理して並べることだけを意識して、シンプルなつくりにしています。

応募はすべてindeed若しくは企業様のHPにあるエントリーフォームを通じて行いました。

今どきは紙の履歴書に写真を貼って送るなんてことがないのかぁ、とちょっと驚きました笑

Web制作に関する実績がなかったので、これまでの社会人生活で培った能力について職務経歴書でアピールしました。

ただ、公務員→士業と紙ばっかり扱う事務仕事がメインだったので、そんな大したエピソードもなかったのですが。笑

結果としては書類落ちは１社だけでした。

一生懸命作りこんだ職務経歴書でしたが、面接ではほとんど経歴や経歴書に記載した自己ＰＲのエピソードについては触れられませんでした笑

ただ、全く異なる業界・業種への転職だったので、Web業界に転職したい理由や志望動機については、根ほり葉ほり聞かれた印象です。

他には、現状のスキルのレベル感を確認されました。しかし、実務未経験で応募しているのは企業側も承知しているので、そんなに突っ込んだ質問はされませんでした。

具体的に聞かれた質問は次のような感じでした。

転職活動の軸としては、コーディングの技術が磨ける環境であることを最も重視していました。

また、家族がいるので（妻・幼子2人）、残業時間がなるべく少ない企業を中心に応募していました。未経験業種・業界への転職でしたので、年収の優先順位は低かったです。

業界経験あり・技術力が上がった状態であれば、次回の転職や独立の際には一定の市場価値を持って臨むことができると考えたので、今は踏ん張りどころという考えでした。

非常に短期間で運よく第一志望の企業様から内定を頂けたので、実は応募数はとても少ないです。戦歴は下表のとおりです。

ありがとうございます笑

内定を頂いたA社に関しては、

という流れで内定をいただきました。エントリーから内定まで1週間くらいです。

履歴書や職務経歴書作成などの転職準備期間が1週間くらいだったので、内定をいただくまではトータル2週間程度でした。本当に運が良かったと思います。

内定を得られたポイントとして最も大きかった点は、

これに尽きると思います。

独学が評価された要素を分解して考えてみたのですが、次の2点が企業側のメリットと一致するからだと思います。

皆様ご承知のことと思いますが、プログラミング業界は新しい技術や流行の展開が非常にめまぐるしい世界だと言われています。

こうした業界では、常に学習が求められますし、スキルを磨き続けることが求められます。

このような環境の中で、先輩技術者におんぶに抱っこの状態では、正直、生産性・効率性の観点から見ると赤字社員と評価されてしまうと思います。

フリーランスの場合はもっと厳しい印象があって、必要な技術が身についてないのであれば、委託企業側からすると切る一択だと思います。

独学の場合、世に溢れている情報を自分で取捨選択して、必要な知識として身に付けていくことになります。

面接官は自分よりも技術や業界のトレンドに明るいのは当然ですが、その方々も技術を身に付ける過程を必ず経験しています。

そのため、アウトプットのレベル感を見れば、どの程度の苦労をしたかがある程度わかるのだと思います。

そうすると、

1. アウトプットのレベルが一定以上
2. 独学で身に付けた
3. 自走力がありそう
4. 採用しても育成コストが低そう
5. まぁ雇ってやってもいいか

と評価してもらえるのではないかと想像しています。

正直、コードを書くことが好きじゃないと独学での勉強は続かないと思います。

初めはうまくデザインカンプを表現できないし、一文字でも間違うとコードは機能しないし、そもそも英語だし、実際ストレス要素満載の分野です。

加えて、メンターのサービスなどを使わない限り、自分一人で問題を解決していく必要があります。

ストレス要素満載な中で一人で戦っていくには、源泉となる気持ちがないとやってられません。

そうすると、一定以上のアウトプットを示すことができれば、コーディングの仕事に真剣に向き合う気持ちがあるんだなと採用担当者は感じてくれるのだと思います。

真剣に向き合う人であれば、最初に多少育成コストがかかったとしても、その後は勝手に成長してくれると考えているのだと想像しています。

まとめると、ポートフォリオそのもののレベルというよりは、そのアウトプットに辿り着くまでの過程から、Web制作に対する熱量を推し量ってもらえるのだと思います。

実際、面接を受けた2社とも、独学でスキルを身に付けたことに対する食いつきが非常に良かったです。とても褒められました。

内定をいただいた企業様（Ａ社）からは、

とのお言葉をかけていただきました。

ＥＣサイトの売上強化を目的に人材募集していた企業様（Ｂ社）は、コーディングやWebデザインを内製化していくために、

初めてこれらを担当する人材を募集したようです。

内製化に向けて社内でも様々な資料にあたりながら、独力で進めようとしたもののハードルが高かったそうです。そのため、

とのお言葉をかけていただきました。

当然ですが、スキルのレベルが高いに越したことはないです笑

求人情報を見ると、地域にもよると思いますが、HTML・CSS・JavaScript・WordPressの技術だけでＯＫという求人は非常に少ないです。

Laravel・React・gitが必須スキルに明記されていることが多かった印象です。

HTML・CSS・JavaScript・WordPressだけでOKな場合でも、必ず実務経験〇年以上という条件が付されています。

未経験OKとしている企業に関しては、募集形態がアルバイトか契約社員・派遣社員がほとんどでした。

実務経験5年以上や、バックエンド側の言語についても必須としている等、あまりにも自分のスキルとかけ離れている企業にはさすがに応募しませんでしたが、

実務経験に関する必須条件は基本的に無視して応募していました笑

実際に、内定をいただいた企業様は求人サイトに実務経験2年以上必須との明記がありましたが、

結果としてHTML～WordPressまでのスキルセット、実務経験なしでも正社員として内定がいただけたのでこの辺が最低レベルかと思います。

しょーごさんのコーディング課題に照らして言えば、上級編まで終えていれば最低限と言えるのではないでしょうか。

私は上級編までやった段階でポートフォリオを作成しました。あとは伸びしろを感じてもらうことが重要だと思います。

伸びしろを感じてもらうためには、根幹となる人間力が重要だと思います。

私自身大して人間力があるわけではありませんが、Wen制作において必須と考えられるソフトスキルを職務経歴書でアピールしました。

具体的にアピールしたのは、①傾聴力と②体系的に物事を説明する能力の2点です。

コーダーはクライアント→ディレクター→デザイナーと流れてきた業務のアンカーの役割を担うことになるので、

デザインに反映されているクライアントの考え方や想いをくみ取ることが必要だと考えています。

そのための基礎的な能力が「人の話をよく聞くこと」であり、聞いたことを基に最善の対応策を検討・実行に移すことで円滑な業務遂行に繋がるのでは？と考えて、①傾聴力をアピールしました。

②体系的に物事を説明する能力に関しては、しゃべりが上手いという観点でのアピールではなく、

人に物事をわかりやすく伝えられるようになった過程をアピールしました。

ざっくり言うと、

1. 複雑な制度の仕組みを会議等の場で説明する
2. 説明を受けた人から個別にフィードバックをもらう
3. フィードバックの内容を反映する
4. これを繰り返す
5. 結果として「よくわかった」との評価をいただけるようになった

という内容です。

コーダーは時に試行錯誤が求められる職務だと思うので、このような試行錯誤から解決に至ったエピソードは評価をいただけるのではないかと考えてアピールポイントとしました。

まとめると、

上記の流れを狙ってソフトスキルをアピールしました。

残念ながら面接では一切触れられませんでしたが、書類選考は簡単に通ったので作戦は成功していたと勝手に思っています笑

しょーごさんのコーディング課題をこなせば安心です！

とりあえず迷わずに全部盛りを購入することをおすすめします！

オリジナルポートフォリオを揃えるまでにはたくさん苦労すると思います。私自身も嫌になって数か月コードを書かない時期もありました。

それでも諦めずに続けた結果、35歳・前職公務員・自営1年で辞める・未経験業種への転職チャレンジという、転職市場では全く評価されないスペックでも第一志望の制作会社様から内定をいただくことができました。

大事なことは、「なんだかんだコーディングが好き」という気持ちだけです。その気持ちがあれば、コーディング課題は自然とクリアできると思います。

スクールを利用することはもちろん有益ですし、効率よくスキルを身に付けることができると思います。

ただ、独学でやると決めたのであれば、自分の決断を信じて四苦八苦することで、私のように逆に近道になることもあると思います。

私もスタート地点に立ったばかりですが、ぜひ技術の世界で切磋琢磨しましょう！