【独学で月10万円】WEB制作学習完全ロードマップ【みとロード】

この記事をブックマークする5

この記事はパソコンでの閲覧を推奨します

今まで様々な学習ロードマップを見てきましたが、このロードマップでは「他のロードマップではほとんど触れられていないのに実はかなり重要なこと」までかなり掘り下げて説明していますのでぜひご覧になっていってください

先に具体的な学習順序を紹介しておきます↓

Web制作学習ロードマップ

はじめに：WEB制作学習完全ロードマップ

始めにこれからWeb制作の学習を始める方のために、学習の継続のコツやWeb制作に必要なものの解説をします。

学習ロードマップを早く見たい！という方はコチラへ！

Web制作学習のコツ・挫折対策

Web制作に必要な5つのスキル

Web制作学習前に揃えておきたいもの

Web制作学習のためのローカル環境作り

【最短】WEB制作の学習フロー

学習順序は全部で10ステップ!

学習フロー全体でかかる最低費用

基本カリキュラムでかかる費用はSTEP1のProgateの契約代980円のみです。
それ以外は基本カリキュラムでは費用が発生致しません。
ただし「具体的な学習方法」セクションにて、各STEPの学習内容に対応した、理解をより深めることができるオススメの有料・無料教材をしているので、それぞれの習熟度に合わせてオプションとして購入・利用して頂ければと思います。もちろん基本カリキュラムで理解を深めることができた人は無理に購入・利用する必要はありませんのでご安心ください。

学習フロー全体でかかる平均学習期間

全10ステップをやり終えるまでの平均的な学習期間は3ヶ月(90日)ほど
早いと1,2ヶ月で終えられる方もいます。
さらに人によってはSTEP6[ポートフォリオサイトを作ろう！]を終えた段階でコーディング案件を獲得する方もいますよ！

Web制作の具体的な学習方法

それではここから各ステップごとに詳しく、具体的に説明していきます！

STEP1　ProgateでHTML・CSSを勉強しよう！

これからProgateを使ってHTML・CSSの学習を進めていきます

またProgateではProgateだけで「コーディング＋ブラウザでの表示の確認」ができてしまうため、Progate終了後ローカル環境での作業方法を学ぶために一部ドットインストールも利用していきます（無料コースですので費用はかかりません）

学習フローは以下の通り

HTML＆CSSコースの学習が終わったら次のステップに行きましょう！

STEP1に役立つオススメ教材

• 無料教材

• 有料教材

Udemyは定価だと高いのでセール中に購入しましょう！

STEP1に役立つ参考サイト

Web Design Trends

もう迷わない！CSS Flexboxの使い方を徹底解説CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作…

侍エンジニアブログ

HTML/CSSとは？初心者向けの基礎知識と学習サイト5選 | 侍エンジニアブログこの記事では「 HTML/CSSとは？初心者向けの基礎知識と学習サイト5選 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決...

STEP2　無料問題集とカンプコーディングでスキルアップしよう！

STEP2では現役エンジニアの忍者CODE(@ninjacodeee)さんと現役WEBデザイナーのクリ☆スタ(@cresta_design)さんが無料で公開している学習教材を使って勉強していきます

• 忍者CODE無料問題集　HTML＆CSS編　(https://ninjacode.work/practice/)
• クリ☆スタ無料デザインカンプ　初級編　(https://crestadesign.org/cording-first/)

それぞれの勉強法を説明をします！

忍者CODE無料問題集　(https://ninjacode.work/)

忍者CODE

忍者CODE無料で学べるプログラミング学習サイト

STEP2の間に学習しておきたい目安としては「初級」クリアを目標にするといいでしょう。「中級」「上級」に関しては今後STEP3、STEP4…と進んでいく中で時間があるときに取り組んで頂ければと思います。

忍者CODE無料問題集　HTML＆CSS編　初級

忍者CODE

忍者CODE無料で学べるプログラミング学習サイト

クリ☆スタ無料デザインカンプ

クリ★スタ

クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました！

クリ☆スタ無料デザインカンプでは「デザインカンプ」を無料で取得し、さらにAdobe XDというデザインツールの使い方を覚え、実案件さながらのコーディング経験をすることができます。

さらにクリ☆スタで作成したサイトは「カンプからのコーディング」としてポートフォリオに実績掲載OK！

こちらも忍者CODE無料問題集同様、デザインカンプの難易度ごとに「初級」「中級」「上級」がありますがSTEP2の達成目標は「初級」デザインカンプのコーディングとしますので「中級」「上級」はSTEP5「模写・カンプコーディングをしよう！」にてやって頂ければと思います。

クリ★スタ

クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました！

こちらの記事でコーディング時の注意点や効率的なやり方をまとめてあるのでぜひご覧ください

• 忍者CODE無料問題集　HTML＆CSS編　初級
• クリ☆スタ無料デザインカンプ　初級

これらできたら次のステップに進みましょう！

STEP2に役立つオススメ教材

• 無料教材

• 有料教材

STEP2に役立つ参考サイト

HPcode（えいちぴーこーど）

Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法WebコーダーはAdobe XDを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなけ…

しょーごログ

【Web制作向け】VSCodeおすすめプラグインと設定一覧【超快適】｜しょーごログこんにちは、現在フリーランスのエンジニアとして2年ほど活動しているしょーごと申します。 みなさんプログラミングをする際の

STEP3　ProgateでJavaScript(jQuery)を勉強しよう！

STEP3ではProgateを使用してJavaScript（jQuery）を学習していきます。

WEB制作におけるJavaScript(jQuery)の役割はサイトに動きを付けることです。
こちらは私が初めて制作したポートフォリオサイト（ひな形）ですがスクロールに合わせて要素がフェードインしたりスライドショーがあったりと躍動感のあるサイトになっていることがわかるかと思います。

JavaScriptもjQueryも動きを付ける役割があることはわかったけどこの二つの違いは何？と思う方もいるでしょう。

jQueryはプログラミング言語であるJavaScriptのライブラリというものの一つで、ライブラリは「よく使う機能を簡単に実装できるように変換してまとめたもの」というように覚えておいて頂ければ大丈夫です。

じゃあjQueryだけでもいいんじゃないと思う人もいると思いますが、jQueryがJavaScriptを元にしている以上jQueryを学ぶ事前知識としてJavaScriptも軽くふれておいた方がいいためこのSTEP3ではJavaScriptの学習も薦めます。

ProgateでJavaScript(jQuery)を学ぶ

Progateを使った学習手順は次の通り

STEP3を終えた方は次のステップに進んでください！

STEP3に役立つオススメ教材

• 無料教材

• 有料教材

STEP3に役立つ参考サイト

侍エンジニアブログ

jQueryの基本的な書き方を覚えよう！【実践用サンプルコードあり】 | 侍エンジニアブログこの記事では「 jQueryの基本的な書き方を覚えよう！【実践用サンプルコードあり】 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなた...

STEP4　STEP2で作ったカンプコーディングサイトに動きを付けよう！

STEP4ではSTEP2でクリ☆スタ無料デザインカンプコーディングにより作成したサイトにJavaScript(jQuery)を使って動きを付けていきます。

クリ☆スタ無料デザインカンプ「初級」ではハンバーガーメニューの実装のためJavaScript(jQuery)を使用しますが、ここでは練習のため、カンプ・仕様書にはない動きも追加してみましょう！

ブログの神様｜THE GOD OF BLOG

jQuery／CSSアニメーション15選【コピペでサイト制作】TOTO ポートフォリオサイトが完成したので、参考にしたサイトをまとめてみました！ GIGLIO アニメーションだけじゃないけどね。 【Day 128】 ポートフォリオサイト公開 / ...

こちらの記事を参考にTOPへ戻るボタンやスクロールに合わせて要素をフェードインさせたりするのもいいかもしれませんね！

WEB制作では例えば「○○　CSS　実装方法」のような検索を行うと検索結果に、上記のような「【コピペで実装】」といったサイトが出てくることが多くあります。実際にそういったサイトを利用して実装して大丈夫ですが、ここで一つ注意点があります。
コピペで実装するときに「コピペしたソースコードの理解」をぜひしてください。
コピペを行うことで実装したい内容を簡単に実装可能ですが、それだけではデザインにレパートリーがありません。自身でコードのカスタマイズができるように一度コピペしたソースコードを見ながらでもよいので自分でもコードを書いて理解を深め、実装してみてください。

STEP4は以上になります！あっという間でしたね。

続いてSTEP5に参ります。

みとブログ

あわせて読みたい

【jQuery】ハンバーガーメニューを作ってみよう！こんにちは、みと(@mito_710_1)です！今回はjQeryを使ったシンプルなハンバーガーメニュー・レスポンシブなヘッダーの作り方を説明します。作っていくのはこんな感じ(再...

STEP4に役立つオススメ教材

今のところ特にありません。

STEP4に役立つ参考サイト

侍エンジニアブログ

【jQuery入門】CDNを読み込む方法と使い方まとめ！ | 侍エンジニアブログこの記事では「 【jQuery入門】CDNを読み込む方法と使い方まとめ！ 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決す...

コムテブログ

この上なく便利！すごい「jQuery」の小技まとめ３２今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。

Webクリエイターボックス

少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続...

WEBDESIGNDAY

【jQuery】スライダープラグイン「slick」の使い方を詳しく解説世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定…

cooen [コーエン]

スライダーSwiper.js 基本の使い方解説 – cooen [コーエン]こんにちは、コーダーのN.Sです。今回はよく使われるスライダーライブラリー Swiper.jsの紹介です！スライダーのライブラリーといえば、これって感じでよく使われてます。

Web Design Trends

2018年版：パララックスを簡単に実装できるおすすめプラグイン8選パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見…

STEP5　模写・カンプコーディングをしよう！

STEP5ではこれまで身につけたスキルを使って様々なサイトを作っていきます。

インプットした知識はアウトプットすることで定着するので頑張りましょう！

やることは次の2つ

• 模写
• カンプコーディング

模写コーディング時に気をつけたいことはこちらの記事でまとめてあるのでぜひ参考にしてください！

模写のやり方

模写とは読んで字のごとくサイトを模倣して写すことを言います。

模写のやり方は単純で

カンプコーディングをする

• MASA BLOG無料デザインカンプ
• クリ☆スタ無料デザインカンプコーディング「中級」「上級」

• MASA BLOG無料デザインカンプ

masa blog

【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】 | masa blog

MASA BLOG無料デザインカンプではクリ☆スタデザインカンプと同様に無料のデザインカンプを用いてコーディングを行うことができます。そしてなんとこちらもポートフォリオ掲載可能！

デザインカンプの内容も「ポートフォリオサイト」なので次のステップ「ポートフォリオサイトを作ろう！」で役に立つためこちらはこのセクションではほぼ必須で取り組んでほしい内容となります。

ただクリ☆スタ無料デザインカンプと違い解説記事などはないので自力で全て実装頑張ってみてください！

• クリ☆スタ無料デザインカンプコーディング「中級」「上級」

こちらは特に追加の説明はありません。STEP2と同様の手順で「中級」「上級」に取り組んでみてください！

クリ★スタ

クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました！

クリ★スタ

クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました！

STEP5に役立つオススメ教材

• 無料教材

• 有料教材

STEP5に役立つ参考サイト

コードラン

【初心者エンジニア向け】模写コーディングでスキル爆上げ！手順からおすすめの模写すべきサイトまで HTML・CSS・JQuary・javascriptの基礎を学んだ後に、必ずWebサイトの模写コーディングをおすすめされますよね、、、。 正直、基礎を学び終わった後に、いきなりWeb...

あわせて読みたい

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズこんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？...

STEP6　ポートフォリオサイトを作ろう！

ステップ6では「ポートフォリオサイト」を作って頂きます。

WEB制作でいうポートフォリオサイトとは一般的にサイトの訪問者に自身のことを説明する名刺代わりのサイトを指します。

STEP3でも掲載しましたがこちらは私がはじめて作成したポートフォリオサイト（ひな形）になります。デザインはオリジナルで、デザイン＋コーディングで5日間かかりました。急にポートフォリオを作ろうと言われてもどんなものか想像がつかないという方は参考にしてみてください。

ポートフォリオに載せるべきもの

これから案件を獲得することを考えるとポートフォリオサイトには最低限

• 自己紹介
• スキル
• 実績

が載っていた方がいいでしょう。

• 自分がどういう人なのか（怪しい人じゃないこと）を伝える
• 自分にできること（スキル）を伝える
• スキルの表明に具体性を持たせる

案件獲得に関してポートフォリオサイトには以上のような役割があります。

デザインはシンプルなもので大丈夫です。デザインが浮かばない！と言う人はSTEP5で模写したサイトの文字や画像を自分のものと入れ替えて、色を変えたり多少CSSをいじってレイアウトにオリジナリティを出すという方法でも構いません！逆にデザインにも興味があるという人はAdobe XDなどのデザインツールを使ってデザインカンプを作ることに挑戦してみてもいいと思います！

下記サイトにたくさんのおしゃれなポートフォリオが載っているのでデザインの参考にすると良いと思います！

ポートフォリオスタジオ

ポートフォリオスタジオ

他にもTwitterの検索機能で「＃プログラミング初心者　ポートフォリオ」などと検索するとポートフォリオの画像や動画がたくさん出てくると思いますのでぜひ試してみてください。

ここで皆さんに朗報があります！

実はこの時点でみなさんは　案件獲得できます！

でもまだSTEP6だよ？と思いになるかと思いますがこの後のSTEP7、STEP8で学習するWordPressというのは＋αのスキルなので習得しなくても案件を受注することは可能です。

とは言いつつ基本的にはWordPressを習得することで

• 案件単価の上昇
• 受注できる仕事の幅が増える
• それにともない同業者との競争率が減る

以上のような効果が見込めるのでWEB制作で稼ごうとしている人のほとんどはWordPressも習得します！

あくまで「現時点のスキルでも受注できる仕事もある」ということですね

では実際に案件を見てみましょう！

こちらは「クラウドワークス」というクラウドソーシングで実際に掲載されている案件です

• Adobe XDからのカンプコーディング
• 使用スキルはHTML・CSS、JavaScript(jQuery)のみ

これで66,000円です。

月に一回こうした案件がとれれば毎月お財布に5万円の余裕ができるわけですね。どうでしょう、WEB制作で稼ぐ実感がわいてきましたでしょうか？

現時点で案件獲得に挑戦してみたい！という方は一度STEP9「案件獲得の準備をしよう！」に進んで案件獲得を目指してみるのもいいと思います！

一気にWordPressまで習得して高単価案件を狙いにいくぞ！という方は次のステップへどうぞ！

STEP6に役立つオススメ教材

・無料教材

今のところ特にありません。

・有料教材

STEP6に役立つ参考サイト

マイナビクリエイター

イケてるWebデザインで作られたポートフォリオサイト20選まとめ | マイナビクリエイターイケてるWebデザインで作られたポートフォリオサイトを20選にまとめました。ポートフォリオサイトは、転職において、それ自体のWebデザインも評価の対象となります。決して...

Web Design Trends

2020年版：おすすめのWebデザインギャラリーサイト10個まとめWebデザインの参考になるギャラリーサイトをまとめました。優れたWebデザインを行うためには、色々なサイトを見…

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動画はこちら！

WordPressの勉強はそこまで難しくないのでここでしっかり身につけましょう！

あわせて読みたい

【プログラミング】WordPressの勉強方法とおすすめ教材7選こんにちは、みと（@mito_710_1）です！今回は「【プログラミング】WordPressの勉強方法とおすすめ教材7選」ということで解説していきます。ぜひ最後までご覧ください！...

STEP7に役立つオススメ教材

・無料教材

・有料教材

STEP7に役立つ参考サイト

東京のホームページ制作 / WEB制作会社 BRISK

【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】 – 東京のホームページ制作 / WEB制作会社...無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいな...

HPcode（えいちぴーこーど）

静的HTMLサイトをWordPress化するときの具体的な移行手順静的HTMLサイトをWordPress化するときの具体的な手順をまとめました。色々な手順が必要です。 範囲が広…

TEKITO+STYLE.me

WPプラグインShow Current Templateの使い方・設定方法【閲覧中のテンプレートが分かる】 | Tekito style.m...Show Current Templateは、閲覧中のページがどのテンプレートファイルに対応しているのか一目でに分かるWordPressプラグイン。WordPressをカスタマイズしたいけど、初めて...

STEP8　ポートフォリオサイトをWordPress化しよう！

STEP7お疲れ様です！

WordPress化の手順はつかめたでしょうか？

STEP8ではSTEP7で身につけたWordPress化のスキルを使って自身のポートフォリオサイトをWordPress化してみましょう！

STEP8に役立つオススメ教材

・無料教材

今のところ特にありません。

・有料教材

STEP8に役立つ参考サイト

formLab

【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう | formLab初心者でも簡単に問い合わせフォームを追加できるWordPressのプラグイン「Contact Form 7（コンタクトフォーム7）」について解説。使い方だけでなく、問い合わせの増加につ...

STEP9　案件獲得の準備をしよう！

ここまでの道のり、かなり長かったと思いますがよく頑張りました。

STEP9からはいよいよ案件獲得に向けて行動を開始します！

このSTEP9、実はこの学習ロードマップで最も大切なステップです。

冒頭でもお話ししましたがこのロードマップでは「他のロードマップではほとんど触れられないのに実案件では必須なスキルの習得」にフォーカスしています。

その最重要ステップがここ、STEP9ということにです。

このステップでは「コーディング以外の必須スキル」の学習方法を教えますので一つ一つ丁寧に学習を進めていってください！

（なんだかんだ言っていますがWordPressでのブログ運営経験のある人などはそこまで学ぶことはないかもです）

まずはドメイン・サーバーの設定から！

ドメイン・サーバーの設定 / WordPressのインストール方法

みなさん、ドメインとサーバー、何のことか知っていますでしょうか。

よく「サーバーは土地、ドメインは住所、サイトは家」のような例えをされます。

これまでのステップで制作してきたサイト(家)をインターネット上に公開する(建てる)にはサーバー(土地)とドメイン(住所)が必要になるんですね。

そんなサーバー・ドメインの基礎知識の理解と実際の契約の仕方、契約したドメインにWordPressをインストールする方法を学ぶのにおすすめの記事をご紹介します。

・サーバー・ドメインの基礎知識の理解

デジタルマーケティング・Web制作・PR支援のBigmac inc

ドメインとサーバーって？初心者にもわかる仕組みの基本 | デジタルマーケティング・Web制作・PR支援のBigm...Webサイトを運営や制作していると、ドメイン・サーバなどという言葉をよく耳にしませんか？ドメインやサーバーとは、一体どういったものでどういった仕組みなのかをご紹介...

・サーバー・ドメインの契約の仕方、契約したドメインにWordPressをインストールする方法

あわせて読みたい

【5分でできる】エックスサーバーの失敗しない契約方法解説本記事は2020年11月16日に一新されたエックスサーバーの最新デザインに対応しております今回から3記事に渡ってエックスサーバーを使ってWordPressを始める方法を解説し...

あわせて読みたい

【2021年】エックスサーバーとお名前ドットコムドメインでサイトを公開しようこんにちは、みと(@mito_710_1)です！今回は題名にもある通り「お名前ドットコム」でのドメインの取得方法を解説していきます！解説は「エックスサーバー+お名前ドット...

あわせて読みたい

【2021年】エックスサーバーを使ったWordPressの始め方【簡単インストール】こんにちは、みと(@mito_710_1)です！今回はエックスサーバーとお名前ドットコムで取得したサーバー・ドメインの連携方法と、エックスサーバーでのWordpressのインスト...

これらの記事を見る分にはそこまで難しそうではありませんね。

しかしそれでも事前に調べておかなかったせいで案件本番で必要になった時にこれらの解説記事の存在を知らなかったり、検索してこれらの記事を見つけられたとしても、ぶっつけ本番で実装するというようなことを避けられる分、

今までこういった知識を知らなかったという人はこのロードマップを読んだ価値があるんじゃないかなと私的には思います。(自己完結)

動画ではお名前ドットコムとエックスサーバーを利用していますが「ムームードメインとロリポップ」といった組み合わせもドメインとサーバーの会社が同じで、設定しやすかったりするのでぜひ試してみてください！

FTPツールの使い方

続いてFTPツールの使い方についてです。

ここまで習得できたらHTMLファイル形式のサイトと一部のWordPress改修案件の納品が可能になります。

ではFTPツールとは何なのかということとその使い方を見ていきましょう！

・FTPツールとは

週3日だけ働く：Project FREEDOM

FTPソフトとは？いつ使うの？おススメの無料ソフト３選  ネットビジネスをはじめて自分でブログやサイトを運営するようになると、「FTPソフトを使ってファイルをアップロードしてください」といった表現に出くわすようになりま...

・FTPツールの使い方

これらのFTPツールを使い、ローカル環境で作成したファイルを指定されたドメインに写すことで納品が可能になります！

サーバーによりサイトのファイルの設置先となるフォルダ(通称ルートディレクトリ)の名前が違いますが、サーバー契約時にサーバー会社から送られてくるftp情報などが載ったメールに設置先フォルダ名が記載されているのでわからない場合は依頼主に確認を取りましょう。

ちなみにエックスサーバーの場合は「/ドメイン名/public_html」がルートディレクトリです。FTPツールを開けばすぐに見つかると思います。

FTPツールを使わず、作成したサイトのファイルをZip化して添付するだけの納品もあります。必ずしもFTPツールを使うわけではありませんので、あたりまえですが先方が指定した納品方法で納品しましょう。

WordPressサイトの納品方法

WordPressの納品方法です。

WordPress案件ではローカル環境(例：Local by Flywheel)でサイトの制作を行い、その後テーマファイルとデータベースの二つを依頼主様の手元の環境に移動させる必要になります。

それに伴い自身のローカル環境だけでなく依頼主様の手元の環境にもログインする権利が必要になってくるんですね。

ですのでHTMLファイル形式納品の案件と違いあらかじめ依頼主様から

• WordPress管理画面へのログイン画面のURL
• WordPress管理画面へのログインに必要なログインIDとパスワード

を聞いておく必要があります。

そうして依頼主様のWordPressサイトの管理画面へログインできるようになったらいよいよ納品です。

WordPressサイトの納品で最もよく使われる方法をご紹介します。

「All in One WP Migration」というプラグインを使う方法です。このプラグインを使うことで面倒なWordPressサイトの移行が簡単にできてしまいます！

あわせて読みたい

WordPress All-in-One WP Migration を使ってデータを移行/ Web Design Leaves簡単に WordPress のデータを移行できるプラグイン「All-in-One WP Migration 」の使い方について。ボタンをクリックするだけで WordPress のデータをエクスポート及びイン...

WordPressサイトの移行作業で困ったら「WordPress　ローカルから本番」、「WordPress　本番からローカル」のように検索すれば必要な情報がすぐに出てきますので覚えておいてください。

おめでとうございます！ここまででサイトの納品はできるようになりました！

残りの4つは＋αのスキルですが求められることの多いスキルですのでこの際に学習しておきましょう。

SEO対策のやり方

SEO対策のやり方をご説明します。

そもそもSEO対策(検索エンジン最適化)とは何かというと、ブラウザで検索した際に作成したサイトがより上位に掲載されるように様々な策を講じることを言います。

例えば「新宿に新しくパン屋さんを開くため宣伝になる名刺代わりのサイトがほしい」という依頼でホームページを作成したとしましょう。そこで誰かがブラウザで「新宿　パン屋さん」と検索したとき、新宿にもいろんなパン屋さんがあると思いますが、それらのお店のホームページほぼ全てが検索結果にヒットすると思います。その際先ほど作成したお店のホームページが他のお店のホームページよりも上位に掲載されてほしいですよね。そのための調整をするのがSEO対策です。（ざっくり）

まず第一にあたりまえですが、適切なタグでのマークアップをしましょう。無駄に量産されたdivタグや文字の大きさで採用したh1タグなど、それぞれのタグの本来の役割に沿わない使い方をしてはいけません。これは最低限守ってほしいコーディングルールになります。

ではHTML形式のサイトとWordPressサイト、それぞれでのSEO対策のやり方をご説明します。

・HTML形式のSEO対策

HTML形式のサイトでは<head></head>の中に<meta>タグを用いてSEO対策を導入します。

サルワカ | サルでも分かる図解説明マガジン

head内に書くべきタグを総まとめ：SEO対策に有効なものは？head内に書くべきタグを総まとめしました。大手メディアが実際にどんなタグを入れているのかも紹介しています。

・WordPressサイトのSEO対策

WordPressサイトでは使用テーマ自体にSEO対策が内包してあったり、プラグインを使用してSEO対策をすることができます。

よく使われるプラグインは「All in One SEO Pack」です。頻出ですのでぜひ使い方を身につけましょう！

アクセス解析ツール「AIアナリスト」ブログ

ワードプレスのSEO対策！簡単で効果の出る10のポイントを解説！｜アクセス解析ツール「AIアナリスト」ブロ...自社のWebページを制作するのに、ワードプレスを使用している方も多いのではないでしょうか。しかし、ページは簡単に作成できても、集客に苦戦する場合も多いかと思います...

また最近できたSEO対策プラグイン「SEO Simple Pack」はAll in One SEO Packよりも手軽にSEO対策ができるのでオススメです。開発者は有名ブロックエディタテーマ「SWELL」の開発者としても有名な了(@ddryo_loos)さん。純国産なので扱いが簡単なのもポイント。

PC11のWEB制作

【WordPressプラグイン】SEO SIMPLE PACKの設定方法と使い方 | PC11のWEB制作国産プラグインなので設定画面が完全日本語対応SEO対策に必須のmetaタグ、インデックスの有無が記事ごとにも簡単に行えるアナリティクスやサーチコンソールの設定も超簡単O...

以上でこのセクションでの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 XML Sitemapsの設定方法ここでは、WordPressのプラグイン「Google XML Sitemaps」を使って簡単にサイトマップを作る方法を解説しています。コンテンツをしっかり検索エンジンに認識してもらうため...

この記事内の「４．グーグルサーチコンソールにサイトマップを追加する」では少しGoogle Search Consoleの説明が足りないので参考にするのは「３−１．カテゴリーに関する設定が反映されない不具合の対処法」までにし、Google Search Consoleの説明は以下の記事を参考にすると良いと思います。

人生、ジブン任せ。

サーチコンソールのプロパティタイプはどっちがいい？違いや設定方法を詳しく解説！｜人生、ジブン任せ。Search Console（サーチコンソール）は、 サイト改善・SEO対策に欠かせないツールです。 サイト立ち上げの際

人生、ジブン任せ。

新Search Console登録方法とGoogle XML Sitemapsの設定と紐付けを解説｜人生、ジブン任せ。Search Consoleの設定とサイトマップ送信方法についてのお話です。 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で分かることは導入する理由が分かったところで肝心の導入方法を学んでいきましょう！

まずはこちらの記事に目を通してください

株式会社ブレアパッチ

簡単！WordPressにGoogle Analyticsを導入する方法とアクセス解析のやり方（基本）WordPressのアクセス解析なら、無料で多機能なGoogle Analyticsがおすすめです。当サイトでは、WordPressにGoogle Analyticsの導入する方法、さらに基本的なアクセス解析の...

基本的な流れとしては上記記事にもあるように

という形になります。

ただここでもう一点お知らせがあります。

上記記事でトラッキングコードを取得するステップがあると思いますが、2020年10月14日のGoogle Analyticsの仕様変更によりトラッキングコードの取得課程が複雑になりました。

トラッキングコードの取得方法はこちらの記事の「対処方法2」を参考にしていただければと思います。

ITドカタ

Googleアナリティクスのトラッキングコードが見当たらない！この記事は、Googleアナリティクスのトラッキングコードが発行できない人や管理画面のプロパティで「&lt;&gt; トラッキング情報」を表示しない人の為に、その理由...

しれっとSTEP9終わった感じが出ていますが、実はまだ終わっていません､､､！

「インプットした知識・スキルはアウトプットして定着させる。」

学習の基本ですね。

というわけで！ここまで学んできた内容

• ドメイン・サーバーの設定
• WordPressのインストール
• FTPツールの使用
• サイトマップの作成
• Google Search Consoleの登録
• Google Analyticsの導入

初案件でぶっつけ本番で実装しようとして上手くいなかった！ということにならないように一度経験しておきましょう！

やり方は以下の通り

これで案件獲得の際に提示できるしっかりとしたポートフォリオサイトの完成です！

またこれを行うことで「SEO対策できます！」とか「Google Analytics導入できます！」とか言えちゃう特典付き！

ぜひアウトプットして知識・スキルを定着させてください！

STEP9に役立つオススメ教材

・無料教材

・有料教材

今のところ特にありません。

STEP9に役立つ参考サイト

Web幹事

自分でやるSEO対策。初心者でもすぐできるSEOのやり方・学び方ガイド｜Web幹事はじめてSEOを行う人が自分で取り組めるように、たった5つの手順にまとめて解説します。SEO対策はプロに依頼しないと成果を出せないと思われがちですが、高度なスキルを持...

STEP10　Web制作案件を獲得しよう！

これまでのステップを終え、無事ここにたどり着いた方、おめでとうございます。

そして長い長い学習、お疲れ様でした！

学習する人の約9割が挫折すると言われるWEB制作。

ここまでこれたあなたは既に上位10％の人間です。

後は今まで自信が積み上げてきた成果を信じ案件を獲得するだけ！

しれっと案件獲得しちゃいましょう！

案件の獲得には大体次の3種類あります。

1. WEB制作会社に営業
2. クラウドソーシングで案件に応募
3. 人づてにお仕事獲得

まずWEB制作会社への営業について。

制作会社にお仕事回してくださいと営業して回る方法です。

3種類の獲得方法のうち最も稼げる方法ですね。

この方法のメリットデメリットは次の通り

デメリットの解説ですが、WEB制作会社への営業メールは返信が来ない可能性の方が高いです。また返信が来ても面接などで不採用になる可能性があり、ある程度対策しないと契約できません。

またある程度作業時間を確保できることが主張できないと相手にされない可能性があります。「平日は2､3時間、土日はフルコミットできます！」とかでないと難しいです。(会社にもよりますが。)

ただWEB制作会社に営業しなくても高単価案件の継続依頼に発展する(可能性がある)案件獲得方法があります！

その方法が「クラウドソーシングで案件に応募」

こちらのメリットデメリットは次の通り

「競争率が高い」のに「比較的簡単に案件が獲得できる」。変な話ですね。もちろん解説します！

・メリットについて

クラウドソーシングでの案件獲得方法は誰かが人員募集している案件に応募することで獲得します。

応募する際に意気込み(？)などを書いた提案文にポートフォリオサイトや過去の実績などを添付して応募するのですが、クラウドソーシングでの案件獲得のコツは「目にとまるような提案文を送る」ことです。

それについてはこちらの記事を参考にしてください。かなり重要です。しっかり目を通して身につけましょう！

また中には案件を獲得ししっかりと仕事をこなすと「今後も定期的にお仕事振っても良いですか？」と聞かれたりします。

こういった場合だと継続案件になる上に「WEB制作会社へ営業」よりもこちらの事情を通しやすい可能性があります。ある程度時間が無くても相手にしてもらえるかもしれないということですね。

はらブログ

【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ（僕は100万円稼げました） | はらブ...【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ（僕は100万円稼げました） こんにちは！ワードプレスを使って副業で稼いでいる「はら」です。 「ま...

・デメリットについて

クラウドソーシングの案件はかなり低単価です。というのも競争率が高いことにより、その競走を勝ち抜こうとみんなできるだけ見積もりを低くするんですね。それが蔓延した結果価格崩壊が起きています。

ここからはクラウドソーシングでの案件獲得法について解説していきます

「1．WEB制作会社への営業」を学習したい方はこちらの記事を参考にしてください！

たんしおWEB

Web制作フリーランスの営業徹底解説【Web制作は営業が全て】 | たんしおWEB昨今プログラミングの学習コンテンツが増えてきて、Web制作でフリーランス独立や副業を目指す方が増えてます。 ただ実際の稼ぎ方を学べるコンテンツや、その体験ができるプ...

クラウドソーシングでの案件獲得方法

案件獲得によく使われるクラウドソーシング系サイトは次の3つ

• クラウドワークス
• ランサーズ
• ココナラ

クラウドワークスとランサーズは「誰かが募集している案件に応募して案件獲得する」といった能動的なシステムを主立った使い方とし、

ココナラは「自らサービスを出品してそのサービスを必要としている誰かが購入する」といった受動的なシステムが主立った使い方となっています。

先ほど話した「継続案件になる」可能性が高いのは前者です。

ココナラはWEB制作会社の方よりも個人経営でサイトが欲しくなったオーナーさんとかが多いイメージ。

ただココナラの方が比較的簡単に初案件獲得できますし、出品しておけば後は放っておくだけでいいのでとりあえず出品してみましょう！

クラウドソーシングでは基本的にはこちらの記事▼を参考に募集案件に提案していきます

「【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ（僕は100万円稼げました）」

どのサービスを利用するとしても本人確認や機密保持契約などは最初にしっかり設定しておきましょう。

以上でWEB制作学習ロードマップ全ステップ終了となります！

最後までご覧いただきありがとうございました！

よろしければ本記事をTwitterなどで「＃みとロード」や「＠mito_710_1」を付けて拡散していただけると大変嬉しく思います。

みと(@mito_710_1)

にほんブログ村 この記事をブックマークする5