【50代からでもできる】Web制作の独学ロードマップ！初案件獲得まで【実体験】

こういった疑問や不安に関して、実体験に基づいて解説します。

この記事を書いている私は、会社員だった50歳のときに交通事故で脊髄損傷を負い手足が不自由な重度障害者になりました。
なんとか歩けてなんとかPCが使えます。
そのような私は長期入院により退職し、退院後は自宅療養でリハビリを続けました。

その後未経験から職業訓練でプログラミングの学習を始め、独学を経て現在は在宅でWeb制作を事業とする会社を設立し活動しています。

この記事ではWeb制作の独学方法についてまとめており、私が１年間をかけて未経験から初案件を獲得するまでの独学方法を実体験に基づいて解説します。

そもそもWeb制作とは

Web制作とは、企業やお店のホームページ・個人のブログなどのWebサイトを作成することです。

よくある質問：「ノーコード」があるからWeb制作の学習をしても無駄ですか？

最近では「ノーコード」というコードを記述せずにWebサイトを作成できるサービスもあります。
ノーコードによりプログラミングについての知識がない人でもWebサイトの制作ができるようになりました。

そういった疑問もあると思いますが、Web制作の学習をしても無駄にはなりません。

なぜならノーコードには限界があり、できないことや課題が多く存在しているからです。

ノーコードはプログラミングに比べて自由度が低い点があり「こういうWebサイトを作りたい」というのが実現できない場合が多いということです。
このような課題はノーコードの構造上の問題であり、そのノーコードを開発するのもプログラマーやエンジニアだからです。

凝ったWeb制作となると様々な言語を使って記述したプログラムが必要となるため、表現したいWebサイトにするためにも技術的な学習は必要となってきます。

Web制作の流れは？

Webサイトを制作する場合、多くの工程を必要とします。

Web制作のざっくりとした役割

規模の小さいWeb制作であれば１人で全ての役割を担当します。

まずは学習の準備から

50代未経験からのWeb制作を独学する場合は、学習環境を整えることが大切になります。

なぜなら年齢的な衰えと、私の場合は障害によって手足が不自由なこともあり少しでも集中して学習できる環境が必要になるからです。

作業スペース

私が会社員のときには、キッチンのテーブルやリビングのソファーでノートPCで簡単な作業をしていました。
今の私には障害があるため同様の場所で長時間集中して作業するのが難しいです。
Web制作の学習とはいってもほとんどがPCのキーボードを使っての作業になるため、低価格の机と椅子を購入し作業スペースを確保しました。

Web制作用のPCとは？

最初は普段使っているPCで問題ありません。
WindowsでもMacのどちらでも大丈夫で、スペックも最初はこだわらなくてもいいです。
学習中に動作が遅いと感じてからでも新たに購入するのはいいと思います。

私は自宅にあったWindows8のノートPCをWindows10にアップデートして使っていました。
あまりにもフリーズするので「13インチMacBook Pro」を購入。
スペックはCPUはCore i5、メモリは8GB、ストレージは256GBです。
Photoshopなどのアプリケーションソフトの使用も問題ありません。

ネット環境

前提としてネット環境が整っていること。
有線でもWiFiでも構いません。
各学習サイトを利用するのに必要になりますし、エラーや分からない事はネットで検索します。

ここをPCで見ている方ならすぐにでもWeb制作の学習を始められるはずです。

デュアルディスプレイが便利

デュアルディスプレイとは、１台のPCに別のモニターを接続し大きなディスプレイとして表示させることです。

50代となってくると老眼も進み、MacBookのモニターでは見にくいので大きなディスプレイの27インチのモニターを使ってみました。
２画面を使うことで作業の効率も上がります。

ソフトウェア

ブラウザ

Webサイトを閲覧するにはブラウザと呼ばれるソフトウェアが必要です。
ブラウザを利用することで、文字の大きさや画像の配置・色・レイアウトなどを整え、Webページで閲覧できます。

Windowsパソコンの標準は「Microsoft Edge」、Macの場合は「Safari」標準ブラウザ以外に「Google Chrome」「Firefox」などいくつかの種類があります。

私はWeb制作ではGoogle Chromeを使用しています。
Google Chromeは、Webサイトのコードを検証できるツールとして「デベロッパーツール」を使用することができ「検証ツール」とも呼ばれています。
そして「拡張機能」で、Webサイトの使用している色のコードを調べたり文字のフォントやサイズを調べたりできます。

テキストエディタ

テキストエディタとは、文字や記号などのテキストで構成されているテキストファイルを編集するソフトのことです。

私は「Visual Studio Code」通称「VSCode」で作業しています。
VSCodeはシンプルで使いやすくWindowsでもMacでも利用でき、しかも無料です。
多くの方が利用しており、ネットにも情報が豊富にあります。

よくある質問：プログラミングにブラインドタッチは必要？

そういった疑問もあると思いますが、プログラミングはブラインドタッチができなくても大丈夫です。

なぜなら、プログラミングではキーボードを見ずに速くタイピングすることよりも正確にコードを書くことが大切だからです。

実際に私はブラインドタッチができないどころか、指にも障害があり右手の中指と左手の人差し指と中指だけで操作しています。
確かに速くはないですけど正確にコードを書くということでは問題はありません。

体験談：私のWeb制作の独学ロードマップ

私がWeb制作のために独学したロードマップを紹介します。
ネットで紹介されている他の人のロードマップを参考に独学をしました。

私には障害があるので作業に時間がかかったり、体調の良し悪しもあり学習時間も多くは取れません。
人によって１日の学習時間は違うと思いますが、私を例にすると１日平均２〜３時間、体調の悪い時以外は毎日勉強していました。

HTML&CSS

正確にはHTMLとCSSはプログラミング言語ではありせん。
HTMLは「タグ」で指定された情報をWebサイト上に出力するだけの「マークアップ言語」で、CSSはHTMLを装飾するだけの「スタイルシート言語」です。

Web制作の学習の第一歩としてすべてWebサイトのベースとなります。

JavaScript

JavaScriptはWebサイトに動きをつけることができるプログラミング言語です。
HTMLとCSSだけでは実現できない「条件によって結果が変わるようなWebページ」を作成できます。

jQuery

jQueryは、JavaScriptを簡単に扱えるように、よく使用する機能をまとめた「JavaScriptライブラリ」の１つです。
jQueryを扱えるようになることで、JavaScriptをWebページに簡単に導入することができるようになります。

Dart SassとBEM

SassとはCSSをもっと便利で簡単に書くための拡張言語と、それをCSSにコンパイル（変換）するための実行環境です。
Sassの実行環境は３つ、その中で現在の公式推奨がDart Sassになります。

BEMはBlock、Element、Modifierの頭文字を取ったCSS設計手法の１つです。

WordPress、※PHPは基礎だけ

WordPressとは、サイトの作成やブログの作成などができるCMS（コンテンツ管理システム）の１つで、無料のソフトウェアです。

PHPはWeb開発に適したプログラミング言語のひとつです。
WordPressはPHPで構築されています。

以上が私が学習したWeb制作のフロントエンドで必要な項目です。

次から私が実際にWeb制作の独学をした学習方法を紹介しますが、独学で理解するのが難しく本などから基本的な部分を学んで理解を補完したため少し遠回りをしています。

最初はProgateで基礎知識を学び、ドットインストールで実践的に学ぶ

最初はProgateで

最初はオンラインプログラミング学習サービスの「Progate」から学習します。

なぜなら、Progateは環境構築が不要でPCとネット環境だけがあればすぐに学習が始められます。

まずはじめはHTML&CSSコースから始め、無料会員の範囲だけでは学習にならないので有料プランまで進んだら有料会員（税込￥1,078/月）になってHTML&CSSコースを最後までやります。
Web制作のスキルを学習する流れは、HTML&CSS、JavaScript、jQuery、Sass、PHPの基礎の順でコースを進めます。

ここでは各コース半分ぐらいの理解で次のコースに進んでいきます。
理解するまで何周もするより本などで補完していくのがいいと思います。

ドットインストールで実践的に

Progateを１周終えたら、より理解を深めるために「ドットインストール」でも同じコースの流れで有料会員（税込￥1,080/月）になります。
※ドットインストールのSassはCUI（黒い画面、Windowsではコマンドプロンプト、Macではターミナル）を使うため私は学習していません。

Progateでプログラミングの文法における基礎知識を学び、ドットインストールでProgateで学んだ基礎を使って実践的なプログラミングを学びます。

ドットインストールでテキストエディタのVSCodeの設定を覚え、実際にコードを書いてWebサイトを作成しました。

「１冊ですべて身につくHTML&CSSとWebデザイン入門講座」で実際に手を動かしながら読む

「１冊ですべて身につくHTML&CSSとWebデザイン入門講座」では、Webサイトを作りながらHTML&CSSを復習し、新たにWebデザインの基礎と、PC・タブレット・スマートフォンなど異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し見やすく最適な表示にするレスポンシブWebデザインも学びます。
より理解を深めるために体系的に学べる本で分からないことや足りない知識を補います。

私は手が不自由でページをめくるのが大変なのでAmazon Kindleで電子書籍を利用していますが、参考になるページを画面で見ながらコーディングもできて便利です。

Dart SassとBEMはネットで学習しました

私が学習し始めたときはLibSassを使っていましたが、2020年10月に非推奨となっているのを知りDart Sassを使うことにしました。

Sassの本として「Web製作者のためのSassの教科書 Webデザインの現場で必須のCSSプリプロセッサ」は基本の学習はできますがDart Sassの記述がありません。

BEMについても「CSS設計完全ガイド ~詳細解説+実践的モジュール集」では一部の記述だけなので、Dart SassとBEMはネットの情報からの学習で充分だと思います。

理解を深める本

ここまで学習しても私には理解が足りていないと思い「ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座」と、「プロの「引き出し」を増やすHTML+CSSコーディングの教科書」で学習し理解を深めました。

Dart Sassについては「ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座」に、BEMについては「プロの「引き出し」を増やすHをTML+CSSコーディングの教科書」にそれぞれ解説されていて辞書的にも利用できます。

学んだ知識を模写コーディングで試そう

模写コーディングとは、既存のサイトの見た目を真似てコーディングすることであり、サイトの構造を考え、わからないことは自分で調べ検索しながらコーディングする学習方法です。

Web制作学習をWrdPressだけ残してほぼ終えたら模写コーディングに挑戦してみましょう。

私の場合は模写コーディングを始めたらどうコードを書いてよいのかわからず手が止まってしまいました。
回答のない模写コーディングでは回答を見ながら進めることもできず、YouTubeの「Webの神様」の模写コーディングの画像を利用しました。
Google Chromeの拡張機能の説明もあるので模写コーディングのやり方がよくわかります。
jQueryで作るハンバーガーメニューも「Webの神様」の動画で勉強しました。

WordPressは動画から

WordPressの学習は最初は本から始めましたが理解できず、「udemy」たにぐちまことさんの「ちゃんと学ぶ、WordPressテーマ開発講座」の動画を見ながら手を動かして実装しました。

その後に本で「WordPress仕事の現場でサッと使える！デザイン教科書」も読みながら手を動かして同じく実装して理解を深めました。

WordPressに苦戦してメンターにアドバイスをもらいました

WordPressの学習は最初は本から始めましたが理解できず、「MENTA」でメンターにアドバイスをもらいました。
学習を始めて苦戦したら早い段階からアドバイスもらうのもよいかもしれません。

最後はデザインカンプからコーディングしてサーバーにアップロードまで

前提：実務コーディングは99%がデザインカンプから行う

デザインカンプからのコーディング練習課題！【HTML初心者からWordPress実案件レベルまで】
|しょーごログ

ということでデザインカンプからのコーディングをします。
「note」しょーごさんの「コーディング教材全部盛り！」 には初級からWordPress実案件レベル、即戦力編のPhotoshopデザインカンプからのコーディングまであり、「JavaScript、jQuery特訓編」も付いています。
サーバーのアップロードの解説もあるので、実際に公開までの学習ができます。

私はPhotoshopデザインカンプからのコーディングはやっていませんが、ここまででWeb制作のコーディングのスキルは身につきました。
ですが１人で、フリーランスとして働きたいと思い規模の小さいWeb制作であればデザインから全てを１人で対応できるように、私はWebデザインも学習することにしました。

Webデザインは基礎的なことだけ、あとはその都度YouTube

Webデザインではadobe社の３つのソフトを使用します。

Adobe社のこの３つのソフトは有料で通常購入した場合は１年で税込72,336円です。
そこでデジハリ・オンラインスクール「Adobeマスター講座」を活用しました。
Adobeマスター講座だと１年で税込39,980円になります。
ソフトの基礎の動画を１ヶ月閲覧可能なので、必要箇所だけを学習すれば充分です。
１年後も改めて受講すれば同額で利用できます。

あとは必要な都度YouTubeで検索すれば目的とする動画で学習できます。
私はXDのワイヤーフレームからデザインカンプまでYouTubeの「Adobe XD Trail 部屋キャンプ」で学習しました。

実際に読んだ本は「ノンデザイナーズ・デザインブック」、「なるほどデザイン＜目で見て楽しむデザインの本＞」 、「２万回のA/Bテストからわかった支持されるWebデザイン事例集」です。
私は１回読んだきりです。

デザインを参考にするときは「Pinterest」を検索して利用しています。

営業しよう！ポートフォリオサイトを作る

最後に営業のためにポートフォリオサイトをつくりましょう。
私は学習が終わった段階で最初からWeb制作を事業目的とする会社を設立しました。
しかしこれはおすすめできません。
最初から手間とコストがかかります。

最初は副業でも専業でもフリーランスとして個人事業がおすすめです。
余計な手間とコストをかけずに営業やWeb制作に集中できます。

私のポートフォリオサイトは会社のホームページも兼ねています。

ポートフォリオとして使えない課題が多い中、この課題では「コーディングのポートフォリオ利用」をOKとしています。

デザインカンプからのコーディング練習課題！【HTML初心者からWordPress実案件レベルまで】
|しょーごログ

作品にはデザインカンプからコーディングした「note」しょーごさんの「コーディング教材全部盛り！」のサイトが使えます。

私の１年間の学習の結果は「オレンワーク株式会社」になります。

このポートフォリオサイトを公開して、知人から仕事の依頼が来たのが初案件になります。

私には障害があるため無理ができません。
営業せずにポートフォリオサイトを見た知人から仕事を受け、のんびり活動しています。

50代からの将来への不安、どうしたら安心できる？

50代でも自分のできることを見つけ、収入のためにだけではなく自らの存在意義や生きがいのために働きませんか？

私の父は現在97歳で、93歳の時に歩けなくなり医師から「もう年だからしょうがない」と言われましたが諦めず、人工関節の手術をしてくれる医師を探し出し両足を人工関節の手術をして今も歩ける状態です。

「人生100年時代」です。
私も障害者にはなりましたがきっと100歳まで生きるでしょう。

今日が人生で一番若い日！

第125回 学長の人生に影響を与えた言葉13選【人生論】|両学長 リベラルアーツ大学

まだまだ勉強できる時間は充分にあります。
一緒に頑張りましょう