【最新】Web制作で0→1を達成するためのロードマップ

※一部プロモーションが含まれます。詳細はコンテンツ制作ポリシーをご覧ください。

読者の悩み

  • プログラミングを理解できるか不安。
  • どのくらい学習すれば、仕事を取れるのかがわからない。
  • プログラミングで0→1達成できるか不安。

このようなお悩みを解決します。

本記事の内容

  • プログラミングの学習の進め方
  • WordPressまで学習したら案件を取りに行こう
  • 初めはお金より信頼を取りに行こう

フリーでWeb制作をしているmasashiと申します。

未経験からプログラミングの学習を初めてちょうど1年ぐらい立ちました。
学習開始した時は1日8時間ぐらい学習して2ヶ月目で初案件を取ることができました(この時、暇人だったのでこれくらい学習できました...)。
今は案件を月1、2案件ペースで対応させていただいています。

僕は41歳でプログラミングの学習を開始したのですが、もともとブログを書いていて、すこしタイピングはできるのですが、エクセル、パワポの操作などは全くできないぐらいのレベルからスタートしました(今も使えないですけど…)。

学習する前はプログラミングスクールも選択肢の一つとして考えていたほどで、しかし、年齢制限で入れないスクールが多いことを知り、独学を決意しました。
独学でプログラミング学習を初めた僕はHTML&CSSを学習から始めて、このままの方法で稼ぐ所まで辿り着けるのか、すごく不安でした。

そんな中、twitterでプログラミングを始めるきっかけをくれたマナブさん(@manabubannai)が「プログラミング学習コミュニティーCodeBegin」の募集を掛けていて、「これだ!」と思い入会しました。

そのおかげで、スキルを身に付けて案件獲得まで辿り着くことができました。「CodeBegin」のおかげです。
少しCodeBeginの説明をさせてください。

3ヶ月でプログラミングの基礎を学習でき、まずは3万円を稼ぐまでに特化したプログラミングコミュニティです。

CodeBeginプログラミングコミュニティのメリット

  • 案件獲得までのロードマップで学習できる
  • 料金がプログラミングスクールと比べて圧倒的に安い。
  • 挫折OK!(3ヶ月以内全額返金保証)
  • 学習期間(3ヶ月)を過ぎてもずっとコミュニティに参加可能
  • プログラミング仲間ができる

デメリット

  • 完全自習型
  • 案件獲得以降のロードマップは無い
  • 有料(月15,000円×3ヶ月)

あくまで稼ぐまでのプログラミングメニューを提示してくれます。

僕はもともと独学で進めていたので、自習型でもぜんぜんOKで、稼げるまでたどり着ければ十分でデメリットは感じなかったです。

3ヶ月を超えてメニューが終わっても、コミュニティに参加し続けれるのも最高です!
いろんな企画あったり、最近ではオフラインでのイベントも多いのでプログラミング仲間をすぐに作ることができます。

プログラミング仲間と切磋琢磨しながら、進めると学習のモチベーションも上がって、楽しみながら進められると思います。
独学で進めていて学習方法に不安のある方は検討してみてもいいのではないでしょうか?

マナブさん(@manabubannai)のTwitterで不定期で募集を掛けているので、チェックしてみてください!

それでも独学で進めるという人は今から書く内容を実践していけば、稼ぐまで辿り着けるので参考にしていただけたらと思います。

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

プログラミングの学習の進め方

まずはプログラミング学習の大まかな手順です。

  • 1. HTML&CSSの基礎を徹底的に学ぶ(インプット、ドットインストールで学ぶ)
  • 2. HTML&CSSで模写をする(アウトプット、2,3回模写をする)
  • 3. Bootstrapを学ぶ(インプット、CSSフレームワーク、爆速コーディング)
  • 4. Bootstrapを使い、ポートフォリオを作成し、サーバーにアップする(アウトプット、案件応募の準備)
  • 5. WordPressを学ぶ(インプット、ブロックエディタを学ぶ)
  • 6. クラウドソーシングで案件応募する(アウトプット、WordPress案件を狙う)

この手順で進めていきましょう。

お気づきの方もいらっしゃるとおもいますが、インプットとアウトプットを繰り返していますよね。
インプットとアウトプットをくりかえす理由はくりかえすことでスキルを定着させることができます。

これは後々もずっと使えるテクニックなので覚えておきましょう!

それでは一つずつ説明していきますね。

①HTML&CSSの基礎を徹底的に学ぶ(インプット、ドットインストールで学ぶ)

HTML&CSSはWeb制作をする上で基礎中の基礎なので、徹底的にインプットしましょう。

学ぶ方法としては「ドットインストール」という動画学習サイトがおすすめです。
HTML&CSSの基礎を徹底的に学ぶことができます。

ドットインストールでHTML&CSSを学ぶ項目

この項目を一通りやると、HTML&CSSの知識学習は完了です。

「Progate」というサイトもあるんですが、なぜおすすめしないかというと後々に復習するときに知りたい部分を見返すのが難しいという難点があるからです。
プログラミングには暗記は必要ないです。わからない部分はすぐに調べれるようにしておきましょう!

学習のコツは「そんなんあったなぁ。」ぐらいでどんどん進めていくことです。「わからない→調べる→書く」を繰り返しているうちに頭に定着していきます。
わからない箇所があっても「今はわからないな。」と、スルーして次へ進むことも大事です。

プログラミングはインプットだけではどうしても理解できない部分があります。実際に案件で使っているうちにやっと理解できるということがよくありました。

タイピングに苦手意識を持っていませんか?

もしタイピングを速ければ、学習効率が全然違います。
Web制作を始めた頃は僕もタイピングが速いとは言えず苦手意識がありました。

タイピング学習サイト「e-typing」がおすすめです。毎日、朝一番の10分を使ってe-typingを使ってタイピング練習をしましょう!

僕もe-typingでタイピングスピードをかなり早くすることが出来ました。

コツは遅くてもいいから間違えないように確実にブラインドタッチでタイピングすることです。
そうすると、気づいたらタイピングスピードも速くなってきます。

②HTML&CSSで模写をする(アウトプット、2,3回模写をする)

HTML&CSSの基礎を一通り終わったら、HTML&CSSを使い模写してみましょう!
動きは再現しなくていいです。レイアウトだけ再現しましょう。

初めはできるだけ簡単そうなサイトを選んで模写していきます。2,3回繰り返しましょう。
この工程を経ることで、今まではHTML&CSSの単なる知識だったのが、HTML&CSSを自在に扱うことができるスキルへと変換していきます。

模写サイトはこちらのサイトで紹介されてるので利用してみてください。

こちらのサイトは解説やソースコードなども公開してあり、おすすめです。

【模写コーディング】おすすめの練習サイト【入門編~上級編】

初めは全然できないと思いますが、ドットインストールで復習しながら進めていきましょう!
調べながら進めて全然大丈夫です。ですが、初めは答えのコードを見ないで、見本に近づけていきましょう!

完成したら、見本のコードと自分のコードで答え合わせをしていきましょう!
コードに正解は無いですが、効率のいい書き方を身に着けていきましょう。

模写を何回か終わらしたら、「グーグルクロームデベロッパーツール」の使い方を学びましょう。
デベロッパーツールとはブラウザーで表示画面を検証しながら作業できるので非常に便利です。

デベロッパーツールの使い方をマスターするとコーディング効率が格段に上がります。

オススメの動画があります。
しまぶーさんというプログラマーでユーチューバーもしている人の動画です。

Chrome DevToolsの使い方を徹底解説!

③Bootstrapを学ぶ(インプット、CSSフレームワーク、爆速コーディング)

ドットインストールでBootstrapを学ぶ項目

  • Bootstrap5入門(全21回)

HTMLにBootstrapを導入するだけで爆速でサイト制作が可能になります。特に「グリットシステム」は便利なので重点的に学びましょう。

④Bootstrapを使い、ポートフォリオを作成し、サーバーにアップする(アウトプット、案件応募の準備)

自分のポートフォリオを制作してみよう。
参考サイトを探して、オリジナリティを盛り込みながら制作していきます。

せっかくなのでBootstrapも使っていきましょう。

ポートフォリオを制作できたら、サーバーにアップロードします。

サーバーのデータを操作するスキルはプログラマーをする上で必須です。
自分でサーバーを保有するということはWeb制作の仕事をする上で必要なので、有料ですが必要経費だと思って契約しましょう。

おすすめは「エックスサーバー」です。初心者でも扱いやすく、WordPressの表示も速く、サポート体制が手厚いです。

今のタイミングなら2月3日までに契約すれば半額の料金で契約できるので、かなりおすすめです!!

もしエックスサーバーを契約するなら、契約の手順を詳しく解説しています!!

サーバーにサイトをアップロードする方法の参考サイトはこちらです。

⑤WordPressを学ぶ(インプット、ブロックエディタを学ぶ)

サーバーでサイトを開設したので、次はWordPressをインストールしてみましょう。

WordPressインストールの参考サイトです。

エックスサーバー「マニュアル」

WordPressインストールが終わったら、いままでの「ブロックエディタ(Gutenberg)」を学びます。

ちょっと動画が古いですが、基本的な使い方は変わらないので大丈夫です。

【WordPress】Gutenbergの使い方【全てのコンテンツを解説】

ブロックエディタを使うとHTML&CSSの知識がなくてもページが作れてしまいます。

「えっHTML&CSSのスキルはいらんの?」と思いますよね。

安心してください!基本的なサイト構造はブロックエディターで作ってしまって、細かいデザイン部分はCSSで調整していきます。

「ふつうにHTMLファイルでサイトを作るのと何が違うの?」と疑問が出てきますよね?

お客さんからしたら、サイト制作後も記事を更新したり、画像を交換したり、テキストを変えたりなどの細かい作業は自分でしたいと思っている人が多いんです。
サイトを作って終わりじゃないんで、商品を追加したり、新しいサービスを作って宣伝したいとかもあるかもしれないです。
そのニーズをWordPressは可能にしてくれるんですね。非プログラマーでもサイト更新できることに価値があります。

WordPressにはテーマと言う概念があり、いわゆるサイトを作るためのテンプレートを変更できるという仕組みがあります。

無料テーマ、有料テーマとあるんですが、僕は9割方「Snow Monkey」という有料テーマを使用して、サイト制作しています。
使いやすいテーマでよりオシャレで、お客さんも使いやすいサイト制作ができるので、ぜひ他にも良いテーマを探してみてください!

さらに深くWordPressを学んでもいいと思います。(時間に余裕があれば学習してみましょう。)僕も基礎学習でこの講座を学習しました。

Udemy WordPress開発マスター講座(たにぐちまことさん)

Udemyは月に何回かセール価格で販売しています。セール期間中に購入しておきましょう

この講座を終えたら、いままで作った模写サイトをワードプレス化をしてみましょう。WordPressの概念が一気に理解できるはずです。

静的HTMLサイトをWordPress化するときの具体的な移行手順

WordPress開発マスター講座を学ぶことでオリジナルのテーマ制作が可能になります。
ここまできてやっと仕事を取れるレベルになったので、次からは案件獲得に向けて行動していきましょう!

⑥クラウドソーシングで案件応募する(アウトプット、WordPress案件を狙う)

クラウドソーシングとは案件依頼者と個人を繋げるウェブサービスです。
代表的なクラウドソーシングサイトはクラウドワークス、ランサーズ、ココナラなどがあります。

みなさん、残念なお知らせです。

ここで挫折する人続出します!
今までは教えてもらったことをアウトプットするだけで進めることができたんですが、一転、「営業しましょう!」となります。

全く違うことをしなければいけないと言うことはたくさんの不安が発生します。

  • 営業の方法がわからない。
  • 案件獲得後の対応方法がわからない。
  • そもそも案件を獲得できるか不安。

案件獲得のフェーズに到達するとこのような不安が急に降り掛かってきて、挫折する人が増えます。
なので、案件獲得のフェーズに到達前にこの不安に対して対策を練っておくことをおすすめします。

営業方法がわからない

まずは、クラウドソーシングで応募されている案件に提案文を送ります。

その提案文ですが、どのように書いたらいいかがわからないと思います。

Web制作でフリーで活躍されているみささん(@misaprog)の記事が参考になります。

【実証済】クラウドソーシングでスカウトが来るプロフィール文を公開

他の記事もめっちゃ参考になる記事が多いので見てみてください。
提案文はみささんの記事を参考に作成して、それで提案してみて、駄目だったら改善して試す。という感じで繰り返し改善しながら進めていきましょう。

案件獲得後の対応方法がわからない。

こちらについては今考えてもしかたがないです。まず案件が取れていないのに案件対応の方法を学んでもしかたないですよね。
はっきり言って、土壇場対応で大丈夫です。「請求書をください!」と言われてから「どうしよう?」と考えても大丈夫です。

初めはクラウドソーシングが間に入ってくれるので、あまり迷うことは無いと思います。まずはクラウドソーシングで慣れていきましょう。

案件を獲得できるか不安。

数をこなしましょう!

確率的には30件応募して1件返事が返ってくるぐらいの確率だとおもうので1日5件ぐらい応募すると、6日に1件返事が返ってきます。

案件を最後までやりきれるか不安

ここは結構重要な部分です。

基本的に、全力で対応しましょう。
低価格の案件でもお客さんに喜んでもらえたら、何かあったときに「またお願いします!」なることも多いです。
継続案件に繋げるためにもなるべくお客さんと良好な関係を維持しましょう。

もし、納期に間に合わない場合は前もって連絡して、理由を伝え、誠意をみせれば怒られることは無いとおもいます。

案件対応していたら、わからないことなどを依頼されることもあるかもしれません。どうしても対応できない時は外部サービスに頼りましょう!

  • 無料サービス:teratail
  • 有料サービス:MENTA

teratailは掲示板形式で質問に回答してくれる。ベテランプログラマーが多いので質問の仕方には注意しよう。
質問の仕方は相手にすぐに理解してもらうために、相手の時間を奪わないためにわかりやすく質問しよう。
質問の仕方のテンプレートがあります。この記事がおすすめです。

プログラマーに嫌われない質問術!プログラミングスキルアップに繋がる最高の質問のための3ポイントを紹介

MENTAは有料で現役プログラマーがマンツーマンで教えてくれます。

どうしても手に負えない時は外注するのも手だ。クラウドソーシングで発注してみよう。

案件作業で失敗したらどうしよう。

ほぼ素人の新人が制作するんだから、失敗することもあるでしょう。
僕も何回も失敗して、クライアントを怒らしています。ですが、失敗しても命を取られることは無いので、せめてお金を払ってもらえない程度だと思います。

逆に失敗することは挑戦した証でもあるし、失敗したら「次は同じことをしないようにしよう!」と対策も練れて、成長することもできます。
仮に、途中で案件を降りることになったら、今までのヒアリング内容、進行中のファイルをお客さんに渡してあげましょう。

「次の引き継ぎでお使いください。」と伝えておけば、次の引き継ぎがスムーズに進むでしょう。
そうすれば、お金を払ってもらえないだけで済むとおもいます。

スキル以上の依頼があったらどうしよう。

僕ならググって自分で対応できそうか考えます。できなさそうならMENTAで対応します。それでダメそうなら、クラウドソーシングで外注します。
ググって対応できるなら無料で済みます。MENTAは有料ですが、教えてもらいながらなので自分の学習にもなります。それを考えてもダメそうなら外注します。

僕の場合は自分のデザインセンスを信用していないので、パートナーのデザイナーさんにいつもお願いしています。
プロのデザイナーさんにデザインしてもらったらいい仕上がりのサイトができるので助かってます。

このようにデザインのパートナーを探しておくとデザイン込みの案件を取ることができるのでさらに効率的に進める事ができます。

案件営業の不安をあらかじめ対策しておくことでスムーズに営業をすることができると思います。

WordPressまで学習したら案件を取りに行こう

なぜ、「WordPressまで学習してください!」と言ったのかというと、WordPressまでできるようになると、応募できる案件数が大幅に多くなります。
世界中のサイトの40%以上がWordPressで作られていて、世の中にはWordPressサイトが溢れています。なので、WordPressを使えると圧倒的に数をこなすことができます。

数をこなすことで確実に案件獲得できる確率が上がります。

WordPressはPHPというサーバーサイドの言語が使われています。

サイトにはお問合せフォームが必要になってきますが、お問合せフォームを作るにはPHPなどのサーバーサイドの技術が必要になってきます。
記事の更新システムもPHPなどのスキルが必要になってきます。

PHPの言語をわかっていなくても、WordPressを学ぶことで簡単にお問合せフォームや記事更新機能を設置できます。

Web制作のスタートアップとしてWordPressは使えますね。

WordPressでお問合せフォームを作れても、実際どうやって動いているのか知りたい人はPHP、やWordPress専用の関数を学んでみるのもいいです。

こちらの教材がおすすめです。僕自身も学習してすごく為になってます。

初めはお金より信頼を取りに行こう

実績の無いプログラマーにサイト制作をお願いしたいという人は普通はいないですよね?

なので、まずはクラウドソーシングの中でも案件数の多いクラウドワークスで実績を増やしていきましょう。
実績0と表示されている人に依頼をする人はいないので、まずは実績の表示の数字を増やしていきましょう。

「仕事をさがす」からカンタン作業のなかにあるアンケート案件でアンケートに答えましょう。

アンケートや、データ入力の仕事をこなすだけで実績数を増やしていきます。
これで、実績0をかんたんに脱することができるので、おすすめです。

初めは採算度外視で案件を獲得していきましょう!まずは金額よりも制作に慣れる方が先決です。
しかし、納期には注意しましょう。クラウドソーシングでは短納期の案件が多く、納期に気を付けながら案件を選びましょう。

クラウドソーシングで慣れてきたら、継続案件に繋がりそうな相手を選定するのもありです。

継続案件に繋がりそうなお客さん

  • 制作会社
  • フリーのデザイナーさん
  • 中小企業の社長さん

制作会社やフリーのプログラマーは案件を持て余している可能性があります。中小企業の社長さんは信頼を得たら横のつながりで案件を紹介してくれる可能性があります。

1つのスキルを特化させよう!

最後に案件を取っていく上で必要なことは自分の強みを作ることです。

HTML&CSS、WordPressのスキルはあくまでベースのスキルであって、大多数の1人でしかありません。
その中で差別化するには「なにが得意か?」が重要になってきます。

例をあげますと、

  • WordPressのオリジナルテーマ制作が得意(WordPressオリジナル関数)
  • ECサイト制作が得意(Shopifyなど)
  • サーバーサイドが得意(PHPなど)
  • アニメーションが得意(JavaScript)

など、差別化を意識して学習を続けていく必要があります。

スキルを特化していくことで、営業もアピールしやすくなり、より案件を獲得しやすくなります!!

ちなみに僕はJavaScriptでのアニメーションが得意で、アニメーションのことならお任せください!と営業でいつも書いておりますw

Webサイトの〇〇ならお任せください!と言えるぐらいまで学習を続けましょう。

書いてきたことを実行したら間違いなく案件獲得までたどりつけます。なぜならこんな僕でも案件獲得までできてるんですから、みんな達成できると思います。

これからもこの記事をブラッシュアップしていくので、これから学習を開始している人、現在学習している人はぜひ、ブックマークしてたまに観ていただければと思っています。

もし実装などで上手くいかないことありましたら、下記ボタンからご相談いただけましたらありがたいです。

この記事を書いた人

アバター

トノムラマサシ

masashi
Webサイト屋兼ブロガー|過去に企業常駐などを経て現在はフリーランスでディレクションとコーダーとして活動しております。JS大好きなのでJSの仕事依頼お待ちしております。京都在中で5人家族。