【未経験から独学で】プログラミング学習ロードマップ公開中!記事はこちらから!

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

【初心者必見】 WEB制作学習完全ロードマップ 【これひとつで学習方法がすべてわかる】

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

お知らせ
note(ノート)
【実案件レベル】XDデザインカンプからのコーディング実戦練習【みとカンプ】|みと@Web制作 更新情報 2021/07/09 ・一部デザイン崩れを修正しました ・みとカンプ完走者の方の参考リンクを掲載しました こんにちは、Web制作エンジニアとして活動しているみと(mito_...

実案件を想定したコーディング実践練習ができるデザインカンプをリリースしました!
学習に役立つお得な購入者特典もご用意しましたのでぜひご活用ください

悩む人

WEB制作始めたいけど勉強のやり方がわからない…
たくさん勉強してるのになぜか成果が出ない…
案件の獲得に必要なスキルを知りたい…

みと

安心してください!これらの悩み全て解決します!

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

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

Web制作学習ロードマップ

この記事でわかること

・初心者が月10万円稼ぐのに必要なスキルの習得方法

  • WEB制作に必要なもの
  • WEB制作学習の具体的な流れ
  • 効率的な学習法
  • 案件の獲得方法
  • WEB制作で挫折しない方法
目次

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

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

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

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

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

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

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

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

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

STEP
ProgateでHTML・CSSを勉強しよう!

目安学習期間:1週間

インプットSTEP

Tips No.1:px以外の単位

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

目安学習期間:2週間

アウトプットSTEP

Tips No.2:リセットCSSを知ろう!

Tips No.3:Sassを勉強しよう!

STEP
ProgateでJavaScript(jQuery)を勉強しよう!

目安学習期間:0.5週間

インプットSTEP

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

目安学習期間:0.5週間

アウトプットSTEP

STEP
模写・カンプコーディングをしよう!

目安学習期間:3週間

アウトプットSTEP

Tips No.4:レスポンシブ化のコツ

Tips No.5:classの命名規則を覚えよう!

Tips No.6:Gitを使ってみよう!

STEP
ポートフォリオサイトを作ろう!

目安学習期間:2週間

アウトプットSTEP

Tips No.7:お問い合わせフォームを実装しよう!その1

Tips No.8:デザインカンプを作ってみよう!

STEP
WordPressを勉強しよう!

目安学習期間:2週間

インプットSTEP

STEP
ポートフォリオサイトをWordPress化しよう!

目安学習期間:1週間

アウトプットSTEP

Tips No.9:お問い合わせフォームを実装しよう!その2

STEP
案件獲得の準備をしよう!

目安学習期間:1週間

インプット・アウトプットSTEP

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終了後ローカル環境での作業方法を学ぶために一部ドットインストールも利用していきます(無料コースですので費用はかかりません)

学習フローは以下の通り

STEP
HTML & CSS 初級編
Progate
HTML & CSS 学習レッスン 初級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
HTML & CSS 中級編
Progate
HTML & CSS 学習レッスン 中級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
HTML & CSS 上級編
Progate
HTML & CSS 学習レッスン 上級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
HTML & CSS Flexbox編
Progate
HTML & CSS 学習レッスン Flexbox編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
ドットインストール はじめてのHTML #2 ブラウザに名前を表示しよう 
ドットインストール
#02 ブラウザに名前を表示しよう | 【旧版】はじめてのHTML - プログラミングならドットインストール まずは名前を書いてそれをブラウザで表示させるところまでを見ていきます。
STEP
Progate 自分で作ったWEBページをインターネット上に公開しよう!
Progate
自分で作ったWebページをインターネット上に公開しよう! Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Progateで学習するときの注意点

Progateで学習するときは次のことに注意しよう!

  • 道場編はやらない
  • floatプロパティの理解は浅くても大丈夫
  • なかなか覚えられなくても最大で2周までにしよう

・道場編について
道場編はブラウザでの表示が正しくてもコーディング内容が解答と異なっていると合格できないことがあるため、やらずに学習コースのみ取り組もう

・floatプロパティについて
floatという要素の並びを調節できるプロパティがでてくるが扱いが難しく、現在では要素の並び替えはFlexboxというプロパティが主流なため理解が浅くても気にしなくて大丈夫です。(もちろんfloatにはfloatの利点がありますが最初のうちはFlexboxを使うことに慣れてください)

・最大2周までにしよう
これが最も大切です。Progateはキャラクターがでてきたりレベル制があったりとゲームのような感覚で学習ができるといことで楽しく学べる事が特徴ですが、あくまでProgateは「基礎」を学ぶものなのでレベル上げや100%の理解は必要ありません。HTMLとCSSの概要がつかめたらSTEP2へ進もう!

Tips No.1:px以外の単位

ProgateのHTML・CSS学習お疲れ様です。

ここでみなさんにWEB制作では必須だがProgateでは教えてもらえない「px以外の単位」についてご紹介!

creive(クリーブ)
【CSS】font-sizeの使い方!pxやrem、%などの使い分けも解説 「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は...

こちらで説明されている単位、全てWEB制作で必須です!

特に

  • rem
  • %
  • vh

はそれぞれ上からフォントサイズの管理、要素の大きさ、メインヴィジュアルに使われるのでこのタイミングで覚えておきましょう!

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

STEP1に役立つオススメ教材

  • 無料教材

オンラインプログラミングスクール「TeckAcademy」によるYouTube動画

  • 有料教材

WEB制作に携わる人なら一度は聞いたことがあるであろうブログ「Webクリエイターボックス」の運営者Mana(@chibimana)さんの著書。詳しい解説を見ながら実際にサイト一つをコーディングすることができる。HTML・CSS以外の内容もかなり濃く、Web制作者学習者なら辞書代わりに持っておきたい1冊。

こちらの教材のレビュー記事も参考にしてみてください!▼

UdemyのWEB制関連おすすめ記事はこちらにまとめてあります!

あわせて読みたい
「Udemy」Web制作初心者におすすめの講座7選! こんにちは、みと(@mito_710_1)です! 今回はプログラミング学習をしている初心者さん必見、 オンライン動画学習サービス「Udemy」のおすすめ講座をご紹介します! この...

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

STEP1に役立つ参考サイト

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

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

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

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

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

忍者CODE
いつでも気軽に無料で使えるプログラミング学習サイト|忍者CODE 忍者CODEはエンジニアを目指す人の為のプログラミング問題集です。問題数は350問以上。エンジニアになるために必要なポイントを抑えた問題が多数ございます。

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

忍者CODE無料問題集のやり方
  1. 問題文を見て実装したい内容を理解する
  2. わからないところはググる(例:「CSS 文字 色 変える」で検索)
  3. 実装できたら解答を見て説明を読み良く理解する

ここで大切なのは「②わからないところはググる」。実装方法が浮かばなくてもすぐに解答を見ずに検索しましょう。WEB制作のお仕事はどれだけ勉強しても「知らないこと」のオンパレードです。基本的に調べながら実装し案件をこなしていきます。STEP1でProgateやドットインストールの内容の理解が浅くても大丈夫と説明したのもそういうこと。WEB制作では「覚える」よりも数をこなして「慣れる」方が重要。忍者CODE無料問題集を通して自分でググる力を養いましょう!

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

あわせて読みたい

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

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

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

あわせて読みたい
クリ☆スタ無料デザインカンプコーディングのやり方
  1. デザインカンプを取得する
  2. Adobe XDでデザインカンプを開く
  3. 必要な情報を読み取りながらHTML・CSSのみ実装
  4. 解説記事を読みながら繰り返し挑戦

クリ☆スタサイトで公開されている学習方法でもOKです!

クリ☆スタ無料デザインカンプコーディングでは初級からJavaScriptを使う部分がありますがこちらはSTEP4「STEP3で作ったカンプコーディングサイトに動きを付けよう!」にて実装するのSTEP2ではHTML・CSSのみ実装しましょう。

Adobe XDのインストール方法と使い方は次のサイトを参考にしてください。

ローカル環境構築の際にインストールしたVisual Studio Codeの拡張機能「Live Server」を使ってコーディングしてみよう!

・Adobe XDのインストール方法

note(ノート)
AdobeXDのはじめかた。インストールから使い始めまで。|mc_kurita Adobe XDは、2016年よりリリースされ、Webページや、アプリのUI/UXデザインができるツールで、Adobe XDの使い方を学習すれば、ワイヤーフレームを手軽に作成できるし、また...

Adobe XDの使い方

あわせて読みたい

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

Tips No.2:リセットCSSを知ろう!

このTipsではリセットCSSについて簡単に解説していきます。

リセットCSSとは「ブラウザがデフォルトで持っているCSSを無くす」役割を持つCSSです。

リセットCSSについては下記の記事が参考になります。いくつか種類がありますが、自分の使いやすいと思ったリセットCSSを利用しましょう!

ちなみに私はressをもとに自分なりにカスタマイズしたものを使用しています。

https://magazine.krowl.jp/3441/

Tips No.3:Sassを勉強しよう!

Tips No.3はSassを勉強しようと言うことですが、Sassとは簡単に言うと「超すごいCSS」です。ふざけてません。訳すと本当にこうなります。

Sassに関する知識と学習は以下の教材を使いましょう!

WEBDESIGNDAY
【CSS】Sassは絶対使った方が良いよ!使い方入門編 WEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは?と思います。今回は「Sassには…
Progate
Sass 学習レッスン I | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
HPcode(えいちぴーこーど)
Sassを使うメリットとよく使う機能を5つだけ厳選! | HPcode(えいちぴーこーど) Sassは、CSSを拡張した言語で、利用する主な目的としては「CSSを管理しやすくするため」です。 平面にベターっと並ぶCSSはとてつもなく見づらく管理しずらい圧倒的なデメリ...
夢みるゴリラ
「Live Sass Compiler」の設定方法 - VScodeでSassを書く 今回はVScodeの拡張機能「Live Sass Compiler」の設定方法を説明します。手軽にSassを書ける環境を作れるのでおすすめです。この機能には自動でベンダープレフィックス(Au...

Visual Studio Codeには「Live Sass Compiler」の他に「Easy Sass」というプラグインがありますが、こちらはSassのパーシャルという機能が使えない可能性があるため「Live Sass Compiler」をオススメします。

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

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

STEP2に役立つオススメ教材

  • 無料教材
note(ノート)
【入門】デザインカンプからのコーディング練習【無料です】|Shogo(しょーごログ運営) FigmaとXDの両方を練習できるようになりました! こんにちは、しょーごです。フリーランスのWeb制作者として活動を初めて5年目になります。 以前「初級編」をリリースし...

デイトラの無料練習素材

note(ノート)
【入門】デザインカンプからのコーディング練習【無料です】|Shogo(しょーごログ運営) FigmaとXDの両方を練習できるようになりました! こんにちは、しょーごです。フリーランスのWeb制作者として活動を初めて5年目になります。 以前「初級編」をリリースし...

簡単なデザインカンプコーディングをすることができます。

  • 有料教材
忍者CODE 甲賀-KOGA
忍者CODE 甲賀-KOGA Web制作の解説動画300本が見放題

無料問題集を運営する忍者CODEさんの有料学習教材
現役エンジニアによる解説動画付きで幅広く習得できるコンテンツ

Sassはコーディング効率を圧倒的に高めることができるのでぜひ身につけておきたいスキルの一つ。Sassの具体的な使い方や高度なスキルまで解説されているおすすめの1冊です!

STEP2に役立つ参考サイト

HPcode(えいちぴーこーど)
Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode(えいちぴーこーど) WebコーダーはAdobe XDを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 この記事ではXDのデザインカンプからコーディン...
しょーごログ
【Web制作向け】VSCodeおすすめプラグイン・拡張機能と設定一覧【超快適】|しょーごログ こんにちは、現在フリーランスのWeb制作者として5年ほど活動しているしょーごと申します。 みなさんプログラミングをする際

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を使った学習手順は次の通り

STEP
JavaScript I
Progate
JavaScript 学習レッスン I | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
JavaScript II
Progate
JavaScript 学習レッスン II | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
JavaScript III
Progate
JavaScript 学習レッスン III | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
jQuery 初級編
Progate
jQuery 学習レッスン 初級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
jQuery 中級編
Progate
jQuery 学習レッスン 中級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
STEP
jQuery 上級編
Progate
jQuery 学習レッスン 上級編 | Progate Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Progateで学習するときの注意点
  • 全て覚えようとしない
  • 道場編はとばす

・全て覚えようとしない
JavaScriptはあくまで事前知識。jQueryはよく使うアニメーションの実装方法はネット上にコピペできるソースコードがあるのでアニメーションの作り方ではなくjQueryの基本的な使い方を学ぶ

・道場編はとばす
jQueryコースにはHTML&CSSコースと同様に道場編がありますがこちらも飛ばして大丈夫です。

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

STEP3に役立つオススメ教材

  • 無料教材
あわせて読みたい
CODEPREP | プログラムを書いて動かしながら学ぶ実践型のプログラミング学習サービス CODEPREPはオンラインプログラミング学習サービスです。1日10分プログラムを書くことで「毎日こつこつプログラムを書く習慣」と「作ったものを動かす体験」を提供し、プロ...

オンライン学習サービス「CODEPREP」の無料講座

  • 有料教材

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」...
この上なく便利!すごい「jQuery」の小技まとめ32 今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。
Webクリエイターボックス
少しのコードで実装可能な20のjQuery小技集 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続...
WEBDESIGNDAY
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説 世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定…

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

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

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

やることは次の2つ

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

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

ステップ5の注意点
  • 作るサイトは2、3個にしよう
  • 一回は模写をしよう
  • 模写するサイトについて

作るサイトは2、3個にしよう
模写には終わりがありません。やればやるほど新しく覚えることが出てくるのは実案件でも同じです。ここではSTEP4までに学習したことの定着や制作実績サイトを作ることを目的に頑張りましょう

・一回は模写をしよう
実案件は模写じゃない、カンプコーディングだから模写はやる必要が無いと思う人もいるかも知れませんが、Google Chromeの機能は実案件でも使う機会がありますので模写を通じてGoogle Chromeの機能を使っておくことをオススメします。

・模写するサイトについて
「WEB制作 模写 おすすめ」などで検索すると多くの場合「iSara」と「Airbnb」というサイトの模写をおすすめしている情報を目にすると思いますが、これらのサイトの模写はこれから模写を始める人にはあまりお勧めしません。その理由は単純に「すでに多くの人が取り組んでいるから」。つまりみんなポートフォリオの実績欄にこの二つが載っているんですよね。そんなポートフォリオを提出してもクライアントからしたら真新しさがなく、あなたのポートフォリオは目に止まりません。そうならないようなるべくこれらを避けて模写をすることをオススメします。(あくまで個人の意見です。)

Tips No.4:レスポンシブ化のコツ

レスポンシブ化では次のことを意識すると楽になります!

  • フォントサイズの管理はremで行う
  • max-widthを指定する
  • 要素の幅や左右の余白を%で指定

上からそれぞれ、デバイスの大きさに合わせて一括でフォントサイズを変更できる。コンテンツの広がりすぎを防ぐ。画面幅に対する要素の幅や位置を常に一定に保てる。

また模写をする際はコーディングを始める前にサイト全体に目を通し、どこを何のタグで書くか、どんなCSSで実装できそうか目星を付けておこう!

Tips No.5:classの命名規則を覚えよう!

みなさんクラス名を着けるとき「なんとなく」でつけていませんか?

きちんとした命名規則に則ってクラス名を着けることでclassの意図しない重複を防ぎ、後からの改修の際にもわかりやすいコードを書くことができます!

予測しやすい・保守しやすい・再利用しやすい・拡張しやすいコーディングを意識しましょう!

MONSTER DIVE - with DIGITAL CRAF...
[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える | MONSTER DIVE コードを書くよりクラス名を考えるほうが面倒! HTMLやJavaScriptを担当するエンジニアの"あるある"な悩みについて、OOCSS, BEM, SMACSSといろいろな命名パターンをサンプ...

こちらの記事にも出てくるメジャーな命名規則「BEM」はTips No1で学んだSassのネストという機能と相性がいいためぜひ習得してほしいものとなっています!

ただ必ずしも「_(アンダースコア)」を使わないといけないとかそういう細かいことは必須ではありません。もちろん100%命名規則に従って命名できれば一番良いのですが、あくまで「命名規則に統一感があり、誰が見てもわかる、事故(意図しないクラス名の重複など)が起こらない」ような命名をしていればアンダースコアかハイフンかとかそういった細かいところまで完璧にしようとしなくて大丈夫です。

Tips No.6:Gitを使ってみよう!

こちらのTipsは全員が必ずしもやった方がいいというわけではありませんが、WEB系会社への就職・転職を考えている人は学んだ方が良い内容となっています。もちろんそうではない人も便利な機能なので習得すると良いと思います。

Gitとは学習履歴を管理することができるサービスで、WEB系への就職の際の学習経歴の証明になったりもします。

ただGitの真骨頂はただの学習履歴ではなく、ファイルデータのセーブができることです。それによりファイルデータの時間遡行ができちゃいます!

どういうことかというと例えば2020年11月1日にとあるindex.htmlファイルをGitに記録しておくと、そのあとどのような変更を加えてもそのファイルの内容を2020年11月1日時点でのindex.htmlファイルの内容に戻すことができちゃうんです!(伝わりました?)

これにより「とりあえず」で変更を加えたファイルが、あまり良い結果を示さなかったというときに「変更を加える前」のファイル状態まで戻せたりして、いろんなミスの帳消しや時間の短縮が図れます。

そんなGitの学習に便利な教材は以下の通り

Progate
Progate(プロゲート) | Learn to code, learn to be creative. Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
忍者CODE
Git学習の無料問題集 | 忍者CODE Git学習の無料問題集コース一覧。独学、初心者向けの「初級コース」から「上級コース」まで全20問の問題を用意しました。Gitは分散型バージョン管理システムでエンジニアを...
ICS MEDIA
SourceTreeの使い方 - GitHubとの連携方法 - ICS MEDIA ソースコードのバージョン管理にGitを使うのはもはや当たり前・・・というのは言い過ぎではないはず。プログラマーやコーダーだけでなく、デザイナーやプランナーにもGitに...

模写のやり方

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

模写のやり方は単純で

STEP
模写するサイトを探す

模写サイトはこちらの記事を参考にしてみましょう!

HikoPro Blog | IT・テクノロジー...
【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog HikoPro こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していま...
STEP
実装に必要な情報を入手する

対象のサイトから模写に必要な情報を得るにはGoogle Chromeの検証機能と拡張機能を使います。ローカル環境構築にて新たにGoogle Chromeをインストールしていただいたのはこのためです。

Google Chromeの検証機能を使ってみよう!

Progate
検証ツール(デベロッパーモード)の使い方 Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
Webクリエイターボックス
新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方 皆さん、使っていますか?Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム!Chr...

Google Chromeの拡張機能を使ってみよう!

HPcode(えいちぴーこーど)
Webサイトをコーディング模写するやり方と使用するツール | HPcode(えいちぴーこーど) コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすることですね。 実際に...
STEP
コードを書いて実装する

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

  • MASA BLOG無料デザインカンプ
  • クリ☆スタ無料デザインカンプコーディング「中級」「上級」
  • MASA BLOG無料デザインカンプ
masa blog
【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】 | masa blog こんにちは。まさかずです。 先日の記事はAdobe XDの勉強方法について書きました。 http://masablog.net/adobe-xd/ 今回、練習で作成したポートフォリオサイトのデザインカ...

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

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

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

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

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

あわせて読みたい
あわせて読みたい

STEP5に役立つオススメ教材

  • 無料教材
masa blog
【Adobe XD】デザインカンプを無料公開します(第2弾)【ポートフォリオ掲載可】 | masa blog こんにちは。まさかずです。 先日のAdobe XDのデザインデータの無料公開をしました。 http://masablog.net/xd-data-free/ 今回、第2弾のデザインを作成しましたので無料公...

MASA BLOGの無料デザインカンプ第二弾

  • 有料教材
note(ノート)
コーディング教材全部盛り!【最もお得】|Shogo(しょーごログ運営)|note デザインカンプからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 計10回もの表示確認を受けられます(初級Ex~Photoshop編5つ) この一連の...

現役WEB系フリーランスのしょーご(@samuraibrass)さんのカンプコーディング教材
価格:\500~\3,680

コーディングの際の命名規則や運用しやすいCSSの書き方が学べる1冊。CSSは「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」というこの4つが揃っているのが理想的。それらを備えたCSSの書き方をコレ1冊で学ぶことができる。強い構造のCSSを書くスキルはぜひとも身につけておきたいところ。

SourceTreeを使ったGitの使い方がかなりわかりやすく説明されている本。参考サイトだけでは理解が足りないと思う人は購入をおすすめします。

STEP5に役立つ参考サイト

コードラン | プログラミングスク...
模写コーディングでスキル爆上げ!手順からおすすめの模写サイトまで | コードラン HTML・CSS・JQuary・javascriptの基礎を学んだ後に、必ずWebサイトの模写コーディングをおすすめされますよね、、、。 正直、基礎を学び終わった後に、いきなりWeb...
あわせて読みたい
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか?...

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

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

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

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

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

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

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

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

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

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

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

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

Tips No.7:お問い合わせフォームを実装しよう!その1

ポートフォリオに「お問い合わせフォーム」を実装してみましょう!

ここで一つお知らせ。

気づいている人もいるかも知れませんがお問い合わせフォームはHTMLだけでは機能しません…!

実はお問い合わせフォームを実装するにはPHPというプログラミング言語を学ぶ必要があります。

ただ、PHPを学んだばかりの素人が作るフォームは安全性に欠けるため、ここではGoogle Formを使ったお問い合わせフォームの作り方とResponsive Mailformを使ったお問い合わせフォームの作り方を説明します。

Google Formを使ったお問い合わせフォームの作り方はこちらの記事を参考にしてください

TEKITO+STYLE.me
Googleフォームのデザインをカスタマイズする方法 プラグイン不要で簡単実装! | Tekito style.me お問い合わせフォームを簡単に実装したいという方も多いはず。本記事ではGoogleフォームを活用しつつ、デザインもお好みでカスタマイズできる方法を解説します。複雑なフォ...

・Responsive Mailformを使ったお問い合わせフォームの作り方はこちらの記事を参考にしてください

HPcode(えいちぴーこーど)
最強のPHPお問い合わせフォームテンプレート「Responsive Mailform」の使い方とカスタマイズ方法 | HPcode... 無料で利用できるPHPお問い合わせフォームテンプレートの中で、今のところ一番優秀だと思っているのが、「Responsive Mailform」。 入力する人がストレスを感じることなく...

「Webサイト お問い合わせフォーム 作り方」などで検索すると簡単PHPを使ったお問い合わせフォーム作成記事が多数ヒットしますが、どれも安全面にかけるため実装しないよう注意してください。

PHPを使ったお問い合わせフォームの作り方も見てみたいという方はこちらの動画を参考にしてください。バリデージョンやセキュリティ対策も説明しています。

PHPを使ったお問い合わせフォームの解説動画となります。最終更新は2020年7月20日(2020年11月1日現在)ということでかなり信頼できる動画です。

Tips No.8:デザインカンプを作ってみよう!

Adobe XDでのデザインカンプの作り方を以下の教材で学びましょう!

https://helpx.adobe.com/jp/xd/how-to/beginners-tutorial-1.html
Webクリエイターボックス
Adobe XDでWebデザインをしよう!画面作成からページ推移までの手順を紹介 デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか?先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるように...

他にも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制作に必須なスキルなので早いうちに身につけておくことをおすすめします。

STEP6に役立つ参考サイト

マイナビクリエイター
イケてるWebデザインで作られたポートフォリオサイト20選まとめ | マイナビクリエイター イケてるWebデザインで作られたポートフォリオサイトを20選にまとめました。ポートフォリオサイトは、転職において、それ自体の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動画はこちら!

たにぐちまこと(@seltzer)さんのWordPress制作動画

しもむらともき(@shimo_tmk)さんのWordPress制作動画

しもむらともきさんの動画ではCSSのフレームワークの一つであるBootstrapを使用しています。JavaScriptとjQueryの関係と似たものだと思ってください。

このロードマップではBootstrapの学習はしていません。Bootstrapは大変便利なツールなのですが、有識者でないと実案件へ導入した際にきちんとしたパフォーマンスが見込めないからです。実際私も実案件では使ったことがありません。

ただBootstrapにも大変便利な機能がたくさんあるため興味のある方はこちらの動画で学習してみてください。

こちらもたにぐちまことさんのYouTube動画となります。

たにぐちまことさんはYouTubeの他、UdemyなどでもWEB制作に関する大変わかりやすい動画教材を出しているのでぜひ活用しましょう!

WordPressのローカル環境は
しもむらともきさんの動画では「Local by Flywheel」
たにぐちまことさんの動画では「MAMP」
を使用していますが、Local by Flywheelの方が簡単で便利なのでLocal by Flywheelをオススメします。

オススメの学習順序

STEP
しもむらともきさんの動画でLocal by Flywheelを使ったローカル環境の構築をする
STEP
たにぐちまことさんの動画でWordPressの勉強をする

MAMPを用いたローカル環境の構築解説はとばして大丈夫です。

STEP
しもむらともきさんの動画でWordPressの勉強をする

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

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

STEP7に役立つオススメ教材

無料教材

しもむらともきさんのWordPress制作動画 応用編

有料教材

ちゃんと学ぶ、WordPress テーマ開発講座

たにぐちまことさんによるUdemyのWordPress開発動画
YouTubeよりもさらに深く具体的に解説しています。
定価:\24,000

WordPressのサイト制作方法を解説した書籍です。
書店にも売っているので中身を試し読みしてわかりやすいものを選んで利用するといいと思います!

STEP7に役立つ参考サイト

東京のホームページ制作 / WEB制作...
【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】 – 東京のホームページ制作 / WEB制作会社... 無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいな...
HPcode(えいちぴーこーど)
静的HTMLサイトをWordPress化するときの具体的な移行手順 | HPcode(えいちぴーこーど) 静的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化してみましょう!

Tips No.9:お問い合わせフォームを実装しよう!その2

このTipsではお問い合わせフォームを実装していきます。

その1とは違い今回はWordpressでのお問い合わせフォームの実装方法です。

WordPressではプラグインを使用することで簡単にお問い合わせフォームを実装できるので、その1で実装したPHPを使用するお問い合わせフォームの実装に自信がない人はお問い合わせフォーム込みの案件にはWordpressの導入も含めて提案すると単価も上がるので良いかもしれません。

WordPressでのお問い合わせフォームの実装には「Contact Form 7」という有名な国産プラグインを使用します。

国産ということで多くの解説記事があるのでいろいろ見てみるとよいかもしれません。

バズ部
Contact Form 7の設定方法と効果的なカスタマイズ方法 マーケティング目的でWordpressブログを運用するのであれば必要になるのが、問い合わせページだ。商品やサービスの問い合わせやメルマガ会員の増加など、ホームページ運営...

STEP8に役立つオススメ教材

・無料教材

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

・有料教材

みとロード卒業制作

note(ノート)
【実案件レベル】XDデザインカンプからのコーディング実戦練習【みとカンプ】|みと@Web制作 更新情報 2021/07/09 ・一部デザイン崩れを修正しました ・みとカンプ完走者の方の参考リンクを掲載しました こんにちは、Web制作エンジニアとして活動しているみと(mito_...

実案件を想定したコーディング実践練習ができるデザインカンプです
実務で頻出のデザイン・スキルを詰め込んだカンプとなっており、案件獲得に踏み出すためのひとつの指標となります
ここまで学習してきたあなたならきっとできる!自分を信じてぜひ取り組んでみてください

STEP8に役立つ参考サイト

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

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

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

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

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

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

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

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

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

このステップで学ぶこと
  • ドメイン・サーバーの設定
  • WordPressのインストール方法
  • FTPツールの使い方
  • WordPressサイトの納品方法
  • SEO対策のやり方
  • サイトマップの作成
  • Google Search Consoleの登録
  • Google Analyticsの導入

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

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

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

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

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

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

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

Bigmac inc
ドメインとサーバーって?初心者にもわかる仕組みの基本 | Bigmac inc 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日だけ働く
FTPソフトとは?いつ使うの?おススメの無料ソフト3選 「FTPソフトを使ってファイルをアップロードしてください」といった表現に出くわすようになります。 ネットビジネス初心者にとってはこの「FTPソフト」も何だかよく意味の...

・FTPツールの使い方

FFFTPの使い方
TechAcademyマガジン - 教育×テク...
今さら聞けない!FFFTPの使い方 | TechAcademyマガジン 無料のFTPソフト「FFFTP」の使い方を解説した記事です。Webサイトを公開するときに使うFTPソフトですが、Windowsでの定番ツールといえば、FFFTPです。初心者でもすぐ使える...

Windows限定ですが私はこちらのFFFTPを使っています。

FileZillaの使い方
TechAcademyマガジン - 教育×テク...
超初心者向け!FileZilla(ファイルジラ)の使い方 | TechAcademyマガジン フリーのFTPクライアントソフト【FileZilla(ファイルジラ)】の使い方を初心者向けに解説した記事です。インストール方法から、ローカルサイトからリモートサイトにデータ...

こちらはWindows・Macどちらでも利用可能です。

Cyberduckの使い方
TechAcademyマガジン - 教育×テク...
Cyberduck(サイバーダック)の使い方【初心者向け】 | TechAcademyマガジン FTPクライアントソフトの「Cyberduck(サイバーダック)」の使い方について紹介する記事です。インストールの方法から、メニューのカスタマイズまで基礎的な使い方はこの記...

CyberduckもWindows・Mac両対応です。

これらの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 を使ってデータを移行 簡単に 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)さん。純国産なので扱いが簡単なのもポイント。

BIG BANG |PC11 BLOG
【WordPressプラグイン】SEO SIMPLE PACKの設定方法と使い方 | BIG BANG |PC11 BLOG 国産プラグインなので設定画面が完全日本語対応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」を使って簡単にサイトマップを作る方法を解説しています。コンテンツをしっかり検索エンジンに認識してもらうため...

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

https://ucdnote.com/searchconsole-propertytype/#%E3%82%B5%E3%83%BC%E3%83%81%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AF%E3%81%A9%E3%81%A3%E3%81%A1%E3%81%8C%E3%81%84%E3%81%84%E3%81%AE%EF%BC%9F
https://ucdnote.com/searchconsole-sitemaps/

こちらの記事では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の導入する方法、さらに基本的なアクセス解析の...

記事内目次「3-2.WordPressでアクセス解析(プラグイン「ExactMetrics」)」で説明されているプラグインはいつぞやのアップデートにより機能の使用が有料化されたためこの記事では「3-2.WordPressでアクセス解析(プラグイン「ExactMetrics」)」以外の部分を参考にしてください。

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

STEP
Google Analyticsのアカウント登録
STEP
トラッキングコードの取得
STEP
所定の位置トラッキングコードを設置して完了
STEP
Google Analyticsのサイトでアクセス解析

という形になります。

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

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

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

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

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

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

学習の基本ですね。

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

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

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

やり方は以下の通り

STEP
ドメイン・サーバーの契約・紐付け
STEP
FTPツールを使ってSTEP5で制作したHTML形式のサイトをアップロード
STEP
ブラウザでURLを打って確認
STEP
確認できたらFTPツールでルートディレクトリから取り出す
STEP
サーバーにWordPressをインストール
STEP
STEP6で制作し、STEP8でWordPress化したポートフォリオサイトを「All in One WP Migration」を使ってサーバーにアップロード
STEP
ブラウザでURLを打って確認
STEP
確認できたらSEO対策/サイトマップ/Google Search Console/Google Analyticsを導入する

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

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

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

STEP9に役立つオススメ教材

・無料教材

あわせて読みたい

Udemyの無料講座の一つ
All in One SEO Packの使い方が学べます。

・有料教材

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

STEP9に役立つ参考サイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メリット
デメリット
  • 高単価案件が多い
  • 大体いつでも案件があふれてる
  • WEB制作会社と契約できるまでが難しい
  • ある程度作業時間が確保できるのが前提

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

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

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

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

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

メリット
デメリット
  • 比較的簡単に案件が獲得できる
  • 低単価
  • 競争率が高い
  • 単発仕事

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

・メリットについて

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

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

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

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

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

はらブログ
【コピペOKです】2022年版|クラウドワークスで受注率が上がる提案・営業のコツ(僕は100万円稼げました) ... Contents1 【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ(僕は100万円稼げました)1.1 前提として、現在の僕の状態を共有いたします。(この記事...

デメリットについて

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

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

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

たんしおWEB
Web制作フリーランスの営業徹底解説【Web制作は営業が全て】 | たんしおWEB Web制作の勉強してサイトは作れるようになったけど、お仕事ってどうやって手に入れるの?降ってくるの? 昨今プログラミングの学習コンテンツが増えてきて、Web制作でフリ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

みと(@mito_710_1)

ブログランキング・にほんブログ村へにほんブログ村
  • ブロックエディター『Gutenberg』に完全対応
  • 豊富なカスタマイズとシンプルで美しいデザイン
  • 100%GPLテーマだから複数サイトで使用可能
美しく高機能なテーマ「SWELL」で楽しく記事を書こう!
【初心者必見】 WEB制作学習完全ロードマップ 【これひとつで学習方法がすべてわかる】

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次