言い訳
一番最初のセクショが言い訳とは何事かと言われていると思います。すみません。
この記事のタイトルは「完全未経験アラフォーがWeb制作会社へ転職成功するまでのロードマップ」というものですが、実際に私が歩んできた道ではありません。この記事は、もし今から勉強を始めるとしたら、最短でどのようにコーダーになれるかという視点から書かれています。
このロードマップはアラフォー層に限定されたものではありません。どの年齢層の方にも有用で、このロードマップを完走することで、実務レベルのスキルを確実に獲得できると自信を持って言えます。
ただし、一つ注意しておきたいのは、この道のりは決して容易ではありません。途中で何度もつまずく可能性が高いです。しかし、その先にはあなたが望む新しい生活が待っています。それを心に留めて、この挑戦にぜひ取り組んでみてください。
一歩を踏み出す勇気
僕がWeb制作の学習を始めたのは、40歳の誕生日が過ぎた2020年の7月だった。それまで僕は工場で働いていた。言葉にするのは難しいが、その場所は僕にとっての「地獄」だったと言えるだろう。
僕は自分と同じ働いている人たちと何もかもが合わなかった。彼らが口を開けば、女性やギャンブル、愚痴、サッカー(※注1)などの話ばかり。正直言って、僕にはまるで関心がなかった。それどころか、そのような話題で盛り上がる彼らとの間には深い溝を感じるばかりだった。
それに、働き方も僕を苦しめていた。昼間と夜勤の2交代制で、僕の体は文字通りボロボロになっていた。ある意味、心も体も完全に消耗しきっていた状態だった。
ある日、僕はホリエモンの動画を見つけた。彼が言っていた言葉が、僕の心に強く響いた。「プログラミングなんて超絶簡単」。その一言が、僕の中で何かを揺さぶった。今の僕の状況を抜け出すための鍵は、このプログラミングにあるのではないかと思った。
それがきっかけで、僕はプログラミングの学習を始めた。無謀とも思える挑戦だったが、もはや何かを変えなければという切迫感が僕を駆り立てていた。40歳にして初めて、パソコンの前でコードを書く日々が始まった。
一歩を踏み出すのに、特別な勇気が必要だと思う人もいるかもしれない。でも、僕は違った。それは「勇気」ではなく、「逃げ出したい」という強い気持ちだった。だからこそ、僕は一歩を踏み出すことができた。それは「勇気」ではなく、「必要性」だったのだ。
挑戦することに年齢は関係ない。アラフォーでも、新しいことを始めることは可能だ。そして、それが僕たちをより良い未来へと導く鍵となる。
※注1サッカーに罪はありません。私が興味なかっただけです。
ゼロから始めるWeb制作
私がWeb制作の学習を始めたとき、最初に頭に浮かんだのは「何から始めれば良いのか？」という疑問だった。たくさんのプログラミング言語やツールがある中で、どれが最も重要で、どの順番で学べば良いのかを探り当てることは、驚くほど難しく感じた。
しかし、私がたどり着いた結論は次の3つだった。Web制作でお仕事を取るには、まずはHTMLとCSSでしっかりとコーディングできる知識が必要であるということ。これらの言語は、Webページを形作る基礎的な要素であり、それらの理解なしにはWeb制作は始まらない。
次にJavaScript。これはウェブサイトに動的な要素を加えるための言語で、基本的なコンポーネントの動き、例えばハンバーガーメニューやアコーディオンなどを実装できることが求められます。これらは現代のウェブサイトでは一般的な要素であり、その実装能力は必須となります。
そして最後に、WordPressのオリジナルテーマの実装ができるくらいのPHPの知識が必要となります。WordPressは世界中で広く使われているCMSで、オリジナルテーマを作れるとクライアントのニーズに柔軟に対応することが可能となります。
これらのスキルを一つひとつ身につけていくためには、時間と労力が必要です。しかし、それらを一つ一つクリアしていくことで、初めてプロのWeb制作というフィールドに足を踏み入れることができます。
以下は私が今考える最短でコーダーになれるロードマップです。このロードマップを完走すれば、確実に実務レベルの実力を得ていることでしょう。
具体的なロードマップ
新たな道を歩み始める際、道しるべとなるロードマップは非常に重要な要素です。私が40歳の時に初めてプログラミングを学び始めた時、自分なりの学習計画を立てました。その第一歩となったのは、"Progate"というオンラインプログラミング学習プラットフォームのHTML & CSSコースでした。
Progate HTML & CSSコース
URL: https://prog-8.com/
Progateは初学者から中級者まで、自分のペースで学べるプログラミング学習サイトです。私はここから始めることにしました。Progateには道場コースという、少し難易度の高いものもありますが、基本的には楽しみながら取り組むことができるコンテンツが豊富に揃っています。
私から一つアドバイスをするなら、最初から課金することです。課金をするかどうか迷う時間は、新しい知識を得るための貴重な時間を削ってしまいます。加えて、ほとんどの人は1〜2ヶ月程度で基本的な部分を学び終え、他の学習素材に移るでしょう。それだけの価値は十分にあります。
また、私はこのコースを2周することをおすすめします。理想的には1周で学び終わるのがベストですが、2周目では1周目でやったことをかなり覚えています。2周目を終えることで、「学習した事が身になっている」という達成感を味わい、さらに学習を続ける意欲を養うことができるでしょう。
1冊ですべて身につくHTML & CSS と Webデザイン入門講座
Progateの学習が完了したら、次に進むべきは具体的な書籍による学びです。私が選んだのは「1冊ですべて身につくHTML & CSS と Webデザイン入門講座」という本でした。
「1冊ですべて身につくHTML & CSS と Webデザイン入門講座」
https://amzn.to/3rSrjD3
この本は、Progateで学んだ内容の補完やさらなる理解を深めるのに最適な一冊です。コーディング関係の学びは、単に本を読むだけではなく、手を動かして作業をしなければ身につかないものです。特に、この本ではProgateでは触れられていなかった部分も学ぶことができるので、中級者へのステップアップとして役立ちます。
そして、この本からは自分のパソコン上に実際の開発環境を構築してコーディングを始めることになるでしょう。つまり、ここからが真のスタートと言っても過言ではありません。自分で0から1を生み出す、そんな挑戦が待っています。
この段階で肝心なのは、自分で何かを作り上げる経験です。本の中の例題だけでなく、自分でアイデアを考え、それを形にしていく作業が、これからのプロとしてのキャリアに繋がる重要な経験となります。
プログラミングの学びは、とにかく「作る」こと。文字だけの情報ではなく、手を動かして、失敗をして、修正をして、完成させる。そんな一連の流れを自分のものにすることが、次のステージへの扉を開く鍵となります。
確かな力が身につくJavaScript「超」入門
HTMLとCSSの基礎が身についたら、次はJavaScriptの学習に移りましょう。JavaScriptはWebサイトを動的にするための言語で、この技術を使うことで、静的なWebページに様々な動きや機能を追加することができます。例えば、ハンバーガーメニューやアコーディオンなどの実装も可能になります。
私がおすすめするJavaScriptの学習教材はこちらの書籍です。
確かな力が身につくJavaScript「超」入門
基礎的なWeb制作では、JavaScriptの知識は最低限のものでも対応できます。ですので、まずはこの書籍を用いて、JavaScriptがどのようなものか、どのように機能するのかを体感しましょう。
学ぶ際のポイントは、「全部理解しようとしない」ことです。JavaScriptは深く広い技術領域を持っていますが、初めから全てを理解しようとすると、学習が困難に感じてしまうこともあるでしょう。初めての学習では、50%くらいの理解度であっても構いません。大切なのは、一歩一歩進むことです。初めての知識を身につけ、それを活用することで、自然と理解度も深まります。
jQuery標準デザイン講座
JavaScriptの基本を学び終えた後のステップとして、次に取り組むべきはjQueryの学習です。jQueryはJavaScriptのライブラリで、コーディングを簡単にするための多くの便利な機能を提供しています。
最近では、ReactやVueなどの新しいフレームワークも注目されていますが、Web制作の現場では、今でもjQueryは現役で使用されていることが多いのです。
私がおすすめするjQueryの学習教材は以下の書籍です。
「jQuery標準デザイン講座」
URL: https://amzn.to/3OLfhUW
この書籍では、ハンバーガーメニューやアコーディオンなど、Webサイトでよく見かけるコンポーネントの実装方法を学ぶことができます。もちろん、純粋なJavaScriptでもこれらのコンポーネントは実装できるのですが、jQueryを使うことで、よりシンプルに、効率的にコーディングすることが可能になります。
保守の案件などでは、既存のコードでjQueryが使用されていることも多いため、この段階で基本をしっかりと押さえておくことが重要です。このスキルは、今後のWeb制作においても確実に役立つでしょう。
jQueryを身につけることで、Webページにダイナミックな動きをつけることが容易になります。これにより、より洗練された、プロフェッショナルなWebサイトの制作が可能になるのです。
Codestep[入門編]・[初級編]
コードの基本的な部分に慣れ、Webサイトの動きの実装ができるようになったら、いよいよデザインカンプからのコーディングに挑戦します。
私がおすすめする実践的なコーディング学習サイトは以下のURLです。
「Codestep」
URL: https://code-step.com/
このサイトの入門編・初級編の中から自分のレベルに合ったものを選び、実際にコーディングしましょう。最低5個ほどのプロジェクトに挑戦します。ここでは様々な気づきが得られるはずです。
コーディングに挑戦する際の注意点：
- 完璧を求めすぎない: 最初から完璧なコードを書こうとすると、進展が遅くなり、モチベーションも下がることがあります。最初の段階では、自分ができるギリギリの範囲で挑戦し、それができたら次に進むようにしましょう。
- 実践的な経験を積む: Web制作ではデザインカンプからのコーディングをします。ここでデザインアプリ(XD)に慣れておきましょう。
- 反復練習を重視する: 一度だけでなく、何度もコーディングを繰り返すことで、スキルは確実に身につきます。異なるプロジェクトに挑戦することで、幅広い経験を積むことができるでしょう。反復といっても同じカンプを繰り返すのではなく、色々なカンプをコーディングしましょう。
- 問題解決のスキルを育てる: 実際のコーディングでは、思い通りに動かないことも多々あります。そういった時にどう対処するか、そのプロセスも大切な学びとなります。
このステップを経て、ようやくプロとしての道が開かれます。挑戦し、成長し、次のステップへ進みましょう！
Sass
進捗を重ね、コーディングの基本を掌握したところで、次の一歩としてCSSの拡張言語「Sass」を学ぶ時が来ました。Sassは効率的なCSSの記述を可能にし、コーディング速度の向上や保守性の高いコードを書く助けとなります。Web制作会社との仕事ではSassの使用を指定されることもあるため、この段階での学びは必須です。
SassとCSS設計の学習リソース：
- Sassの教科書
URL: https://amzn.to/3OFrSYq- Sassの基本を学びます。初心者にも分かりやすい内容になっています。
- CSS設計の教科書
URL: https://amzn.to/3KM2NKn- 良いCSSの設計方法を学びます。Sassと合わせて学ぶと、保守性の高いコードが書けるようになります。
- CSS設計完全ガイド
URL: https://amzn.to/3DVs80C- 歴史的名著で、分厚い本ですが、ここで頑張って一読しておくと、深い理解が得られるでしょう。
Sass学習のポイント：
- 効率の向上: Sassを使用すると、変数やネストなどの機能を活用して、CSSの記述を効率化できます。
- 保守性の向上: CSS設計の知識と合わせて学ぶことで、将来的に変更や追加が容易なコードを書くことができます。
- 実践的なスキルの習得: 現場で求められるスキルなので、この段階でしっかりと身に付けておくと、将来の仕事にも役立つでしょう。
SassとCSS設計の知識は、現代のWeb制作において必要不可欠なスキルです。一歩ずつ確実に進み、このステップで確実に理解を深めてください。自分の技術の土台をさらに強固にし、次のステージへ進みましょう！
Codestep[中級編]
Codestep中級編
URL: https://code-step.com/
前のステップで基礎を固めた後、再びCodestepに戻ってきます。新たに学んだSassの知識も活かしながら、より高度なコーディングに取り組むことで、これまでに積み上げてきた技術力をさらに高めましょう。
中級編での学びのポイント：
- 応用力の向上: 中級編の課題では、基本を超えてさまざまな応用技術が要求されます。自分の手で一つ一つクリアしていくことで、真の理解と技術の習得が進みます。
- 効率化の実践: Sassで学んだ効率的なCSSの記述方法を実際のプロジェクトで活かすチャンスです。実際の作業フローに取り入れることで、自然に身につくでしょう。
注意点：
- 完璧を求めすぎないこと: 全てを100%理解する必要はありません。できる範囲でチャレンジし、次へ進んでください。
- 継続的な挑戦: 毎日少しずつでも構いません。毎日コードを書く習慣をつけることで、自然にスキルアップします。
中級編のコーディングは、これまでの学びを結集し、一層レベルアップするための重要なステップです。Codestepの中級編を全てクリアし、確かな自信をつけて次の章へ進みましょう。とにかく手を動かして、失敗を恐れずに挑戦することが大切です。この経験があなたを一人前のWeb制作者へと導くでしょう。
確かな力が身につくPHP「超」入門
JavaScriptやCSSなどのフロントエンド技術に続き、サーバーサイド言語であるPHPの学習が始まります。WordPressなどのCMSで使われるPHPは、Webサイト構築において欠かせないスキルセットです。
学習に使う書籍はこちら
確かな力が身につくPHP『超』入門
URL:https://amzn.to/3YxW64t
- PHPとは何かの理解: PHPはサーバーサイドで動作するプログラミング言語です。HTMLと連携して動的なWebページを作ることができます。
- 基本の構文とコマンド: 変数、制御構造、関数など、基本的なプログラミングの概念を学びます。
注意点としては以下のことに留意しましょう。
- 深入りしすぎないこと: PHPは非常に深い言語で、学ぶべきことは多いですが、初めての段階では出来ることの確認や基本構文に触れることが目標。
- 実践を交えた学習: 書籍の中の例題などを実際に手を動かして試すことで、理解を深めましょう。
- Chapter8はひとまずやらない。:PHPの基本にふれる事が目的ですので、あまり深入りしないようにします。
PHPはWeb開発の世界では非常に一般的な言語であり、特にWordPressとの連携知識は求められるスキルです。この段階で基本を押さえることで、今後のWeb制作において幅広い対応が可能になります。無理に深く追求する必要はありませんが、基礎の理解をしっかりと固め、実際のプロジェクトでの応用へとつなげていくようにしましょう。
WordPressユーザーのためのPHP入門
WordPressユーザーのためのPHP入門は、Web制作における次の段階で、PHPの知識をさらに深め、特にWordPressとの連携に焦点を当てる部分となります。WordPressでは通常のPHPとは違った特別な部分、テンプレートタグと呼ばれるものが存在します。
おすすめの学習資料として「WordPressユーザーのためのPHP入門」を使って、WordPressでのPHP使用法について学ぶことができます。
テンプレートタグは、WordPressのテーマファイル内で使用されるPHPの関数で、これらのタグを使うことで、投稿内容やカテゴリなどの動的なデータをページに表示できます。この本では、WordPressでPHPがどのように使われるのかを具体的に解説しています。サンプルコードを実際に動かしてみることで、理論だけでなく実践的な技術も身につけることができます。
WordPressのカスタマイズも視野に入れると、PHPの知識があれば、WordPressのテーマやプラグインのカスタマイズが可能になります。既存のテンプレートを自分のニーズに合わせて変更する技術は、Web制作において非常に価値があります。
学習する際の注意点として、WordPressのテンプレートタグは、初めて触る方にとっては少し難しい部分もあるかもしれませんが、焦らず一つひとつ理解を深めていけば、必ず理解できるはずです。また、サンプルコードだけを読むのではなく、実際に自分の環境で試してみることで、理解が深まります。
WordPressとPHPの組み合わせは、自由度の高いサイト構築を可能にします。テンプレートタグを使いこなせるようになると、WordPressをさらにパワフルなツールとして使うことができるようになります。このステップでの学習は、今後のWeb制作において大きな武器となるでしょう。
WordPressの教科書
WordPress学習の最終段階は、実践的な力をつける重要なステップとなります。このフェーズで取り組むべき素材として「WordPressの教科書」がおすすめです。
URL:https://amzn.to/3DYnvTr
この書籍は、WordPressのテーマ作成について深くて幅広い内容をカバーしています。実際に手を動かして学べるように、具体的なサンプルと説明がセットになっています。
正直に言うと、この本は初学者にとっては難しい部分もあるかもしれません。最初のうちは半分も理解できなくても良いとの意識で取り組むと良いでしょう。分からない箇所があっても、項目を飛ばさずに手を動かし続けることが大切です。
また、書籍内での環境構築はXAMPPを使用していますが、実際の学習ではLocalを使うようにすると良いでしょう。LocalはWordPressの開発環境を簡単に構築できるツールで、開発作業を効率化できます。
この本を一通り完了した時点で、WordPressのオリジナルテーマを自力で作成する力がついているはずです。それだけに、このフェーズは非常に重要で、挑戦的な内容となっています。あきらめずに、一歩一歩進んでいくことで、プロフェッショナルとしての技術と自信を身につけることができるでしょう。
最終的には、自分だけのオリジナルサイトを構築できる力が身につきます。個人ブログから企業サイトまで、多岐にわたるプロジェクトに対応できるスキルセットを習得できるので、この段階の学習をしっかりと積み重ねることで、Web制作の世界で成功する道が開かれるでしょう。
実績になる：デザインカンプからのコーディング練習課題【全部盛り】
いよいよこのロードマップも仕上げに入ります。この段階でしょーごさんによるデザインカンプからのコーディング教材に取り組む時がきたのです。ここで紹介する教材を全てクリアすると、間違いなく実務で通用するレベルの力が身につきます。しかし、この最終課題を終えるまでには長い時間、おそらく2〜3ヶ月程度の期間が必要かもしれません。
デザインカンプからのコーディング練習課題は、プロのレビューを2回まで受けることができます。同梱されている各課題に対して、プロの目からのフィードバックを受けることで、自身のスキルの検証が可能です。このレビューは、実務に挑戦してよいのかどうかの判断材料となる重要なプロセスです。
さらに、デザインカンプからのコーディング練習には、jQuery・JavaScriptの課題も用意されています。これらの課題を全てクリアすることで、フロントエンド開発の幅広い技術に対する理解と実践力を高めることができます。
この最終課題を完了するには、忍耐と努力が求められます。2〜3ヶ月程度の期間を要するかもしれないこのプロジェクトは、単なる技術習得だけではなく、プロジェクト管理と自己管理のスキルも同時に鍛えることになるでしょう。
このロードマップの最終段階であるデザインカンプからのコーディング教材は、技術の習得だけでなく、実務への適応力やプロジェクト管理能力も身につけることができる貴重な課題です。プロのレビューを活用しながら、時間をかけて丁寧に取り組むことで、真のプロフェッショナルとしての道が開かれるでしょう。
まとめ
おめでとうございます！ロードマップを完走したあなたは、とてもすごい。これは決して小さなことではありません。多くの人が途中で挫折してしまうこの道のりを、あなたは最後まで歩き抜きました。その努力と持続力は、高く評価されるべき素晴らしい成果です。
今回学んだ様々な技術と実践を通して、あなたはもはや初心者ではありません。これからのステージでは、この知識とスキルを活かして、更なる高みを目指す新たな冒険が待っています。ですが、その前に一息ついて、今ここでの成果をしっかりと自分自身に認めてください。あなたがこれまでに築き上げてきたものは、これからの道を切り開く大きな力となります。
最後になりましたが、このロードマップと記事があなたの技術者としての成長、そしてこれからのキャリアに少しでも寄与できれば、これ以上の喜びはありません。お疲れ様でした、そして新しいステージでも、どうぞ頑張ってください！