Web制作を独学で始めたい方向けの勉強法と失敗しないための注意点

悩んでいる人

Web制作を独学で未経験だけど勉強して月５万円くらい稼げるようになりたい。

初心者向けに効率的な学習方法を教えてほしい。

Webデザインも勉強したほうがいいのかなあ。

仕事のもらい方も知りたい。

こうした疑問に答えます。

　筆者の実績

• 独学でWeb制作を学ぶ。（ワードプレス➤SEO➤HTML・CSS（一度挫折）➤…➤javascript(少々）＋Bootstrap）
• ワードプレスでメディア運営（本メディア＋「弁理士やまの知的な日常」）
• Railsで本業のサイト（Fox国際特許事務所)とWebサービス（BrandAgent)を自作・公開
• 今年Web制作の仕事（合計100万円ほど）を受注（SEOコンサル含む）

Web制作はRailsでも作成可能ですが本内容ではワードプレスをメインに解説します。Railsの独学方法は「RubyとRailsの学習を１月でやるには？【無料サイトあり】」を参考にしてください。

　本内容の構成

• Web制作を独学でマスターするための手順・注意点
• Webデザインは勉強すべきか
• Web制作で仕事をもらうための手順・注意点

本内容を読めば未経験者でもWeb制作を効率的に独学で学習して月数万円を稼ぐ方法を知ることができます。

但し、未経験者が陥りがちな注意点もありますので最後までご覧いただければと思います。

１．Web制作を独学でマスターするための手順・注意点

手順は以下のとおり。

順番に解説します。

　①ワードプレスを始める

まずワードプレスを始めることをおすすめします。理由は以下のとおり。

• Web制作のツールのほとんどがワードプレスのため
• 未経験者でも簡単に始めることができ、機能性と自由性が高いため
• 実用的なところから始めたほうが挫折しにくいため

ワードプレスとは、オープンソースの無料で使えるブログソフトウェアでして、世界中で圧倒的に高いシェアをもっています。（参考：Wikipedia「ワードプレス」）

ブログソフトウェアとありますが、ブログツールだけではなくホームページ制作のツールとしても使えます。

通常であれば、Webサイトの仕組みや、「HTML・CSS」といったマークアップ言語を学習サイトから始めることがおすすめなのですが、単に「学習するだけ」では飽きてしまいがちです。

そこで、ワードプレスを開設し、これをベースとして、Webサイトの仕組みやマークアップ言語を習得していったほうが挫折しにくく、効率よく学べて行きます。

なお、ワードプレスを開設するにあたり、必要なプログラミングスキルはこの時点で不要です。

ワードプレスは最短で２０分で始められます。「ワードプレスの始め方・手順を２０分で解説【２０２０年最新版】」では、ワードプレスに必要な知識も含めて初心者にわかりやすいく解説していますので参考にしてみてください。

なお、ワードプレスって何！？１から勉強したいという方は「ドッドインストールのwordpress入門講座」で勉強しましょう。

#1～#5まで無料ですし、ここまで勉強すればOKです。

　②ワードプレスのテーマを決める。

ワードプレスを始めたら次にテーマをインストールしましょう。

テーマとは、ＷＥＢサイト全体のテンプレートのことをいい、無料・有料問わずネットで配布されています。

ワードプレスを始めたときには、何もない状態になっており、デザインや構成、機能が最小限のものしか備わっていません。

そこで、テーマをワードプレスにインストールすることで、必要なデザインや構成、機能を変更することができます。

テーマには「親テーマ」と「子テーマ」の２つがありまして、「子テーマ」のコードをいじればあなた好みのデザインや機能に改変できます。

順序としては以下のような感じです。

あなたに合ったテーマの探し方は、「ワードプレスの始め方・手順を２０分で解説【２０２０年最新版】」が参考になります。本ブログでは、「Affinger5」を使用しています。

感想は、「AFFINGER5の評判のまとめと実際に使った感想」にまとめています。

テーマはあなたが０から自作することも可能です。

しかし、覚えることが多く、挫折しやすいので既存のテーマをインストールしてみてそれを改変しながらHTML・CSS・Bootstrapを学んでいくことをおすすめします。

なお、あなたが既存テーマを改変して商用利用する場合、商用利用OKかどうか、既存テーマの利用規約をよく確認してください。

　③HTML・CSS・Bootstrapを習ぶ（飛ばしても可）

Bootstrapのフレームワークってよくわからん・・・という方も多いと思うので補足します。

Webサービス（BrandAgent)では、Bootstrapでサイトのデザインを設計しています。

上の画像のとおり、ナビゲーションバーやヘッダー（画像）などBootstrapのサイトにある雛形のコードをコピペして簡単に作ることができます。

一方、これらをCSSで作ろうとすると雛形を自分で０から作らないといけないわけでして相当手間がかかります。

CSSは基本中の基本なので一通り学んでおくことがおすすめですが、あわせてBootstrapも使えるようにしておくことがおすすめです。

おすすめの方法は以下のとおり。

• TechAcademyの０円コース（無料体験）から学ぶ➤HTML・CSSの基礎を学べる。メンタリングもあり質問・相談ができる。
• プロゲートでHTML・CSSを学ぶ➤スライド形式で実践的に学べる。おすすめ

両方やることをおすすめします。

TechAcademyの０円コースが１～２日くらいで終わるのでその後にプロゲートの初級編～上級編まで学んでいきましょう。

あとは必要に応じて、あなたのサイトを使って、BootstrapでデザインしておけばOKです。

上のサイトをクリックすると以下のページに飛びます。

「Components」をクリック。

「ジャンボトロン」「ナビゲーションバー」「ボタン」「カード」など様々な雛形が用意されているのでコードをコピペしてあなた好みにアレンジすればOKです。

アレンジにはCSSの知識が必要ですが、それほど時間はかかりません。

HTML・CSSについては長く時間をかけて学習することはおすすめしません。

一通り理解できればOKでして、コードは覚える必要はないです。

ググってあなたが必要なコードが何か判断でき、うまくいかなかったらググって調べて解決できればOKです。

HTML・CSSよりも記事を書きながらSEOを学んでいくことが重要です。

SEOができるならHTML・CSSの知識がほぼなくても案件がとれるでしょう。

　④記事を書きながらSEOを学ぶ

ＳＥＯとは、「検索エンジン最適化」をいい、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示させるよう、ウェブサイトの構成などを調整することをいいます（「Wikipedia（検索エンジン最適化）」）。

Web制作単独では今は稼ぎにくい状況になっています（参考：【プログラミングで稼ぎたい人必見】Web制作は稼げないです【オワコンなのか？】）

理由としては参入障壁が低く比較的誰もが担当しやすく、相場も安いためです。

そこで、単にWeb制作ができるだけはなく、SEOについて理解を深めてアクセスを集めやすいサイトを作れるかどうかが重要となります。

筆者もまた、案件を受注しましたが、SEOコンサルを含む案件であり、SEOを知っているか（実績があるか）どうかで受注できる費用も全然違ったものとなります。

そこで高額案件をとるためにはSEOを学ぶことをおすすめするのですが、具体的には以下のことを学んでいけばOKです。

　⑤Webデザインを学ぶ

Web制作にはデザインスキルも重要です。

HTML・CSSを学べば実際にサイトをデザインしていくわけですが、基礎的なデザインの知識をつけておくことがおすすめです。

「やってはいけないデザイン　平本久美子著」は初心者が陥りがちなポイントを解説しておりおすすめです。

　⑥javascriptとjqueryを学ぶ

もしあなたが+αとして、サイトに動きをつけてみたいなら、JavascriptとJqueryを学ぶことをおすすめします。

jqueryはJavascriptのフレームワークでして、いずれもプロゲートから学べます。

＞＞プロゲートのJavascript講座

＞＞プロゲートのjquery講座

Web制作で仕事をもらうための手順・注意点

ここまで学べばWeb制作の基本的なところはマスターした状態となります。

ではここからは仕事をもらいにいくことになるのですが、方法としては２つあります。

おすすめは②でして、あなたがブログでSEO対策をしてアクセス数を増やせば、それが実績となりあなたにWeb制作をお願いする強い動機付けとなります。

アクセス数が増えて実績として見せられるくらいまでになるには半年～１年くらいかかりますが、得られる案件もSEOコンサルを含むので高額案件を得られやすいです。

ブログ集客をする場合は並行してSNSもはじめることがおすすめです。

２．Web制作の独学のまとめ

まずはワードプレスから始めてみましょう。ワードプレスは最短で２０分で始められますよ。

＞＞「ワードプレスの始め方・手順を２０分で解説【２０２０年最新版】」