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

【未経験から独学で】プログラミング学習完全ロードマップ【みとロード】

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

こんにちは、みと(@mito_710_1)です!

今回は「【未経験から独学で】プログラミング学習完全ロードマップ」ということでWEB制作の学習についてかなり詳しくご説明します。

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

悩む人

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

みと

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

この記事でわかること

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

  • WEB制作に必要なもの
  • WEB制作学習の具体的な流れ
  • 効率的な学習法
  • 案件の獲得方法
  • WEB制作で挫折しない方法
公開後の反響と利用者の学習の様子
目次

このロードマップの特徴

このロードマップの特徴は次の通り

  • 「他のロードマップではあまり触れられないのに実は大切なスキル」の習得方法が学べる
  • カスタマイズ性の高いロードマップ

それぞれ説明します!

他のロードマップではあまり触れられないのに実は大切なスキルの習得方法が学べる

このロードマップでは、他のロードマップではほとんど触れられていないのに実案件では必須のスキルの学習方法まで解説します!

よく見かけるWEB制作ロードマップは「コーディング」のみにフォーカスを当てたものがほとんどです。そのため「コーディングができればWEB制作で稼げる!」と勘違いしている初心者さんを多く見かけます。

しかし残念ですがコーディングだけでは案件をとれません…!

もちろんコーディングにフォーカスしたロードマップも「コーディングスキルの習得」に関して言えば大変役に立ちますのでぜひ参考にして学習を進めて頂ければと思います!ただ「案件獲得」を目指すのであればコーディング以外にも必要なスキルがあるということを知っておいて頂きたいです。

先日このようなツイートをしましたがこれだけでも「よく見るWEB制作ロードマップでは触れられていない内容」が数多くあるとお分かりになると思います。

ですがご安心ください!

このロードマップではこれからWEB制作を始めようとしている人から案件獲得に向けて準備している人までそれぞれに必要な情報をお届けします!

コーディングをするためのローカル環境の構築や模写のやり方、案件獲得に必要なコーディング以外のスキルの習得法など事細かに説明していますので参考にして頂けると幸いです!

(もちろんコーディングの学習方法も説明しています!)

カスタマイズ性の高いロードマップ

このロードマップではWEB制作の案件獲得までの学習の過程を段階分けし、各段階で習得したい要点をまとめ、最低限こなしておきたい基本カリキュラムを提示しています。

それとは別に各段階ごとにいくつかの追加の学習教材や参考サイトを選考し+αの学習として利用できるようなオプション教材を掲載しました。

そのためそれぞれの段階で、基本カリキュラムだけではあまり理解ができなかったなと思う方だけがオプション教材を利用し、より学びを得られるようなロードマップとなっています。

理解ができているかの確認方法

理解ができていないと思ったら追加の学習教材を使えば良いことは分かったけど、理解ができているかどうかはどう判断すれば良いの?と思う方もいると思います。

このロードマップの学習段階には「知識・スキルをインプットする段階」「知識・スキルをアウトプットする段階」の二種類がありますが、理解できているかどうかの判断が必要なのは「知識・スキルをインプットする段階」で得るべき知識・スキルが本当にインプットできているかどうかということですよね。

基本的にはまず、「知識・スキルをインプットする段階」を終えたら理解ができているかどうかを気にせず対応した「知識・スキルをアウトプットする段階」へ進みましょう。

実際にアウトプットしてみて全然分からないとなったら前の「知識・スキルをインプットする段階」の追加の学習教材に取り組むといった形になります。

ここで大事なのは100%の理解は必要ないということ。実案件でも実装方法を知らないデザインなどは普通に出てきます。プロの方でもそういったものを調べながら案件をこなしていくんですね。

そのため基本的な理解は70%ほどで大丈夫です。「全然分からない!」といったことでなければ気にせず次の段階へ進みましょう!

また「知識・スキルをアウトプットする段階」にももちろん追加の学習教材を掲載しています。これらはアウトプット経験を増やすための教材であったり、アウトプットの助けとなる解説が載ったサイトを掲載しているのでインプット教材ではありません。アウトプットが足りないなと思う方が取り組む教材、完全なオプション教材ということですね。

このシステムにより「この学習をするためにこの教材を使う」と完全に指定しているロードマップを参考に学習を進めている初心者によくある、

『この教材だけじゃあんまり理解が深まらなかったけど他の教材が提示されてないから何で学習したらいいかわからない。。』のような置いてけぼり状態をなくし

『ある程度理解できたつもりだけどこのロードマップだとあの教材も使うように言われてるな、、基礎は身についたと思うけどやったほうがいいのかな。。』のような無駄な出費・遠回りを解消することができます。

各段階ごとにオプション教材を用意することでこのロードマップを利用する一人一人の理解度に合った柔軟性の高いロードマップとなりました。

ぜひ自分なりにこのロードマップをカスタマイズし、学習に役立てて頂ければと思います。

はじめに

WEB制作は9割の人が案件獲得の前に挫折すると言われています。

そう聞くと

悩む人

自分も挫折してしまうかも。。

と考えてしまう人もいらっしゃると思いますがご安心ください。そのような悩みの解決法もこのロードマップでは説明しています!

まずは案件獲得より前にやめてしまう理由を考えてみましょう。

案件獲得前にやめてしまう理由

  • 具体的な学習方法がわからない
  • 案件の獲得方法がわからない
  • 相談できる人がいない
  • 学習意欲の低下

やめてしまうほとんどの理由は上記のような内容だと思います。

ではどのようにしてこれらを防げばいいのでしょうか。

学習を継続する方法

先ほどあげた4つの理由のうち上の二つはこのロードマップで全て解決します。

では下の二つを防ぐ方法は何でしょうか。答えは

Twitterを始めることです。

TwitterではWEB制作を習得しようと日々学習している初心者の方々が毎日のように学習内容をツイートしているほか、すでに案件を獲得した人やプロの現役WEBエンジニアの方々が学習の助けとなる有益な情報を発信しています。

試しにTwitterで「#プログラミング初心者」「#駆け出しエンジニアと繋がりたい」というハッシュタグで検索してみてください。数多くのツイートが秒単位でツイートされていることがわかるかと思います。

こうしたツイートをしている人の中で自分と同じところを学習している人や有益な情報をツイートしている現役エンジニアの方をフォローして関わりを持つことで、時にはわからないことを相談する仲間、時には頑張っている姿を見て自分も頑張ろうと学習意欲を向上させてくれるよきライバルとしてあなたの学習をサポートしてくれるはずです。

もちろん良い学習方法や案件獲得方法などのツイートも流れてくるため先ほどあげた4つの理由の上二つの対策にもなります。

ぜひWEB制作用のTwitterアカウントを作り「#プログラミング初心者」や「駆け出しエンジニアと繋がりたい」といったハッシュタグを付けて日々の学習内容をツイートしてみてください!

ツイート例
https://twitter.com/mito_710_1/status/1228252132790292480?s=20

またこのロードマップを見てWEB制作の学習を進めていこうと思っている方は「#みとロード」と付けてツイートしていただければ、同じようにこのロードマップを見て学習している人と繋がり挫折しにくい環境を整えることができま、私自身(@mito_710_1)もみなさんの学習の様子にリプ・リツイートさせて頂きます!

また学習の過程でわからないことがあれば遠慮無くリプやDMを送ってきてください!

私も日々有益情報のツイート・リツイートをしていますので参考にして頂ければと思います。

WEB制作の学習継続環境が整ったところで「みとロード」開幕です!

WEB制作を始めるためにそろえておきたいものはこれ!

冒頭のあたりは「これからWEB制作を始めようとしてる人」のための解説をしていますので、もう知ってるよーという方は飛ばし飛ばしご自身の見たいところをかいつまんで読んで頂ければと思います。

まずはWEB制作を始めよう!と思っていても始めるために何が必要かわからない。。という方のためにWEB制作学習に必要な物をご紹介!

WEB制作学習に必須なもの

WEB制作学習をする上で欠かせない、無いと困るというのはたったこれだけ!

  • パソコン
  • インターネット環境

そう、たったこれだけです。

WEB制作にはパソコンとインターネットにつながる環境さえあれば他に専門的な機材などは必要ありません。これで副業WEB制作で月収数十万とか稼いでいる人もいるのですから驚異的なコスパの良さですね!やらない手はありません。

悩む人

でも高機能なパソコンじゃないとできないんでしょ。。

ご安心ください、WEB制作はハイスペックなパソコンを必要としないので家にあるパソコンで気軽に学習を始められます!

とは言いつつ、快適性を求めるならこのぐらいのスペックはあったほうがいいかな?というのはあるのでご紹介します。
副業でWEB制作とともに名をあげるYouTube、動画編集に必要なパソコンも比較としてあげますね!

WEB制作
動画編集
  • CPU:Core i5以上
  • メモリ:8GB以上
  • ハードディスク:SSD
  • CPU:Core i7以上
  • メモリ:16GB
  • ハードディスク:SSD
  • 高性能グラフィックボード必須

難しくてよくわからないという人はこちらの記事をご覧ください。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ステップ!

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[ポートフォリオサイトを作ろう!]を終えた段階でコーディング案件を獲得する方もいますよ!

10ステップと聞いて多いと感じる人もいると思いますが、WEB制作はそれだけ頑張ってでも習得する価値が間違いなくあります。

たった3ヶ月勉強するだけで月収が5~数十万円増えるんです!
月々自由に使えるお金が5万円増えるだけでも十分すごいと思いませんか?

今の生活に5万円の余裕ができたときのことを想像してみてください。
WEB制作、やる気が出てきましたか?

難しそうに感じるかも知れませんが一つ一つ丁寧にかなり詳しく説明致しますのでぜひ頑張ってみてください!

ちなみに私が実際に積み上げてきたの学習記録はこちら

https://twitter.com/mito_710_1/status/1228252132790292480?s=20

学習日数約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年ほどなので心配せずご視聴ください)

ローカル環境を整えることができましたら追加で次の作業をして頂きます。

Visual Studio Codeにプラグイン「Live Server」をインストール

プラグインとはツールの機能を拡張する便利な機能のことで、Visual Studio CodeにLive Serverというプラグインをインストールすることによってコーディング作業の効率を格段に上げることができるので、最初にインストールすることをオススメします。

インストールの方法とLive Serverの使い方はこちらを参照してください!

コードジョイ
【Live Serverの使い方】自動でブラウザが更新される便利なVSCodeの拡張機能|コードジョイ
【Live Serverの使い方】自動でブラウザが更新される便利なVSCodeの拡張機能|コードジョイ[box05 title="この記事のまとめ"]本記事では、Visual Studio Codeの拡張機能であるLive

この後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へ進もう!

Tips No.1:px以外の単位

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

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

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

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

特に

  • rem
  • %
  • vh

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

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

STEP1に役立つオススメ教材

  • 無料教材

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

  • 有料教材

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

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

オンライン学習サービス「Udemy」の学習教材の一つ

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

STEP1に役立つ参考サイト

侍エンジニアブログ
HTML/CSSとは?初心者向けの基礎知識と学習サイト5選 | 侍エンジニアブログ
HTML/CSSとは?初心者向けの基礎知識と学習サイト5選 | 侍エンジニアブログHTMLのCSSの関係性がいまいちよくわからない HTMLとCSSはどうやって書くの? HTMLとCSSの確認方法がわからない こんにちは。フリーランスエンジニア兼フリーライターのワキ...

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

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

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

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

あわせて読みたい
忍者CODE | html,css,JavaScriptの問題集
忍者CODE | html,css,JavaScriptの問題集日々更新されている問題を解いてスキルアップしよう!

忍者CODE無料問題集ではHTML&CSS編の他、4つの学習コンテンツが無料で利用できます!
Progateやドットインストールでは習わないのに実案件では頻出!というものを現役エンジニアがまとめた問題集になります。解説も詳しく、本当にこれが無料でいいのかとツッコミたくなるほど優秀な学習コンテンツです。

STEP2ではそんな忍者CODE無料問題集のうちHTML&CSS編を利用していきます。HTML&CSS編は難易度別に「初級」「中級」「上級」とあり、全91問(2020年10月31日現在)もの問題が用意されています。

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

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

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

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

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

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

STEP2の本題です。クリ☆スタ無料デザインカンプでは無料でデザインカンプからのコーディングを学習できます。先ほどの忍者CODE無料問題集が汎用知識・スキルの習得だとしたら、クリ☆スタ無料デザインカンプはそれら知識・スキルのアウトプットの役割を果たします。知識やスキルは覚えただけでは意味がありません。ぜひクリ☆スタ無料デザインカンプを使ってアウトプットしてみましょう!

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

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

これがどのような意味を持つかはSTEP6「ポートフォリオを作成しよう!」で説明しますがかなり価値のあることなので、それが無料でできるというのは本当に驚きです。。

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

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

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

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

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

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

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

Adobe XDの使い方

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

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

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

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

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

実はこのリセットCSSを読み込んでいないと、同じCSSを書いていてもブラウザの種類によってサイトの表示のされ方が変わってくるんですね。

どのブラウザでも同じ見た目に統一するためにリセットCSSを読み込むというわけです。

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

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

KROWL MAGAZINE - Web業界への転職に役立つメディア
【初心者必見!】リセットCSSとは?コピペで使えるオススメ6選! | KROWL MAGAZINE - Web業界への転職に役...
【初心者必見!】リセットCSSとは?コピペで使えるオススメ6選! | KROWL MAGAZINE - Web業界への転職に役...サイト制作を進めていく上でCSSの特性を深く理解し、デザインを再現していくことは必要不可欠なものとなっています。 そんな中で自分が意図しないスタイルが適用されていた...

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

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

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

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

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

たくさん教材があって大変ですがSassを学ぶだけでコーディングスピードが格段に上がるためぜひ習得してください!

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

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

STEP2に役立つオススメ教材

  • 無料教材
  • 有料教材
忍者CODE 鎧模写(よろいもしゃ)
忍者CODE 鎧模写(よろいもしゃ)
忍者CODE 鎧模写(よろいもしゃ)忍者CODE-presents 模写コーディング

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

私個人としてはこのステップで教材を買うならはこちらの「銅の鎧」をおすすめします

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

STEP2に役立つ参考サイト

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

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に役立つ参考サイト

侍エンジニアブログ
jQueryの基本的な書き方を覚えよう!【実践用サンプルコードあり】 | 侍エンジニアブログ
jQueryの基本的な書き方を覚えよう!【実践用サンプルコードあり】 | 侍エンジニアブログ昨今、Web業界にはさまざまな技術が登場しています。 そのなかでも jQueryは、2006年に登場した技術なので比較的歴史は長いですが、いまだに多くのホームページやWebアプリ...

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

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

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

あわせて読みたい
jQuery/CSSアニメーション15選【コピペでサイト制作】 - ブログの神様|THE GOD OF BLOGjQuery/CSSアニメーションのアイデアが知りたいですか?本記事では、カンタンに実装できて動きのあるサイトを作るためのWEB制作で頻出する実装を参考記事付きでまとめまし...

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

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

JavaScript(jQuery)を使うだけで一気にサイトの華やかさが増したと思いませんか?

見ている人を飽きさせない工夫ができるようになりましょう!

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

続いてSTEP5に参ります。

みとブログ

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

STEP4に役立つオススメ教材

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

STEP4に役立つ参考サイト

侍エンジニアブログ
【jQuery入門】CDNを読み込む方法と使い方まとめ! | 侍エンジニアブログ
【jQuery入門】CDNを読み込む方法と使い方まとめ! | 侍エンジニアブログこんにちは、ライターのマサトです! 今回は、jQueryやjQuery UIをCDN経由で利用するための方法について学習をしていきましょう! この記事では、 「CDN」とは? 「CDN」の...
コムテブログ
この上なく便利!すごい「jQuery」の小技まとめ32
この上なく便利!すごい「jQuery」の小技まとめ32今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。
Webクリエイターボックス
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続...
WEBDESIGNDAY
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定…
cooen [コーエン]
スライダーSwiper.js 基本の使い方解説 – cooen [コーエン]
スライダーSwiper.js 基本の使い方解説 – cooen [コーエン]こんにちは、コーダーのN.Sです。今回はよく使われるスライダーライブラリー Swiper.jsの紹介です!スライダーのライブラリーといえば、これって感じでよく使われてます。

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 CRAFTSMANSHIP.
[OOCSS/BEM/SMACSS] HTML/CSSのclassの命名規則について、今ふたたび考える | MONSTER DIVE
[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(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
あわせて読みたい
忍者CODE | html,css,JavaScriptの問題集
忍者CODE | html,css,JavaScriptの問題集日々更新されている問題を解いてスキルアップしよう!
ICS MEDIA
SourceTreeの使い方 - GitHubとの連携方法
SourceTreeの使い方 - GitHubとの連携方法ソースコードのバージョン管理にGitを使うのはもはや当たり前・・・というのは言い過ぎではないはず。プログラマーやコーダーだけでなく、デザイナーやプランナーにもGitに...

模写のやり方

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

模写のやり方は単純で

STEP
コードを書いて実装する

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

  • MASA BLOG無料デザインカンプ
  • クリ☆スタ無料デザインカンプコーディング「中級」「上級」
  • MASA BLOG無料デザインカンプ
masa blog
【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】 | masa blog
【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】 | masa blog

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

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

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

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

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

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

STEP5に役立つオススメ教材

  • 無料教材
  • 有料教材

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

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

STEP5に役立つ参考サイト

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

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

いよいよSTEP6!折り返しですね!

プログラミングを勉強する人の9割が挫折すると言われているなかHTML・CSS、JavaScript(jQuery)を身につけ、模写・カンプコーディングまでこなしここまでこれているあなたは本当に素晴らしいです。是非ご自身を褒めてあげてください。

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

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

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

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

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

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

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

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


必ずしも必須というわけではありませんが、案件の内容は「デザイン+コーディング」といったセットのことが多いです。デザイナーの方とパートナーになったり外注することでそういった案件に対応することは可能ですが、全て自分自身でこなせるようになればその分報酬も増えます。

この機会に是非デザインカンプの作り方を学び、可能であればポートフォリオサイトのデザインカンプを作ってみましょう!

あわせて読みたい
XDことはじめStep1:まずはここから!「ワイヤーフレームを作ってみよう」
XDことはじめStep1:まずはここから!「ワイヤーフレームを作ってみよう」WebサイトやモバイルアプリなどのUI/UXデザイン、プロトタイプ作成、共有までを1つのアプリで実現する、Adobe XD。このチュートリアルシリーズでは、XDの基本的な使い方を...
Webクリエイターボックス
Adobe XDでWebデザインをしよう!画面作成からページ推移までの手順を紹介
Adobe XDでWebデザインをしよう!画面作成からページ推移までの手順を紹介デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか?先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるように...

他にも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に役立つ参考サイト

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

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

たにぐちまこと(@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選
【今やるならこの教材】WordPressの学習方法とオススメ教材7選こんにちは、みと(@mito_710_1)です!今回は「WordPressの学習方法とおすすめ教材7選」ということで解説していきます。ぜひ最後までご覧ください!この記事を読んで分...

STEP7に役立つオススメ教材

無料教材

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

有料教材

WordPress開発マスター講座

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

文系でも解る! WordPressの基礎の理解と、独自デザインをWordpress化にする

こちらもUdemyのWordPress講座

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

STEP7に役立つ参考サイト

東京のホームページ制作 / WEB制作会社 BRISK
【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】 – 東京のホームページ制作 / WEB制作会社...
【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】 – 東京のホームページ制作 / WEB制作会社...無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいな...
HPcode(えいちぴーこーど)
静的HTMLサイトをWordPress化するときの具体的な移行手順
静的HTMLサイトをWordPress化するときの具体的な移行手順静的HTMLサイトをWordPress化するときの具体的な手順をまとめました。色々な手順が必要です。 範囲が広…
TEKITO+STYLE.me
WPプラグインShow Current Templateの使い方・設定方法【閲覧中のテンプレートが分かる】 | Tekito style.m...
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の効果的なカスタム方法
【簡単】Contact Form 7の効果的なカスタム方法マーケティング目的で、WordPressブログを運用するのなら問い合わせページは必要だろう。そして、Contact Form 7を使うことで、自動返信メールやサンクスページなどのカス...

STEP8に役立つオススメ教材

・無料教材

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

・有料教材

STEP8に役立つ参考サイト

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

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をインストールする方法を学ぶのにおすすめの記事をご紹介します。

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

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

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

デジタルマーケティング・Web制作・PR支援のBigmac inc
ドメインとサーバーって?初心者にもわかる仕組みの基本 | デジタルマーケティング・Web制作・PR支援のBigm...
ドメインとサーバーって?初心者にもわかる仕組みの基本 | デジタルマーケティング・Web制作・PR支援のBigm...Webサイトを運営や制作していると、ドメイン・サーバなどという言葉をよく耳にしませんか?ドメインやサーバーとは、一体どういったものでどういった仕組みなのかをご紹介...
あわせて読みたい
エックスサーバーを使ったWordPressの始め方 – サーバー編 –
エックスサーバーを使ったWordPressの始め方 – サーバー編 –本記事は2020年11月16日に一新されたエックスサーバーの最新デザインに対応しております今回から3記事に渡ってエックスサーバーを使ってWordPressを始める方法を解説し...
あわせて読みたい
エックスサーバーを使ったWordPressの始め方 – お名前ドットコム編 –
エックスサーバーを使ったWordPressの始め方 – お名前ドットコム編 –こんにちは、みと(@mito_710_1)です!今回は題名にもある通り「お名前ドットコム」でのドメインの取得方法を解説していきます!解説は「エックスサーバー+お名前ドット...
あわせて読みたい
エックスサーバーを使ったWordPressの始め方 – WordPressインストール編-
エックスサーバーを使ったWordPressの始め方 – WordPressインストール編-こんにちは、みと(@mito_710_1)です!今回はエックスサーバーとお名前ドットコムで取得したサーバー・ドメインの連携方法と、エックスサーバーでのWordpressのインスト...

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

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

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

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

FTPツールの使い方

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

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

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

・FTPツールとは

週3日だけ働く:Project FREEDOM
FTPソフトとは?いつ使うの?おススメの無料ソフト3選
FTPソフトとは?いつ使うの?おススメの無料ソフト3選  ネットビジネスをはじめて自分でブログやサイトを運営するようになると、「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内に書くべきタグを総まとめ:SEO対策に有効なものは?head内に書くべきタグを総まとめしました。大手メディアが実際にどんなタグを入れているのかも紹介しています。

・WordPressサイトのSEO対策

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

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

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

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

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

以上でこのセクションでの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のシェアが世界的にも圧倒的なのでその点も心配いりません。

テクニカルSEO BLOG
検索エンジンの国別シェア【2020年版】 | SEOノウハウ
検索エンジンの国別シェア【2020年版】 | SEOノウハウ日本・海外の検索エンジンのシェアをランキング形式で紹介します。世界的にGoogleが圧倒的ですが、海外では国によって百度やBing、YAXDEXなどのシェアが高くなっています。...
まじすけ株式会社
GoogleのSEOだけじゃない!?各国のサーチエンジンから学べる海外のマーケティングルールとは | まじすけ株...
GoogleのSEOだけじゃない!?各国のサーチエンジンから学べる海外のマーケティングルールとは | まじすけ株...日本では、GoogleのSEOが主流とも言われておりYahoo!JapanでさえもGoogleのサーチエンジンを利用している状況であるため、日本人をターゲットにしたPRであればGoogleだけお...
株式会社ウェブ企画パートナーズ
実はYahooとGoogleの検索エンジンが同じということ知っていましたか!? | 株式会社ウェブ企画パートナーズ
実はYahooとGoogleの検索エンジンが同じということ知っていましたか!? | 株式会社ウェブ企画パートナーズ

ところどころ難しい話もしていますがとりあえずGoogleのSEO対策が特に重要ということが分かればここではそれで十分です。

それでは実際にサイトマップの作成方法とGoogle Search Consoleの登録方法を学んでいきましょう!

私はWordPress案件でのサイトマップの作成では「Google XML Sitemap」というプラグインを使用していますのでGoogle XML Sitemapの設定方法とサイトマップ・Google Search Consoleの登録方法の学習に役立つ記事をご紹介します。

・Google XML Sitemapの設定方法

バズ部
Google XML Sitemapsの設定方法
Google XML Sitemapsの設定方法ここでは、WordPressのプラグイン「Google XML Sitemaps」を使って簡単にサイトマップを作る方法を解説しています。コンテンツをしっかり検索エンジンに認識してもらうため...

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

人生、ジブン任せ。
サーチコンソールのプロパティタイプはどっちがいい?違いや設定方法を詳しく解説!|人生、ジブン任せ。
サーチコンソールのプロパティタイプはどっちがいい?違いや設定方法を詳しく解説!|人生、ジブン任せ。Search Console(サーチコンソール)は、 サイト改善・SEO対策に欠かせないツールです。 サイト立ち上げの際
人生、ジブン任せ。
新Search Console登録方法とGoogle XML Sitemapsの設定と紐付けを解説|人生、ジブン任せ。
新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がおすすめです。当サイトでは、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アナリティクスのトラッキングコードが見当たらない!この記事は、Googleアナリティクスのトラッキングコードが発行できない人や管理画面のプロパティで「&lt;&gt; トラッキング情報」を表示しない人の為に、その理由...

実は私もこの仕様変更があったことを認知しておらず10月半ばに受注した仕事でトラッキングコードが取得できない!と右往左往していました。

必死に対処法を調べてこの記事にたどり着き無事導入できたのですが(笑)

「分からないことは調べて対応する。」

ここまで何度もお話ししていますが、WEB制作のお仕事ではこの考え方がすごく大切になります。

実例出すとこの言葉にも現実性が増しますね!

しれっと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に役立つオススメ教材

・無料教材

・有料教材

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

STEP9に役立つ参考サイト

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

STEP10 案件を獲得しよう!

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

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

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

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

なんならSEO対策やGoogle Search Consoleなどを学習している分他のロードマップで学習してこれから案件獲得しようとしている初学者さんより数段レベルが高いです。

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

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

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

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

基本的には1か2だと思います。

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

読んで字のごとく、WEB制作会社にお仕事回してくださいと営業して回る方法です。

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

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

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

はい。こんな感じです。

メリットは見たまんまで、軌道に乗ればこの方法が最も稼げます。

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

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

なので私みたいに「実験・実習、手書き十数枚のレポート、土日消滅確定の課題の山に追われる理系大学生」とかだと口が裂けても「安定して作業時間確保できます!」なんて言えないのでこの方法はオススメしません。

逆に言えばフリーランスとして生きていくならこの方法が最適ですね。

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

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

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

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

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

・メリットについて

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

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

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

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

デメリットについて

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

ただデメリットだけというわけではありません。最後のデメリット項目「単発仕事」ですが誰かが募集している案件に応募しているだけなので契約などしてお仕事を獲得しているわけではありませんよね。

そのためほとんんどの仕事は単発仕事で終わります。

ただ中には人手の足りない制作会社さんが募集していたりして、その案件を獲得ししっかりと仕事をこなすと「今後も定期的にお仕事振っても良いですか?」と聞かれたりします。

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

ここまでで一旦案件獲得方法概要説明は終了です。

ここからは案件獲得方法「2.クラウドソーシングで案件獲得する方法」に重点を置いて解説します!

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

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

現役WEB制作フリーランスのたんしお(@tanshiokoki73)さんのブログ記事です

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

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

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

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

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

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

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

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

ココナラでの案件獲得方法はこちら。

HackMemo
【テンプレあり】実績0でもココナラを使って月10万円稼ぐまでのロードマップ|HackMemo
【テンプレあり】実績0でもココナラを使って月10万円稼ぐまでのロードマップ|HackMemoどうも、学生フリーランスのひろと(@hiroto_prog)です! 未経験コーダー クラウドワークスで営業してるけど全く

基本的には

クラウドワークス・ランサーズでは原(@haraponta1496)さんのブログ記事

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

ココナラではひろと(@hiroto_prog)さんのブログ記事

【テンプレあり】実績0でもココナラを使って月10万円稼ぐまでのロードマップ

を参考に案件獲得を目指していただければと思います!

また原さんの提案分はココナラでもかなり高い効果を発揮するためぜひ活用することをオススメします!

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

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

大変長いロードマップでしたが少しでも案件獲得を目指す初学者さんの助けになれば幸いです。

ご覧頂きありがとうございました!


ココナラは無料で登録できるので先に登録しておくと良いと思います!

WEB制作学習おすすめサイトまとめ

学習サイト

Progate
Progate(プロゲート) | Learn to code, learn to be creative.
Progate(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
あわせて読みたい
ドットインストール
ドットインストールHTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくこと...
Udemy
Online Courses - Learn Anything, On Your Schedule | Udemy
Online Courses - Learn Anything, On Your Schedule | UdemyUdemy is an online learning and teaching marketplace with over 130,000 courses and 35 million students. Learn programming, marketing, data science and more.

おすすめブログサイト

HPcode(えいちぴーこーど)
HPcode(えいちぴーこーど)
HPcode(えいちぴーこーど)はにわまんの技術ブログ
あわせて読みたい
さるわか - Google 検索
バズ部
バズ部私たちが考える最高のWebマーケティング、コンテンツマーケティングについて、会社経営者、Webの担当者や個人事業主の方々にダントツで役に立つコンテンツを提供する「バズ...
たんしおWEB
たんしおWEB
たんしおWEB元公務員フリーランスWEB制作者たんしおのブログサイトです。当ブログでは『Web制作』『公務員』『フリーランス』にまつわる情報発信をしています。
HikoPro Blog | IT・テクノロジーで生活と仕事をもっと豊かに
HikoPro Blog
HikoPro BlogIT・テクノロジーで生活と仕事をもっと豊かに

質問サイト

teratail[テラテイル]
teratail【テラテイル】|ITエンジニア特化型Q&Aサイト
teratail【テラテイル】|ITエンジニア特化型Q&Aサイトteratail(テラテイル)はプログラミングに特化したQ&Aサイトです。実現したい機能や作業中に発生したエラーについて質問すると、他のエンジニアから回答を得られます。

自分で質問しなくても過去に同じような境遇に陥り質問している人がいたりするので困ったときは見てみましょう!

今後も見つかったり思い出したりしたら追加していきます!

さいごに

今回は「【初心者必見】WEB制作学習完全ロードマップ【これひとつで学習方法がすべてわかる】」をご覧頂きありがとうございました!

本記事はみとブログ2記事目ということで読みにくい部分も多々あったかと思いますが今後こまめにリライトしてより一層分かりやすいロードマップとなるよう取り組んでいくのでどうぞよろしくお願いいたします。

また本記事内では学習の助けとなる参考サイトとして外部サイトを多用していますが、学習に支障はないものの多少情報が古いといったサイトも使用していますのでできる限り今後自分自身で、自身の言葉で記事執筆をし、初学者さんの道しるべとなるようなロードマップに仕上げていく所存です。

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

改めて、本記事を読んでくださりありがとうございました!

みと(@mito_710_1)

ブログランキング・にほんブログ村へにほんブログ村
【初心者必見】 WEB制作学習完全ロードマップ 【これひとつで学習方法がすべてわかる】

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

よかったらシェアしてね!

コメント

コメントする

目次
閉じる