おすすめサービス

【現役Web制作者が選ぶ】おすすめの神Web制作の教材まとめ【今後も更新】

【5年目Web制作者が選ぶ】おすすめのWeb制作の教材まとめ

こんにちは、Web制作フリーランスを5年ほどしているしょーご(@samuraibrass)です。

Web制作のおすすめ教材やロードマップはこれまでもまとめていますが、

今回は「かゆいところに手が届く」ような教材を中心に「少数精鋭」でお届けします。

いたずらに沢山紹介することはしません。

  • 基本的なコーディングスキルは身につけたけど、ハイレベルのものが欲しい
  • Web制作のライバルが多くて仕事が取れるかとても不安
  • 実際に仕事が取れても、その後の進め方に不安がある

こういった悩みを持っている方に特に今回紹介する教材はおすすめです。

しょーご

コーディング学習が進んできた方向けですね。

最近はWeb制作関連の情報が多く情報も玉石混交。

またWeb系分野の教材も数多くありますが、正直Web系の教材はかなりピンキリです。

しょーご

買ったけれど、なんか微妙だったなという教材も山程あります。

今回紹介する教材はすべて有料ですが、かなり良質な物に絞ったので、自信ありです。

今の自分が何の教材を買えばいいのか、自分に合った教材を選んで購入できるようになります。

後半には「どれか一つに絞るなら、これを使う」というものも紹介しています。

今後も追記していきますので、ブクマ推奨です。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。エンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

Web制作実務に関連する教材

【超時短】ずぼらコーダーのためのコーディングパーツテンプレート80

【超時短】ずぼらコーダーのためのコーディングパーツテンプレート80

テンプレート利用でコーディング効率をあげよう

コーディング業務では似たような実装を行う機会が多いです。

そこで普段の業務中から頻出パーツを都度ストックしていき、似たパーツが出てきたときに「コピペ→改変」してデザインに合わせていくことがとても多いです。

  • HTML
  • CSS
  • JavaScript(jQuery)

これらで構成されたものです(モーダルなど)

このずぼらコーダーのためのコーディングパーツテンプレート80ではそんな頻出パーツをまとめておいてくれるので、

自分でCSSやHTML構造を少し変えれば、一から自分で書くより素早く実装することができます。

しょーご

プロのコーディングしたものを見るのもとても勉強になりますよ!

【超時短】ずぼらコーダーのためのコーディングパーツテンプレート80

作りながら学ぶGulp4!Web制作で使い回せる初期ファイルを作ろう!【回答付きだから安心】

作りながら学ぶGulp4!Web制作で使い回せる初期ファイルを作ろう!

Gulpでコーディング中の作業を自動化する

昨今のコーディング業務では基本的になんらかの「タスクランナー」を導入し、コーディング業務の細々とした手作業を自動化していることが大半です。

例えば最もWeb制作で使われている「Gulp」を使えば以下のようなことが可能です。

・Sassのコンパイル(dart-sass対応)
 - ソースマップ作成
 - ベンダープレフィックスの自動付与
 - 順番を自動で整理(アルファベット順など)
 - メディアクエリを一つに纏める。
・ライブリロード
・ローカルサーバー立ち上げ
・pugのコンパイル
・キャッシュバスティング
・javascriptファイルのバンドル&ES5トランスパイル(IE11対応)
(※webpackと連携します)
・画像の圧縮 & webp生成

作りながら学ぶGulp4!Web制作で使い回せる初期ファイルを作ろう!を使えば、

そんなGulp環境をわかりやすく導入でき、かつ高機能なものを準備することができます。

しょーご

この教材は私の友人エンジニアが出しているもので、私自身もこのパッケージを使っているので、自信をもっておすすめできます。

作りながら学ぶGulp4!Web制作で使い回せる初期ファイルを作ろう!【回答付きだから安心】

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

Web制作に特化したJS教材

これまでJSの教材は

  • 難しく詳しすぎて辞書のような本
  • フロントエンド開発に特化したガチ本

こういったものがメインで、「Web制作の実務では使いにくい」というのが本音でした。

そこで私が出したものがこちらになります。

しょーご

自分の教材で恐縮ですが…

実際のWeb制作案件で頻出の

  1. ハンバーガーメニュー
  2. ドロワーメニュー
  3. ローディング
  4. スムーススクロールでページトップに戻るのボタン
  5. アコーディオン
  6. モーダル
  7. タブ

こういったものになります。頻出の形なので、実案件ではそのままコピペでも使えるものですし、カスタマイズする力も身につきます。

しょーご

JavaScriptjQueryのコードが2つ並んでいるので、見比べてみるのも面白いです。

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

Web制作の営業方法

WSSクラス

WSSクラス

WSSクラス公式サイト

ブルーオーシャンのエンド営業を徹底的に学ぶ

Web制作の案件獲得はWeb完結で行いたい人が多く、だからこそクラウドソーシングは競争過多になっています。

逆にエンド営業は今とてもブルーオーシャンです

引用:https://m.sooon-web.com/l/c/613og3tc/IU1zG4jl
しょーご

私が今からWeb制作フリーランスとして案件を獲得していくならエンド営業を極めていくと思います。単価が全然違いますね。

仲介を挟まない分、単価が高く、利益も多くなります。

引用:https://m.sooon-web.com/l/c/613og3tc/IU1zG4jl

WSSクラスは「Web制作会社を急成長させた代表」が解説をしているので、

  1. 営業の基礎知識・心構え
  2. サービスの価格設定
  3. 販売ロードマップ・営業方法
  4. 受注率UPのポイント
  5. 継続売上のポイント
  6. MEOなど付加価値の付け方

などとても濃い内容を学べます。

まさひろくん

競争が激しいクラウドソーシングで案件が獲得できるのか不安だし、低単価で消耗もしたくありません

こういった方は、ぜひ活用してください。

WSSクラスの口コミ・評判

とにかく、受講生が結果を出しまくっています。

しょーご

かなりおすすめできるので、今後詳細解説記事を書きます!

公式サイトを見れば、なぜ受講生が成果が出せるのか、よく分かると思います↓

WSSクラス公式サイト

マーケティング

お店のMEO攻略~これを知れば売上あがる~

お店のMEO攻略~これを知れば売上あがる~

Web制作者なら全員身につけておきたいお得知識

MEOは「マップエンジン最適化」の略で、実店舗を持っている人なら必ず設定するべきものです。

よって、例えばあなたが

  • 美容院のサイトを制作する
  • 病院のサイトを制作する
  • レストランのサイトを制作する

こういった機会が将来的に一回でもありそうなら、確実に抑えておきたい知識です。

なんと言っても簡単に学べて設定できるようになるのに、非常にクライアントにありがたられて、店舗の売上寄与の可能性もとても高い

というとても強力なメリットがあります。

しょーご

特にエンド営業を行う人はマストで必要です。追加提案が可能になります。

お店のMEO攻略~これを知れば売上あがる~

契約書

【500部突破!】Web業務委託契約のひな形11点セット(制作、保守、SNS運用代行)

Web業務委託契約のひな形11点セット

ずっと欲しかった「Web制作の契約書の解説&雛形」が手に入る

私はよく駆け出しの方の相談に乗るのですが、高確率で

まさひろくん

実際の案件の契約ってどうすればいいんですか?秘密保持契約?みたいなのってこっちから準備するんですか?

こういった相談を受けます。

実際、契約関連のコンテンツを準備するのはとても大変なのですが、こちらの教材では

  • 契約書の雛形を配布
  • 契約書の解説と、案件毎にどこを改変すればいいか場所の解説

これがセットであるので、

まさひろくん

契約書雛形のどこを改変すればよいのだろう

こういった悩みを持たなくなります。

しょーご

完成度が高すぎて、私が準備をするのは諦めました笑
これで問題ないと思います。

Web業務委託契約のひな形11点セット

フリーランス活動に有益な教材まとめ

ここからはフリーランスになるなら役立つ教材を紹介していきます。

【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開

【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開

フリーランスになるなら、ぜひ血肉にしてほしい神授業

フリーランスは「個人授業主」という言葉にある通り「事業」を行っています。

そしてフリーランス自信は「事業を行う一人社長」と言えます。

コーディング案件を下請けで受けて稼ぐのも、立派な「受託制作事業」です

私がこの教材で学んで血肉にできたことは以下です。

  • Web制作事業のチーム化
  • コーディング以外のブログなどの運営方針
  • 自分の商品設計
  • 他社のWeb上のビジネスアドバイス

事業を行う上でのエッセンスが詰まっているので、活用範囲は広く、まさに

生涯を通じて見続ける講座

と言えます。

しょーご

フリーランスとして本気でバリバリやっていくぜ!という熱い方に強くおすすめしたい!

【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開

【フリーランスの税金・確定申告はこれ】「フリーランス税金で損しない方法を教えて下さい!」で税金知識を!

https://amzn.to/3EOJnAS

この本は「フリーランス税本」と呼ばれています。

私は駆け出しフリーランスの方から

まさひろくん

フリーランス独立興味あるんですが、確定申告?とかがとても怖くて…難しいですよね?

と相談されますが、正直個人が受託で稼ぐ分には対して大変ではありません。

しょーご

まあ年商が1000万を超えたら消費税が来て多少大変にはなりますが、私はまだ税理士なしで個人で会計できていますし。

この「フリーランス税本」を読んでおけば

  • 確定申告の仕組み(サラリーマン副業も含む)
  • 実際に用意しておくもの
  • 確定申告の方法
  • 退職後にしておくこと

こういったものが一括で理解できるので、フリーランスになる前に読んでおいても全然良いと思います。

しょーご

今回紹介しているものの中では、一番手に取りやすい金額だと思いますし、絶対読んでおくべき本なので、ぜひ!

どれか一つに絞るとしたら?

私が「この中から一つ絞れ!」と言われたら、かなり迷いますが「WSSクラス」を利用しますね。

そもそもWeb制作の技術を学んだ後に必ずぶつかる疑問が

まさひろくん

Web制作の案件ってどうやって獲得すればいいのでしょうか…?コネはないし、友人もあまりいないし…

こういったものでしょう。

WSSクラス」ではWeb業界の各分野のプロが運営に参画しているので、クオリティもとても高いです。

引用:https://m.sooon-web.com/l/c/613og3tc/IU1zG4jl
しょーご

私の周りで、いきなりめちゃくちゃ結果出るようになった方は、高確率で「WSSクラス」を受講していますね!

サイト内でディレクションや営業合宿などの情報も乗っているので

駆け出しさん

営業で案件取った後のディレクションとか外注も心配!

という方は、その不安も解消されますよ。

引用:https://m.sooon-web.com/l/c/613og3tc/IU1zG4jl

\Web制作のエンド営業を学ぶなら、ここ一択!/

さいごに

今回の教材は

  • みんなが実はほしいと思っていた or
  • あまり知られていないが、知っておくと差をつけられる

こういった尖った教材に絞ってありきたりのものは紹介しませんでした。

その分とても良質なものを厳選して紹介できたので、ぜひそれぞれの教材を見てみてください!

しょーご

今後もこの記事に有用教材を追加してきますね!

Web制作の独学ロードマップを公開しています

Web制作の案件獲得方法はこちらで解説

Web制作の案件の進め方はこちら

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!