【はじめての方はこちらをクリック!】《独学応援ブログ》では、Web制作の独学・営業・案件の進め方などのお悩み解決につながる記事を書いています。

【2024年版】Web制作 独学応援ロードマップ〜完全未経験から月収50万円以上を実現!Progateからポートフォリオ制作までを完全解説

平均読了時間→ 9

この記事では、Web制作を独学で学びたい方に向けて、実際に完全未経験の30歳高卒会社員からフリーランスのコーダー/Webディレクターとなった筆者が、低予算で無駄なく独学する方法を解説します。

あなたの環境や計画に合わせつつ、6ヶ月を目安に取り組んでみてください。

30代・会社員

高卒・30歳・未経験のサラリーマンです。本当に完全独学でWeb制作を学んで稼げるようになるんですか?

30代・主婦

自分の独学方法に自信がありません。スクールに通うべきかもしれませんが、子育て中でもあるので、なるべく低予算で勉強したいです…

結論、Web制作は独学で習得できます

デイトラSLashで質の高い教材を揃えて一気に学習する人もいれば、かつての僕のように市販の書籍や動画を頼りに完全独学の道を選ぶ人もいるでしょう。

それらはどちらでも十分に価値のある自己投資ですから、自分の人生の目的を果たすために必要だと信じられるなら、あとは挑戦あるのみです。

しかし、ここにひとつの問題が浮上します。

いきなりそんなに大胆な挑戦なんてできなくないですか?笑

「可能性を感じたらとりあえず突っ走るタイプの人」ならともかく、まともな人は色んなリスクを考えて慎重に行動するものですよね。

自分にWeb制作が向いているのかどうかも怪しいでしょうし、理想通りに稼げるかも疑問でしょう。

ということでこの記事では、前半で「Web制作で稼ぐってどういうこと?」という疑問に答えたり、独学に挑戦する前にやっておくべき準備について解説。

その後、実際の独学方法について長めに説明した上で、記事の後半では身につけたスキルレベルを証明するためのポートフォリオ作りを行い、最後に案件獲得に向けたステップへと進みます。

「Web制作はオワコン」とか「AIが進化したら仕事なくなる」なんて理由で諦めるより、「オワコンになる前に稼いだろ」っていうマインドで今すぐスキルを身に着けたい方なら、誰でも毎月50万円以上稼げるようになるのがWeb制作。

この記事があなたの背中を押し、独学成功の一助になれば幸いです。

それでは、いってみましょう!

この記事を読んでほしい人
  • Web制作で稼げるようになりたい人
  • 在宅で稼げるスキルを身に着けたい人
  • Web制作を学んで副業や転職を成功させたい人
  • 自分にWeb制作が向いているのかわからない人
  • できるだけお金を無駄にせず、節約しながら独学したい人

【2024年6月追記】おかげさまでこの記事単体の累計閲覧数が5万PVを超えました。これほどたくさんの方に読んでいただき、ご感想をいただけているWeb制作の独学ロードマップは他にないと思います。すべての読者の方に感謝申し上げます。これからもこの記事をきっかけに独学を成功させられる人が増えることを願いながら更新し続けてまいりますので、引き続きよろしくお願いいたします。

本記事の目次

Web制作で稼げるようになるまでの5STEP

独学方法を説明する前に、まずは未経験から独学でWeb制作を仕事にするまでの流れを確認しておきましょう。

これを知らずに独学に取り掛かってしまうと、迷いや不安が生じたときに挫折しやすくなってしまいますからね。

僕も何度か挫折しかけましたが、それは「Web制作を仕事にする」という自分の選んだ道に自信を持てなかったことが大きな要因でした。

ということで、まずは結論から。

下記が高卒底辺サラリーマンだった僕が独学でWeb制作を学び、7ヶ月後に単価50万円のWeb制作案件を受注できるようになるまでに辿り、他の方々でも十分に再現可能だと確信している5ステップです。

  1. Web制作スキルを身につける
  2. 実績を作るために採算度外視で営業する
  3. 実績を武器に信用していただき単価を上げてもらう
  4. 外注先を見つけて仕事を増やす
  5. 営業・制作を仕組み化

① Web制作スキルを身につける

Web制作で稼ぐということは、Web制作という商品を提供できるようにならないといけません。

Web制作を仕事にするなら、せめてデイトラを卒業できるくらいの実力は必要です。

スクールに通わずに独学で学びたい方は、この独学ロードマップ記事をご参考ください。

② 実績を作るために採算度外視で営業する

スキルを身に着けたら、今度は自分にそれができることを知ってもらう段階。

多くの方はここでいきなり大きく稼ごうとして挫折し、副業やフリーランスを諦めていきますが、この段階で調子に乗るのは早すぎます。

まずは認知と信用を高めていきましょう。

※詳しい方法は『案件獲得ロードマップ』で解説しています。

③ 実績を武器に信用していただき単価を上げてもらう

ここはすごく単純で、②の段階でどれだけ丁寧で真摯な対応をしたのか?がポイント。

クライアントに「こんな単価じゃ申し訳ないな」と感じさせる仕事をすることで、自然と単価を上げていくわけです。

仕事として充実してくるのはこの段階から。

④ 外注先を見つけて仕事を増やす

②〜③を繰り返していくと依頼や相談が増え、自分ひとりでは対応しきれなくなってきます。

そこで信用できるの外注先をポジションごとに見つけておき、受注できる数を増やすことで、仕事の幅を広げていくというわけです。

独立を考え始める段階でもあります。

⑤ 営業・制作を仕組み化

制作体制を整え、様々なご相談に対応できるようになると、クライアントからお知り合いの方をご紹介いただけたり、制作パートナーから仕事の依頼を相談されるようになるでしょう。

独学や営業に終わりはありませんが、この状態こそが「理想のフリーランス人生」ですよね。

以上がWeb制作で稼げるようになるまでの5STEPでした。

なんとなくでもイメージはできましたか?

正直、完全にひとりで全行程をこなすのは難しいです。

早い段階でメンターを見つけるなり、コミュニティやSNSでフリーランスの方々に交流するなどして、ブレない環境に身を置きましょう。

そもそも、独学って誰かの応援がないと99%挫折しますからね。

僕が《独学応援サロン》を立ち上げた理由もこれですが、いずれにしても、今はまだ夢物語に思えるかもしれない「Web制作で稼ぐ!」という目標も、それを夢物語で終わらせるか現実にできるかはあなたの行動次第。

まずは最初の一歩を踏み出しましょう!

独学におすすめのブログ

正直、独学方法って人ぞれぞれです。

なので、この記事で説明している手順が自分には合わないと感じたからといって、独学を諦めないでください。

当ブログ以外でも実務を見据えた再現性の高いロードマップをご紹介しますので、色んな方の勉強方法を比較して、自分が最もマネしやすいロードマップを見つけていただければと思います。

manablogブログのスクリーンショット
①manablog
はらブログのスクリーンショット
②はらブログ
じゅんぺいブログのスクリーンショット
③じゅんぺいブログ

独学をはじめる前に確認しておくこと

稼げるようになるまでの道のりをイメージしたところで、今度は実際に動きだす前に考えておくべきことを理解していきましょう。

  1. 目標の明確化
  2. 家族への説明
  3. 学習の習慣化
  4. メンターの確保

目標の明確化

まずは最終目標を設定しましょう。

独学前に考えておくべきことの中でも、これが最重要です。

多くの方は「ホームページを作れるようになりたい」とお考えでしょうが、なぜそう考えてるのかがハッキリしていないとモチベーションを維持するのは難しいものです。

何よりも、ゴールが明確でないと毎日なんのために頑張っているかが分からなくなりますからね。

そこで、考えておくべきことは以下の4つ。

CHECK!
  1. Web制作を学んで、何をしたいのか?
  2. 目指すのは「副業」?「専業フリーランス」?
  3. いつから仕事にしたいのか?
  4. 年間にいくら稼ぎたいのか?

「Webを通じて地元に貢献したい」、「自分の腕で今よりも稼ぎたい」、「30歳までにFIREしたい」など、理由は何でも構いません。

何はともあれ、Web制作という仕事(手段)によって実現したいことを言葉にしておくことが大切です。

また、「副業」と「専業フリーランス」とでは必要なスキルが異なります。

独学に終わりはないので、仕事としてはじめる時期や働き方、目標収益額をある程度は決めておかないと、いつまでも学習段階から抜け出せませんしね。

独学に踏み切る前に、まずはこのあたりをハッキリさせておきましょう。

Web制作で稼ぎたい!とか言いながらWeb制作のことを調べずに勉強している無謀なあなたへ
Web制作がどんな仕事なのかも知らずに独学しようとしてる人はこちら↑

家族への説明

周囲の理解なくして、独学は続けられません。

特に仕事や子育ての合間で独学を続ける場合、ご家族の理解を得られている人とそうでない人とでは、営業に踏み切るまでに半年以上の時間差が生じます。

過去には、「ご家族の理解を得られておらず、せっかくスキルを磨いて仕事を掴んだのにWeb制作を続ける自信がなくなった」と泣きながらご相談いただいたこともありました。

これはあくまで極端な事例ですが、独学当初にしっかりとご家族と話し合い、仮に反対されたとしても挑戦する期限を設けてその間だけは応援してもらうなど、交渉の方法はあると思います。

独学〜副業を続けるために、ここは必ず無視できないポイントです。

学習の習慣化

目標を決めたら、今度は継続して勉強できる環境を確保しましょう。

当たり前に思われるかもしれませんが、独学を継続できない方はここを実行できていないことがほとんどです。

「新しいことをはじめる」というのは非常に立派な判断ですが、それをやり続けられなくては本末転倒。

あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中で勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。

ここで設定した時間は、そのまま将来の副業に充てられる時間になります。

また、一般的には「合計1000時間の学習で案件を獲得できるくらいになれる」といわれていますから、まずはこれを達成することを最初の目標として「はじめること」。次に、これをやり切るために「続けること」が大切です。

ちなみに、僕は1000時間勉強するのに3〜4ヶ月くらい掛かりました。

習慣化のコツ

とはいえ、習慣にするのって大変だと思いませんか?

そこで想像してみてほしいことがひとつ。

どんなに疲れていても、歯を磨かない日って滅多にないですよね?

それはきっと、あなたにとって歯磨きがそれだけ優先度の高いものとして考えられているからでしょう。

言い換えれば、モチベーションに左右されていないわけです。

そこで、最終的には「歯磨き」と「勉強」を同じくらい優先度の高いものとして認識してください。

モチベーションに左右されないくらい自分の中で優先度を高める。

独学を継続させるコツはこれに尽きます。

三日坊主を卒業するための戦略。
もはや全人類に必須の知識です。
「Web制作はオワコン」は言い訳。【独学を成功させる3つの心構え】のサムネイル
独学を継続させる3つポイント。
独学を諦める前に読んでください。
成功者マインドを2記事で紹介。
あなたは何個当てはまりますか?

メンターの確保

経験者からフィードバックをもらえる環境に身を置いてください。

多くのスクールや有料コミュニティはこれを最大の売りにしてるわけですが、結局のところ学習において最も有益なのは第3者の意見です。

  • 自分の目標達成に向けて、今の学習方法で合ってるのか?
  • 答えを見てもさっぱりわからない!どうすればいいのか?
  • 営業するといっても自分の何を売り込めばいいのか?

こうした悩みは経験者に相談することでしか解決できないことであり、自分ひとりで悩んでいても解決するのはいつになるか検討もつけられません。

時間の使い方や独学のコツは当ブログでもそれぞれ解説していますが、自分ひとりで悩まず、何度考えても分からないことを相談できる人をできるだけ早いうちに見つけておくことも独学成功の秘訣です。

スクールに通わないと決めた場合は、できるだけ早くMENTAなどでメンター(伴走者)を探しておきましょう。

独学だからこそ、独学・営業・案件対応を相談できる相手が必要ですよね。
独学仲間やフリーランスとつながれる完全無料のコミュニティ!

当ロードマップの構成について

この章の最後に、当ロードマップの進め方についてご説明します。

学習順は以下のとおりです。

CHECK!
  1. HTML&CSS
  2. jQuery(JavaScript)
  3. WordPress / Shopify
  4. ポートフォリオ制作
  5. 営業活動

この工程を3ヶ月〜1年でやり遂げ、安定して稼げる状態を目指すロードマップになっています。

いずれも、僕が会社員として毎日10時間以上勤務しながら夜な夜なコツコツと取り組んで学習できたものですので、再現性はあると思います。

月収100万円以上を目指したい方はこのあとにWebマーケティングなどの勉強も必要ですが、それはまだ先の話なので、本記事ではこれから駆け出したい方のための基礎学習に焦点を絞りますね。

このロードマップが、あなたの人生をステキにするキッカケとなること切に願っています。

HTML&CSSを完全独学でマスター

それではさっそくはじめましょう!

今日からの1〜3ヶ月で、あなたはWeb制作において必須言語であるHTML&CSSというマークアップ言語の基礎を習得し、シンプルなデザインならそのとおりにマークアップできるようになります。

スケジュールは以下のとおり。

HTML&CSSの学習スケジュール

5STEP スケジュール
  1. ドットインストールで雰囲気をつかむ(30分)
  2. Progateで勉強(1週間〜1ヶ月)
  3. YouTubeで復習(1〜3日)
  4. 本で復習&サイト作りに挑戦(1週間〜1ヶ月)
  5. デザインカンプのコーディングに挑戦(2週間〜3ヶ月)

正直、完全独学でWeb制作を学んで最短コースで実力をつけたいならデイトラのWeb制作コースが圧倒的におすすめです。

僕もこれまでに何十人というデイトラ卒業生たちと仕事をしてきましたが、お世抜きで実力不足な人はいませんでした。

とはいえ、決して気軽に支払える受講料金ではありませんし、ぶっちゃけほぼ無料でデイトラ卒業レベルの実力をつけることは可能です。

ということで、ここからが本題です。

これから解説する5STEPですが、まずはSTEP1~STEP4でHTMLとCSSの基礎を理解します。

そして、STEP5で徹底的にアウトプットを繰り返し、スキルを磨き上げていきます。

人によって一日あたりの勉強時間は異なりますから、あっという間に進められる方はどんどん先へ進んでいただいて構いません。

しかし、倍以上の時間を費やしてもも無理そうな方は、学習環境や取り組み方に改善点があるかもしれませんので、一度X(Twitter)のDMで僕にご相談いただければと思います。

《独学応援サロン》のメンバーなら、Zoomでの相談も初回は無料で対応させていただきます。

「最終目標」「これまでの経緯」「現在の課題」を教えていただければ改善方法を検討・提案させていただきますので、ぜひお気軽にご相談くださいませ。

デイトラ卒業生の評判はなぜ高いのか?【Web制作者目線で調べてみました】のサムネイル
デイトラって本当にすごいの?って方はこちら↑
時間の使い方に悩んでる人はこちら↑

STEP1:ドットインストールで雰囲気をつかむ

それではスタートです!

最初はそもそも「HTML&CSSって何なのか?」をざっくり学びます。

ここで登場するのがドットインストール

1本2分前後の短い動画で解説してくれる定番サイトで、HTMLなどの基礎的なことについては無料ですべて閲覧可能です。

ということで、HTMLの無料部分を30分ほどでサクッと観てみましょう。

このときに、動画を観ながら実際に自分でテキストエディタにコードを書いてもいいですが、このロードマップでは同じような作業をSTEP2で行うので、今回は本当に観るだけでいいです。

そして、この時点で「プログラミングって思ってたより簡単じゃん」と思えたあなたには、控えめに言ってプログラミングの才能があります。

多くの人はこの時点で「面倒」とか「ややこしい」などといった拒否反応が出るらしいので、ここでプログラミングを嫌いにならなかったのならもう立派に僕たちの正式な仲間です(笑)

ぜひ最後まで走りきっていただいていので、諦めかけたらいつでも質問してくださいね。

勉強方法の確認

ここで注意点をひとつ。

60%理解したら次に進む、を徹底してください。

ドットインストールの動画を観るときも、一本の動画を3回も4回も繰り返す必要はありません。

あくまでも「何が出来るのかを知ること」がSTEP1の目的です。

Web制作は本番の仕事中も分からないことは検索しながら対応できるものです。

ただし、何ができるのかを知らないと調べようもありません。

間違ってもこの段階で100%理解しようとはしないようにご注意くださいね。

ここまで頑張ったら、STEP1は終了です。

次へと進みましょう!

STEP2:ProgateでHTML&CSSのFlexbox編まで挑戦

独学でプログラミングを勉強する上で、誰もが必ずお世話になるProgate

無料でも各言語の触りくらいは学べますが、有料版は月額980円で様々な言語を開発環境を用意せずに学ぶことが出来る、初心者にとことん優しいサービスです。

「このサイトの登場でプログラミング学習のハードルはかなり下がった」と、ホリエモンも言ってました。

HTMLやCSSくらいならテキストエディタをダウンロードすればいいだけですが、サーバー上で動くPHPとかになってくると色々と事前準備が大変なので、Progate登場以前はそれだけでハードルが高かったはずですからね。

ちなみに、僕もプログラミングを勉強しようと決心したまさにその日(2020年2月11日)にProgateに課金しましたが、今となっては人生最良の決断だったと本気で思っています。

ここで学んだ基礎知識とここで得た自信が現在の僕の大きな基盤ですし、同じように考えている人は多いはず。

参考までに…

僕は3ヶ月間Progateにお世話になりました。

最終結果はこんなです。

約10週間で10言語を学び、その内の1言語はWeb制作に不必要だと悟って放棄しました(笑)

みなさんにも、Ruby以外は必ず挑戦してほしいです。

HTML&CSSに挑戦

ということで、さっそく課金してここからは実際に手を動かしつつ「HTML&CSS」という講座にチャレンジしましょう。

休みの日に朝から一気に全部やるのもありですし、僕みたいに朝起きて1講座ずつやるのもありですが、後者のパターンでもだいたい3日もあれば余裕で学習できる量です。

「学習コース」と「道場コース」に分かれていて、「道場コース」というのは応用問題です。

もちろんここでも、検索して答えを探しながら挑戦して大丈夫です。

たまに「Progateの道場コースで挫折した」などといったツイートも見かけますが、恐らくは真面目に自分の実力を推し量ろうとして、記憶している知識だけで道場に挑んでしまったんだと思います。

そんなすぐに記憶できるわけがありませんし、正直無理して暗記する必要もない(知りたいときに検索すればいい)ので、僕たちはネット上の知識を総動員して、道場を破っていきましょう(笑)

Flexbox編

Progateにおいて、HTML&CSSの最終章は「Flexbox編」です。

この「Flexbox」とはCSSをつかったレイアウト方法のことです。

「好きな位置に好きなものを配置できること」がWeb制作において必須スキルとなりますが、Flexboxはそのために必ず知っておくべき知識ですので、決して無視せずしっかり挑戦してください。

ここまで終わったら、次のステップに進みましょう!

Web制作の学習において、Progateはチュートリアルです。

STEP3:たにぐちまことさんのYouTubeで理屈を学ぶ

ここまで「60%理解したら次に進んでください」と言ってきた僕ですが、この辺で一旦立ち止まり、頭の中を整理していきます。

STEP 3では動画、STEP 4では書籍で復習しましょう。

ということで、ここで観るのがUdemyでもお馴染みのたにぐちまこと(@seltzer)さんのYouTube。

控えめに言って「超有料級の動画」です。

CSS Gridなどなど、Progateでも学べなかったとても有益なことをさらっと解説してくれます。

これこそが僕のとっておきであり、独学の要!

たにぐちさんは小学生の頃からプログラミングに触れてきたという根っからのエンジニアの方ですが、とにかく説明が丁寧で分かりやすいのが特徴。

Progateでなんとなく分かった気になっている知識を、ここで理屈から説明してもらうことでしっかりと学び、理解を深めましょう。

観れば観るほど、無料でいいのかなと心配になりますよ(笑)

HTML編の7本とCSS編の9本を観て、ここまでの復習を行いましょう。

余談ですが、僕は動画で学ぶときに必ず1.5~2倍速で観ています。
集中力が高まりますし、単純に時短にもなるので、もしよければ真似してみてください。
特にたにぐちさんの優しい語りは心地よすぎて…笑

さらに余談ですが、たにぐちさんのUdemyの講座もオススメです。

YouTubeを観てみて「もっと詳しくたにぐちさんから学びたい!」と思った方は、Udemyでたにぐちさんの講座を探してみてください。(※これは案件ではございませんw 僕の個人的なオススメですw)

たまにこうやって割引クーポンが配られたりして、1,000円くらいでダウンロードできちゃうこともあります。

STEP4:「世界一分かりやすい参考書」でWebサイト作りに挑戦

学習開始からここまではあっという間だったと思いますが、いかがでしたでしょうか?

ほんの1週間程度で、すっかり超素人だった頃から格段に知識が増えてると思います。

ということで、ここからはとにかくコードを書いていきましょう!

ここでは世界中で翻訳された解説書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版]」を読みながら、しっかりとしたサイトを作っていきます。

信じられないかもしれませんが、ここまで勉強したあなたには既にサイトを作る十分な基礎知識が備わっているんです。

なので、ここからはアウトプットを続けて学んだ知識を自分の力に変えていく番ですよ。

この本はとにかく解説が丁寧で、中学生でもこの本を読みながらHTMLとCSSを学べるくらいですから、まさに初心者にはうってつけの一冊です。

逆に背伸びして少しでも小難しい本を買ってしまえば、そこで挫折することになりかねないので要注意。

「初心者にも優しいわかりやすい説明」と「少し慣れてきたときにめっちゃ助かる豆知識が網羅されている」というのがポイントです。

もちろん分からないことはいつでも検索すればいいのですが、紙の本ならデバイスの充電なども心配することなくいつでも確認できますから、Webも本も上手に活用して、時間を無駄にせず勉強していきましょう!

この本では、実際にWebサイトを作りながら体系的にWeb制作を学べます。

ここまではテキストエディタも使わずに進んできましたが、いよいよ本格的になってきますね。

マジで全部ぼくが実際に学んだ教材の中から難易度別に厳選しました。

STEP5:デザインカンプのコーディングに挑戦

デザインカンプのイメージ画像
https://webdesigner-go.com/coding/xd/

ここまでたどり着いたあなたはもう立派に初心者です!

多くの人が「難しそう」と考えているプログラミングの世界に、しっかりと足を踏み入れています。

折り合えし地点であるここからは、これまでに学んで知識を総動員させながらスキルを磨いていきましょう。

ということで、デザインカンプに挑んでいきましょう。

デザインカンプとは?

「デザインカンプ」とは、デザインの完成見本図のこと。

実案件では2つの目的でデザインカンプを用意するのですが、今回はあくまでコーディングの練習教材として使用しましょう。

これに挑戦することで、ここまでに身に着けたHTML&CSSの基礎知識をしっかりアウトプットして、実案件さながらの脳の使い方も体験できます。

覚悟を決めて挑みましょう!

デザインカンプの目的
  • クライアント様との認識のズレを防ぐため
  • 制作サイドでの認識のズレを防ぐため

デザインカンプはCodejumpでゲット

これが全部無料ってすごいですよね。

ここでは、Codejumpというとても便利な無料サイトのお世話になりましょう。

僕が勉強していた頃にはなかったサイトですが、はじめて見たときは「なんでもっと早く作ってくれなかったの!」って憤りました。

レベル別に色んなデザインカンプと必要素材、解答例となるコード一式が用意されていますので、まずは一番カンタンなやつから挑戦してみましょう。

どんなコードを書いても大丈夫です。

大切なのは「デザインカンプ通りであること」。

これは普段Webの仕事をしていて常に感じることでもありますが、やっぱりコーダーさんに一番求めたいのは「ほぼピクセルパーフェクト」

完璧である必要はないんですけど、とはいえ、デザインをどれだけ正確に再現してくれるかでコーダーとしての評価は分かれますし、再現度の高い方には半永久的に仕事をお願いしたくなるものです。

というわけで、まずは初級編のデザインカンプで「カンプからコーディングする」という作業に慣れてください。

他にもたくさん挑戦してスキルアップしたい!という方へ

Codejumpも有料版ではかなり本格的なカンプに挑戦できますが、無料版だと中級編とかでも物足りない方はいるでしょう。

そこで、ここではCodejump以外のおすすめも挙げておきますね。

特にデイトラの講師でもあるしょーごさんの演習課題はかなり実践的

僕が完全独学で頑張っている方のメンターをさせていただくときには、「しょーごさんの演習課題をすべてクリアしたら営業に踏み出せる」とお伝えしています。

この段階は時間を掛けて取り組む価値があるところですので、自分の知識とググる力だけを信じて乗り越えてください。

特に「ググる力」を鍛えることは、Web制作者としても、社会人としても、非常に大きなアドバンテージとなります。

課題のレベルによってはjQueryなどが必要なものもありますが、それは追々勉強してからで大丈夫です。

ただし、最終的にコーダーとして営業をはじめるなら、最低限しょーごさんのコーディング演習課題(中級EX)までは難なくコーディングできるレベルを目指しましょう

★しょーごさんのコーディング演習課題シリーズ
デイトラ講師による独学教材の大定番!
★くりのすけさんのWEBクリエイターコンプリートパック
こっちもおすすめ!

おまけ:案件を調べてみる

さて、デザインカンプをコーディングできるほどの知識を身に着けたとなると、ようやくこの段階で案件のレベルをイメージできるようになってきます。

少なくとも完全ド素人ではなくなっているので、さっそく色んなクラウドソーシングに登録して案件の内容を見てみましょう。

まだ応募するには早いですが、この段階から世の中で求められているレベルを知ることで目指すべき学習レベルを具体的にイメージできるようになり、そのことが今後の独学において非常に重要になってきます。

目標を把握できていないと、走り続けることはできないですからね。

まずはそれぞれの掲載案件をチェック!

クラウドワークス

クラウドワークスのスクリーンショット
知名度抜群の国内最大手!

クラウディア

クラウディアのスクリーンショット
会員登録者数は国内トップ!

ランサーズ

ランサーズのスクリーンショット
企業案件多数&充実の他サービス連携!

ココナラ

ココナラのスクリーンショット
待ちの姿勢でも案件獲得!

ここまでを10秒でまとめましょう。

ということで、ここまでが「HTML&CSSを完全独学でマスター」でした。

ちなみに僕は、この段階ではじめて自分のポートフォリオを作ってみました。

あなたもいきなりオリジナルは作れなくても、テンプレをいじるくらいなら出来るようになってるはずですから、このタイミングで「自分のサイト」を作ってみるのも良い経験だと思います。

僕はそのポートフォリオを公開した後に、再びProgateに戻ってJavaScript、jQuery、Sass、PHPを勉強して、2つ目のポートフォリオを作りました。

作ったサイトのコードを公開してアピールするためにGitも勉強しましたし、サーバーのこともしっかり知っておこうと思いSQLも学習しましたが、そこまでで独学開始からだいたい2ヶ月くらいでした。

いま振り返ると、あの頃は楽しすぎて全然寝てませんでした(10日間で睡眠時間が7〜8時間くらいでしたw)。

できることが増えたら、その都度自分のポートフォリオをカスタムするなどしてアウトプットを繰り返し、インプットしたことを着実に自分の力に変えていくというのはここまでのSTEPと変わりません。

案件獲得のためにはWeb制作のスキルのほかに「営業」「マーケティング」「ディレクション」などの勉強も必要ですし、学習中って「本当にこれが仕事になるんだろうか?」なんていう不安も芽生えるものですが、まずは焦らず、Web制作のスキルを十分に身につけることに集中していきましょう。

「Webサイトを作れる」って、それだけで可能性が広がる大きな価値がありますからね。

jQuery(JavaScript)を完全独学でマスター

jQuery(ジェイクエリー)とは、JavaScriptというプログラミング言語をもっと簡単に扱えるように設計された「ライブラリ」と呼ばれるものの一種。

簡単に言うと、これを使いこなすことでサイトに「動き」をつけられるようになります。

PCでもスマホでも、画面の上からポップアップが出てきたりしますが、あれを簡単に実装するためのものです。

jQueryもProgateで基礎を学習できますが、問題はそのあと。

Progateで基礎は学んだけど、そのあと何すればいいの?

僕自身、ProgateでHTML&CSS~JavaScript~jQueryと学習したあとに、なんとなくわかった気になっただけで、学んだ知識をどう活かせばいいかわからず困って色々と模索しました。

ここではそんなjQuery難民のために、Progate後の学習手順を解説していきます。

それでは、早速いってみましょう!

補足

ちなみに、Webサイトに動きをつけるために用いられるのはjQueryだけではありません。

React(Next) や Vue(Nuxt)、GSAPなど様々な選択肢があり、ウェブアプリケーションの現場などではそれらの方がjQueryよりも使われているようです。

一方、Web制作の現場ではまだまだjQueryが現役。

I/O 3000のようなギャラリーサイトに掲載されるようなWebサイトでも、jQueryの使用率は67.9%なのに対し、ReactやVueは10%以下という調査結果もありました。

結論、まだまだjQueryを勉強する価値はあるということです。

Twitterなどでは「jQueryはオワコン」などという意見も聞かれますが、その際はその意見の前提を確認するか、無数の意見の中のひとつとして流しておきましょう。

いま大切なのは、あなたがjQueryを理解することです。

参考サイト:「ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた」feb19

jQueryの学習スケジュール

Progateで基礎を学んだら、そのあとはシンプルに2つのSTEPでjQueryを学んでいきます。

2STEPスケジュール
  1. 実際にコードを試してみる
  2. 本で復習する

これだけです。

他の記事でも書いているとおり、jQueryの学習においても一度ですべてを理解する必要はありません。

とりあえずチャレンジして、分からないことは分からないまま次に進んで、ひととおり学習し終えてから、振り返ってみると分かってたりします。

それでも分からないことはありますが、全体を把握した上で挑めばすんなり理解できるものですから、とにかくいちいち立ち止まらないように気をつけましょう。

STEP1:デザインカンプをアップデート

ということで、jQueryを使ってみましょう。

どんな知識もアウトプットしないと身につきませんからね。

Progateでひととおり学んで、jQueryとは何なのか?何が出来るのか?くらいは理解できていると思います。

それならその知識を活かして、Codestepなどで作った静的なデザインカンプをアップデートしてみましょう。

何を試せばいいかわからない場合は、「スライドショー」と「アコーディオンパネル」を実装してみてください。

動くWebデザインアイデア帳で検索し、実装するのが一番カンタンでしょう。

このふたつは実案件でも当たり前に出てきますし、これを実装できるようになると、のちのち自信にも強みにもなりますからね。

うまく行けば、HTML&CSSとは異なるプログラミングの楽しさを味わえますよ。(自分すげー!ってなります)

STEP2:本や動画講座で復習する

jQueryを実際に試したあとは、復習の時間です。

僕のおすすめは本や動画講座での復習。

Progateに戻ることも否定はしませんが、同じ問題に何度も挑戦したところで、得られるのは慣れだけですからね。

ここでの参考図書は先ほどもお世話になった『動くWebデザインアイディア帳』

jQuery関連の書籍はたくさん出ていますが、そんな中でこの本は「初心者が参考にできるちょうどいいレベル」なんです。

実際に、Web制作で単価何十万円という案件を対応するときにも役に立つような、数々の実例が充実しているので、長い目で見ても最高の一冊だと思ってます。

created by Rinker
ソシム
¥3,080 (2024/06/17 08:32:33時点 Amazon調べ-詳細)

ここで大切なのが、その読み方。

「最初から順番に読む必要はない」というのが持論なのですが、この本も読みたいとこだけを読めば大丈夫です。

ゲームの攻略本と同じで、いま知りたいことだけを調べて、本を読むことに必要以上の時間を使わないように気をつけてください。

どんなときも、インプット:アウトプット=3:7です。

ここまでを10秒でまとめましょう。

ということで、ここまでが「jQueryを完全独学でマスター」でした。

ここまでで独学の基本的な動きは身についてきたかと思います。

少なくとも、独学を楽しめていませんか?

こうなったら間違いなくあなたはWeb制作に適正のある方ですから、すでに実案件に挑めるくらいの技術力と検索力は身についています。

ただし、Webの知識が少ない/まったくない人でも管理できるサイトを作らないと、仕事になりませんので、もうひとつ勉強しておくべきものがあります。

それが、WordPress。

補足

ここまでの知識を動画で復習したいという方には、Udemyで販売されているたにぐちまこと先生(@seltzer)の『ちゃんと学ぶ、HTML+CSS & JavaScript入門講座』をおすすめします。

これだけでフロントエンドの基礎を総復習できるコスパ良すぎの定番講座なので、ぜひUdemyのセール時に探してみてください。

また、デザインカンプをいかに正確かつ迅速にコーディングできるか腕試ししてみたい方には、このタイミングで改めてしょーごさんの演習課題に挑戦することをおすすめします。

Udemyがあるから独学でも十分学べるんです。
しょーごさんのコーディング演習のサムネイル
これをクリアできたら実案件レベル。

WordPressを完全独学でマスター

WordPress(ワードプレス)とは、誰でも無料でサイトやブログを作成できるソフトウェアのこと。

プラグインと呼ばれる拡張機能を使って、難しいコードを使わずにお問い合わせフォームなどの機能を設置できるなど、Web制作の知識がない方にとっても便利なツールです。

Web制作の現場では、サイトのデザインや機能を考え、コーディングすることで、クライアントにとってオリジナルのサイトを効率よく作ることができるため、定番の案件として毎日必ず募集があります。

ここまで独学してきたあなたなら、WordPressの名前くらいはご存知のはず。

そもそもWordPressがどんなものなのか?を把握するなら、実際にWordPressでブログを書きはじめるのがおすすめですが(それについては別の記事で解説するとして)、ここではWeb制作におけるWordPressの使い方を効率よく独学でマスターできる手順を解説していきます。

僕もこの記事を書き始めた2020年12月にはWordPress案件のおかげで月収100万円を達成してましたが、その半年前は参考書を片手にゆっくりWordPress化の手順をおさらいしてたレベルでした。

奥は深いが、敷居は低い。

この解説を読んでくださったあなたが、半年後に単価30万円以上の案件を楽々とこなす姿を想像してみてください。

ブログって、稼ぎながら文章力を養えるのも魅力です。

はじめる前に

実際の学習をはじめる前に、ここでHTML&CSSで作ったサイトをWordPressで表示させる作業(以下、WordPress化)が、どれくらい単純かという話をしておきましょう。

ポイントは4つだけ。

CHECK!
  1. PHPそのものを覚えてなくても大丈夫
  2. 各ページに対応したテーマファイルを用意する
  3. ヘッダーや投稿記事を呼び出す独自コードを使う
  4. 記事一覧を取得するためのモジュールを使う

① PHPそのものをマスターしなくても大丈夫

WordPressは、PHPという言語で書かれています。

ProgateでPHPの基礎を学んでおくのもありですが、実際にはWordPress独自のコードがあり、それらを適切な場所に記述することで、制作を進めていきますので、事前にPHPを深く学んでいなくても大丈夫です。

むしろ、HTML&CSSやjQueryの知識の方が大切。

② 各ページに対応したテーマファイルを用意する

この概念図がすべてです。

要は、表示させたいページに必要なファイルを用意して、そこにHTMLとWordPressのコードを書いていけば、テーマファイルの完成です。

もちろんこれらも暗記しなくて大丈夫ですから、実際にWordPress化を行うときに必要なものをひとつずつ確認して進めましょう。

③ ヘッダーや投稿記事を呼び出す独自コードを使う

先ほども書いたとおり、WordPressには独自のコードがあります。

各ページに共通しているヘッダーやフッター、投稿記事や固定ページの雛形はそれ専用のファイルを作り、トップページなどを作る際にはそれらをパーツのように組み合わせていきます。

そのパーツを呼び出すための独自コードが用意されていて、それを利用していくというわけです。

また、このようにパーツを細かく分けておくことで、メンテナンスも楽になるというメリットもあります。

④ 記事一覧を取得するためのモジュールを使う

記事タイトルやカテゴリーなどといった投稿ページの情報を取得し、それらを一覧表示させるには、PHPで書かれたモジュールを使用します。

つまり、ブログ記事一覧を表示させる決り文句があって、それを正しく書いておけば大丈夫ってことですね。

これもPHPで書くとはいえ、書くものは決まっているので、お手本を見ながら学んでいきましょう。

WordPress化って意外と単純。

これらたった4つのポイントを押さえておけば、HTMLなどで書かれたファイルをちょちょいとイジるだけで、1日~2日もあればWordPress化できちゃいます。

僕が過去に取り掛かったWordPress案件では、jQueryが色々と使われているWebサイトをWordPress化するというものがありました。

結果的にそれも基本的な部分をWordPressのコードに置き換えて、jQueryで実装されていた部分はWordPressのプラグインで再現できたのですが、そのときの僕はProgateでPHPをひととおり勉強した程度のレベルでした。

WordPressの学習スケジュール

4STEPスケジュール
  1. YouTubeで「WordPressで制作するとは?」を確認
  2. 書籍でインプット&アウトプット
  3. デザインカンプに挑戦
  4. SnowMonkeyの使い方を確認

STEP1:YouTubeで「WordPressで制作するとは?」を確認

初日はYouTubeで気軽に勉強しましょう。

今回はアキユキさんの解説動画で「WordPressでサイトを作るとはどういうことか?」を学びます。

観た方は激しく頷いてくれると思いますが、Udemyなどで有料コンテンツ化してもいいくらいの内容です。

僕はこれを観て、「スクールに通わなくてもぜんぜん大丈夫じゃん」と思いました。

注意点としては、ここでの目的はあくまでも「WordPressで何が出来るのか?何をすれば良いのか?」という大まかな流れを掴むことであって、この動画で完璧にマスターしようとする必要はないということ。

難しそうに見えて、実は難しくない。それがWordPressです。

STEP2:書籍でインプット&アウトプット

STEP①の動画でなんとなく雰囲気は掴めましたか?

ここからは本を参考にしながら、実際に静的サイトをWordPress化していきます。

というこでまずは参考図書をご紹介。

WordPress 導入とサイト制作の教科書 改定第二版

WordPressを解説している本は非常にたくさんありますが、WordPress化について細かく丁寧に解説している本って案外少なかったり、情報が古かったりします。

その点、この本は2020年に内容が改定されていますし、元々良書として知られていた本なだけに非の打ち所がありません。

とりあえずはじめから順番に読んでいくのが良いですが、ここでも、はじめからいきなり熟読する必要はありません。

もう聞き飽きたかもしれませんが、とにかく知りたい部分だけを読めばOKです。

はじめから熟読して一回の読書ですべてを理解しようとすると、確実に学習効率が下がります。

「最初は6~7割くらい理解できればいいや」くらいの流し読みで進めましょう。

ということで、「初心者が挫折しないための読み方」がこちら ⇓

CHECK!

①:とりあえず「へー、そうなんだー」程度にLesson1~3を流し読み

②:Lesson4を流し読みした上で、サンプルデータを使ってブログ記事を書いてみる

③:Lesson5を流し読みしてテーマとプラグインについて理解する

④:Lesson6を流し読みした上で、サンプルデータを使ってプラグインをいじってみる

ここまでゆる~くやってみてください。

ゆる~く挑戦しても、とりあえずWordPressで記事を作成できるようになります。

自分のブログを作るついでにやってみるのもいいですね。

次に進みましょう。

CHECK!

⑤:Lesson7を読みながらローカル開発環境の作り方を学ぶ

⑥:Lesson8でPHPについて学ぶ(Progate等でPHPを学んだ人はスルーしてOK)

⑦:Lesson9~10を流し読みした上で、サンプルデータを使ってサイトを作ってみる

⑧:Lesson12を参考に作ってみたサイトを本番環境で表示させてみる

ここら辺は気合いを入れてがんばるところになりますが、やることは丁寧にすべて書かれているので、順番に真似していけば、つまずくことはほぼなさそうです。

本はこのあともまだLesson15まで続きますが、ここから先はサイトの管理・運営に関することは中心なので、「WordPressでのサイト制作」についてはここまで十分。

STEP3:WordPress化前提のデザインカンプに挑戦

最後はデザインカンプに挑戦して、これまでに学んだことを再確認していきましょう。

各サイトに用意があると思いますが、しょーごさんの『コーディング演習課題』でいうと上級編ですね。

また、余裕があればブログを起ち上げるのも良いです。

いずれにしても、ここまででインプットしたことをデザインカンプやブログ制作を通じてアウトプットし、着実に自分のスキルアップを行うことが目的です。

分からないことがあっても、WordPressに関する記事は無数に存在しているので、検索して何も出てこないときは自分の検索ワードを疑う方が良いかもしれません。

それくらいWordPressは世界中で利用され、多くの人が学び、質問されてきたので、ここまでで鍛えてきたググり力をフル活用して取り組んでください。

STEP4:Snow Monkeyの使い方を確認

ここまででWordPressの実践的な使い方を学んだら、ついでにSnow Monkey(スノーモンキー)に触れておきましょう。

Snow Monkeyとは?

Snow Monkeyとは、「ブロックエディタでさくさく高品質なWEBサイトを作れてしまう、非常に有名な国産の有料テーマ」です。

実際の制作の現場でも使用例は多く、第一線で活躍するプロの間でも非常に評価の高いテーマなんです。

たにぐち先生までべた褒めです。

「年間サブスクでダウンロードすれば商用利用も可」という非常にありがたいテーマで、実際に使ってみると「そんなことまで出来るのか!」って感動するくらいに高機能で驚きますよ。

とはいえ、いきなり年額を支払うのは不安ですよね。

ご安心ください。

無料版でいつでも試せるので、まずはそちらを触ってみましょう!

公式ホームページで申請すれば、数日以内にメールで送られてきます。

僕も予算の少ないお客様にはSnow Monkeyを使って高速納品しています

で、実際の使い方やどれくらい便利なのか?については、以下の動画でサクッと確認しましょう。

Snow Monkeyでのブログの作り方などはたにぐちまことさんの動画がわかりやすいですが、ここではWeb制作における便利さを伝えられたらと思うので、こちらの動画を紹介させていただきます。

このレベルのデザインを、ほぼコーディングせずにサクッと作れてしまうなんて凄すぎませんか?

僕が率いる制作チームGLASSCOOPEのホームページもSnow Monkeyを使っています。

Snow Monkeyの具体的な開発方法を勉強する

先ほどの動画でなんとなくSnow Monkeyの使い方を理解できたら、今度はこちらの動画で実際の制作工程を見ていきましょう。

《独学応援サロン》で制作した「Snow Monkey解説動画」です。

当ブログを参考にWeb制作を独学で学び、現在ではフリーランスとして活躍中のゆっぱーさんが、独学応援サロンのメンバーと協力して作ってくださった動画でして、とにかく初心者目線で順を追ってていねいに解説してくれています。

※この動画が撮影されてからある程度時間が経っており、SnowMonkeyもその間に度重なるアップデートを繰り返してさらに便利になっていますが、基本的な部分は現在も変わっていませんので、引き続き掲載させていただいています。

ここまでを10秒でまとめましょう。

ということで、ここまでが「WordPressを完全独学でマスター」でした。

実際にチャレンジしてみていかがでしたか?

少なくとも、「出来ないこと」ではなかったと思います。

同じPHPを使ったプログラミングでも、「自動返信機能付きの問い合わせフォーム」をイチから実装するのとはわけが違いますからね。

基本的にWordPress独自の構文に慣れてしまえばオンラインマニュアルを見ながら進められるようになりますし、これで20万円以上の案件を受注できるようになると考えたら非常にコスパがいいと思いませんか?

このあとさらに「カスタム3兄弟」の使い方を学べば、本格的なコーポレートサイトも作れるようになり、クラウドソーシングでもいよいよ案件ひとつで30万円以上を見積もれるようになります。

また、Snow Monkeyが使えるとエンドクライアント相手に営業をしても、構成やデザイン次第で十分に高クオリティなサイトを迅速に納品できるようになります。

いずれにしても「がんばる価値のあること」だと思いますから、ぜひとも挑戦してみてください。

僕も予算の少ないお客様にはSnow Monkeyを使って高速納品しています

カスタム3兄弟を制するものは、WordPressを制する。のサムネイル
正直、この3兄弟を克服したらWordPress案件も怖くなかったです。

おまけ 〜 ここまで学習した人におすすめの教材

ここまで学習した方におすすめしたい教材として、じゅんぺいさんの「実務で使った2年分のコーディング&WordPressメモまとめ集」を挙げさせていただきます。

コーダーを目指す方なら誰もがお世話になっているであろうじゅんぺいブログを運営しているじゅんぺいさんが、コーダーとして携わってきた数々の仕事の中で書き留めていたメモを編纂したものですが、これひとつを買っておいて、困ったときに検索すれば一撃で答えにたどり着けるという文字どおりとても有益な教材。

ここまで勉強されてきた方なら、それがどれだけ便利なものかは想像つきますよね?

まさに圧倒的なボリュームの「実務で必要なコーディングとWordPressの知恵と工夫」がぎっしり詰まっています。

作業効率と単価を上げたい人にこそおすすめです!

実務で使った2年分のコーディング&WordPressメモまとめ集
コーディングやWordPressの作業効率を高めたい方は騙されたと思って買いましょう
おまけ①〜 Shopifyも完全独学でマスター

これまではWordPressまで勉強しておけば稼げたわけですが、最近そこに変化が起き始めています。

Shopify(ショッピファイ)をご存知ですか?

Shopifyとは、誰でも簡単にECサイトを作れる仕組みとして徐々に名を広め、現在ではWeb上にあるサイトのうち3%はShopifyで構築されているといわれています。

WordPressの40%と比較すると少なく思えますが、16億個以上といわれている全世界のWEBサイトの中で、そのうちの3%ですから、約480万個のサイトがShopifyで作られている計算です。

そして、この勢いは今後さらに増していき、WordPressからShopifyに乗り換える企業が出てきたり、Amazonに出店しないブランドがShopifyで自社ECサイトを起ち上げるなどの動きが注目されています。

有名どころだと、プラダをはじめとするラグジュアリーブランドや無印の海外サイトなどが実際にShopifyで構築していますね。

そんなShopifyについて学び、ECサイトをデザイン~コーディングできるようになることで、作ったECサイトの売上の数%を毎月自動的に収益化できたらすごいと思いませんか?

そこでここでは、Shopifyでのサイト構築の基本的な方法について解説した記事をご紹介しておきます。

Shopifyとは?を解説する記事は日本語でも増えてきましたが、開発者向けにそれを解説する記事はまだまだ少ないのが実情…

ということで、以下の記事をご参照ください。

Shopifyの基礎や初期設定方法、おすすめの拡張機能などはこの記事1本で学べるようになっています。

時代の流れに適応して、柔軟に収益を安定させていきましょう。

Shopifyを独学でマスター【基本構築~設定編】のサムネイル
何かを販売しているすべてのサイトにShopifyを提案できるチャンスがあります。
おまけ②〜ノーコードツール『STUDIO』について

最近はWordPressなどを使わずにSTUDIOなどのノーコードツールを使って実装されるデザイナーさんも増えてきました。

コーディングを仕事にするならSTUDIOを使っている場合ではありませんが、STUDIOでどのように実装するのか?くらいは知っておくべきでしょう。

ということで、説明が丁寧で分かりやすい参考動画を貼っておきますね👇

ポートフォリオは「自己紹介」ではなく「実力の証明」

Editorial commision-amico

それでは、ここまでの学習の締めくくりとしてポートフォリオを作ってみましょう。

まだ自分の制作力に自信がないという方は、しょーごさんの演習課題などに挑戦してください。

それでもまだ自信が持てないということであれば、それはビビりすぎ。勇気を出してポートフォリオ制作に踏み出すべきです。

とはいえまだ具体的なイメージが湧かないですよね。

お客さまがあなたにWeb制作を任せるべきか判断するときに確認していただくサイト」だと言えば、なんとなく想像してもらえるでしょうか?

ただしここでご理解いただきたいことがあります。

一般的なポートフォリオの多くは自己紹介だけで終わってしまい、仕事に繋げられないものがほとんどです。

大切なのは、お客様がたくさんいる駆け出しフリーランスの中からあなたを選ぶ明確な理由を伝えること。

デザインも重要ですが、それ以上に構成が肝です。

「自分という商品」の魅力を伝えることが目的になりますが、まずはこれを作るにあたって必要な準備手順を確認していきましょう。

準備手順
  1. 誰に見てもらうのか?(制作会社?フリーのデザイナーやディレクターさん?)
  2. どんな印象を持たせたいのか?(真面目さ?親しみやすさ?面白さ?)
  3. 自分の何を伝えたいのか?(コーディングの正確さ?納期の早さ?レスの早さ?)
  4. どんな順番/構成で見せるのか?(結論・根拠・信頼・安心の4部構成がおすすめ)
  5. どんな言葉で伝えるのか?(基本的に端的で分かりやすいことを意識)
  6. どんなデザインにするのか?(メインカラーは?フォントは?)

サイトの構成とワイヤーフレーム

とはいえ、手順通りにやるにしても判断が難しいでしょう。

そもそもサイトの構成を考える前に、自分の目的や強みをハッキリさせる方法も分からない方がほとんどだと思います。

メンターをやっていても、ここに関する相談がダントツで多いです。

また、実際に構成を考えたら、次のステップとしてワイヤーフレームを制作することになりますが、未経験の初心者にとってはここも大きな挫折ポイント。

そこで、案件獲得につなげるためのポートフォリオの作り方について別の記事で詳しく解説しました。

ワイヤーフレームに関しては、Pintarestなどで「ワイヤーフレーム テンプレート」とか「グリッドデザイン テンプレート」などと検索してみると色んなサンプルがたくさん出てきますから、それを参考に自分が考えた構成を手描きで起こしていくところから始めてみるのも悪くないでしょう。

しかしながら、そうは言われてもどんな構成にすれば良いのかなんてわからないとの意見もたくさん耳にしたので、ワイヤーフレームのサンプルもご用意しました。

こちらは別記事の購入者様限定でダウンロードできるようにしていますので、ひととおり説明を読んだ上でワイヤーフレーム制作に自信がない方や、さっさとポートフォリオを完成させて営業をはじめたい方はご購入くださいませ。

案件獲得につながるポートフォリオを作りたい方へ
サロンメンバーたちの事業サイト

上記の別記事で解説している作り方で、実際に副業応援サロンのメンバーたちが作成したポートフォリオ(事業サイト)をご紹介します。

基礎を押さえて、戦略設計から順番に組み立てることで誰でもこうしたオリジナリティ溢れるポートフォリオを作れるようになるってことを信じてもらえると嬉しいです。

ヒロシさんの「BUILD UP」
ゆうきさんの「Lily Design」
むらりんさんの「ネコの手」
Halkano Designのスクリーンショット
はるかさんの「Halkano Design」
あつきさんの「Web Second」

テキストの書き方

ワイヤーフレームまでできたら、今度はキャッチコピーやテキストで悩むと思います。

起承転結の曖昧な長い文章はもちろんNG。

ChatGPTで作るにしても基礎部分は自分で作っておかないといけませんし、ChatGPTが作った文章を添削する力がないと完成させられません。

日本人の多くは学校でライティング技術を学んでいないので文章作成が下手だとも言われますが、なにはともあれ文章力に自信のない方は、このタイミングで基礎を勉強しておきましょう。

ちなみに、文章力は毎日書くことで鍛えられるものですが、僕がみなさんにブログの運営やTwitterをおすすめしているのはそういう理由もあります。

SEO対策WEBライティング編
テクニックを知ってるかどうかの世界なので、まずは基礎を押さえるとこから。

デザインのサンプル

デザインはとても重要ですが、ここまでまったく理論も何も勉強していない方は独自のセンスで考えたりしないでください。

当たり前ですが、ないものはないんです。

ターゲットの心を掴むデザインを考えるためには知り合いのデザイナーに頼むのが先決ですが、頼むにしても自分の中でイメージを膨らめせておくことが必要。

ということで、素敵なデザインがたくさん集まっているサイトを見ておきましょう。

ここでは僕が実務でも参考にしているオススメをご紹介します。

I/O 3000のスクリーンショット
【ホームページ】I/O 3000
ちょうどいいWebデザインのサムネイル
【ホームページ】ちょうどいい
LP Archiveのスクリーンショット
【LP】LP Archive
SAMUNEのスクリーンショット
【サムネイル】SAMUNE
Parts.のスクリーンショット
【パーツ別】Parts.

大切なことなので繰り返しますが、Webデザインを勉強していない方は無理に自分でデザインしようとしないでください。

僕もそうでしたが、基本的に知識のない人が考えるデザインとは安っぽくなるものです。

クラウドソーシングで発注するなり、せめてSNSやコミュニティで仲良くなったデザイナーさんにお願いすることを強くおすすめします。

デザインの参考イメージを集めるときに便利なサイトをまとめました。

無料サイトを使い倒そう

デザインを外注するにしても、画像などの素材くらいは自分で用意しておきたいところ。

ということで、無料サイトなどから探してきましょう。

ロゴなどもデザイナーさんに任せられるといいですが、一応フリーサイトで作ることもできちゃうので参考までに作ってみるのもありでしょう。

ちなみに、このブログのサムネなどはブログ立ち上げ当初からCanvaで作ってます。

おすすめ無料サイト

画像素材や編集時に役立つ無料サイトをまとめました。ご参考ください。

  1. 【画像】Unsplash…高品質な無料画像サイト
  2. 【イラスト】stories…当ブログでもおなじみのフラットデザインのイラスト多数
  3. 【ロゴ制作】Logo Maker…ただ選ぶだけで簡単にオリジナルロゴが作れる
  4. 【デザインツール】Canva…サムネもロゴも自由自在/多くのフリーランスご愛用
  5. 【ファビコン】icon8…ファビコンの用意は実案件でもだいたいこれで
  6. 【画像編集】PEKO STEP…初心者のうちはこれで十分

サーバーを用意

コーディングが終わっても、まだ作業は終わりじゃありません!

サーバーにアップするという最後の仕事が残っていることをお忘れなく。

サーバーに関しては、そもそもどこと契約すべきか?という論争が絶えませんが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバーの一択でしょう。

安いところは他にもたくさんあるんですが、サーバーの安定度や表示速度、2年目以降の手数料や基本料金など、総合的にコスパを考えるとエックスサーバーが優秀だという結論に至りました。

また、利用者が多いからこそ分からないことがあっても検索すればすぐにネット上で答えが見つかるので、初心者でも独学でどうにかできるという大きなメリットがあります。

毎年、定期的に無料キャンペーンも実施してるので、Web制作者としてもブロガーとしても、一番オススメしやすいのがエックスサーバーというのが正直なところ。

一方で、それでも月額をできるだけ安く抑えたいという方にはロリポップ

月額250円のライトプランでも十分機能しますし、表示速度がそこそこ早いハイスピードプランでも月額はたったの500円ですから、背に腹は代えられないなら致し難ないでしょう。

おすすめレンタルサーバー3選のサムネイル
サーバー選びで悩む時間ってもったいないので、ここはサクッと決めましょう。

営業を学んで、案件獲得に挑戦しよう!

さて、ここまで勉強してきたらいよいよ営業に挑むステップです!

まだ自分にコーダーとして自信がないという方は、noteで販売されているしょーごさんの演習課題に挑戦したり、コーディングスキル支援サービスである『CodeUps』で制作会社さんとのやり取りを疑似体験しながらCSS設計やBEM設計、gulp環境での実装などを学ぶなどして、デザインを正確に再現する技術をさらに磨いてください。

一方で、かつての僕のように早く実績を積み上げていきたいとお考えなら勇気を出してどんどん自分のスキルを知ってもらうための営業活動に取り掛かりましょう。

ということで、以下の記事(『案件獲得ロードマップ 2.0』)に僕の営業経験のすべてをまとめました。

ここまでで身につけたスキルを活かし、誰かの役に立てるために、営業活動は必須です。

Web制作で稼ぎたいすべての人に読んでほしい、全5本の記事です。

また、『案件獲得ロードマップ 2.0』が長すぎて読むのが大変という方には僕の営業哲学を解説した動画コンテンツをご用意しています。

全3時間半の動画の中で、求められるようになる営業の本質や自分の市場価値の高め方、単価の上げ方などを解説しました。

それぞれご参照ください!

【無料】「案件獲得」の流れを知りたい方はこちら
【有料】「売れる営業」を基礎から学びたい方はこちら

【まとめ】すべては、毎日取り組み続けることからはじまる

ということで、以上がWeb制作の「完全独学ロードマップ」でした。

2020年2月11日から独学をはじめ、緊急事態宣言中の引きこもり時期も、本業再開後も、ひたすら独学し続けたその勉強方法をブログにまとめ、日々の気づきをツイートし続けた1年目の1,000時間。

それを経験し、営業せずともWeb制作で稼げるようになった今だからこそ、年齢や学歴を理由に人生を諦めてしまっている方に伝えたいです。

30歳・高卒・完全未経験の僕でも、Web制作で稼げるようになったこと。

その方法は、誰にだって真似できるものであること。

努力を続けた先で、誰かの役に立てること。

過去を悔やむ時間があるのなら、その一分一秒を未来を変えるために使ってもらえると幸いです。

読者限定特典のお知らせ

最後まで読んでくださったお礼として、《方向性コンサル Lite》を無料でプレゼントさせていただきます!

※《方向性コンサル Lite》について詳しく知りたい方はこちら

プレゼントの受け取り方法は以下のとおりです。

ご自分の勉強方法やフリーランスとしての起業方法に関する疑問や不安など、何でもご自由にご質問ください!

◆プレゼントの受け取り方法

  1. この記事の感想をXにポスト
  2. XのDMにて僕にメッセージを送信

これだけです!

それぞれテンプレもご用意しておきますので、ご利用くださいませ。

<あなたの感想>
@iammeganen
https://meganelog.site/webdesign-selfstudy-roadmaps/
めがねんさん、こんにちは!

『独学応援ロードマップ』の読者限定特典として《方向性コンサル Lite》の受講を希望します。

よろしくお願いします。

①Zoom可能な日時の候補:

②Web制作に取り組む最大の目的:

③これまでの経緯:

この記事が独学をがんばる皆さんのお役に立てたらうれしいです。

Visited 5,371 times, 7 visit(s) today
ご感想はぜひツイートお願いします🧑‍💻
ABOUT US
めがねん管理人
Web制作の独学を「ただしく、くわしく、わかりやすく」|フリーランス5年目|Web制作の独学者向けブログ《独学応援ブログ》、無料コミュニティ《独学応援サロン》、個別サポートサービス《独学応援メンター》運営|ガジェット、SF、犬が好き🐶