こんにちは、みと（@mito_710_1）です！
今回は「【未経験から独学で】プログラミング学習完全ロードマップ」ということでWEB制作の学習についてかなり詳しくご説明します。
今まで様々な学習ロードマップを見てきましたが、このロードマップでは「他のロードマップではほとんど触れられていないのに実はかなり重要なこと」までかなり掘り下げて説明していますのでぜひご覧になっていってください！
悩む人WEB制作始めたいけど勉強のやり方がわからない…
たくさん勉強してるのになぜか成果が出ない…
案件の獲得に必要なスキルを知りたい…
みと安心してください！これらの悩み全て解決します！
・初心者が月１０万円稼ぐのに必要なスキルの習得方法
- WEB制作に必要なもの
- WEB制作学習の具体的な流れ
- 効率的な学習法
- 案件の獲得方法
- WEB制作で挫折しない方法
このロードマップの特徴
このロードマップの特徴は次の通り
- 「他のロードマップではあまり触れられないのに実は大切なスキル」の習得方法が学べる
- カスタマイズ性の高いロードマップ
それぞれ説明します！
他のロードマップではあまり触れられないのに実は大切なスキルの習得方法が学べる
このロードマップでは、他のロードマップではほとんど触れられていないのに実案件では必須のスキルの学習方法まで解説します！
よく見かけるWEB制作ロードマップは「コーディング」のみにフォーカスを当てたものがほとんどです。そのため「コーディングができればWEB制作で稼げる！」と勘違いしている初心者さんを多く見かけます。
しかし残念ですがコーディングだけでは案件をとれません…！
もちろんコーディングにフォーカスしたロードマップも「コーディングスキルの習得」に関して言えば大変役に立ちますのでぜひ参考にして学習を進めて頂ければと思います！ただ「案件獲得」を目指すのであればコーディング以外にも必要なスキルがあるということを知っておいて頂きたいです。
先日このようなツイートをしましたがこれだけでも「よく見るWEB制作ロードマップでは触れられていない内容」が数多くあるとお分かりになると思います。
ですがご安心ください！
このロードマップではこれからWEB制作を始めようとしている人から案件獲得に向けて準備している人までそれぞれに必要な情報をお届けします！
コーディングをするためのローカル環境の構築や模写のやり方、案件獲得に必要なコーディング以外のスキルの習得法など事細かに説明していますので参考にして頂けると幸いです！
（もちろんコーディングの学習方法も説明しています！）
カスタマイズ性の高いロードマップ
このロードマップではWEB制作の案件獲得までの学習の過程を段階分けし、各段階で習得したい要点をまとめ、最低限こなしておきたい基本カリキュラムを提示しています。
それとは別に各段階ごとにいくつかの追加の学習教材や参考サイトを選考し＋αの学習として利用できるようなオプション教材を掲載しました。
そのためそれぞれの段階で、基本カリキュラムだけではあまり理解ができなかったなと思う方だけがオプション教材を利用し、より学びを得られるようなロードマップとなっています。
理解ができているかの確認方法
理解ができていないと思ったら追加の学習教材を使えば良いことは分かったけど、理解ができているかどうかはどう判断すれば良いの？と思う方もいると思います。
このロードマップの学習段階には「知識・スキルをインプットする段階」と「知識・スキルをアウトプットする段階」の二種類がありますが、理解できているかどうかの判断が必要なのは「知識・スキルをインプットする段階」で得るべき知識・スキルが本当にインプットできているかどうかということですよね。
基本的にはまず、「知識・スキルをインプットする段階」を終えたら理解ができているかどうかを気にせず対応した「知識・スキルをアウトプットする段階」へ進みましょう。
実際にアウトプットしてみて全然分からないとなったら前の「知識・スキルをインプットする段階」の追加の学習教材に取り組むといった形になります。
ここで大事なのは100％の理解は必要ないということ。実案件でも実装方法を知らないデザインなどは普通に出てきます。プロの方でもそういったものを調べながら案件をこなしていくんですね。
そのため基本的な理解は70％ほどで大丈夫です。「全然分からない！」といったことでなければ気にせず次の段階へ進みましょう！
また「知識・スキルをアウトプットする段階」にももちろん追加の学習教材を掲載しています。これらはアウトプット経験を増やすための教材であったり、アウトプットの助けとなる解説が載ったサイトを掲載しているのでインプット教材ではありません。アウトプットが足りないなと思う方が取り組む教材、完全なオプション教材ということですね。
このシステムにより「この学習をするためにこの教材を使う」と完全に指定しているロードマップを参考に学習を進めている初心者によくある、
『この教材だけじゃあんまり理解が深まらなかったけど他の教材が提示されてないから何で学習したらいいかわからない。。』のような置いてけぼり状態をなくし、
『ある程度理解できたつもりだけどこのロードマップだとあの教材も使うように言われてるな、、基礎は身についたと思うけどやったほうがいいのかな。。』のような無駄な出費・遠回りを解消することができます。
各段階ごとにオプション教材を用意することでこのロードマップを利用する一人一人の理解度に合った柔軟性の高いロードマップとなりました。
ぜひ自分なりにこのロードマップをカスタマイズし、学習に役立てて頂ければと思います。
はじめに
WEB制作は9割の人が案件獲得の前に挫折すると言われています。
そう聞くと
悩む人自分も挫折してしまうかも。。
と考えてしまう人もいらっしゃると思いますがご安心ください。そのような悩みの解決法もこのロードマップでは説明しています！
まずは案件獲得より前にやめてしまう理由を考えてみましょう。
案件獲得前にやめてしまう理由
- 具体的な学習方法がわからない
- 案件の獲得方法がわからない
- 相談できる人がいない
- 学習意欲の低下
やめてしまうほとんどの理由は上記のような内容だと思います。
ではどのようにしてこれらを防げばいいのでしょうか。
学習を継続する方法
先ほどあげた4つの理由のうち上の二つはこのロードマップで全て解決します。
では下の二つを防ぐ方法は何でしょうか。答えは
Twitterを始めることです。
TwitterではWEB制作を習得しようと日々学習している初心者の方々が毎日のように学習内容をツイートしているほか、すでに案件を獲得した人やプロの現役WEBエンジニアの方々が学習の助けとなる有益な情報を発信しています。
試しにTwitterで「＃プログラミング初心者」や「＃駆け出しエンジニアと繋がりたい」というハッシュタグで検索してみてください。数多くのツイートが秒単位でツイートされていることがわかるかと思います。
こうしたツイートをしている人の中で自分と同じところを学習している人や有益な情報をツイートしている現役エンジニアの方をフォローして関わりを持つことで、時にはわからないことを相談する仲間、時には頑張っている姿を見て自分も頑張ろうと学習意欲を向上させてくれるよきライバルとしてあなたの学習をサポートしてくれるはずです。
もちろん良い学習方法や案件獲得方法などのツイートも流れてくるため先ほどあげた4つの理由の上二つの対策にもなります。
ぜひWEB制作用のTwitterアカウントを作り「＃プログラミング初心者」や「駆け出しエンジニアと繋がりたい」といったハッシュタグを付けて日々の学習内容をツイートしてみてください!
またこのロードマップを見てWEB制作の学習を進めていこうと思っている方は「＃みとロード」と付けてツイートしていただければ、同じようにこのロードマップを見て学習している人と繋がり挫折しにくい環境を整えることができま、私自身(@mito_710_1)もみなさんの学習の様子にリプ・リツイートさせて頂きます！
また学習の過程でわからないことがあれば遠慮無くリプやDMを送ってきてください！
私も日々有益情報のツイート・リツイートをしていますので参考にして頂ければと思います。
WEB制作の学習継続環境が整ったところで「みとロード」開幕です！
WEB制作を始めるためにそろえておきたいものはこれ！
まずはWEB制作を始めよう！と思っていても始めるために何が必要かわからない。。という方のためにWEB制作学習に必要な物をご紹介！
WEB制作学習に必須なもの
WEB制作学習をする上で欠かせない、無いと困るというのはたったこれだけ！
- パソコン
- インターネット環境
そう、たったこれだけです。
WEB制作にはパソコンとインターネットにつながる環境さえあれば他に専門的な機材などは必要ありません。これで副業WEB制作で月収数十万とか稼いでいる人もいるのですから驚異的なコスパの良さですね！やらない手はありません。
悩む人でも高機能なパソコンじゃないとできないんでしょ。。
ご安心ください、WEB制作はハイスペックなパソコンを必要としないので家にあるパソコンで気軽に学習を始められます！
とは言いつつ、快適性を求めるならこのぐらいのスペックはあったほうがいいかな？というのはあるのでご紹介します。
副業でWEB制作とともに名をあげるYouTube、動画編集に必要なパソコンも比較としてあげますね！
難しくてよくわからないという人はこちらの記事をご覧ください。CPU、メモリなどの意味がわかりやすく説明されています。
こう見てもWEB制作に必要なパソコンのスペックはそこまで高くなくても良い事がわかります。
他にも
- OSはWindowsとMacどっちがいいの？
- デスクトップとノートパソコンどっちがいいの？
と思う人もいると思うので簡単にご説明します。
OSについて
WindowsとMac、WEB制作にはどっちが向いているのか、、
答えは、どちらでもOK。
基本的にOSの種類によってWEB制作ができなくなるということはありませんので好きな方でOKです。
ただOSのバージョンによっては支障が生じることがあるので必ず最新版を使いましょう。
デスクトップとノートパソコンどっちがいいの？
パソコンと言っても、デスクトップとノートパソコンどっちがいいのでしょう。
こちらの疑問の回答もOSと同じで人それぞれですね。
使い方によって適した方を使用すればOKです。
ノートパソコン：携帯性重視、持ち運んだり外で作業する人
デスクトップ：コスパ重視、同スペックでもノートパソコンより割安、決まった場所で作業する人
ちなみに私は家でしか作業しませんが、部屋のあちこちで作業するので持ち運びが楽なノートパソコンにしてます。
あったら便利なもの
続いて、必ず必要というわけではないですがあったら便利というものをご紹介します！
- マウスパッド
- パソコンスタンド
- ブルーライトカット眼鏡
- オフィスチェア・ゲーミングチェア
どれもあったら便利というより長時間のデスクワークの疲労対策ですね。
必須ではありませんがあると作業効率が上がりますよ！
WEB制作に必要なスキル
WEB制作でお仕事をするのに必要なスキルはざっくり次の通り。
- コーディングスキル
- デザインツールの使用スキル
- サーバー・ドメインに関する知識
- FTPツールの使用スキル
- SEO・Google analytics・Google Search Console等に関する知識
それぞれ簡単に説明します!
コーディングスキル
WEBサイトを作るには以下のプログラミング言語を習得する必要があります。
- HTML
- CSS(Sass)
- JavaScript(jQuery)
- WordPress用のPHP(テンプレートタグ)
多くの人は何のことだかさっぱりだと思いますので簡単にご説明すると
HTMLはサイトのコンテンツ（文字や画像など）
CSS(Sass)はサイトの見た目（レイアウトや色、文字の大きさなど）
JavaScript(jQuery)はサイトの動き（スライドショーやコンテンツのフェードイン・アウトなど）
PHP(WordPress用)は作成したサイトをWordPressというサービスに対応させる
以上のような役割があります！
悩む人なんだか多くて難しそう。。
みとご安心ください！
この後説明する手順で学習したら誰でもWEBサイトを作れるようになります！
デザインツールの使用スキル
WEB制作の案件は「デザインカンプ」と呼ばれる、専門のデザインツールで作成したWEBサイトの設計書を元にコーディングします。
そのためデザインをすることは無くても、デザインカンプから必要な情報を読み取るためにデザインツールの使用法も知っておかないといけません。
よく使われるデザインツールには次のようなものがあります。
- Adobe XD
- Adobe Photoshop
- Adobe Illustrator
- Figma
など、人によってはいくつかご存じのものもあるのではないでしょうか。
こちらも種類があり覚えることが多そうに感じますが、デザインカンプから必要な情報を読み取ることだけに関して言えばそこまで覚えることは多くないのでご安心ください！
その他の必要なスキル
まだ他にも
- サーバー・ドメインに関する知識
- FTPツールの使用スキル
- SEOなどに関する知識
の説明が残っていますがこれらはコーディングを学んだ後に学習したら良いので今はまだ「後々こういうスキルも必要になるんだな」程度に思っていてもらえば大丈夫です。
この後説明する具体的な学習法の「案件獲得の準備」にて詳しく説明します！
【最短】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[ポートフォリオサイトを作ろう！]を終えた段階でコーディング案件を獲得する方もいますよ！
10ステップと聞いて多いと感じる人もいると思いますが、WEB制作はそれだけ頑張ってでも習得する価値が間違いなくあります。
たった3ヶ月勉強するだけで月収が5～数十万円増えるんです！
月々自由に使えるお金が5万円増えるだけでも十分すごいと思いませんか？
今の生活に5万円の余裕ができたときのことを想像してみてください。
WEB制作、やる気が出てきましたか？
難しそうに感じるかも知れませんが一つ一つ丁寧にかなり詳しく説明致しますのでぜひ頑張ってみてください！
ちなみに私が実際に積み上げてきたの学習記録はこちら
学習日数約80日で初案件を獲得できました。
しかしよく読んで頂くとお分かりかと思いますが私の学習記録は本記事で紹介している学習フローとは異なります。
実は思い返してみると私はかなり遠回りしてスキルを身につけていて、学習する必要のないものや非効率な学習をしていました。そのため今回説明する学習フローは「今私がWEB制作の学習をやり直すとしたらこうやる」というものになります。
間違えた経験があるから効率的な方法を学びましたし、実案件を経験しているから本当に必要なスキルを知っています。
今回の学習フローはそんな私の経験に基づいて作成した、無駄がなく最短でスキルを身につけることができるものになっていますのでぜひ取り組んで頂ければと思います！
具体的な学習方法
それではここから各ステップごとに詳しく、具体的に説明していきます！
STEP1 ProgateでHTML・CSSを勉強しよう！
STEP1ではWEB制作を学習する人の大半が利用する学習サービス、Progate もしくはドットインストール を使用してHTML・CSSを学習します。
ドットインストールは一部使用されている学習動画のバージョンが古いことがあるため基本カリキュラムではProgateを中心に学習を進めていきます
Progateの特徴は以下の通り
Progate (https://prog-8.com/)
かわいらしいキャラクターとイラストでゲームのような感覚で学習ができるオンラインサービス
有料コースは月額980円
全コースを受講するには有料プランへの登録が必要ですが、価格は月額980円なので外食を一回我慢する程度だと考えるとかなり安いですね。
基本的に1ヶ月の利用で十分なのでここでかかる費用は980円のみだと考えて頂いてかまいません。
それでは早速取り組んでいきましょう！
と、その前に。
Progateを利用してHTML・CSSの学習を始める前にローカル環境を作りましょう！
ローカル環境の構築方法
WEB制作におけるローカル環境構築とはみなさんのパソコンに、WEB制作に必要なツールをインストールする事を指します。
WEB制作に必要なツールは次の二つです。
- ブラウザ
- コードエディタ
ブラウザにはGoogle Chrome、Safari、Microsoft Edge、Firefoxなどを指します。
実際に今皆さんもブラウザを通して本ブログを見ていることかと思います。
コードエディタとは実際にプログラミング言語を書くノートのようなものです。
今回皆さんには
ブラウザはGoogle Chrome
テキストエディタはVisual Studio Code
をインストールしていただきます。
人によってはすでに他のブラウザやテキストエディタをインストールしてある方もいらっしゃると思いますが、WEB制作では後々Google ChromeやVisual Studio Codeの利便性が活きてくるため、これらをインストールすることをオススメします。
インストールの方法はドットインストールの「HTML/CSSの学習環境を整えよう」にて詳しく説明されているためこちらを参考にインストールして頂ければと思います！
（こちらの動画は最終更新からまだ1年ほどなので心配せずご視聴ください）
![HTML/CSSの学習環境を整えよう [Windows版] (全5回) - プログラミングならドットインストール](https://dotinstall.com/package_img/basic_pcsetup_win_v2/screen_1.png)
![HTML/CSSの学習環境を整えよう [macOS版] (全5回) - プログラミングならドットインストール](https://dotinstall.com/package_img/basic_pcsetup_mac_v2/screen_1.png)
ローカル環境を整えることができましたら追加で次の作業をして頂きます。
Visual Studio Codeにプラグイン「Live Server」をインストール
プラグインとはツールの機能を拡張する便利な機能のことで、Visual Studio CodeにLive Serverというプラグインをインストールすることによってコーディング作業の効率を格段に上げることができるので、最初にインストールすることをオススメします。
インストールの方法とLive Serverの使い方はこちらを参照してください！
この後ProgateでHTML・CSSの学習を進めている間はLive Serverは使わないかと思いますが、STEP2ではLive Serverを使うので一度使い方なども目を通しておくと良いかと思います。
それではいよいよHTML・CSSの学習を進めていきます！
Progateの学習方法
これからProgateを使ってHTML・CSSの学習を進めていきます
Progateではイラストやキャラクターと一緒にゲームのような感覚で学習ができます。
コーディングやブラウザで表示される内容の確認も全てProgateのみで行えるため先ほどインストールしたGoogle ChromeとVisual Studio Codeはまだ使いません。
また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」の学習教材の一つ
オンライン学習サービス「ドットインストール」
月額：￥1,080
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/)
忍者CODE無料問題集ではHTML＆CSS編の他、4つの学習コンテンツが無料で利用できます！
Progateやドットインストールでは習わないのに実案件では頻出！というものを現役エンジニアがまとめた問題集になります。解説も詳しく、本当にこれが無料でいいのかとツッコミたくなるほど優秀な学習コンテンツです。
STEP2ではそんな忍者CODE無料問題集のうちHTML＆CSS編を利用していきます。HTML＆CSS編は難易度別に「初級」「中級」「上級」とあり、全91問（2020年10月31日現在）もの問題が用意されています。
STEP2の間に学習しておきたい目安としては「初級」クリアを目標にするといいでしょう。「中級」「上級」に関しては今後STEP3、STEP4…と進んでいく中で時間があるときに取り組んで頂ければと思います。
- 問題文を見て実装したい内容を理解する
- わからないところはググる（例：「CSS 文字 色 変える」で検索）
- 実装できたら解答を見て説明を読み良く理解する
ここで大切なのは「②わからないところはググる」。実装方法が浮かばなくてもすぐに解答を見ずに検索しましょう。WEB制作のお仕事はどれだけ勉強しても「知らないこと」のオンパレードです。基本的に調べながら実装し案件をこなしていきます。STEP1でProgateやドットインストールの内容の理解が浅くても大丈夫と説明したのもそういうこと。WEB制作では「覚える」よりも数をこなして「慣れる」方が重要。忍者CODE無料問題集を通して自分でググる力を養いましょう！
クリ☆スタ無料デザインカンプ
STEP2の本題です。クリ☆スタ無料デザインカンプでは無料でデザインカンプからのコーディングを学習できます。先ほどの忍者CODE無料問題集が汎用知識・スキルの習得だとしたら、クリ☆スタ無料デザインカンプはそれら知識・スキルのアウトプットの役割を果たします。知識やスキルは覚えただけでは意味がありません。ぜひクリ☆スタ無料デザインカンプを使ってアウトプットしてみましょう！
クリ☆スタ無料デザインカンプでは本記事の最初の方のセクション「デザインツールの使用スキル」で説明した「デザインカンプ」を無料で取得し、さらにAdobe XDというデザインツールの使い方を覚え、実案件さながらのコーディング経験をすることができます。
さらにクリ☆スタで作成したサイトは「カンプからのコーディング」としてポートフォリオに実績掲載OK！
これがどのような意味を持つかはSTEP6「ポートフォリオを作成しよう！」で説明しますがかなり価値のあることなので、それが無料でできるというのは本当に驚きです。。
こちらも忍者CODE無料問題集同様、デザインカンプの難易度ごとに「初級」「中級」「上級」がありますがSTEP2の達成目標は「初級」デザインカンプのコーディングとしますので「中級」「上級」はSTEP5「模写・カンプコーディングをしよう！」にてやって頂ければと思います。
- デザインカンプを取得する
- Adobe XDでデザインカンプを開く
- 必要な情報を読み取りながらHTML・CSSのみ実装
- 解説記事を読みながら繰り返し挑戦
クリ☆スタ無料デザインカンプコーディングでは初級からJavaScriptを使う部分がありますがこちらはSTEP4「STEP3で作ったカンプコーディングサイトに動きを付けよう！」にて実装するのSTEP2ではHTML・CSSのみ実装しましょう。
Adobe XDのインストール方法と使い方は次のサイトを参考にしてください。
ローカル環境構築の際にインストールしたVisual Studio Codeの拡張機能「Live Server」を使ってコーディングしてみよう！
・Adobe XDのインストール方法
・Adobe XDの使い方
こちらの記事でコーディング時の注意点や効率的なやり方をまとめてあるのでぜひご覧ください
このTipsではリセットCSSについて簡単に解説していきます。
リセットCSSとは「ブラウザがデフォルトで持っているCSSを無くす」役割を持つ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」をオススメします。
たくさん教材があって大変ですがSassを学ぶだけでコーディングスピードが格段に上がるためぜひ習得してください！
- 忍者CODE無料問題集 HTML＆CSS編 初級
- クリ☆スタ無料デザインカンプ 初級
これらできたら次のステップに進みましょう！
STEP2に役立つオススメ教材
- 無料教材
- 有料教材
無料問題集を運営する忍者CODEさんの有料学習教材
現役エンジニアによる解説動画付きでHTML・CSSだけでなくJavaScript(jQuery)まで幅広く習得できるコンテンツ
私個人としてはこのステップで教材を買うならはこちらの「銅の鎧」をおすすめします
Sassはコーディング効率を圧倒的に高めることができるのでぜひ身につけておきたいスキルの一つ。Sassの具体的な使い方や高度なスキルまで解説されているおすすめの1冊です！
STEP2に役立つ参考サイト
STEP3 ProgateでJavaScript(jQuery)を勉強しよう！
STEP3ではProgateを使用してJavaScript（jQuery）を学習していきます。
まずJavaScript（jQuery）とはなんぞや。と言う人のために簡単に説明します。
WEB制作におけるJavaScript(jQuery)の役割はサイトに動きを付けることです。
こちらは私が初めて制作したポートフォリオサイト（ひな形）ですがスクロールに合わせて要素がフェードインしたりスライドショーがあったりと躍動感のあるサイトになっていることがわかるかと思います。
JavaScript(jQuery)を学習するとこんなサイトを作ることができるようになります！
WEB制作の楽しさが増してきましたね！
でもJavaScriptもjQueryも動きを付ける役割があることはわかったけどこの二つの違いは何？と思う方もいるでしょう。
jQueryはプログラミング言語であるJavaScriptのライブラリというものの一つで、ライブラリは「よく使う機能を簡単に実装できるように変換してまとめたもの」というように覚えておいて頂ければ大丈夫です。
まとめると、もともと動きを付ける機能を持つプログラミング言語「JavaScript」のうち、よく使う機能をJavaScriptよりも簡単な記述で実装できるようにと生まれたのが「jQuery」ということですね。
じゃあjQueryだけでもいいんじゃないと思う人もいると思いますが、jQueryがJavaScriptを元にしている以上jQueryを学ぶ事前知識としてJavaScriptも軽くふれておいた方がいいためこのSTEP3ではJavaScriptの学習も薦めます。
JavaScriptはれっきとしたプログラミング言語なのでHTML・CSSと比べて学習難易度が急に上がりますが、あくまでjQueryのための事前知識なので、概要がつかめれば大丈夫です。無理に全て理解しようとして消耗する必要はありません。
（ちなみにHTMLはマークアップ言語、CSSはスタイルシート言語と言い、厳密にはプログラミング言語ではありません。気にする方がたまにいらっしゃるので念のため補足。基本的には広義のプログラミング言語ということでいいんじゃないかと私は思います。(あくまで個人の意見です。)）
JavaScript(jQuery)についての簡単な知識がついたところで早速取り組んでいきましょう！
ProgateでJavaScript(jQuery)を学ぶ
それではProgateでJavaScript(jQuery)の学習を始めて行きましょう！
Progateを使った学習手順は次の通り
Progateで学習するときの注意点
- 全て覚えようとしない
- 道場編はとばす
・全て覚えようとしない
JavaScriptはあくまで事前知識。jQueryはよく使うアニメーションの実装方法はネット上にコピペできるソースコードがあるのでアニメーションの作り方ではなくjQueryの基本的な使い方を学ぶ
・道場編はとばす
jQueryコースにはHTML＆CSSコースと同様に道場編がありますがこちらも飛ばして大丈夫です。
STEP3を終えた方は次のステップに進んでください！
STEP3に役立つオススメ教材
- 無料教材
- 有料教材
STEP3に役立つ参考サイト
STEP4 STEP2で作ったカンプコーディングサイトに動きを付けよう！
STEP4ではSTEP2でクリ☆スタ無料デザインカンプコーディングにより作成したサイトにJavaScript(jQuery)を使って動きを付けていきます。
クリ☆スタ無料デザインカンプ「初級」ではハンバーガーメニューの実装のためJavaScript(jQuery)を使用しますが、ここでは練習のため、カンプ・仕様書にはない動きも追加してみましょう！
こちらの記事を参考にTOPへ戻るボタンやスクロールに合わせて要素をフェードインさせたりするのもいいかもしれませんね！
WEB制作では例えば「○○ CSS 実装方法」のような検索を行うと検索結果に、上記のような「【コピペで実装】」といったサイトが出てくることが多くあります。実際にそういったサイトを利用して実装して大丈夫ですが、ここで一つ注意点があります。
コピペで実装するときに「コピペしたソースコードの理解」をぜひしてください。
コピペを行うことで実装したい内容を簡単に実装可能ですが、それだけではデザインにレパートリーがありません。自身でコードのカスタマイズができるように一度コピペしたソースコードを見ながらでもよいので自分でもコードを書いて理解を深め、実装してみてください。
JavaScript(jQuery)を使うだけで一気にサイトの華やかさが増したと思いませんか？
見ている人を飽きさせない工夫ができるようになりましょう！
STEP4は以上になります！あっという間でしたね。
続いてSTEP5に参ります。
みとブログ
STEP4に役立つオススメ教材
今のところ特にありません。
STEP4に役立つ参考サイト
![スライダーSwiper.js 基本の使い方解説 – cooen [コーエン]](https://cooen.jp/test_02/wp-content/uploads/2020/06/img_swiper_post.jpg)
STEP5 模写・カンプコーディングをしよう！
STEP5ではこれまで身につけたスキルを使って様々なサイトを作っていきます。
インプットした知識はアウトプットすることで定着するので頑張りましょう！
やることは次の2つ
- 模写
- カンプコーディング
模写コーディング時に気をつけたいことはこちらの記事でまとめてあるのでぜひ参考にしてください！
ステップ5の注意点
- 作るサイトは2、3個にしよう
- 一回は模写をしよう
- 模写するサイトについて
・作るサイトは2、3個にしよう
模写には終わりがありません。やればやるほど新しく覚えることが出てくるのは実案件でも同じです。ここではSTEP4までに学習したことの定着や制作実績サイトを作ることを目的に頑張りましょう
・一回は模写をしよう
実案件は模写じゃない、カンプコーディングだから模写はやる必要が無いと思う人もいるかも知れませんが、Google Chromeの機能は実案件でも使う機会がありますので模写を通じてGoogle Chromeの機能を使っておくことをオススメします。
・模写するサイトについて
「WEB制作 模写 おすすめ」などで検索すると多くの場合「iSara」と「Airbnb」というサイトの模写をおすすめしている情報を目にすると思いますが、これらのサイトの模写はこれから模写を始める人にはあまりお勧めしません。その理由は単純に「すでに多くの人が取り組んでいるから」。つまりみんなポートフォリオの実績欄にこの二つが載っているんですよね。そんなポートフォリオを提出してもクライアントからしたら真新しさがなく、あなたのポートフォリオは目に止まりません。そうならないようなるべくこれらを避けて模写をすることをオススメします。(あくまで個人の意見です。)
レスポンシブ化では次のことを意識すると楽になります！
- フォントサイズの管理はremで行う
- max-widthを指定する
- 要素の幅や左右の余白を％で指定
上からそれぞれ、デバイスの大きさに合わせて一括でフォントサイズを変更できる。コンテンツの広がりすぎを防ぐ。画面幅に対する要素の幅や位置を常に一定に保てる。
また模写をする際はコーディングを始める前にサイト全体に目を通し、どこを何のタグで書くか、どんなCSSで実装できそうか目星を付けておこう！
みなさんクラス名を着けるとき「なんとなく」でつけていませんか？
きちんとした命名規則に則ってクラス名を着けることでclassの意図しない重複を防ぎ、後からの改修の際にもわかりやすいコードを書くことができます！
予測しやすい・保守しやすい・再利用しやすい・拡張しやすいコーディングを意識しましょう！
![[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える | MONSTER DIVE](https://www.monster-dive.com/share/img/og_img.png)
こちらの記事にも出てくるメジャーな命名規則「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 ポートフォリオサイトを作ろう！
いよいよSTEP6！折り返しですね！
プログラミングを勉強する人の9割が挫折すると言われているなかHTML・CSS、JavaScript(jQuery)を身につけ、模写・カンプコーディングまでこなしここまでこれているあなたは本当に素晴らしいです。是非ご自身を褒めてあげてください。
ステップ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の検索機能で「＃プログラミング初心者 ポートフォリオ」などと検索するとポートフォリオの画像や動画がたくさん出てくると思いますのでぜひ試してみてください。
ポートフォリオサイトが完成したらぜひあなたもハッシュタグをつけてツイートしましょう！
ここまで終えられた方はHTML・CSS、JavaScript(jQuery)を学びポートフォリオサイトまで完成させることができたことと思います。本当に素晴らしいです！
そしてなんと、実はこの時点でみなさんは 案件獲得できます！
でもまだ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の管理画面というところから簡単に新しい情報を追加できます。
またCMSにも様々な種類がありますが、現在世の中の全Webサイトの3割以上が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に役立つオススメ教材
・無料教材
今のところ特にありません。
・有料教材
STEP8に役立つ参考サイト
STEP9 案件獲得の準備をしよう！
ここまでの道のり、かなり長かったと思いますがよく頑張りました。
STEP9からはいよいよ案件獲得に向けて行動を開始します！
このSTEP9、実はこの学習ロードマップで最も大切なステップです。
冒頭でもお話ししましたがこのロードマップでは「他のロードマップではほとんど触れられないのに実案件では必須なスキルの習得」にフォーカスしています。
その最重要ステップがここ、STEP9ということにです。
このステップでは「コーディング以外の必須スキル」の学習方法を教えますので一つ一つ丁寧に学習を進めていってください！
（なんだかんだ言っていますがWordPressでのブログ運営経験のある人などはそこまで学ぶことはないかもです）
- ドメイン・サーバーの設定
- WordPressのインストール方法
- FTPツールの使い方
- WordPressサイトの納品方法
- SEO対策のやり方
- サイトマップの作成
- Google Search Consoleの登録
- Google Analyticsの導入
ステップ9 ー「ちょっと小咄」
実際に解説に入る前に少し小咄をさせてください。
私がなぜ、世の中に多くのロードマップがあるにもかかわらず自身でも書こうと思ったのか。それは、私自身「コーディングに焦点を当てたロードマップ」を参考に学習を進め、コーディングが一通りできるようになった段階で案件がとれると思い込み、いざ案件に応募しようとしたその時、気づいたんです。
「あれ？僕納品方法知らなくない？」と。
落ち着いて振り返ってみるとかなり間抜けですね（笑）
ここまでコーディングスキルの学習を学んできた皆さん、案件の納品方法について理解できていますか？もちろんこんな私と違い、しっかりご自身で調べて学習した方もいるでしょう。
調べたことがない人でもHTMLファイルで作成したサイトであれば指定されたドメイン・サーバーにFTPツールというものを使って納品する。ぐらいの知識はここまで学習してくる間に知らず知らずのうちにどこかで耳にし、知識として蓄えているかも知れません。
でも実際にやったことはありますか？WordPressの案件だったら？SEO対策してと言われたら？Google Analyticsを導入してと言われたら？
「コーディングに焦点を当てたロードマップ」で学習してきた方の一体どれだけの人がこれらにきちんと対応できるでしょうか。実案件ではコーディング以外に数多くの重要必須スキルがあります。
もちろん情報社会の今、それらは調べたらすぐに出てきます。
ですが「事前に知っていて、実装したことがある」のと「案件の際に必要になったから急に調べてぶっつけ本番で実装する」のと、どちらがより安心・安全かは明白です。
「そんなの全部できるよ」「このロードマップの価値それかよ」「おまえが間抜けなだけだろ」という方、大変申し訳ありません。無料ロードマップなのでお許しを。。。（）
コーディングができるだけではWEB制作では仕事ができない。とここまで繰り返しお話ししてきたのはそういうことです。
ただここで勘違いしてほしくないのは、「コーディングに焦点を当てたロードマップ」が悪いというわけではありません。それはそれでコーディングスキルの習得に関して初心者の助けとなっているのは間違いありません。初心者からしたら大変価値のある教材です。私自身すごくお世話になりました。
また、「コーディングスキル以外にも目を向けたロードマップが無い」というわけでもありません。
ここで問題なのはただ単純に「前者に比べて数が少ない」ということです。初心者の多くは「コーディングに焦点をあてたロードマップ」としか出会えていないんですね。
なので私は少しでも多くの初心者さんに届くよう、このような内容の記事を無料で公開しようと前々から考えていました。
これといって目立った名声のない私の記事がどれだけの人の目にとまるかはわかりませんが、ここまで読んでくださった方、よろしければこの記事を批判コメント付きでも良いので拡散していただけると幸いです。この記事を読んだ初心者の方に「WEB制作ではコーディング以外にも必要なスキルがある」ということが伝わればそれで構いません。
ご協力お願い致します。
間抜けな話はここら辺にして、早速学習していきましょう！
まずはドメイン・サーバーの設定から！
ドメイン・サーバーの設定 / WordPressのインストール方法
みなさん、ドメインとサーバー、何のことか知っていますでしょうか。
よく「サーバーは土地、ドメインは住所、サイトは家」のような例えをされます。
これまでのステップで制作してきたサイト(家)をインターネット上に公開する(建てる)にはサーバー(土地)とドメイン(住所)が必要になるんですね。
そんなサーバー・ドメインの基礎知識の理解と実際の契約の仕方、契約したドメインにWordPressをインストールする方法を学ぶのにおすすめの記事をご紹介します。
・サーバー・ドメインの基礎知識の理解
・サーバー・ドメインの契約の仕方、契約したドメインにWordPressをインストールする方法
これらの記事を見る分にはそこまで難しそうではありませんね。
しかしそれでも事前に調べておかなかったせいで案件本番で必要になった時にこれらの解説記事の存在を知らなかったり、検索してこれらの記事を見つけられたとしても、ぶっつけ本番で実装するというようなことを避けられる分、
今までこういった知識を知らなかったという人はこのロードマップを読んだ価値があるんじゃないかなと私的には思います。(自己完結)
動画ではお名前ドットコムとエックスサーバーを利用していますが「ムームードメインとロリポップ」といった組み合わせもドメインとサーバーの会社が同じで、設定しやすかったりするのでぜひ試してみてください！
FTPツールの使い方
続いてFTPツールの使い方についてです。
ここまで習得できたらHTMLファイル形式のサイトと一部のWordPress改修案件の納品が可能になります。
ではFTPツールとは何なのかということとその使い方を見ていきましょう！
・FTPツールとは
・FTPツールの使い方
これらの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の検索エンジンに伝えてもらうことができます。
ここで、YahooとかのSEO対策はしなくていいの？と思う方もいるかと思いますが安心してください。現在YahooはGoogleの検索エンジンを使用していますし、もちろんその他にも検索エンジンは存在するのですがGoogle・Yahooのシェアが世界的にも圧倒的なのでその点も心配いりません。
ところどころ難しい話もしていますがとりあえずGoogleのSEO対策が特に重要ということが分かればここではそれで十分です。
それでは実際にサイトマップの作成方法と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」を参考にしていただければと思います。
実は私もこの仕様変更があったことを認知しておらず10月半ばに受注した仕事でトラッキングコードが取得できない！と右往左往していました。
必死に対処法を調べてこの記事にたどり着き無事導入できたのですが(笑)
「分からないことは調べて対応する。」
ここまで何度もお話ししていますが、WEB制作のお仕事ではこの考え方がすごく大切になります。
実例出すとこの言葉にも現実性が増しますね！
しれっとSTEP9終わった感じが出ていますが、実はまだ終わっていません､､､！
「インプットした知識・スキルはアウトプットして定着させる。」
学習の基本ですね。
というわけで！ここまで学んできた内容
- ドメイン・サーバーの設定
- WordPressのインストール
- FTPツールの使用
- サイトマップの作成
- Google Search Consoleの登録
- Google Analyticsの導入
初案件でぶっつけ本番で実装しようとして上手くいなかった！ということにならないように一度経験しておきましょう！
やり方は以下の通り
これで案件獲得の際に提示できるしっかりとしたポートフォリオサイトの完成です！
またこれを行うことで「SEO対策できます！」とか「Google Analytics導入できます！」とか言えちゃう特典付き！
ぜひアウトプットして知識・スキルを定着させてください！
STEP9に役立つオススメ教材
・無料教材
・有料教材
今のところ特にありません。
STEP9に役立つ参考サイト
STEP10 案件を獲得しよう！
これまでのステップを終え、無事ここにたどり着いた方、おめでとうございます。
そして長い長い学習、お疲れ様でした！
学習する人の約9割が挫折すると言われるWEB制作。
ここまでこれたあなたは既に上位10％の人間です。
なんならSEO対策やGoogle Search Consoleなどを学習している分他のロードマップで学習してこれから案件獲得しようとしている初学者さんより数段レベルが高いです。
後は今まで自信が積み上げてきた成果を信じ案件を獲得するだけ！
しれっと案件獲得しちゃいましょう！
案件の獲得には大体次の3種類あります。
- WEB制作会社に営業
- クラウドソーシングで案件に応募
- 人づてにお仕事獲得
基本的には1か2だと思います。
まずWEB制作会社への営業について。
読んで字のごとく、WEB制作会社にお仕事回してくださいと営業して回る方法です。
3種類の獲得方法のうち最も稼げる方法ですね。
この方法のメリットデメリットは次の通り
はい。こんな感じです。
メリットは見たまんまで、軌道に乗ればこの方法が最も稼げます。
デメリットの解説ですが、WEB制作会社への営業メールは返信が来ない可能性の方が高いです。また返信が来ても面接などで不採用になる可能性があり、ある程度対策しないと契約できません。
またある程度作業時間を確保できることが主張できないと相手にされない可能性があります。「平日は2､3時間、土日はフルコミットできます！」とかでないと難しいです。(会社にもよりますが。)
なので私みたいに「実験・実習、手書き十数枚のレポート、土日消滅確定の課題の山に追われる理系大学生」とかだと口が裂けても「安定して作業時間確保できます！」なんて言えないのでこの方法はオススメしません。
逆に言えばフリーランスとして生きていくならこの方法が最適ですね。
ただWEB制作会社に営業しなくても高単価案件の継続依頼に発展する(可能性がある)案件獲得方法があります！
その方法が「クラウドソーシングで案件に応募」
こちらのメリットデメリットは次の通り
「競争率が高い」のに「比較的簡単に案件が獲得できる」。変な話ですね。もちろん解説します！
・メリットについて
クラウドソーシングでの案件獲得方法は誰かが人員募集している案件に応募することで獲得します。
応募する際に意気込み(？)などを書いた提案文にポートフォリオサイトや過去の実績などを添付して応募するのですが、クラウドソーシングでの案件獲得のコツは「目にとまるような提案文を送る」ことです。
それについてはこちらの記事を参考にしてください。かなり重要です。しっかり目を通して身につけましょう！
・デメリットについて
クラウドソーシングの案件はかなり低単価です。というのも競争率が高いことにより、その競走を勝ち抜こうとみんなできるだけ見積もりを低くするんですね。それが蔓延した結果価格崩壊が起きています。
ただデメリットだけというわけではありません。最後のデメリット項目「単発仕事」ですが誰かが募集している案件に応募しているだけなので契約などしてお仕事を獲得しているわけではありませんよね。
そのためほとんんどの仕事は単発仕事で終わります。
ただ中には人手の足りない制作会社さんが募集していたりして、その案件を獲得ししっかりと仕事をこなすと「今後も定期的にお仕事振っても良いですか？」と聞かれたりします。
こういった場合だとWEB制作会社さんの方から提案していただいている分、案件獲得法1の「WEB制作会社へ営業」よりもこちらの事情を通しやすい可能性があります。ある程度時間が無くても相手にしてもらえるかもしれないということですね。
ここまでで一旦案件獲得方法概要説明は終了です。
ここからは案件獲得方法「2．クラウドソーシングで案件獲得する方法」に重点を置いて解説します！
「1．WEB制作会社への営業」を学習したい方はこちらの記事を参考にしてください！
現役WEB制作フリーランスのたんしお(@tanshiokoki73)さんのブログ記事です
クラウドソーシングでの案件獲得方法
案件獲得によく使われるクラウドソーシング系サイトは次の3つ
- クラウドワークス
- ランサーズ
- ココナラ
クラウドワークスとランサーズは「誰かが募集している案件に応募して案件獲得する」といった能動的なシステムを主立った使い方とし、
ココナラは「自らサービスを出品してそのサービスを必要としている誰かが購入する」といった受動的なシステムが主立った使い方となっています。
先ほど話した「継続案件になる」可能性が高いのは前者です。
ココナラはWEB制作会社の方よりも個人経営でサイトが欲しくなったオーナーさんとかが多いイメージ。
ただココナラの方が比較的簡単に初案件獲得できますし、出品しておけば後は放っておくだけでいいのでとりあえず出品してみましょう！
ココナラでの案件獲得方法はこちら。
基本的には
クラウドワークス・ランサーズでは原(@haraponta1496)さんのブログ記事
「【コピペOKです】クラウドワークスで受注率が上がる提案文・営業のコツ（僕は100万円稼げました）」
ココナラではひろと(@hiroto_prog)さんのブログ記事
「【テンプレあり】実績0でもココナラを使って月10万円稼ぐまでのロードマップ」
を参考に案件獲得を目指していただければと思います！
また原さんの提案分はココナラでもかなり高い効果を発揮するためぜひ活用することをオススメします！
どのサービスを利用するとしても本人確認や機密保持契約などは最初にしっかり設定しておきましょう。
以上でWEB制作学習ロードマップ全ステップ終了となります！
大変長いロードマップでしたが少しでも案件獲得を目指す初学者さんの助けになれば幸いです。
ご覧頂きありがとうございました！
ココナラは無料で登録できるので先に登録しておくと良いと思います！
WEB制作学習おすすめサイトまとめ
学習サイト
おすすめブログサイト
質問サイト
自分で質問しなくても過去に同じような境遇に陥り質問している人がいたりするので困ったときは見てみましょう！
さいごに
今回は「【初心者必見】WEB制作学習完全ロードマップ【これひとつで学習方法がすべてわかる】」をご覧頂きありがとうございました！
本記事はみとブログ2記事目ということで読みにくい部分も多々あったかと思いますが今後こまめにリライトしてより一層分かりやすいロードマップとなるよう取り組んでいくのでどうぞよろしくお願いいたします。
また本記事内では学習の助けとなる参考サイトとして外部サイトを多用していますが、学習に支障はないものの多少情報が古いといったサイトも使用していますのでできる限り今後自分自身で、自身の言葉で記事執筆をし、初学者さんの道しるべとなるようなロードマップに仕上げていく所存です。
またよろしければ本記事をTwitterなどで「＃みとロード」や「＠mito_710_1」を付けて拡散していただけると大変嬉しく思います。
改めて、本記事を読んでくださりありがとうございました！
みと(@mito_710_1)
にほんブログ村
コメント