こんにちは、Web制作フリーランスを5年ほどしているしょーご(@samuraibrass)です。
Web制作のおすすめ教材やロードマップはこれまでもまとめていますが、
今回は「かゆいところに手が届く」ような教材を中心に「少数精鋭」でお届けします。
いたずらに沢山紹介することはしません。
- 基本的なコーディングスキルは身につけたけど、ハイレベルのものが欲しい
- Web制作のライバルが多くて仕事が取れるかとても不安
- 実際に仕事が取れても、その後の進め方に不安がある
こういった悩みを持っている方に特に今回紹介する教材はおすすめです。
コーディング学習が進んできた方向けですね。
最近はWeb制作関連の情報が多く情報も玉石混交。
またWeb系分野の教材も数多くありますが、正直Web系の教材はかなりピンキリです。
買ったけれど、なんか微妙だったなという教材も山程あります。
今回紹介する教材はすべて有料ですが、かなり良質な物に絞ったので、自信ありです。
今の自分が何の教材を買えばいいのか、自分に合った教材を選んで購入できるようになります。
後半には「どれか一つに絞るなら、これを使う」というものも紹介しています。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
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制作案件で頻出の
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るのボタン
- アコーディオン
- モーダル
- タブ
こういったものになります。頻出の形なので、実案件ではそのままコピペでも使えるものですし、カスタマイズする力も身につきます。
JavaScriptとjQueryのコードが２つ並んでいるので、見比べてみるのも面白いです。
【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
Web制作の営業方法
WSSクラス
ブルーオーシャンのエンド営業を徹底的に学ぶ
Web制作の案件獲得はWeb完結で行いたい人が多く、だからこそクラウドソーシングは競争過多になっています。
逆にエンド営業は今とてもブルーオーシャンです。
私が今からWeb制作フリーランスとして案件を獲得していくならエンド営業を極めていくと思います。単価が全然違いますね。
仲介を挟まない分、単価が高く、利益も多くなります。
WSSクラスは「Web制作会社を急成長させた代表」が解説をしているので、
- 営業の基礎知識・心構え
- サービスの価格設定
- 販売ロードマップ・営業方法
- 受注率UPのポイント
- 継続売上のポイント
- MEOなど付加価値の付け方
などとても濃い内容を学べます。
競争が激しいクラウドソーシングで案件が獲得できるのか不安だし、低単価で消耗もしたくありません
こういった方は、ぜひ活用してください。
WSSクラスの口コミ・評判
とにかく、受講生が結果を出しまくっています。
私も受講してみたのですが、あまりに凄いのでめちゃくちゃ詳しい記事を書いてしまいました。
＼WSSクラスの内容や評判・口コミはこちらから／
＼最短最速で大きな成果を安定して出せる／
マーケティング
お店のMEO攻略~これを知れば売上あがる~
Web制作者なら全員身につけておきたいお得知識
MEOは「マップエンジン最適化」の略で、実店舗を持っている人なら必ず設定するべきものです。
よって、例えばあなたが
- 美容院のサイトを制作する
- 病院のサイトを制作する
- レストランのサイトを制作する
こういった機会が将来的に一回でもありそうなら、確実に抑えておきたい知識です。
なんと言っても「簡単に学べて設定できるようになるのに、非常にクライアントにありがたられて、店舗の売上寄与の可能性もとても高い」
というとても強力なメリットがあります。
特にエンド営業を行う人はマストで必要です。追加提案が可能になります。
契約書
【500部突破！】Web業務委託契約のひな形1１点セット（制作、保守、SNS運用代行）
ずっと欲しかった「Web制作の契約書の解説&雛形」が手に入る
私はよく駆け出しの方の相談に乗るのですが、高確率で
実際の案件の契約ってどうすればいいんですか？秘密保持契約？みたいなのってこっちから準備するんですか？
こういった相談を受けます。
実際、契約関連のコンテンツを準備するのはとても大変なのですが、こちらの教材では
- 契約書の雛形を配布
- 契約書の解説と、案件毎にどこを改変すればいいか場所の解説
これがセットであるので、
契約書雛形のどこを改変すればよいのだろう
こういった悩みを持たなくなります。
完成度が高すぎて、私が準備をするのは諦めました笑
これで問題ないと思います。
フリーランス活動に有益な教材まとめ
ここからはフリーランスになるなら役立つ教材を紹介していきます。
【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開
【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開
フリーランスになるなら、ぜひ血肉にしてほしい神授業
フリーランスは「個人授業主」という言葉にある通り「事業」を行っています。
そしてフリーランス自信は「事業を行う一人社長」と言えます。
コーディング案件を下請けで受けて稼ぐのも、立派な「受託制作事業」です
私がこの教材で学んで血肉にできたことは以下です。
- Web制作事業のチーム化
- コーディング以外のブログなどの運営方針
- 自分の商品設計
- 他社のWeb上のビジネスアドバイス
事業を行う上でのエッセンスが詰まっているので、活用範囲は広く、まさに
生涯を通じて見続ける講座
と言えます。
フリーランスとして本気でバリバリやっていくぜ！という熱い方に強くおすすめしたい！
【ビジネスモデルマスター講座】全ての商売に共通する仕組みの作り方を大公開
【フリーランスの税金・確定申告はこれ】「フリーランス税金で損しない方法を教えて下さい！」で税金知識を！
この本は「フリーランス税本」と呼ばれています。
私は駆け出しフリーランスの方から
フリーランス独立興味あるんですが、確定申告？とかがとても怖くて…難しいですよね？
と相談されますが、正直個人が受託で稼ぐ分には対して大変ではありません。
まあ年商が1000万を超えたら消費税が来て多少大変にはなりますが、私はまだ税理士なしで個人で会計できていますし。
この「フリーランス税本」を読んでおけば
- 確定申告の仕組み（サラリーマン副業も含む）
- 実際に用意しておくもの
- 確定申告の方法
- 退職後にしておくこと
こういったものが一括で理解できるので、フリーランスになる前に読んでおいても全然良いと思います。
今回紹介しているものの中では、一番手に取りやすい金額だと思いますし、絶対読んでおくべき本なので、ぜひ！
どれか一つに絞るとしたら？
WSSクラス受講のススメ
私が「この中から一つに絞れ！」と言われたら、かなり迷いますが「WSSクラス」を利用しますね。
そもそもWeb制作の技術を学んだ後に必ずぶつかる疑問が
Web制作の案件ってどうやって獲得すればいいのでしょうか…？コネはないし、友人もあまりいないし…
こういったものでしょう。
「WSSクラス」ではWeb業界の各分野のプロが運営に参画しているので、クオリティもとても高いです。
サイト内でディレクションや営業合宿などの情報も乗っているので
営業で案件取った後のディレクションとか外注も心配！
という方は、その不安も解消されますよ。
正直、これを推したくてこの記事を書いたのが本音です笑。自分が駆け出しのときに一番欲しかったサービスです。
なので、自信を持っておすすめできます！
＼WSSクラスの内容や評判・口コミまとめはこちらから／
＼Web制作のエンド営業を学ぶなら、ここ一択！／
さいごに
今回の教材は
- みんなが実はほしいと思っていた or
- あまり知られていないが、知っておくと差をつけられる
こういった尖った教材に絞ってありきたりのものは紹介しませんでした。
その分とても良質なものを厳選して紹介できたので、ぜひそれぞれの教材を見てみてください！
今後もこの記事に有用教材を追加してきますね！
Web制作の独学ロードマップを公開しています
Web制作の案件獲得方法はこちらで解説
Web制作の案件の進め方はこちら
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
今後も追記していきますので、ブクマ推奨です。