【独学で月10万円】WEB制作学習完全ロードマップ【みとロード】
実案件を想定したコーディング実践練習ができるデザインカンプをリリースしました！
学習に役立つお得な購入者特典もご用意しましたのでぜひご活用ください
悩む人WEB制作始めたいけど勉強のやり方がわからない…
たくさん勉強してるのになぜか成果が出ない…
案件の獲得に必要なスキルを知りたい…
みと安心してください！これらの悩み全て解決します！
今まで様々な学習ロードマップを見てきましたが、このロードマップでは「他のロードマップではほとんど触れられていないのに実はかなり重要なこと」までかなり掘り下げて説明していますのでぜひご覧になっていってください
先に具体的な学習順序を紹介しておきます↓
Web制作学習ロードマップ
・初心者が月１０万円稼ぐのに必要なスキルの習得方法
- WEB制作に必要なもの
- WEB制作学習の具体的な流れ
- 効率的な学習法
- 案件の獲得方法
- WEB制作で挫折しない方法
はじめに：WEB制作学習完全ロードマップ
始めにこれからWeb制作の学習を始める方のために、学習の継続のコツやWeb制作に必要なものの解説をします。
学習ロードマップを早く見たい！という方はコチラへ！
Web制作学習のコツ・挫折対策
Web制作に必要な5つのスキル
Web制作学習前に揃えておきたいもの
Web制作学習のためのローカル環境作り
【最短】WEB制作の学習フロー
学習順序は全部で10ステップ!
目安学習期間：1週間
インプットSTEP
目安学習期間：2週間
アウトプットSTEP
目安学習期間：0.5週間
インプットSTEP
目安学習期間：0.5週間
アウトプットSTEP
目安学習期間：3週間
アウトプットSTEP
目安学習期間：2週間
アウトプットSTEP
目安学習期間：2週間
インプットSTEP
目安学習期間：1週間
アウトプットSTEP
目安学習期間：1週間
インプット・アウトプットSTEP
STEP1～STEP9までの合計目安学習期間：13週間＝約90日(3ヶ月間)
インプット・アウトプットSTEP
- 学習フロー全体でかかる最低費用
-
基本カリキュラムでかかる費用はSTEP1のProgateの契約代980円のみです。
それ以外は基本カリキュラムでは費用が発生致しません。
ただし「具体的な学習方法」セクションにて、各STEPの学習内容に対応した、理解をより深めることができるオススメの有料・無料教材をしているので、それぞれの習熟度に合わせてオプションとして購入・利用して頂ければと思います。もちろん基本カリキュラムで理解を深めることができた人は無理に購入・利用する必要はありませんのでご安心ください。 - 学習フロー全体でかかる平均学習期間
-
全10ステップをやり終えるまでの平均的な学習期間は3ヶ月(90日)ほど
早いと1,2ヶ月で終えられる方もいます。
さらに人によってはSTEP6[ポートフォリオサイトを作ろう！]を終えた段階でコーディング案件を獲得する方もいますよ！
Web制作の具体的な学習方法
それではここから各ステップごとに詳しく、具体的に説明していきます！
STEP1 ProgateでHTML・CSSを勉強しよう！
これからProgateを使ってHTML・CSSの学習を進めていきます
またProgateではProgateだけで「コーディング＋ブラウザでの表示の確認」ができてしまうため、Progate終了後ローカル環境での作業方法を学ぶために一部ドットインストールも利用していきます（無料コースですので費用はかかりません）
学習フローは以下の通り
Progateで学習するときの注意点
Progateで学習するときは次のことに注意しよう！
- 道場編はやらない
- floatプロパティの理解は浅くても大丈夫
- なかなか覚えられなくても最大で2周までにしよう
・道場編について
道場編はブラウザでの表示が正しくてもコーディング内容が解答と異なっていると合格できないことがあるため、やらずに学習コースのみ取り組もう
・floatプロパティについて
floatという要素の並びを調節できるプロパティがでてくるが扱いが難しく、現在では要素の並び替えはFlexboxというプロパティが主流なため理解が浅くても気にしなくて大丈夫です。（もちろんfloatにはfloatの利点がありますが最初のうちはFlexboxを使うことに慣れてください）
・最大2周までにしよう
これが最も大切です。Progateはキャラクターがでてきたりレベル制があったりとゲームのような感覚で学習ができるといことで楽しく学べる事が特徴ですが、あくまでProgateは「基礎」を学ぶものなのでレベル上げや100％の理解は必要ありません。HTMLとCSSの概要がつかめたらSTEP2へ進もう！
ProgateのHTML・CSS学習お疲れ様です。
ここでみなさんにWEB制作では必須だがProgateでは教えてもらえない「px以外の単位」についてご紹介！
こちらで説明されている単位、全てWEB制作で必須です！
特に
- rem
- %
- vh
はそれぞれ上からフォントサイズの管理、要素の大きさ、メインヴィジュアルに使われるのでこのタイミングで覚えておきましょう！
HTML＆CSSコースの学習が終わったら次のステップに行きましょう！
STEP1に役立つオススメ教材
- 無料教材
オンラインプログラミングスクール「TeckAcademy」によるYouTube動画
- 有料教材
WEB制作に携わる人なら一度は聞いたことがあるであろうブログ「Webクリエイターボックス」の運営者Mana(@chibimana)さんの著書。詳しい解説を見ながら実際にサイト一つをコーディングすることができる。HTML・CSS以外の内容もかなり濃く、Web制作者学習者なら辞書代わりに持っておきたい1冊。
こちらの教材のレビュー記事も参考にしてみてください！▼
UdemyのWEB制関連おすすめ記事はこちらにまとめてあります！
Udemyは定価だと高いのでセール中に購入しましょう！
STEP1に役立つ参考サイト
STEP2 無料問題集とカンプコーディングでスキルアップしよう！
STEP2では現役エンジニアの忍者CODE(@ninjacodeee)さんと現役WEBデザイナーのクリ☆スタ(@cresta_design)さんが無料で公開している学習教材を使って勉強していきます
- 忍者CODE無料問題集 HTML＆CSS編 (https://ninjacode.work/practice/)
- クリ☆スタ無料デザインカンプ 初級編 (https://crestadesign.org/cording-first/)
それぞれの勉強法を説明をします！
忍者CODE無料問題集 (https://ninjacode.work/)
STEP2の間に学習しておきたい目安としては「初級」クリアを目標にするといいでしょう。「中級」「上級」に関しては今後STEP3、STEP4…と進んでいく中で時間があるときに取り組んで頂ければと思います。
- 問題文を見て実装したい内容を理解する
- わからないところはググる（例：「CSS 文字 色 変える」で検索）
- 実装できたら解答を見て説明を読み良く理解する
ここで大切なのは「②わからないところはググる」。実装方法が浮かばなくてもすぐに解答を見ずに検索しましょう。WEB制作のお仕事はどれだけ勉強しても「知らないこと」のオンパレードです。基本的に調べながら実装し案件をこなしていきます。STEP1でProgateやドットインストールの内容の理解が浅くても大丈夫と説明したのもそういうこと。WEB制作では「覚える」よりも数をこなして「慣れる」方が重要。忍者CODE無料問題集を通して自分でググる力を養いましょう！
クリ☆スタ無料デザインカンプ
クリ☆スタ無料デザインカンプでは「デザインカンプ」を無料で取得し、さらにAdobe XDというデザインツールの使い方を覚え、実案件さながらのコーディング経験をすることができます。
さらにクリ☆スタで作成したサイトは「カンプからのコーディング」としてポートフォリオに実績掲載OK！
こちらも忍者CODE無料問題集同様、デザインカンプの難易度ごとに「初級」「中級」「上級」がありますがSTEP2の達成目標は「初級」デザインカンプのコーディングとしますので「中級」「上級」はSTEP5「模写・カンプコーディングをしよう！」にてやって頂ければと思います。
- デザインカンプを取得する
- Adobe XDでデザインカンプを開く
- 必要な情報を読み取りながらHTML・CSSのみ実装
- 解説記事を読みながら繰り返し挑戦
クリ☆スタサイトで公開されている学習方法でもOKです！
クリ☆スタ無料デザインカンプコーディングでは初級からJavaScriptを使う部分がありますがこちらはSTEP4「STEP3で作ったカンプコーディングサイトに動きを付けよう！」にて実装するのSTEP2ではHTML・CSSのみ実装しましょう。
Adobe XDのインストール方法と使い方は次のサイトを参考にしてください。
ローカル環境構築の際にインストールしたVisual Studio Codeの拡張機能「Live Server」を使ってコーディングしてみよう！
・Adobe XDのインストール方法
・Adobe XDの使い方
こちらの記事でコーディング時の注意点や効率的なやり方をまとめてあるのでぜひご覧ください
このTipsではリセットCSSについて簡単に解説していきます。
リセットCSSとは「ブラウザがデフォルトで持っているCSSを無くす」役割を持つCSSです。
リセットCSSについては下記の記事が参考になります。いくつか種類がありますが、自分の使いやすいと思ったリセットCSSを利用しましょう！
ちなみに私はressをもとに自分なりにカスタマイズしたものを使用しています。
Tips No.3はSassを勉強しようと言うことですが、Sassとは簡単に言うと「超すごいCSS」です。ふざけてません。訳すと本当にこうなります。
Sassに関する知識と学習は以下の教材を使いましょう！
Visual Studio Codeには「Live Sass Compiler」の他に「Easy Sass」というプラグインがありますが、こちらはSassのパーシャルという機能が使えない可能性があるため「Live Sass Compiler」をオススメします。
- 忍者CODE無料問題集 HTML＆CSS編 初級
- クリ☆スタ無料デザインカンプ 初級
これらできたら次のステップに進みましょう！
STEP2に役立つオススメ教材
- 無料教材
デイトラの無料練習素材
簡単なデザインカンプコーディングをすることができます。
- 有料教材
無料問題集を運営する忍者CODEさんの有料学習教材
現役エンジニアによる解説動画付きでHTML・CSSだけでなくJavaScript(jQuery)まで幅広く習得できるコンテンツ
私個人としてはこのステップで教材を買うならはこちらの「銅の鎧」をおすすめします
Sassはコーディング効率を圧倒的に高めることができるのでぜひ身につけておきたいスキルの一つ。Sassの具体的な使い方や高度なスキルまで解説されているおすすめの1冊です！
STEP2に役立つ参考サイト
STEP3 ProgateでJavaScript(jQuery)を勉強しよう！
STEP3ではProgateを使用してJavaScript（jQuery）を学習していきます。
WEB制作におけるJavaScript(jQuery)の役割はサイトに動きを付けることです。
こちらは私が初めて制作したポートフォリオサイト（ひな形）ですがスクロールに合わせて要素がフェードインしたりスライドショーがあったりと躍動感のあるサイトになっていることがわかるかと思います。
JavaScriptもjQueryも動きを付ける役割があることはわかったけどこの二つの違いは何？と思う方もいるでしょう。
jQueryはプログラミング言語であるJavaScriptのライブラリというものの一つで、ライブラリは「よく使う機能を簡単に実装できるように変換してまとめたもの」というように覚えておいて頂ければ大丈夫です。
じゃあjQueryだけでもいいんじゃないと思う人もいると思いますが、jQueryがJavaScriptを元にしている以上jQueryを学ぶ事前知識としてJavaScriptも軽くふれておいた方がいいためこのSTEP3ではJavaScriptの学習も薦めます。
ここでのJavaScriptの学習はあくまでjQueryのための事前知識なので概要がつかめれば大丈夫です。
ProgateでJavaScript(jQuery)を学ぶ
Progateを使った学習手順は次の通り
Progateで学習するときの注意点
- 全て覚えようとしない
- 道場編はとばす
・全て覚えようとしない
JavaScriptはあくまで事前知識。jQueryはよく使うアニメーションの実装方法はネット上にコピペできるソースコードがあるのでアニメーションの作り方ではなくjQueryの基本的な使い方を学ぶ
・道場編はとばす
jQueryコースにはHTML＆CSSコースと同様に道場編がありますがこちらも飛ばして大丈夫です。
STEP3を終えた方は次のステップに進んでください！
STEP3に役立つオススメ教材
- 無料教材
オンライン学習サービス「CODEPREP」の無料講座
- 有料教材
STEP3に役立つ参考サイト
STEP4 STEP2で作ったカンプコーディングサイトに動きを付けよう！
STEP4ではSTEP2でクリ☆スタ無料デザインカンプコーディングにより作成したサイトにJavaScript(jQuery)を使って動きを付けていきます。
クリ☆スタ無料デザインカンプ「初級」ではハンバーガーメニューの実装のためJavaScript(jQuery)を使用しますが、ここでは練習のため、カンプ・仕様書にはない動きも追加してみましょう！
こちらの記事を参考にTOPへ戻るボタンやスクロールに合わせて要素をフェードインさせたりするのもいいかもしれませんね！
WEB制作では例えば「○○ CSS 実装方法」のような検索を行うと検索結果に、上記のような「【コピペで実装】」といったサイトが出てくることが多くあります。実際にそういったサイトを利用して実装して大丈夫ですが、ここで一つ注意点があります。
コピペで実装するときに「コピペしたソースコードの理解」をぜひしてください。
コピペを行うことで実装したい内容を簡単に実装可能ですが、それだけではデザインにレパートリーがありません。自身でコードのカスタマイズができるように一度コピペしたソースコードを見ながらでもよいので自分でもコードを書いて理解を深め、実装してみてください。
STEP4は以上になります！あっという間でしたね。
続いてSTEP5に参ります。
みとブログ
STEP4に役立つオススメ教材
今のところ特にありません。
STEP4に役立つ参考サイト
STEP5 模写・カンプコーディングをしよう！
STEP5ではこれまで身につけたスキルを使って様々なサイトを作っていきます。
インプットした知識はアウトプットすることで定着するので頑張りましょう！
やることは次の2つ
- 模写
- カンプコーディング
模写コーディング時に気をつけたいことはこちらの記事でまとめてあるのでぜひ参考にしてください！
ステップ5の注意点
- 作るサイトは2、3個にしよう
- 一回は模写をしよう
- 模写するサイトについて
・作るサイトは2、3個にしよう
模写には終わりがありません。やればやるほど新しく覚えることが出てくるのは実案件でも同じです。ここではSTEP4までに学習したことの定着や制作実績サイトを作ることを目的に頑張りましょう
・一回は模写をしよう
実案件は模写じゃない、カンプコーディングだから模写はやる必要が無いと思う人もいるかも知れませんが、Google Chromeの機能は実案件でも使う機会がありますので模写を通じてGoogle Chromeの機能を使っておくことをオススメします。
・模写するサイトについて
「WEB制作 模写 おすすめ」などで検索すると多くの場合「iSara」と「Airbnb」というサイトの模写をおすすめしている情報を目にすると思いますが、これらのサイトの模写はこれから模写を始める人にはあまりお勧めしません。その理由は単純に「すでに多くの人が取り組んでいるから」。つまりみんなポートフォリオの実績欄にこの二つが載っているんですよね。そんなポートフォリオを提出してもクライアントからしたら真新しさがなく、あなたのポートフォリオは目に止まりません。そうならないようなるべくこれらを避けて模写をすることをオススメします。(あくまで個人の意見です。)
レスポンシブ化では次のことを意識すると楽になります！
- フォントサイズの管理はremで行う
- max-widthを指定する
- 要素の幅や左右の余白を％で指定
上からそれぞれ、デバイスの大きさに合わせて一括でフォントサイズを変更できる。コンテンツの広がりすぎを防ぐ。画面幅に対する要素の幅や位置を常に一定に保てる。
また模写をする際はコーディングを始める前にサイト全体に目を通し、どこを何のタグで書くか、どんなCSSで実装できそうか目星を付けておこう！
みなさんクラス名を着けるとき「なんとなく」でつけていませんか？
きちんとした命名規則に則ってクラス名を着けることでclassの意図しない重複を防ぎ、後からの改修の際にもわかりやすいコードを書くことができます！
予測しやすい・保守しやすい・再利用しやすい・拡張しやすいコーディングを意識しましょう！
こちらの記事にも出てくるメジャーな命名規則「BEM」はTips No1で学んだSassのネストという機能と相性がいいためぜひ習得してほしいものとなっています！
ただ必ずしも「_(アンダースコア)」を使わないといけないとかそういう細かいことは必須ではありません。もちろん100％命名規則に従って命名できれば一番良いのですが、あくまで「命名規則に統一感があり、誰が見てもわかる、事故(意図しないクラス名の重複など)が起こらない」ような命名をしていればアンダースコアかハイフンかとかそういった細かいところまで完璧にしようとしなくて大丈夫です。
こちらのTipsは全員が必ずしもやった方がいいというわけではありませんが、WEB系会社への就職・転職を考えている人は学んだ方が良い内容となっています。もちろんそうではない人も便利な機能なので習得すると良いと思います。
Gitとは学習履歴を管理することができるサービスで、WEB系への就職の際の学習経歴の証明になったりもします。
ただGitの真骨頂はただの学習履歴ではなく、ファイルデータのセーブができることです。それによりファイルデータの時間遡行ができちゃいます！
どういうことかというと例えば2020年11月1日にとあるindex.htmlファイルをGitに記録しておくと、そのあとどのような変更を加えてもそのファイルの内容を2020年11月1日時点でのindex.htmlファイルの内容に戻すことができちゃうんです！（伝わりました？）
これにより「とりあえず」で変更を加えたファイルが、あまり良い結果を示さなかったというときに「変更を加える前」のファイル状態まで戻せたりして、いろんなミスの帳消しや時間の短縮が図れます。
そんなGitの学習に便利な教材は以下の通り
模写のやり方
模写とは読んで字のごとくサイトを模倣して写すことを言います。
模写のやり方は単純で
模写サイトはこちらの記事を参考にしてみましょう！
対象のサイトから模写に必要な情報を得るにはGoogle Chromeの検証機能と拡張機能を使います。ローカル環境構築にて新たにGoogle Chromeをインストールしていただいたのはこのためです。
Google Chromeの検証機能を使ってみよう！
Google Chromeの拡張機能を使ってみよう！
カンプコーディングをする
- MASA BLOG無料デザインカンプ
- クリ☆スタ無料デザインカンプコーディング「中級」「上級」
- MASA BLOG無料デザインカンプ
MASA BLOG無料デザインカンプではクリ☆スタデザインカンプと同様に無料のデザインカンプを用いてコーディングを行うことができます。そしてなんとこちらもポートフォリオ掲載可能！
デザインカンプの内容も「ポートフォリオサイト」なので次のステップ「ポートフォリオサイトを作ろう！」で役に立つためこちらはこのセクションではほぼ必須で取り組んでほしい内容となります。
ただクリ☆スタ無料デザインカンプと違い解説記事などはないので自力で全て実装頑張ってみてください！
- クリ☆スタ無料デザインカンプコーディング「中級」「上級」
こちらは特に追加の説明はありません。STEP2と同様の手順で「中級」「上級」に取り組んでみてください！
STEP5に役立つオススメ教材
- 無料教材
MASA BLOGの無料デザインカンプ第二弾
- 有料教材
現役WEB系フリーランスのしょーご(@samuraibrass)さんのカンプコーディング教材
価格：\500~\3,680
コーディングの際の命名規則や運用しやすいCSSの書き方が学べる1冊。CSSは「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」というこの4つが揃っているのが理想的。それらを備えたCSSの書き方をコレ1冊で学ぶことができる。強い構造のCSSを書くスキルはぜひとも身につけておきたいところ。
SourceTreeを使ったGitの使い方がかなりわかりやすく説明されている本。参考サイトだけでは理解が足りないと思う人は購入をおすすめします。
STEP5に役立つ参考サイト
STEP6 ポートフォリオサイトを作ろう！
ステップ6では「ポートフォリオサイト」を作って頂きます。
WEB制作でいうポートフォリオサイトとは一般的にサイトの訪問者に自身のことを説明する名刺代わりのサイトを指します。
STEP3でも掲載しましたがこちらは私がはじめて作成したポートフォリオサイト（ひな形）になります。デザインはオリジナルで、デザイン＋コーディングで5日間かかりました。急にポートフォリオを作ろうと言われてもどんなものか想像がつかないという方は参考にしてみてください。
ポートフォリオに載せるべきもの
これから案件を獲得することを考えるとポートフォリオサイトには最低限
- 自己紹介
- スキル
- 実績
が載っていた方がいいでしょう。
- 自分がどういう人なのか（怪しい人じゃないこと）を伝える
- 自分にできること（スキル）を伝える
- スキルの表明に具体性を持たせる
案件獲得に関してポートフォリオサイトには以上のような役割があります。
デザインはシンプルなもので大丈夫です。デザインが浮かばない！と言う人はSTEP5で模写したサイトの文字や画像を自分のものと入れ替えて、色を変えたり多少CSSをいじってレイアウトにオリジナリティを出すという方法でも構いません！逆にデザインにも興味があるという人はAdobe XDなどのデザインツールを使ってデザインカンプを作ることに挑戦してみてもいいと思います！
下記サイトにたくさんのおしゃれなポートフォリオが載っているのでデザインの参考にすると良いと思います！
ポートフォリオに「お問い合わせフォーム」を実装してみましょう！
ここで一つお知らせ。
気づいている人もいるかも知れませんがお問い合わせフォームはHTMLだけでは機能しません…！
実はお問い合わせフォームを実装するにはPHPというプログラミング言語を学ぶ必要があります。
ただ、PHPを学んだばかりの素人が作るフォームは安全性に欠けるため、ここではGoogle Formを使ったお問い合わせフォームの作り方とResponsive Mailformを使ったお問い合わせフォームの作り方を説明します。
・Google Formを使ったお問い合わせフォームの作り方はこちらの記事を参考にしてください
・Responsive Mailformを使ったお問い合わせフォームの作り方はこちらの記事を参考にしてください
「Webサイト お問い合わせフォーム 作り方」などで検索すると簡単PHPを使ったお問い合わせフォーム作成記事が多数ヒットしますが、どれも安全面にかけるため実装しないよう注意してください。
PHPを使ったお問い合わせフォームの作り方も見てみたいという方はこちらの動画を参考にしてください。バリデージョンやセキュリティ対策も説明しています。
PHPを使ったお問い合わせフォームの解説動画となります。最終更新は2020年7月20日（2020年11月1日現在）ということでかなり信頼できる動画です。
Adobe XDでのデザインカンプの作り方を以下の教材で学びましょう！
他にもTwitterの検索機能で「＃プログラミング初心者 ポートフォリオ」などと検索するとポートフォリオの画像や動画がたくさん出てくると思いますのでぜひ試してみてください。
実はこの時点でみなさんは 案件獲得できます！
でもまだSTEP6だよ？と思いになるかと思いますがこの後のSTEP7、STEP8で学習するWordPressというのは＋αのスキルなので習得しなくても案件を受注することは可能です。
とは言いつつ基本的にはWordPressを習得することで
- 案件単価の上昇
- 受注できる仕事の幅が増える
- それにともない同業者との競争率が減る
以上のような効果が見込めるのでWEB制作で稼ごうとしている人のほとんどはWordPressも習得します！
あくまで「現時点のスキルでも受注できる仕事もある」ということですね
では実際に案件を見てみましょう！
こちらは「クラウドワークス」というクラウドソーシングで実際に掲載されている案件です
- Adobe XDからのカンプコーディング
- 使用スキルはHTML・CSS、JavaScript(jQuery)のみ
これで66,000円です。
月に一回こうした案件がとれれば毎月お財布に5万円の余裕ができるわけですね。どうでしょう、WEB制作で稼ぐ実感がわいてきましたでしょうか？
現時点で案件獲得に挑戦してみたい！という方は一度STEP9「案件獲得の準備をしよう！」に進んで案件獲得を目指してみるのもいいと思います！
一気にWordPressまで習得して高単価案件を狙いにいくぞ！という方は次のステップへどうぞ！
STEP6に役立つオススメ教材
・無料教材
今のところ特にありません。
・有料教材
Adobe XDの基礎から応用までこれ一冊で全てわかる本。XDはこれからのWeb制作に必須なスキルなので早いうちに身につけておくことをおすすめします。
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
オンライン学習サービス「Udemy」の教材の一つ
STEP6に役立つ参考サイト
STEP7 WordPressを勉強しよう！
これからSTEP7、8を通じてWordPressに関する知識を深めていきます。
まずWordPressって何だろうという人のために簡単に説明すると、
WordPressとはCMS（Contents Management Service）と呼ばれるサービスの一つで、これを導入することでWEBサイトの動的な更新が可能になります。
具体的な例としては、例えばHTML・CSSなどで作成したサイトに「最新情報」といったセクションがあったとしましょう。最新情報というだけあってもちろんこのセクションの内容には最新の情報を載せたいですよね。しかしWordPressを導入していないと新しくお知らせしたい情報ができたときに、いちいちhtmlファイルの内容を書き換える必要が出てきます。これではサイトの運営に支障をきたしますね。そこでWordPressの出番です。作ったWebサイトをWordPressに対応させるとWordPressの管理画面というところから簡単に新しい情報を追加できます。
WordPressに関する簡単な説明は以上となります。
WordPressの概要がつかめたところで早速勉強していきましょう！
WordPressの学習方法
このロードマップではWordPressの学習にYouTubeを用います。
YouTubeにはWordPressの他にもWEB制作に関するあらゆる情報があふれかえっているので、ここまでのSTEPで理解が浅いと思うところはYouTubeで検索してみてください。
このロードマップで使うWordPressのYouTube動画はこちら！
しもむらともきさんの動画ではCSSのフレームワークの一つであるBootstrapを使用しています。JavaScriptとjQueryの関係と似たものだと思ってください。
このロードマップではBootstrapの学習はしていません。Bootstrapは大変便利なツールなのですが、有識者でないと実案件へ導入した際にきちんとしたパフォーマンスが見込めないからです。実際私も実案件では使ったことがありません。
ただBootstrapにも大変便利な機能がたくさんあるため興味のある方はこちらの動画で学習してみてください。
こちらもたにぐちまことさんのYouTube動画となります。
たにぐちまことさんはYouTubeの他、UdemyなどでもWEB制作に関する大変わかりやすい動画教材を出しているのでぜひ活用しましょう！
オススメの学習順序
MAMPを用いたローカル環境の構築解説はとばして大丈夫です。
WordPressの勉強はそこまで難しくないのでここでしっかり身につけましょう！
STEP7に役立つオススメ教材
・無料教材
しもむらともきさんのWordPress制作動画 応用編
・有料教材
たにぐちまことさんによるUdemyのWordPress開発動画
YouTubeよりもさらに深く具体的に解説しています。
定価：\24,000
文系でも解る！ WordPressの基礎の理解と、独自デザインをWordpress化にする
こちらもUdemyのWordPress講座
WordPressのサイト制作方法を解説した書籍です。
書店にも売っているので中身を試し読みしてわかりやすいものを選んで利用するといいと思います！
STEP7に役立つ参考サイト
STEP8 ポートフォリオサイトをWordPress化しよう！
STEP7お疲れ様です！
WordPress化の手順はつかめたでしょうか？
STEP8ではSTEP7で身につけたWordPress化のスキルを使って自身のポートフォリオサイトをWordPress化してみましょう！
このTipsではお問い合わせフォームを実装していきます。
その１とは違い今回はWordpressでのお問い合わせフォームの実装方法です。
WordPressではプラグインを使用することで簡単にお問い合わせフォームを実装できるので、その１で実装したPHPを使用するお問い合わせフォームの実装に自信がない人はお問い合わせフォーム込みの案件にはWordpressの導入も含めて提案すると単価も上がるので良いかもしれません。
WordPressでのお問い合わせフォームの実装には「Contact Form 7」という有名な国産プラグインを使用します。
国産ということで多くの解説記事があるのでいろいろ見てみるとよいかもしれません。
STEP8に役立つオススメ教材
・無料教材
今のところ特にありません。
・有料教材
みとロード卒業制作
実案件を想定したコーディング実践練習ができるデザインカンプです
実務で頻出のデザイン・スキルを詰め込んだカンプとなっており、案件獲得に踏み出すためのひとつの指標となります
ここまで学習してきたあなたならきっとできる！自分を信じてぜひ取り組んでみてください
デイトラの卒業制作 定価\2,980
STEP8に役立つ参考サイト
STEP9 案件獲得の準備をしよう！
ここまでの道のり、かなり長かったと思いますがよく頑張りました。
STEP9からはいよいよ案件獲得に向けて行動を開始します！
このSTEP9、実はこの学習ロードマップで最も大切なステップです。
冒頭でもお話ししましたがこのロードマップでは「他のロードマップではほとんど触れられないのに実案件では必須なスキルの習得」にフォーカスしています。
その最重要ステップがここ、STEP9ということにです。
このステップでは「コーディング以外の必須スキル」の学習方法を教えますので一つ一つ丁寧に学習を進めていってください！
（なんだかんだ言っていますがWordPressでのブログ運営経験のある人などはそこまで学ぶことはないかもです）
- ドメイン・サーバーの設定
- WordPressのインストール方法
- FTPツールの使い方
- WordPressサイトの納品方法
- SEO対策のやり方
- サイトマップの作成
- Google Search Consoleの登録
- Google Analyticsの導入
まずはドメイン・サーバーの設定から！
ドメイン・サーバーの設定 / WordPressのインストール方法
みなさん、ドメインとサーバー、何のことか知っていますでしょうか。
よく「サーバーは土地、ドメインは住所、サイトは家」のような例えをされます。
これまでのステップで制作してきたサイト(家)をインターネット上に公開する(建てる)にはサーバー(土地)とドメイン(住所)が必要になるんですね。
そんなサーバー・ドメインの基礎知識の理解と実際の契約の仕方、契約したドメインにWordPressをインストールする方法を学ぶのにおすすめの記事をご紹介します。
・サーバー・ドメインの基礎知識の理解
・サーバー・ドメインの契約の仕方、契約したドメインにWordPressをインストールする方法
これらの記事を見る分にはそこまで難しそうではありませんね。
しかしそれでも事前に調べておかなかったせいで案件本番で必要になった時にこれらの解説記事の存在を知らなかったり、検索してこれらの記事を見つけられたとしても、ぶっつけ本番で実装するというようなことを避けられる分、
今までこういった知識を知らなかったという人はこのロードマップを読んだ価値があるんじゃないかなと私的には思います。(自己完結)
動画ではお名前ドットコムとエックスサーバーを利用していますが「ムームードメインとロリポップ」といった組み合わせもドメインとサーバーの会社が同じで、設定しやすかったりするのでぜひ試してみてください！
FTPツールの使い方
続いてFTPツールの使い方についてです。
ここまで習得できたらHTMLファイル形式のサイトと一部のWordPress改修案件の納品が可能になります。
ではFTPツールとは何なのかということとその使い方を見ていきましょう！
・FTPツールとは
・FTPツールの使い方
Windows限定ですが私はこちらのFFFTPを使っています。
こちらはWindows・Macどちらでも利用可能です。
CyberduckもWindows・Mac両対応です。
これらのFTPツールを使い、ローカル環境で作成したファイルを指定されたドメインに写すことで納品が可能になります！
サーバーによりサイトのファイルの設置先となるフォルダ(通称ルートディレクトリ)の名前が違いますが、サーバー契約時にサーバー会社から送られてくるftp情報などが載ったメールに設置先フォルダ名が記載されているのでわからない場合は依頼主に確認を取りましょう。
ちなみにエックスサーバーの場合は「/ドメイン名/public_html」がルートディレクトリです。FTPツールを開けばすぐに見つかると思います。
WordPressサイトの納品方法
WordPressの納品方法です。
WordPress案件ではローカル環境(例：Local by Flywheel)でサイトの制作を行い、その後テーマファイルとデータベースの二つを依頼主様の手元の環境に移動させる必要になります。
それに伴い自身のローカル環境だけでなく依頼主様の手元の環境にもログインする権利が必要になってくるんですね。
ですのでHTMLファイル形式納品の案件と違いあらかじめ依頼主様から
- WordPress管理画面へのログイン画面のURL
- WordPress管理画面へのログインに必要なログインIDとパスワード
を聞いておく必要があります。
そうして依頼主様のWordPressサイトの管理画面へログインできるようになったらいよいよ納品です。
WordPressサイトの納品で最もよく使われる方法をご紹介します。
「All in One WP Migration」というプラグインを使う方法です。このプラグインを使うことで面倒なWordPressサイトの移行が簡単にできてしまいます！
おめでとうございます！ここまででサイトの納品はできるようになりました！
残りの4つは＋αのスキルですが求められることの多いスキルですのでこの際に学習しておきましょう。
SEO対策のやり方
SEO対策のやり方をご説明します。
そもそもSEO対策(検索エンジン最適化)とは何かというと、ブラウザで検索した際に作成したサイトがより上位に掲載されるように様々な策を講じることを言います。
例えば「新宿に新しくパン屋さんを開くため宣伝になる名刺代わりのサイトがほしい」という依頼でホームページを作成したとしましょう。そこで誰かがブラウザで「新宿 パン屋さん」と検索したとき、新宿にもいろんなパン屋さんがあると思いますが、それらのお店のホームページほぼ全てが検索結果にヒットすると思います。その際先ほど作成したお店のホームページが他のお店のホームページよりも上位に掲載されてほしいですよね。そのための調整をするのがSEO対策です。（ざっくり）
まず第一にあたりまえですが、適切なタグでのマークアップをしましょう。無駄に量産されたdivタグや文字の大きさで採用したh1タグなど、それぞれのタグの本来の役割に沿わない使い方をしてはいけません。これは最低限守ってほしいコーディングルールになります。
ではHTML形式のサイトとWordPressサイト、それぞれでのSEO対策のやり方をご説明します。
・HTML形式のSEO対策
HTML形式のサイトでは<head></head>の中に<meta>タグを用いてSEO対策を導入します。
・WordPressサイトのSEO対策
WordPressサイトでは使用テーマ自体にSEO対策が内包してあったり、プラグインを使用してSEO対策をすることができます。
よく使われるプラグインは「All in One SEO Pack」です。頻出ですのでぜひ使い方を身につけましょう！
また最近できたSEO対策プラグイン「SEO Simple Pack」はAll in One SEO Packよりも手軽にSEO対策ができるのでオススメです。開発者は有名ブロックエディタテーマ「SWELL」の開発者としても有名な了(@ddryo_loos)さん。純国産なので扱いが簡単なのもポイント。
以上でこのセクションでのSEOの説明は終わりですが、個々で紹介したのはごく一部の、主だったSEO対策方法です。これさえできれば必ず検索上位に表示されるというわけではありませんし、ましてや完璧なSEO対策は（ほぼ）不可能だと私は思います。
現在SEO対策に対する考え方の風潮は「コンテンツイズキング」と呼ばれる考え方になっています。metaタグやプラグインでどれだけSEO対策設定をしてもサイトの内容が良くなければ効果は無いということですね。逆に言えば大したSEO対策をしていなくても内容さえ良ければ検索上位に表示されることもあります。
あくまでここで説明したSEO対策方法は本質的には「補助的な役割」だと言うことを肝に銘じておきましょう。
サイトマップの作成 / Google Search Consoleの登録
はじめにサイトマップとはなんなのかという話ですが、サイトマップとはサイトの構造をサイト訪問者や検索エンジンに伝える役割を持つファイルまたはページのことを言います。
サイト訪問者にサイトの構造を伝えるHTML形式のサイトマップ（ページ）と検索エンジンにサイトの構造を伝えるXMLファイルの二種類がありますが、このセクションでお話しするサイトマップは検索エンジンにサイトの構造を伝える役割を持つサイトマップです。
サイトマップを作成することで検索エンジンにいち早く制作したサイトの存在を知ってもらい検索結果に表示してもらう他、それに伴ってSEO対策にもなったりします。
ただサイトマップは作っただけでは意味がありません。あくまでサイトマップは「検索エンジンにサイトの構造を伝える役割を持ったファイル」です。なのでファイル自体を検索エンジンに届けないと伝えることはできません。
そこで登場するのがGoogle Search Consoleです。このサービスを使用しGoogleの検索エンジンにサイトマップを届けることで、制作したサイトの構造情報をGoogleの検索エンジンに伝えてもらうことができます。
それでは実際にサイトマップの作成方法とGoogle Search Consoleの登録方法を学んでいきましょう！
私はWordPress案件でのサイトマップの作成では「Google XML Sitemap」というプラグインを使用していますのでGoogle XML Sitemapの設定方法とサイトマップ・Google Search Consoleの登録方法の学習に役立つ記事をご紹介します。
・Google XML Sitemapの設定方法
この記事内の「４．グーグルサーチコンソールにサイトマップを追加する」では少しGoogle Search Consoleの説明が足りないので参考にするのは「３−１．カテゴリーに関する設定が反映されない不具合の対処法」までにし、Google Search Consoleの説明は以下の記事を参考にすると良いと思います。
こちらの記事ではWordPressサイトを前提とした解説をしていますが、HTML形式のサイトでも解説の途中にでてくる「HTMLのmetaタグ」を<head></head>内に追加するだけなので難しくはありません。
また一つ前のセクションにも出てきた「All in One SEO Pack」を用いたGoogle Search Consoleの登録方法も解説されていますね！
「あのプラグインじゃないといけない」ということはないので、お好きな方法で実装してもらえればと思います！
Google Analyticsの導入
STEP9最後のトピックです！いやぁ、、長かったですね。。私もここまでで既に37,000字執筆しているので少し疲れました(笑)
ここまでお付き合いくださった方お疲れ様でした。そして、ご覧頂きありがとうございます。
もうすぐでゴールなのでもう一踏ん張り頑張りましょう！私も執筆頑張ります！(笑)
・Google Analyticsを導入しよう！
みなさんGoogle Analyticsは知っていますでしょうか？
Google AnalyticsとはGoogleが無料で公開しているアクセス解析ツールのことです。
これを導入することで
- サイトの訪問者数
- 訪問者がどんな目的で訪問したか
- 訪問者が使用しているデバイスはPCかスマホか
などなどサイト運営に役立つ様々なデータを得ることができます。
Google Analyticsで分かることは導入する理由が分かったところで肝心の導入方法を学んでいきましょう！
まずはこちらの記事に目を通してください
記事内目次「3-2.WordPressでアクセス解析（プラグイン「ExactMetrics」）」で説明されているプラグインはいつぞやのアップデートにより機能の使用が有料化されたためこの記事では「3-2.WordPressでアクセス解析（プラグイン「ExactMetrics」）」以外の部分を参考にしてください。
基本的な流れとしては上記記事にもあるように
という形になります。
ただここでもう一点お知らせがあります。
上記記事でトラッキングコードを取得するステップがあると思いますが、2020年10月14日のGoogle Analyticsの仕様変更によりトラッキングコードの取得課程が複雑になりました。
トラッキングコードの取得方法はこちらの記事の「対処方法2」を参考にしていただければと思います。
しれっとSTEP9終わった感じが出ていますが、実はまだ終わっていません､､､！
「インプットした知識・スキルはアウトプットして定着させる。」
学習の基本ですね。
というわけで！ここまで学んできた内容
- ドメイン・サーバーの設定
- WordPressのインストール
- FTPツールの使用
- サイトマップの作成
- Google Search Consoleの登録
- Google Analyticsの導入
初案件でぶっつけ本番で実装しようとして上手くいなかった！ということにならないように一度経験しておきましょう！
やり方は以下の通り
これで案件獲得の際に提示できるしっかりとしたポートフォリオサイトの完成です！
またこれを行うことで「SEO対策できます！」とか「Google Analytics導入できます！」とか言えちゃう特典付き！
ぜひアウトプットして知識・スキルを定着させてください！
STEP9に役立つオススメ教材
・無料教材
Udemyの無料講座の一つ
All in One SEO Packの使い方が学べます。
・有料教材
今のところ特にありません。
STEP9に役立つ参考サイト
STEP10 Web制作案件を獲得しよう！
これまでのステップを終え、無事ここにたどり着いた方、おめでとうございます。
そして長い長い学習、お疲れ様でした！
学習する人の約9割が挫折すると言われるWEB制作。
ここまでこれたあなたは既に上位10％の人間です。
後は今まで自信が積み上げてきた成果を信じ案件を獲得するだけ！
しれっと案件獲得しちゃいましょう！
案件の獲得には大体次の3種類あります。
- WEB制作会社に営業
- クラウドソーシングで案件に応募
- 人づてにお仕事獲得
まずWEB制作会社への営業について。
制作会社にお仕事回してくださいと営業して回る方法です。
3種類の獲得方法のうち最も稼げる方法ですね。
この方法のメリットデメリットは次の通り
デメリットの解説ですが、WEB制作会社への営業メールは返信が来ない可能性の方が高いです。また返信が来ても面接などで不採用になる可能性があり、ある程度対策しないと契約できません。
またある程度作業時間を確保できることが主張できないと相手にされない可能性があります。「平日は2､3時間、土日はフルコミットできます！」とかでないと難しいです。(会社にもよりますが。)
ただWEB制作会社に営業しなくても高単価案件の継続依頼に発展する(可能性がある)案件獲得方法があります！
その方法が「クラウドソーシングで案件に応募」
こちらのメリットデメリットは次の通り
「競争率が高い」のに「比較的簡単に案件が獲得できる」。変な話ですね。もちろん解説します！
・メリットについて
クラウドソーシングでの案件獲得方法は誰かが人員募集している案件に応募することで獲得します。
応募する際に意気込み(？)などを書いた提案文にポートフォリオサイトや過去の実績などを添付して応募するのですが、クラウドソーシングでの案件獲得のコツは「目にとまるような提案文を送る」ことです。
それについてはこちらの記事を参考にしてください。かなり重要です。しっかり目を通して身につけましょう！
また中には案件を獲得ししっかりと仕事をこなすと「今後も定期的にお仕事振っても良いですか？」と聞かれたりします。
こういった場合だと継続案件になる上に「WEB制作会社へ営業」よりもこちらの事情を通しやすい可能性があります。ある程度時間が無くても相手にしてもらえるかもしれないということですね。
・デメリットについて
クラウドソーシングの案件はかなり低単価です。というのも競争率が高いことにより、その競走を勝ち抜こうとみんなできるだけ見積もりを低くするんですね。それが蔓延した結果価格崩壊が起きています。
ここからはクラウドソーシングでの案件獲得法について解説していきます
「1．WEB制作会社への営業」を学習したい方はこちらの記事を参考にしてください！
クラウドソーシングでの案件獲得方法
案件獲得によく使われるクラウドソーシング系サイトは次の3つ
- クラウドワークス
- ランサーズ
- ココナラ
クラウドワークスとランサーズは「誰かが募集している案件に応募して案件獲得する」といった能動的なシステムを主立った使い方とし、
ココナラは「自らサービスを出品してそのサービスを必要としている誰かが購入する」といった受動的なシステムが主立った使い方となっています。
先ほど話した「継続案件になる」可能性が高いのは前者です。
ココナラはWEB制作会社の方よりも個人経営でサイトが欲しくなったオーナーさんとかが多いイメージ。
ただココナラの方が比較的簡単に初案件獲得できますし、出品しておけば後は放っておくだけでいいのでとりあえず出品してみましょう！
クラウドソーシングでは基本的にはこちらの記事▼を参考に募集案件に提案していきます
「【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ（僕は100万円稼げました）」
どのサービスを利用するとしても本人確認や機密保持契約などは最初にしっかり設定しておきましょう。
以上でWEB制作学習ロードマップ全ステップ終了となります！
最後までご覧いただきありがとうございました！
よろしければ本記事をTwitterなどで「＃みとロード」や「＠mito_710_1」を付けて拡散していただけると大変嬉しく思います。
みと(@mito_710_1)
にほんブログ村
この記事が気に入ったら
フォローしてね！
コメント