この記事は、初学者が最速でWeb制作者になるために「本当に必要なスキルのみ」を厳選して紹介する「最短6ステップのWeb制作学習ロードマップ」です。
下記画像の6ステップに沿って、学習ロードマップの説明をしていきます。
この記事の内容ができれば、最短・最速でWeb制作の案件をこなせるようになります。
- Web制作者になるための最低限必要なスキル
- Web制作を効率よく学ぶためのロードマップ
独学でWeb制作を学ぶならZeroPlus Gateがおすすめ！
ZeroPlus Gateを受講すれば、30日間で副業レベルのWeb制作スキルを身につけられます。専属メンターがあなたの学習を完全サポート。ひとりでWebサイトを制作できるスキルが確実に身につきます。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
STEP0．Web制作を学ぶ上でのポイント
Web制作を学習する上で、次の3つのポイントについて押さえておきましょう！
- 目標から逆算して考える
- 完璧を求めすぎない
- 手を動かす
目標から逆算して考える
まずは、副業、フリーランス、就職・転職したい、プログラミングの教養をつけたい、など目標を設定しましょう！ 自分が今やることが明確になり、最速で成長することができます。目標を決めないと挫折につながってしまいます。
完璧を求めすぎない
HTML / CSSが完璧にならなくてもJavaScriptなどに移動してOK！何度も同じ内容を周回しないようにしましょう！
JavaScriptを学んでいる際に、HTML/CSSの理解が深まることもよくあります。
手を動かす
見るだけでは身に付かないので、手を動かすことを意識しましょう。インプットとアウトプットの割合は３：７がよいといわれています。
また、暗記をする必要はありません！インプットに時間をかけずに、どんどん手を動かしてたくさんコードを書きましょう！わからないことは都度、調べればよいだけです。
この記事ではアウトプットの方法、アウトプットができる書籍も紹介しますので、ぜひ参考にしてください。
3つのポイントを押さえたら、いよいよWeb制作の学習準備に入ります！
STEP1．Web制作の学習準備をしよう！
ここではWeb制作を学習するにあたっての、「学習準備」について解説していきます。
学習準備
- エディタを導入する
- タイピングを練習する
- よく使うショートカットキーを覚える
- ブラウザを設定する
なお、学習準備の段階でも完璧を目指す必要はありません。タイピングやショートカットを覚え切れていなくても先に進んでいきましょう。
HTMLやCSSを学習していきながら覚えていけばOKです。
エディタの選定・インストール
Web制作で必須なツールの一つがエディタです。エディタにはサクラエディタやAtom、Bracketsなどさまざまな種類がありますが、ここでは「Visual Studio Code（略称VSCode）」を推奨します。
VSCodeはWindowsでもMacでも使用でき、開発を効率的に支援してくれる拡張機能が豊富なのが特徴です。
またWeb制作のみならず、他のプログラミング言語を使った開発でも便利に使うことができる万能なエディタとなっています。
タイピング練習をしよう
コードを書く上で、タイピングスキルは重要です。作業速度に関わることなので、タッチタイピングができるようになるのが望ましいです。最初はひとつひとつのタイピングに時間がかかると思いますが、やっていくうちにだんだん慣れてきてスピードが速くなっていきます。練習あるのみなので、継続して練習してください。
タイピングの練習には、「寿司打」などの無料で使えるタイピングゲームを利用するとよいでしょう。パソコンを起動したら1回やる、などと習慣化すると続けやすいです。
ショートカット操作を覚えよう
作業効率を上げるために、VScodeのショートカットを覚えましょう。
例えば、Windowsであれば「Ctrl+Sキー」で「保存」、「Ctrl+Aキー」で「全選択」などの操作をすることができます。WindowsとMacではショートカットで使うキーが異なるので、それぞれの環境に合わせて少しずつ覚えていきましょう！
ブラウザはChromeを使おう
開発環境として使用するブラウザは「Chrome」を推奨します。Chromeは開発に必要な検証ツールが非常に便利で、Web制作の現場でもベースとなる環境です。
さらにChromeには、制作で使える拡張機能が豊富にあります。例えば、HTMLの閉じタグ忘れ等をチェックしてくれる「HTMLエラーチェッカー」、Webサイトで使われているフォントを調べてくれる「WhatFont」などです。
おすすめの拡張機能とChromeのインストール方法は、以下の記事の中で解説しています。まだChromeのインストールを済ませていない方は、記事を参考にChromeをインストールしてください。
STEP2．Web制作の基礎、HTML / CSSを学ぼう
ここではHTML / CSSの役割と、これからHTML / CSSを学習するにあたって「できるようになったほうがいいこと」について解説していきます。
HTML/CSSの役割理解
HTMLとCSSは、厳密にはプログラミング言語ではありません。HTMLはマークアップ言語といい、Webサイトの構造を作るために必要な言語です。HTMLで作った構造に、スタイル（色やサイズ、余白、レイアウト等）を指定してWebサイトに装飾を施すのがCSSです。CSSはスタイルシート言語といいます。
HTMLだけではWebページが非常に簡素になってしまい、CSSだけではWebページに装飾を施すことができません。この2つの言語はセットで学ぶのが基本になります。
HTML/CSSでできるようになった方がいいこと
HTML/CSSは、Web制作者としての基本的な技術である以下の3つができるようになることを目標にしましょう。
- 正しくタグを使ってデザインを作り、レスポンシブ対応ができる
- 外部プラグイン（Google Mapや Facebookなど）を利用できる
- デザインカンプからコーディングができる
順番に学習していき、"3.デザインカンプからコーディングができる" ようになったら、次のステップ「JavaScript」の学習に進んでOKです。
正しくタグを使ってデザインを作れる
HTMLにはdivタグやpタグ、inputタグやarticleタグなどのさまざまなタグが存在します。それぞれのタグには役割があるので、適切な部分に適切なタグを使用してコーディングしましょう！
正しいタグの使い方については「Web制作講座」の記事で扱っています。ぜひ学習にお役立てください。
外部プラグイン（外部メディア）を利用できる
外部メディアは、例えばGoogle MapやYouTubeの動画、Twitter・Facebook・Instagramなどの投稿のことです。このような外部メディアを、Webサイト内に埋め込んで表示させる方法があります。外部メディアの導入方法を学習し、埋め込めるようになりましょう。
デザインカンプからコーディングができる
デザインカンプは、AdobeXD、Figma、PhotoShop、Illustratorなどのさまざまなツールを使って作成されます。各ツールで作られたデザインカンプから、フォントサイズや色、要素間の余白などを読み取れるようになりましょう。
実際の案件でもデザインカンプの数字をもとにコーディングを行います。コードによっては画面幅やブラウザの違いによってデザインが崩れてしまう場合があるので、注意しながらコーディングしてください。
練習用のデザインデータを「Web制作講座」の記事でアップしています。ぜひ学習にお役立てください。
- 正しくタグを使ってデザインを作れる
- 外部プラグイン（外部メディア）を利用できる
- デザインカンプからコーディングできる
- 簡単なWebサイトが作れる
ここまでの学習をこなすと、簡単なWebサイトであればデザインカンプからコーディングできるようになります。
ポイントはいきなり難しいレイアウトのWebサイトを構築しようとしないことです。まずはシンプルで簡単なWebサイトを制作しましょう。最初は時間がかかりますが、数をこなすと徐々にスピードが上がりますし、デザインからコーディングまでの基本的な流れが確実に身につくので、焦らずにやりましょう。
この段階でWebサイトがコーディングできるようになったら、STEP3のJavaScriptの学習をはじめましょう。
最短でサイト制作のスキル習得するなら「ZeroPlus Gate」
「どこまで勉強すればよいのか」
「いつ次のステップに移ればよいのか」
独学だと、悩みは尽きないものです。
無料の学習サービス「ZeroPlus Gate」では
専属メンターがあなたをサポート。
目標達成のための学習ロードマップを一緒に作れます。
ロードマップに沿って、50種類の動画教材をしっかり学び抜けば、
一生使えるWeb制作のスキルを会得できます。
30日間、メンターと一緒に駆け抜けましょう！
HTML/CSS上級編
デザインカンプからWebサイトを再現できるようになったら、STEP3のJavaScriptに進んでOKです。
さらにレベルをあげたい方は、以下の3つを学んでみましょう。
- CSS設計（BEM設計、FLOCSSなど）
- px（ピクセル）パーフェクトコーディング
- Sassを使ったコーディング
CSS設計
CSS設計とは、BEMやFLOCSSなどに代表される、コードのメンテナンス性や作業効率化のために取り入れるコードの管理方法を指します。
良いCSS設計をしたコードには、このようなメリットがあります。
- 予測しやすい
- 再利用しやすい
- 拡張性がある
- 保守性がある
大規模なサイトになるとコードや命名規則などが煩雑になりがちですが、CSS設計を取り入れれば管理しやすくなります。さまざまなCSS設計が使えるようになると制作の状況に応じて使い分けることができるので、挑戦してみるのもよいでしょう。
ただし、1つのプロジェクトで複数の設計手法を使うのはおすすめしません。まずは初心者でも習得しやすい「BEM」記法から学習してみてください。
「Web制作講座」の記事では、CSS設計について基礎から扱っています。
px（ピクセル）パーフェクトコーディング
pxパーフェクトコーディングとは、デザインカンプのデザインを1pxのズレもなく完璧にコーディングすることです。
デザインカンプのとおりコーディングしているつもりでも、実際はデザインとズレが生じていることがあります。pxパーフェクトコーディングができるようになると、Webサイトの仕上がりがよくなり、コーダーとしての信頼感につながります。デザインカンプを忠実に再現できるのは良いコーダーの条件の1つです。
なお、Chromeには「PerfectPixel」という拡張機能があります。
PerfectPixelはpxパーフェクトコーディングを支援してくれる便利な拡張機能です。デザインカンプを画像として書き出し、PerfectPixelにその画像を読み込むと、画面にその画像が出力されます。その画像にぴったり重なるようにコーディングすれば、視覚的にわかりやすくpxパーフェクトを目指すことができます。
Sassを使ったコーディング
Sassとは、Syntactically（文法的に） Awesome（イケてる） StyleSheet（スタイルシート）の略で、CSSを楽に書くための言語です。
Sassを使えるようになると、例えば色コードを変数として管理したり、CSSファイルを分割で管理したりできるようになります。Sassを覚えると、効率的にCSSを管理できるようになるので、ぜひ使えるようになっておきましょう。
Sassを使う方法は大きく2つあります。
- Gulpやwebpackなどのタスクランナーやモジュールバンドラを使う（上級者向け）
- VSCodeの拡張機能「DartJS Sass Compiler and Sass Watcher」を使う（これからSassを勉強する方向け）
Sassの環境構築には、拡張機能を使うのが簡単です。
- CSS設計を使ってコーディングできる
- デザインカンプのデザインと忠実にコーディングできる
- Sassを使って効率的にCSSを書くことができる
ここまでの学習をこなすと、CSS設計やSassなどを使って効率的にコーディングができるようになります。CSS設計はさまざまなやり方がありますが、まずはBEM設計から身につけましょう。BEM設計に慣れてきたら、FLOCSSや他のCSS設計を学習してみましょう。
ZeroPlusでは、現役エンジニアが基礎からしっかりと、フリーランスエンジニアとして活躍するのに必要なスキルを教えていきます。
ZeroPlusで学べること
- HTML/CSSの基礎
- モバイルファーストでのコーディング（レスポンシブ含む）
- CSS設計
- Sassを使ったコーディング
- デザインカンプからのコーディング
- ZeroPlus Gateでは学べないその他のスキル（JavaScript、Webの知識、SEO、デザイン、WordPress...etc)
ZeroPlus Gateで学習するのは、Web制作の基礎的な範囲にとどまっています。本格的なWebサイトを構築するためには、それ以上に幅広い知識が必要です。
ZeroPlus Gateからさらに深く幅広く学び、一生使えるスキルを身につけるには、ZeroPlusがおすすめです。あなたのエンジニアへの第一歩を完全にサポートします。
STEP3．JavaScriptを学ぼう
デザインカンプをHTML/CSSでコーディングできるようになったら、JavaScriptの学習に移りましょう。
ここではJavaScriptの役割と、次にこれからJavaScriptを学習するにあたって「できるようになったほうがいいこと」について解説していきます。
JavaScriptの役割・理解
JavaScriptは、プログラミング言語の1つです。「JS」と略されることもあります。Web制作に限らず、Webアプリやスマホアプリ、ゲームも開発できたりと非常に汎用性が高いのが大きな特徴です。
またブラウザ上で動く言語のため、開発のための特別な環境構築は必要ありません。
Web制作分野におけるHTML/CSSと、JavaScriptとの違いは次のようになります。
- HTML/CSS：Webサイトの「見た目の部分」を制御する
- JavaScript：Webサイトの「動きの部分」を制御する
例えば、HTML/CSSで作られたボタンをクリックすると、JavaScriptでそのボタンに特定のクラスを付与してコンテンツに動きを付与する、というような処理を施すことができます。
JavaScriptができるようになると、HTMLやCSSだけでは実現できないようなことができるようになり、表現の幅が大きく広がります。これからJavaScriptを学習する方は、JavaScriptをより簡単に記述することのできるライブラリ「jQuery」を使用するのがおすすめです。
jQueryについて
jQueryとは、JavaScriptのライブラリの1つです。ライブラリとは機能をまとめたプログラムの集合体のようなものです。JavaScirptの記述をより簡略化して記述することができ、全体のコード量を減らすことができます。
jQueryはWeb制作で便利なライブラリとなっており、環境構築も簡単に行うことができます。習得も難しくないので初心者におすすめです。
jQueryの詳しい説明や導入方法については、こちらの記事をご覧ください。
JavaScriptでできるようになった方がいいこと
JavaScriptでは、Webサイトでよく使われる4つのパーツが作れるようになることを目標にしましょう。
- カルーセルパネル
- モーダルウィンドウ
- ハンバーガーメニュー
- アコーディオン
この4つのパーツが作れるようになったら、次のステップ「WordPress」の学習に進んでOKです。
カルーセルパネルとは
カルーセルパネルとは、画像などのコンテンツを横にスライドさせて見せる表示方法です。コンテンツを縦に伸ばしたくない場合や、更新性のあるWebサイトなどで使われます。
カルーセルパネルに関しては、以下の記事で解説しています。記事を参考にして実際に作ってみましょう。
モーダルウィンドウとは
モーダルウィンドウとは、ボタンを押すと元の画面の上に新たなウィンドウ画面が表示される機能のことです。ポップアップと似ているところがありますが、モーダルウィンドウはその画面で操作を終えないと画面を遷移することができません。会員登録や警告メッセージなど、大事な情報をユーザーに見てもらいたいときに使われます。
モーダルウィンドウに関しては、以下の記事で解説しています。記事を参考にして実際に作ってみましょう。
ハンバーガーメニューとは
PCでWebサイトを見るときはメニューボタンが常に見えていますが、スマートフォンなどでWebサイトを見ると、そのメニューは一般的に三本線として表現され、クリックするとメニューが展開される場合が多いです。このメニューの表示の仕方をハンバーガーメニューといいます。
カルーセルパネルやモーダルウィンドウと比べて使われる頻度が非常に高いパーツなので、必ず作れるようになっておきましょう。
ハンバーガーメニューに関しては、以下の記事で解説しています。記事を参考にして実際に作ってみましょう。
アコーディオンメニューとは
アコーディオンメニューとは、クリック時に項目を表示させる機能のことです。Q&Aなどに使われることが多く、縦に長くなりそうなコンテンツをクリック1つで展開させることができます。
アコーディオンメニューに関しては、以下の記事で解説しています。記事を参考にして実際に作ってみましょう。
独学するあなたへおすすめの書籍
書籍では、『jQuery 最高の教科書』がおすすめです。手を動かしながらjQueryをわかりやすく学べる良書です。
2013年発売と少し古い書籍ですが、jQueryの基本的な文法は変わっていません。jQueryを学びたい方は是非手に取ってみてください。
JavaScriptの書籍では、『1冊ですべて身につくJavaScript入門講座』がおすすめです。とことん丁寧なJavaScript入門書です。JavaSciptの書き方や使い方、イベントの知識などが学べます。
- JavaScript（jQuery)を使ってWebサイトに動きをつけられる
- Webサイトを構成するパーツ（アコーディオンメニュー、スライドなど）を作れる
- 動きを意識したHTML,CSSのコーディングができる
ここまでの学習をこなすと、JavaScript（jQuery）を使ってWebサイトに動きをつけることができるようになります。Webサイトはハンバーガーメニューやアコーディオンメニューなど、さまざまなパーツで構成されています。それらのパーツを作っていくと、自然と「動くことを意識して」HTML, CSSでコーディングする力が身に付きます。
さまざまなパーツを作って数をこなして慣れていきましょう。
JavaScriptは挫折しやすい...。挫折防止のためのスクール活用法
JavaScriptの学習はHTML/CSSの学習と比べると、急に難易度が上がるので挫折しやすいです。エラーの解決方法が分からなかったり、想定通り動かないこともしばしば...。
独学でやっていると、どうしてもそれらの問題を解決するのに時間がかかります。ZeroPlusでは現役エンジニアの講師やメンターが質問対応をいつでも受け付けており、問題解決をお手伝いしています。
講義や課題で分からないところだけでなく、個人的な学習で詰まった箇所の質問対応まで受け付けています。質問は卒業後でも可能です。
JavaScript上級編
JavaScriptの基本的な扱い方は押さえられましたか？Web制作でよく使われる4つのパーツが実装できるようになったら、STEP4のWordPressの学習に進んでOKです。
さらにレベルを上げたい方は、以下の3つを学んでみましょう。
- GSAPやEJS、slickなどのライブラリを扱えるようになる
- JSフレームワークを扱えるようになる
- WebAPIを使えるようになる
GSAPやEJS、slickなどライブラリを使えるようになる
ライブラリには、jQueryの他にも、軽量で直感的にアニメーションが使えるGSAPやスライドショーを簡単に実装できるslickなど、さまざまな種類があります。JavaScriptに慣れてきたら、他のライブラリの学習にも挑戦してみてください。
目的に応じてライブラリを適切に導入して実装できるようになると、Webサイトでさまざまな表現を施したり、作業を効率化して時短できたりします。
自分の実装したい表現や機能が、もっと簡単に実装できないか調べてみましょう。
JSフレームワークが使えるようになる
JavaScript系のフレームワークであるVue.js、Augularなどが使えるようになるとよいでしょう。Web制作の領域ではあまり使用されることはないですが、本格的なフロントエンドエンジニアを目指すなら、フレームワークが使えるようになると市場価値が上がります。
WebAPIを使えるようになる
APIとは、外部のプログラムからメソッド、関数などを通してデータを取得できる仕組みのことです。WebAPIが使えるようになれば、天気予報の情報をAPIを通してWebサイトにリアルタイムで表示させる、といった高度なこともできるようになります。
GSAPやEJS、slickなどライブラリが使える
JSフレームワークが使える
WebAPIが使える
ここまでの学習をこなすと、コーディングをより効率化したり、より動的なサイトやサービスを制作することができるようになります
STEP4．WordPressを学ぼう
Web制作でよく使われる5つのパーツがJavaScriptで実装できるようになったら、WordPressの学習に移っていきましょう。
ここではWordPressの役割と、これからWordPressを学習するにあたって「できるようになったほうがいいこと」について解説していきます。
WordPressの役割
WordPressは、Webサイトの作成・ブログ作成などができるCMS（コンテンツマネジメントシステム）の一つです。お知らせのような更新性のあるコンテンツを、管理画面から簡単に更新することができます。さらに「プラグイン」を活用することで、容易に機能や見た目をカスタマイズすることができるのも特徴のひとつです。
全世界のWebサイトのうち、約65%がWordPressで構築されています。このようにWordPressは非常に多くのサイトで使われているため、WordPressを扱う技術はWeb制作者にとって欠かせません。
WordPressでできるようになった方がいいこと
WordPressでは、実案件でよく使われる以下の4つを実装できるようになることを目標にしましょう。
- WordPress化
- カスタム投稿
- カスタムタクソノミー
- カスタムフィールド
この4つが実装できるようになったら、次のステップ「デザイン」の学習に進んでOKです。
WordPressでは、カスタムタクソノミー・カスタム投稿・カスタムフィールドのカスタム系3種がよく使われます。カスタム系3種ができるようになるとWordPressでできることの幅が非常に広がるので、ぜひ身に付けておきましょう。
また、WordPressはPHPを使用しているため、開発や実装にはPHPの開発環境を構築する必要があります。「Web制作講座」の記事で開発環境の構築について基礎から解説していますので、参考にしてください。
WordPress化
HTML/CSSで構成されたサイトを、PHPで記述するとWordPress化することができます。
WordPress化するには、PHPの基礎やWordPressのテンプレートタグ、テンプレート階層など幅広い知識が必要です。環境構築にはXAMPP/MAMPを使い、基礎的な部分のデータベース設定を行います。
「Web制作講座」の記事で、教材を配布しています。実際に手を動かしてブログサイトをWordPress化してみましょう。
カスタム投稿
カスタム投稿とは、自分でカスタマイズできる投稿機能のことです。WordPressでは通常の投稿と固定ページの投稿の2種類がデフォルトで使用できますが、さらにオリジナルの投稿を加えたいときにカスタム投稿を使用します。
カスタム投稿を使用することで、ジャンルや方向性の違う別の記事を一つのサイトの中に共存させることができるようになります。
カスタム投稿の使用例：
- 通常の投稿で「お知らせ」
- 固定ページで「店舗紹介」
- カスタム投稿で「商品一覧」
- カスタム投稿で「スタッフのブログ」
カスタムタクソノミー
カスタムタクソノミーとは、デフォルトのカテゴリーやタグの他にオリジナルの分類を作成できる機能です。カスタム投稿に通常のカテゴリーやタグを利用することができない場合に、カスタムタクソノミーを使うことがあります。
カスタムタクソノミーを使用することで、カスタム分類だけの一覧ページを作成することができるようになります。
カスタムフィールド
カスタムフィールドは、任意の入力項目（フィールド）を設定できる機能です。カスタムフィールドには、テキストの他に画像やリンクなどを設定することができます。
カスタムフィールドを使った部分のコンテンツは、管理画面から任意に出力内容を変更することができます。状況によってコンテンツを動的に変更したいときに便利な機能です。
- HTML,CSSで構築されたWebサイトをWordPress化できる
- カスタム投稿、カスタムフィールド、カスタムタクソノミーなどカスタム系が使える
- 動的な処理を意識してコーディングできる
ここまでの学習をこなすと、HTML,CSSで構築された静的な状態のWebサイトをWordPress化できるようになります。WordPress化ができると、動的な処理を意識してコーディングする力が身につきます。
慣れてくれば、普段から動的な処理を意識したコーディングができるようになるので、効率よくWordPress化を行えることができるようになります。
書籍を使って勉強するのもおすすめ
書籍は学習の小さなロードマップです。書籍の内容を1周できれば、ある程度の技術が身についたといっていいでしょう。ここでもアウトプットが重要なので、見るだけでなく、実際に手を動かして理解を深めていってください。
スクールで学ぶならZeroPlusがおすすめ
ZeroPlusでは、カスタム系の内容を含めたWordPress化構築の方法も学べます。ProgateやZeroPlus Gateでは学ぶことができない、実案件に直結する超実践的な内容です。静的なサイトをWordPress化できるようになると、実案件での提案の幅が広がります。
自分の武器を増やすためにZeroPlusで学んでみませんか？
WordPress上級編
WebサイトをWordPress化できるようになったら、次のステップ「デザイン」の学習に進んでOKです。
さらにレベルを上げたい方は、プラグインの自作を目標にしてみましょう。
WordPressでは便利なプラグインが無数に存在します。まずは自分でWordPressを使ったブログサイトを立ち上げ、サイト運営に必要なプラグインを調べてインストールしてみましょう。
サイトの規模がある程度大きくなってくると、既存のプラグインでは対応できない問題が出てくることがあります。そこで、プラグインを自作できると便利です。「こんな機能があったらいいな」を解決する、自分だけのオリジナルプラグインの開発に挑戦してみてください。
プラグインが自作できるようになるには、PHPやプログラミング、サーバーなどの深い知識が必要になります。自作プラグインが作れるようになるぐらいまでに、じっくり学習していきましょう。
STEP5．Webデザインを学ぼう
WebサイトをWordPress化できるようになったら、Webデザインの学習に移っていきましょう。
ここではWebデザインの役割と、これからWebデザインを学習するにあたって「できるようになったほうがいいこと」について解説していきます。
Webデザインの役割
Webデザインの役割は、クライアントの目的を達成するために、Webサイトの見た目（デザイン）を制作することです。
例えば、クライアントのWeb制作を依頼する目的が「Webサイト上でお客様に商品を購入してもらいたい」だった場合のことを考えてみてください。
どんなに綺麗なデザインでサイトを作ったとしても、商品の購入につながらなければ、そのWebサイトが目的を達成したとはいえません。クライアントの目的や解決したい問題によって、理論に沿った適切なデザインができるようになる必要があります。
このように、Webデザインの目的はきれいなサイトを作ることではなく、クライアントの問題解決にあります。このことを忘れてしまうと、クライアントにとっての「良いWebサイト」をデザインすることはできません。
Webデザインでできるようになった方がいいこと
クライアントの問題解決ができるサイトをデザインすることは、プロでも難しいことです。
初心者のうちは、デザインツールを使えるようになること、自分がなぜそのデザインをしたか説明できるようになることを目標にしましょう。
デザインの制作工程
デザインは、ゼロからできるわけではありません。デザインの制作工程を簡単に述べると、次のようになります。
①：ヒアリング
まず、クライアントからWebサイトをデザインするのに必要な情報や、Webサイトをつくる目的や背景、ペルソナや参考サイトなどさまざまな情報をヒアリングします。
②：ラフ作成
ヒアリングした内容をもとに、紙に簡単なWebサイトの構成を記述します（この工程を飛ばして③にいくこともあります）。
③：ワイヤーフレーム作成
ラフを元に、ワイヤーフレームを作成します。手書きで書いたものをデザインツールを使って落とし込みます。デザインカンプの設計図のようなものだと思ってください。
④：デザインカンプ作成
ワイヤーフレームを元に、デザインカンプを作成します。ワイヤーフレームに色や画像などを当て込んでいき、最終的なWebサイトの見た目を完成させます。
Webデザインは、このような流れで進められます。実案件に挑戦する前に必ず理解し、自分で進められるようにしておきましょう。
デザインツールを使えるようになる
デザインツールには、PhotoShopやAdobeXD、Figmaなどさまざまなツールがあります。全て使えるようになるのが理想ですが、種類が多いので少しずつ使えるようになりましょう。
「Web制作講座」では、Adobe XDの使い方について紹介しています。学習の参考にしてみてください。（現在、Adobe XDは有料となっています。）
自分の作ったデザインを説明できるようになる
デザインとアートは似ているようで、実は全然違います。よくいわれるのが、「デザインは問題解決」「アートは芸術」という違いです。
そもそもデザインをする目的には、さまざまな理由が考えられます。
- ユーザーにどういった行動をしてもらいたいか
- いかにユーザーにストレスを感じさせずに見てもらうか
- どういう導線だとクリックしやすいか...etc
例えば、画像とテキストを横に並べたり、画像の上にテキストを重ねてみたりするのにも、「なぜそういったデザインなのか」「なぜそのように並べたのか」説明できるようになるといいでしょう。
デザインには、「デザイン4原則」という、基本となる考え方があります。
- 近接の法則
- 整列の法則
- 反復の法則
- 対比の法則
この4つを意識するだけでも、あなたのデザインはグッとプロのデザインに近づきます。「Web制作講座」のこちらの記事で、デザイン4原則について図を交えながら詳しく説明していますので、どうぞご覧ください。
ZeroPlusはWebデザインの講義があるプログラミングスクール
ZeroPlusではプログラミングスクールでは珍しい、デザイン（Webデザイン）の講義があります。
Webデザインのスキルが身につくと、デザインからコーディングまでWeb制作の仕事を一気通貫して請け負うことができるようになります。コーディングしかできないコーダー、デザインしかできないデザイナーも多い中で、両方の知識と技術を兼ね備えていることは大きなアドバンテージになります。
ZeroPlusは、Web制作者として必要なあらゆるスキルを網羅的に身に付けられるのが特長です。
書籍で学ぶならこれらがおすすめ
「デザインを見る目」や「基本的なデザインツールの使い方」を学ぶのには、書籍がおすすめです。本で見て終わりにせず、学んだことや気づいたことは実際に制作物にアウトプットしてみましょう。人に自分のデザインを見せて、コメントをもらうのもおすすめです。
アウトプットを続けていくと、デザインスキルの成長に比例して、デザインツールも徐々に使えるようになってきます。アウトプットを繰り返しながらゆっくりと成長していきましょう。
デザイン制作工程の基本が身につく
デザインツールを使って基本的な操作ができる
Webサイトの簡単なデザインが作れる
ここまでの学習をこなすと、デザインの基本的な知識やデザインツールの使い方が身に付きます。Webサイトの簡単なデザインも作れるようになるでしょう。
コーディング同様にデザインも奥が非常に深いです。デザインの場合も手を動かし、数をこなしていくことで徐々にスピードが早くなり、優れたデザインが作れるようになります。
Webデザイン上級編
デザインの勉強に終わりはありません。もっと上のレベルを目指したい方は、まずCV（コンバージョン）を上げることを意識してデザインを作ってみましょう。
CVとは、Webサイトの訪問者が運営者が望んだ行動を取ってくれることです。例えば商品のリンクをクリックしてもらうことが目的であれば、Webサイトを見てくれたユーザーがリンクをクリックした時点でCVが生まれたと表現します。
ユーザーに想定される行動をとってもらうのはとても難しく、はじめから成功することはあり得ません。Webデザインは一度作ったら終わりではなく、改善を繰り返してサイトの目的を達成させる必要があります。デザインのどの部分を改善すればCVが向上するのか考察し、デザインで表現してみましょう。
CVを上げるためにはデザインそのものを変えるだけでなく、コンテンツそのものを変える、ターゲットを変える、などのマーケティング的な視点も同時に必要になります。CVを上げるスキルはデザインのみならず、どの分野でも非常に重宝されるものです。非常に奥深い世界ですが、ぜひ挑戦してみてください。
STEP6．その他の知識・技術を学ぼう
Web制作者には、コーディングの技術のみならず、Webに関係する様々な知識が必要とされます。
最低限、以下の4つは学習しておきましょう。
- Webについての知識
- SEOの知識
- Git/ GitHub
- コマンドライン
Webについての知識
Webに関する基礎的な周辺知識も、Web制作者には必須です。Webについての知識は広範なため、すべてを深く理解する必要はありませんが、最低限のところは押さえておきましょう。
- クロスブラウザ対応
- Webパフォーマンス向上のための施策
- サーバー関連の知識
1つ目の「クロスブラウザ対応」とは、ChromeやSafariなど、どのブラウザからWebサイトを閲覧しても同じく表示されるようにコーディングする技術です。
単純にコーディングしただけでは、特定のブラウザでレイアウト崩れが生じることがあります。ブラウザ間の違いを理解して、どのブラウザでもレイアウト崩れを起こさないように調整できるようになっておきましょう。
2つ目の「Webパフォーマンス向上の施策」は、Webサイトの表示速度を改善するために行うものです。
たとえばサイトを表示するときに真っ白な画面が5秒続くと、サイトが開く前に38％の人が離脱してしまうことが知られています。Webサイトを多くの人に見てもらうために、サイトの表示速度を改善するための方法を調べてみましょう。
3つ目の「サーバー関連の知識」は、広範かつ難解な内容が含まれます。
Web制作者（フロントエンドエンジニア）は最低限、どのようにWebページが表示されるのかを理解したうえで、レンタルサーバーの取り扱いに慣れておきましょう。自分の借りているレンタルサーバーで、自分のサイトを「SSL化」してみることも勉強になります。
SEOの知識
SEOとは、Search Engine Optimizationの略で、「検索エンジン最適化」という意味です。
SEO対策をしっかりしておくと、Googleで検索されたときに1ページ目に表示されるようになり、Webサイトのアクセス数が増えます。Webサイトに訪れる人が増えれば、CV（コンバージョン）につながりやすくなります。
一口にSEO対策といっても施策はさまざまで、大きく分けて2つの対策があります。
- 内部SEO対策
- 外部SEO対策
いかに優れたコンテンツ・Webサイトを作っても、SEO対策がされていないページをGoogle検索結果の上位に表示させることは難しいです。
SEOの難しいところは、対策を行っても必ず検索結果の上位ページに表示されるとは限らないことです。検索順位は日々変動しているため、競合の分析やSEOライティングの知識が必要になります。SEOについては、内容が1冊にまとまっている書籍で学習するのがおすすめです。
こちらの書籍は、SEOの考え方から具体的な施策までが1冊にまとまっている本です。1冊買っておけば、本格的なSEO対策が必要になった時でも役立ちます。
Git / GitHub
Gitとは、ソースコードのバージョン管理システムです。
GitHubは、Gitの仕組みを利用した、ソースコードを管理できるWebサービスです。
個人で使う分にはあまり利用する機会はないかもしれませんが、チームで開発を行う場合にはほぼ必須となります。GitHubを普段から利用していると、共同開発の案件にもすぐに参加することができるので、余裕のあるときに学習しておきましょう。
ネット上にも多くの情報がありますが、右も左もわからない場合は書籍で学習するのがおすすめです。
コマンドライン
コマンドラインは、簡単にいうとキーボードのみで半角英数字と記号を用いて命令文を書き、PCを操作する技術です。Windowsではコマンドプロンプト、Macではターミナルというツールを使って行います。
コマンドラインが扱えるようになると、GitHubでの操作が容易になります。Git / GitHubの学習を進めていくと出てくる内容ですので、Git / GitHubと一緒に慣れておきましょう。
ZeroPlusでは、デザインやコーディングだけでなく、Web制作者として必要なこの4つの技術についても「特別講義」で学ぶことができます。特別講義はZeroPlus卒業後でも、いつでも何回でも受けることができます！
- Webについて（インターネットの知識）
- SEOの知識
- Git / GitHub
- コマンドライン
その他知識・技術上級編
コーディングやデザインを学習したら、さらにスキルを向上させるために次のことも積極的に学習していきましょう！
- タスクランナー / モジュールバンドラー
- アクセシビリティ対応
タスクランナー / モジュールバンドラー
タスクランナーとは、フロントエンドで必要なタスク（仕事）をコマンド一つで実行し、開発作業を自動化してくれるツールのことです。有名なものに、Gulp（ガルプ）やGrunt（グラント）などがあります。
例えば、Gulpを使うと次のようなことが一括でできるようになります。
- 画像の圧縮
- webp自動生成
- ベンダープレフィックス付与
- CSS/JavaScriptファイルの圧縮
- Sassのコンパイル
- 開発用と納品用でファイルを分けて出力
- PugやEJSなどHTMLテンプレートエンジンのコンパイル
- CSSプロパティを並べ替えて出力（例：アルファベット順）
- メディアクエリごとにCSSをまとめて出力
このように、Web制作で必要なタスクを一括で処理してくれるのがタスクランナーです。
モジュールバンドラーとは、モジュールを束ねることができるツールです。JavaScriptファイルなどを一つにまとめて出力することができます。モジュールバンドラーはwebpack（ウェブパック）が代表的です。Gulpでできることはwebpackでもできますが、難易度が少し高くなっています。
アクセシビリティ対応
Webサイトにおけるアクセシビリティ対応とは、「障害を持つ人々がWebを使用できる」対応のことです。（例：Webサイトの読み上げ機能を使えるようにする、スクリーンリーダーの実装など）
Webの本質は、だれもがアクセスできることにあります。この「だれもが」というのは、高齢者や障害者の方も指しています。不特定多数のさまざまな人がWebサイトを閲覧できるようにすることは、Webサイトにとって重要な施策です。
アクセシビリティ対応のためには何をする必要があるか、調べてみましょう。
Webに関するさまざまな深い知識が身につく（アクセシビリティ、クロスブラウザ、サーバー関連の知識、SEO対策など）
コーディングに関するさまざまなツールが使える（タスクランナー、モジュールバンドラーなど）
複数人で共同制作するスキルが身につく（Git/GitHub、コマンドラインなど）
ここまでの学習をこなすと、Web制作周りのさまざまな知識が身に付きます。
制作の現場の状況によっては複数人でひとつのWebサイトを構築するということがあるので、これらのツールが使えるようになっておくといいでしょう
モチベーション管理
学習を継続するための秘訣は、目標設定です。学習前には、数字を含めた具体的な目標を設定しましょう！
数字を入れた具体的な目標を設定することで、いま学習すべきこと・学習すべきではないことを目標から逆算して考えられるようになります。Webの分野はとても範囲が広いため、あれもこれもでは続きません。目標をひとつに絞って、立てた目標に向かって全力で走り抜けましょう。
例：
- 1カ月でHTML/CSSを完璧にして、レスポンシブ対応までできるようになる！
- 4カ月でWordPress化されたWebサイトを構築する！
- 6カ月でWeb制作で20万円収益化する！
目標設定のコツは、短期集中です。ダラダラやっていると、モチベーションが日に日に減っていき、最終的には挫折してしまいます。短期間で集中して学習することで、すばやく成功体験をつかむことができ、さらに高いレベルの目標設定やモチベーションの向上につながります。
モチベーション管理のため、目標を立てて短期集中で学習に取り組むのがおすすめです。
実際にWeb制作の案件をこなす場合、「納期」という時間的な期限・目標が設けられることが多いです。普段から数字を含めた目標を定め、「それまでに絶対にやりきる」ことを意識すれば、実際の案件のときもやりきることができるでしょう！
最短でサイト制作のスキル習得するなら「ZeroPlus Gate」
「どこまで勉強すればよいのか」
「いつ次のステップに移ればよいのか」
独学だと、悩みは尽きないものです。
無料の学習サービス「ZeroPlus Gate」では
専属メンターがあなたをサポート。
目標達成のための学習ロードマップを一緒に作れます。
ロードマップに沿って、50種類の動画教材をしっかり学び抜けば、
一生使えるWeb制作のスキルを会得できます。
30日間、メンターと一緒に駆け抜けましょう！
ZeroPlus Gateを受講した方へのインタビュー記事はこちら
まとめ
この記事では、「Web制作者」を名乗るために最低限、必要なスキル・ロードマップについて紹介してきました。
ステップとしてはこんな感じでしたね。
１． HTML/CSS
デザインカンプからWebサイトがコーディングできるようになる
２．JavaScript
Web制作でよく使われる4つのパーツの動きを理解して、実装できるようになる
３．WordPress
Webサイトを完全にWordPress化できるようになる
４．Webデザイン
デザインツールを使えるようになる、自分がなぜそのデザインをしたか説明できるようになる
５．その他Web周辺技術
クロスブラウザ対応、Webパフォーマンス向上、サーバーの知識、SEO、Git / GitHub、コマンドライン を理解している・扱える
Web制作にはさまざまな知識が必要で、どのようなステップで学習していけばいいか迷うこともあると思います。そんなときは、この記事のステップのとおり学習していってください。
独学で学習していると、途中でつまづいたり、勉強で悩むことがあると思います。そんなときはひとりで抱え込まずに、無料で学べるZeroPlus Gateを利用してみてください！
ZeroPlus Gateでは一人一人にメンターがついて、学習面だけでなくメンタル面でもあなたをサポートします。一生使えるスキルの基礎が、たったの30日間で勉強できます。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
