模写修行メディア

【web制作】プロになるための学習ロードマップ!

web制作の学習ロードマップはこの記事以外にも、たくさん公開されています。ただし、それらは初心者を脱するための学習ロードマップであることが多いと感じます。

この記事では、脱初心者ではなく、プロになるための学習ロードマップを紹介します。初学者にとって初めて聞くこともあるかもしれません。今わからなくても、後で見返すために、ぜひブックマークしてご活用してください。


この記事を書いた人

  • 模写修行を作った
  • webサイトは2,300サイトは作ってきた
  • チームでweb開発もやっている
  • フリーランス歴7年くらい(今は法人化している)

一応学習ロードマップに関する記事を書けるくらいにはやってきました。

感想や疑問などツイートで教えていただけると嬉しいです!また、現役の方の意見も聞きたいので、ぜひ!🙇

gakuのアイコン

💡 独学で苦戦中の人におすすめ

  • プログラミングスクールは高い...
  • でも独学には苦戦中...

そんな方には、月2980円で質問し放題の侍テラコヤがおすすめです。

↓レビューした記事もあります。

月2980円で質問し放題の侍テラコヤが良さげ?現役エンジニアがレビュー!(口コミや評判も調査)

人数制限があるのでお早めに!👀

侍テラコヤ 公式サイト

この記事の目次

この記事で書くこと・書かないこと

👇書くこと

  • 勉強する必要がある技術
  • おすすめの書籍や教材

👇書かないこと

  • 稼ぐための方法
  • 詳しい説明
  • 具体的なコードの書き方やデザインの方法

学習ロードマップなので、フリーランスや副業で稼ぐためのコツや転職・就職に関しては、ほとんど触れません。

学習ロードマップの概要

信頼できる学習ロードマップの1つに、Developer Roadmapsがあります。

919

↑公開されている技術や言語です。

かなり詳しく紹介されているので、英語に抵抗がなく、画像にある技術を勉強したい方はぜひ覗いてみてください。

2020年版ですが、Twitterで日本語訳を紹介している方がいました。

参考:2020年版のロードマップ和訳

Developer Roadmapsにはフロントエンド版があります。そのフロントエンド版をベースに、web制作にはいらないものは削り、web制作では必要なものは追加して、この記事を書きました。

紹介する技術

  1. webデザイン
  2. インターネットについて
  3. HTML・CSS
  4. JavaScript
  5. WordPress
  6. その他

必要ないところは飛ばしてください。デザインしかやらない場合、1,2だけ見れば良いと思います。コードを書く方は2~6が必須です。

webデザインの学習

  1. 基礎学習
  2. ツールの使い方を覚える
  3. とにかくたくさん作ってフィードバックをもらう

デザインの勉強に必要なのは、上記の3つです。

基礎学習

基礎学習には、chot.designがおすすめです。

chot.designでは、デザイン理論だけでなく、ツールの使い方 / ディレクター / コーディングに関しても学習できます。

書籍で勉強したい方は、↑こちらがおすすめです。

まずはオーソドックスでシンプルなデザインから練習しましょう。デザインのフィードバックをすると、オリジナリティを出すことを意識しすぎて、わかりにくいデザインになっているケースが多いと感じます。

gakuのアイコン

そして、とにかくたくさんwebサイトを見ると良いです。

特にギャラリーサイトばかり見ないのは重要です。ギャラリーサイトはおしゃれに振り切ったデザインも多く、そればかり参考にしても、見やすい・使いやすいデザインができないからです。憧れるのはわかりますが、お堅いサイトなども参考にしてみましょう。

サイトを見る際は、制作者目線だけでなく、ユーザー目線で見るとなお良いです。

ツールの使い方を覚える

webデザインであれば、主流はAdobe XDとfigmaです。

1人で作業する分には、 XDもfigmaもそんなに変わらないと個人的には思っています。サイトの規模が大きかったり、共同作業が必要な場合、figmaの方が良いという意見を聞きます。

XDとfigmaどちらを使っても良いですし、ツールの使い方も基礎学習と同様に、それほど時間をかけなくて良いです。むしろ、やらなくても良いくらいです。

XDの勉強でおすすめは↑こちらです。XDは公式の動画もわかりやすくて良いです。

PhotoshopとIllustratorも使う機会はありますが、webデザインであれば、まずはXDかfigmaに慣れましょう。

ツール役割
XD / figmawebデザイン
Photoshop画像の加工
Illustratorロゴやイラストの制作
  • 画像の加工
  • ロゴやイラストの制作

これらはそれを専門にやる人がいます。ただし、簡単なものはwebデザイナーでもできた方が良いです。

とにかくたくさん作ってフィードバックをもらう

  • 基礎学習
  • ツールの使い方を覚える
  • とにかくたくさん作ってフィードバックをもらう

これらの比率は、1:0.5:8.5くらいで良いと、個人的には思います。それくらい自分でたくさん作ることが大事です。

昔出会ったあるデザイナーは本をよく読み知識豊富だったが、作るデザインはいつも複雑で使いにくく魅力に欠けていた。別のデザイナーは本もあまり読まず決して知識豊富ではなかったが、作るデザインはいつもシンプルで使いやすく魅力的だった。知識獲得を否定したくないが、作る力はまた別問題と思う。

Tweet

↑こちらのツイートはとても共感しました。

また、プロにフィードバックをもらう機会は、"絶対に"作った方が良いです。

最近見つけて良さそうと思ったサービスが、PLUS REVIEWです。料金も1時間4,000円で安いので活用すると良いです。MENTAで探しても良いと思います。

インターネットについての学習

インターネットについては、こちらの1冊がおすすめです。現役でweb制作をやっている方でおすすめしている方もよく目にします。

少しだけ内容が古いと感じた点もあるので、最新の書籍で勉強したい方は、他の書籍でも良さそうです。web制作の場合、インターネットの仕組みを詳細に理解していないといけないわけではないので、基礎的な書籍を選ぶと良いです。

Developer Roadmapsで紹介されている内容

Developer Roadmapsのフロントエンド版では、下記が勉強すべきこととしてあげられています。

  • インターネットの仕組み
  • HTTPとは
  • ブラウザーとその仕組み
  • DNSとその仕組み
  • ドメイン名とは
  • ホスティングとは

これらの概要は、ほとんど前述した書籍でカバーできます。

Point!
詳細まで理解しなくてOK!概要を知れば良いです。

レンタルサーバーを触っておくことは必須

レンタルサーバーを触っておくことは必須です。複数契約して、下記をやっておくと良いです。

  • サイトを公開
  • 新規でWordPressのインストール
  • 1つのドメインに複数WordPressをインストール
  • サブドメでサイトを作る
  • Basic認証をかける
  • リダイレクトをかける
  • SSL化
  • サーバーとドメインの紐付け
  • WordPressで作ったサイトのサーバー移行
  • メールの設定

実際に仕事をしたときに、サーバー関連で事故るのが1番地獄なので、予めよくやりそうなことは抑えておくと安心です。

複数契約し続けるのはお金がかかるので、無料期間で試したり、1ヶ月だけ契約するなどで良いと思います。

自分のテストサーバーとして、ずっと契約しておくのは、エックスサーバーがおすすめです。僕は特別な理由がない限り、クライアントさんにもエックスサーバーをおすすめしています。

【シェアNo.1】安定のエックスサーバーの契約からWordPressのインストールまで解説

実務でよく使うレンタルサーバーは下記の記事で紹介&比較しています。

初心者にもおすすめ!主要レンタルサーバー8商品を徹底比較

HTML・CSSの学習

  1. 基礎学習
  2. デザインデータからコーディングの練習&中級者向けの学習

コーディングはこの順にやりましょう。

基礎学習

基礎学習はドットインストールや書籍でやるのが良いです。Progateを使っても良いですが、Progateだけだと不十分です。

書籍でおすすめは、Webクリエイターボックスを運営するManaさんの2冊です。

基礎学習のための書籍は、最近出たものであれば、何を使っても良いと思います。あまり大きな差はありません。

デザインデータからコーディングの練習&中級者向けの学習

  • デザインデータからコーディングの練習
  • CSS設計
  • Sass

基礎を勉強した後にやるべきことです。


💡 デザインデータからコーディングの練習

デザインデータからコーディングの練習には、僕たちが運営している、模写修行を是非使ってください。まさに『デザインデータからコーディングの練習』をするために作ったサービスです。

コーディング教材の【模写修行】は他の教材と何が違うのか?

模写修行の教材は少し難しめなので、自信がない方は、まずは下記がおすすめです。

書き方は人によって違うので、どれか1つのサイトを参考にするのではなく、全部やってみて自分に合うものを取り入れると良いです。


💡 CSS設計

CSS設計については、このメディアでもいくつか記事を書いています。

【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説【初心者向け】模写修行流CSS設計を紹介!

書籍は下記の記事で3冊紹介しています。

【レビュー記事】CSS設計に関するおすすめの本はこの3冊で決まり!

Developer Roadmapsのフロントエンド版では、CSS設計やこの後説明するSassを必須ではないとしていますが、それはweb開発だからです。確かに、ReactやVueを使ったweb開発では、CSS設計とSassを気にしなくても良い場合もあります。しかし、web制作では必須なので注意してください。


💡 Sass

注意!
Sassにはいくつか種類がありますが、現在推奨されているのは、Dart Sassです。それ以外で解説している書籍や記事もあるので気を付けてください。
【徹底解説】SCSSの書き方まとめ!基本を抑えてコーディング速度向上!
Sassの書き方は、↑こちらの記事がわかりやすくまとまっていて、おすすめです。この記事にあるものを自分でも全部試して書いてみると良いです。

詳しく学べる記事ではありませんが、下記の記事では、VSCodeの拡張機能(プラグイン)を使ってDart Sassを利用する方法を解説しています。

Dart SassをVSCodeの拡張機能(プラグイン)で利用する方法を紹介

僕の知る限り、Dart Sass対応かつ1から学べる書籍はありません。もし書籍で勉強したい方は、LibSassを使っている下記で勉強してから、ググってDart Sassの書き方に変換すると良いかもしれません。Dart SassもLibSassも書き方は大きくは変わりません。

※ LibSassは非推奨なだけで今も使えます。


模写修行では、CSS設計も意識して書かれていますし、配布するコードはDart Sassを使っています。

本気でプロを目指そう!✊

模写修行で練習する

CSSフレームワークは必要ない

Developer Roadmapsのフロントエンド版では、CSSフレームワークも紹介されています。

CSSフレームワークとは、専用のCSSやJavaScriptがあり、それを読み込めばあとは決まったclassを付けるだけで見た目が作れるものです。

<button type="button" class="btn btn-primary">Primary</button>

例えば、こんな感じで、各CSSフレームワークで決められたclassを付けるだけで、ボタンが完成します。

web制作の場合、CSSフレームワークが必要ないと思う理由が下記です。

  • デザインが複雑なため逆に非効率
  • 使う機会がほとんどない
  • 仮に必要になっても調べながら十分対応できる

僕は今まで2,300サイト作ってきましたが、CSSフレームワークを使ってほしいと言われた案件は1件だけです。

CSSが書ける人にとって、CSSフレームワークは難しいわけではなく、正直めんどくさいだけです。

gakuのアイコン

もちろん環境にもよるとは思いますが、多くの方にとって使用頻度が低いと思うので、わざわざ勉強する必要はないと思います。

web開発では、使うことはそこそこあると思います。特に最近は、Tailwind CSSが人気です。

JavaScriptの学習

  • JavaScriptの基礎
  • jQuery(必須ではない)
  • よく使うライブラリ

JavaScriptの勉強では、これらをやると良いです。JavaScriptは奥が深く、色々なことができますが、まずはweb制作に必要なことに絞っています。

JavaScriptの基礎

HTML・CSSの次のステップとして、JavaScriptの勉強を始めると、かなり難しいと感じる方は多いはずです。従って、まずは簡単な書籍から始めると良いです。

  • 最近出た書籍
  • 超初心者向けの書籍

これらの条件で選びましょう。動画の方がよければ、ドットインストールUdemyでも良いと思います。

特にJavaScript Primerは難しめなので、最初の勉強にはおすすめしません。基礎ができてから、もっと深く学ぶのにはとてもおすすめです。

jQuery(必須ではない)

jQueryをやるかやらないかには賛否あります。

jQueryを使わないとできないことや、使うことでの大きなメリットはありません。ただし、web制作ではまだまだ使われているので、やっておいても良いでしょう。改修などでは触る機会があるはずです。

また、初めてプログラミングを勉強する方にとって、素のJavaScriptを使うよりもわかりやすいと感じると思います。

jQuery / React / Vueなどのライブラリやフレームワークを使わないこと。生のJavaScriptやVanilla JSと呼んだりもする。

jQueryもSass同様に最近出た書籍がないので、Udemyなどを活用すると良いです。

よく使うライブラリ

  • Swiper (スライダー)
  • slick (スライダー)
  • GSAP (アニメーション)
  • jQuery

これらはweb制作でよく使うので、触っておくと良いです。前述した通り、jQueryは必須ではないのと、slickはjQueryとセットで使わないといけないので、slickも必須ではありません。

ギャラリーサイトに載っているような、おしゃれでアニメーションが多いサイトを作りたい方は、特にGSAPを頑張りましょう。

以前、ギャラリーサイトSANKOU!の1ページ目のサイトを調査したところ、GSAP使用率 = 34/69 = 49.3%でした。

他にも気になったものは使ってみましょう。このメディアでもいくつか紹介しているので、興味がある方はヘッターメニューのJavaScriptからご覧ください!👍

gakuのアイコン

WordPressの学習

  • WordPressの基礎
  • カスタム3兄弟
  • よく使うプラグイン

これらの順でやると良いです。

一般的なサイトを作る場合、WordPressは難しいというよりは、『仕組みを理解して使えるようになる』ために覚えることが多いといった感じです。

WordPressの基礎

Twitterでは、たにぐちまことさんのUdemyを使っている方をよく目にします。たにぐちさんはYouTubeもとてもわかりやすいので、Udemyも良さそうな気がします。

アキユキさんが運営している、unazukiも評判が良さそうです。

カスタム3兄弟

  • カスタム投稿
  • タクソノミー
  • カスタムフィールド

上記の3つがカスタム3兄弟と呼ばれているらしいです。(僕も最近知りました)

この3つは初心者向けの書籍では紹介していないかもしれません。しかし、web制作ではかなり使うので、必ず勉強しておくべきことです。

補足
前述した、たにぐちさんのUdemyとアキユキさんのunazukiは、カスタム3兄弟を扱っていました。

よく使うプラグイン

WordPressには便利なプラグインがたくさんあります。

プラグインはどのプロジェクトでも必ず使うので、よく使うものは予めいじっておくと良いです。

web制作で使うものは下記の記事で紹介しています。紹介している17個でweb制作で使うものは、かなりカバーできると思います。プラグインを使用する際の注意点などにも触れています。

web制作でよく使うWordPressのプラグイン17選

その他の学習

今まで紹介したもの以外にも、下記がやっておくべきことです。中には必須ではないものもあります。

  • タイピング / ショートカットキー / Emmet / VSCodeの拡張機能
  • Prettier / ESLint
  • SEO
  • Git / GitHub
  • アクセシビリティ対応
  • タスクランナー / モジュールバンドラー

これらについて、1つずつ紹介します。

タイピング / ショートカットキー / Emmet / VSCodeの拡張機能

  • タイピング
  • ショートカットキー
  • Emmet
  • VSCodeの拡張機能

必須ではありませんが、自分の作業効率化のためにやった方が良いことです。

Prettier / ESLint

PrettierとESLintは、かなりざっくり説明すると下記になります。

Prettier / ESLint役割
Prettierコードを自動でフォーマットするもの。
ESLintJavaScriptのコードが正しいか自動でチェックもの。

JavaScriptをゴリゴリ書くようなサイトを作らない場合、ESLintはなくてもさほど不便はありませんが、Prettierはいますぐ入れた方が良いです。

SEO

SEOはアフィリエイターのように、超詳しくなる必要はありませんが、何が検索結果に影響するのか、わかっていた方が良いです。

検索上位を取ることで大きなメリットがあるサイトを作る際は、特に重要です。SEOを分かっている人とそうじゃない人では出せる結果がかなり変わります。

Googleのアップデートが頻繁にあり、検索結果を決めるアルゴリズムに調整が入ります。したがって、最新の情報で勉強しないとあまり意味がありません。

1番良い勉強方法は、ブログを作ってアフィリエイトをやることです。

Git / GitHub

Git / GitHubはweb開発では、どんなプロジェクトでも、ほぼ確実に使います。

web制作で1人で制作する場合、使わない人もいる印象です。僕も使わないこともあります。ただ、どんなプロジェクトでも使った方が良いことは確かです。

  • 複数人で制作・開発する
  • GitHubで管理している既存サイトの改修をする

これらの場合、使うケースが多いので、勉強しておきましょう。

ターミナルやコマンドプロンプトに抵抗がある方は、GitHub DesktopやSourcetreeなどのGitクライアントを使っても良いと思います。

↑1つ目はGitHub Desktop、2つ目がSourcetreeを使った解説記事です。

アクセシビリティ対応

アクセシビリティ対応を勉強できる書籍はほとんどありません。ネット上の情報もあまり多くありませんが、ググりながら勉強するしかないです。

おそらく唯一の書籍が↑こちらですが、2015年出版で古いのが難点です。また、海外の本を翻訳したもので、とても読みにくいです。

僕もあまり自信がない分野なので、今後少しづつ勉強したいと思っています。

タスクランナー / モジュールバンドラー

タスクランナー / モジュールバンドラーを使うと、例えば下記のことが自動化できます。

↓web制作でよく使われるタスクランナー / モジュールバンドラーです。

  • npm scripts
  • gulp
  • webpack

どれか1つでやりたい事は全部できますが、勉強だと思って3つとも触っておくと良いです。ここでnpmやyarnという、パッケージマネージャも使うことになります。

まとめと補足

この記事では、やるべきことの概要を紹介しました。

必須ではないけど、できると良いことも含めると、もっとたくさんあります。細かい部分で抜けているところもあるかもしれません。

どう感じるかは人それぞれですが、やるべきことがかなりあると個人的には思っています。この仕事が好きで、長く続けたい人にしかおすすめできません。


最後に少しだけ宣伝...

模写修行はデザインデータからコーディングの練習ができるサービスです。CSS設計やSassの具体的で実践的な書き方もわかるようになっています。

登録すると無料の教材も見れるので、ぜひご利用ください。

実践的な練習をする!

模写修行で練習する

期間限定&人数限定でメンターもやっています。興味がある方は、まずはお気軽にご相談くださ。下記の記事に詳細や相談フォームがあります。

駆け出しエンジニア/デザイナー向けメンタリングサービスはじめました

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材