「自分で収入を得ることができる」と実感できれば、
心に余裕ができ、それだけで世界が違って見えます。
まずは最短３ヶ月の準備で５万の収入を目指す。
私が月５万を得るのに２年かかってしまったことを、
効率よく結果を出すため、完全に無駄をはぶいてまとめました。
（本当に世の中情報が多すぎて、目標達成まで無駄が多すぎます…）
この記事で、「自分で収入を得ること」を実感して、
さらなるステップへと進んでいってもらえたら幸いです。
この記事を読むと、
・web制作（コーディング）で月5万円の収入を得る具体的な方法がわかる
・案件受注までにすべきことがステップ順にわかる
・この記事を読んで実行すれば月５万円の収入が得られる
Web制作ロードマップ ５ステップ
まずこの記事は、こんな人に読んでもらいたいです。
・会社や誰かに頼らず、自分で収入を得られるようになりたい
・家族や趣味など、大切なことを優先して時間をコントロールして働きたい
・そのためにweb制作のスキルを身につけたい人、勉強をしている
この記事を実行することで、
１〜５万円の案件を対応できるようになります。
Web制作ロードマップ
コーディングするための環境を準備し、
HTML/CSSや、javascriptの習得をします。
実務で使うものを優先的に基礎を効率よく習得します。
コーディングの実践練習を行います。
習得しておきたい・よくあるレイアウトを優先的に身につけます。
練習方法は、実際の案件対応に近い環境で行います。
自分の実績をまとめたポートフォリオを作成します。
非デザイナーでもおしゃれに作成し、アピールポイントも学びます。
クラウドソーシングには、ココナラを使用します。
実案件対応の実績がなくても受注できるよう、
しっかり準備をしていきます。
準備が整ったら、受注開始です。
依頼が来るまでに、「受注前に知っておきたいこと」を確認しましょう。
コーディング学習を始める前に環境を整えよう
コーディングをするときには、コードを書くエディタを用意します。
たくさんの有名なエディタがあるのですが、
コーディングにはVSCodeがおすすめです。
（とにかく使いやすいです。他のエディタを使用した時にVSCodeの使いやすさを実感します）
そしてブラウザはChromeを使います。
（後に解説します、デベロッパーツールという開発ツールが使用できます）
導入セットアップ方法は、ドットインストールの通りに準備すればokです。
web制作の開発環境を整えよう windows編（ドットインストール）
web制作の開発環境を整えよう macOS編（ドットインストール）
１ヶ月目 スキル習得
１. スキル習得
HTML/CSS、レスポンシブデザイン
まずは、webサイトの基本であるHTMLとCSSを学びます。
そして、現在は多くのユーザーがスマホからwebサイトを閲覧するため、
スマホ表示（レスポンシブデザイン）も同時に習得します。
【学習すること】
【動画学習】ドットインストール
初めてのWeb制作
ドットインストールは、とても有名な動画プログラミング学習サイトです。
月額980円(税抜)で、初心者でも分かりすく動画で解説してくれています。
まずは、HTMLとCSSの基礎を理解します。
この時、できれば動画をただ見るのではなく一緒にコードを書いてみましょう。
【テキスト学習】１冊ですべて身につくHTML&CSSとWebデザイン入門講座
HTML/CSSで実際に１つのサイトを作ります。
サイトの作り方を１から学べるだけでなく、
webサイトに必要な、
お問い合わせフォーム設置、YouTube動画・SNS・Googleマップの挿入など
とても実用的なことを学びます。
そして、レスポンシブデザインもここで習得します。
HTMLとCSSを学ぶテキストは、この１冊で十分です。
私は、今でも辞書がわりにこの本を開くことがありとても重宝しています。
【目指すレベル】
・webサイトがどうやって作られるかを知る
・どのHTMLタグ、CSSプロパティを使えばデザインを再現できるのかを知る
SUZUコードは暗記しなくて大丈夫です。
わからなければその都度ググれば大丈夫ですし、
よく使うものはコードを書いていくうちに自然と覚えます。
jQuery
アニメーションなど、サイトに動きをつけるためにjQueryを習得します。
jQueryは、プログラミング言語Javascriptライブラリです。
【学習すること】
【動画学習】ドットインストール
jQuery入門
jQueryの全体像は、ドットインストールでつかみます。
【テキスト学習】 jQuery最高の教科書
テキストが厚く、後半になるほど難易度は高いですが、
プログラムの仕組みがわかりやすく解説されています。
前半の基礎まででokです。
【テキスト学習】 現場のプロが教えるWEBデザイン新・スタンダードテクニック37
こちらは参考までに。余裕がある方はやってみてください。
実際のサイトでよくある実装がまとめられています。
各実装の解説は少ないですが、webサイトでよく使われる機能を知ることができます。
ライブラリはjQueryに限らずいろいろ使用されているので便利です。
【目指すレベル】
・よくある機能をカスタマイズできるようになる
SUZUコードを完璧に理解しなくて大丈夫です。
１からプログラムを書けることに越したことはありませんが、
現時点では、webサイトでよくある機能を実装したコードを
自分でカスタマイズできれば問題ないです。
２ヶ月目 コーディング実践
2. コーディング実践
次はいよいよ実際に本番と同じ環境で実践を積んでいきます。
コーディングの実践をするには、
・デザインカンプからコーディング
・模写コーディング
の２つの方法があります。
デザインカンプからコーディング
実案件では、デザインカンプと呼ばれるものを見てコーディングをしていくことがほとんどです。
そのためには、Adobe社のデザインツール（Photoshop、Illustrator、Xd）を使用します。
※デザインツールは有料です。
まずはデザインツールの使い方を習得しましょう。
とは言っても、コーディングするために覚えることは、たった５つです。
１時間もかからないので覚えてしまいましょう。
こちらの記事で、デザインカンプからのコーディングの仕方を解説しています。
Photoshopデザインカンプからのコーディングの仕方
Illustratorデザインカンプからのコーディングの仕方
Xdデザインカンプからのコーディングの仕方
模写コーディング
模写コーディングとは、
web上に公開されているサイトやランディングページを見ながらコーディングしていく、
コーディングの練習方法です。
実際に公開されているサイトを見ると、非常に勉強になります。
よく使われているレイアウトや機能を知ることができます。
模写コーディングには、
Googleの拡張機能を使ってフォントやカラー情報などを取得して、
サイトを見ながらコーディングを行なっていきます。
▼こちらの記事で紹介しているランディングページやサイトを実際に模写してみましょう。
SUZUやっていて、どうしてもわからない時、うまく行かない時は下記の順番で対処しましょう。
- Googleで検索
「画像」「 横並び 」「ならない」などで調べれば答えが見つかります。
検索力（正しい・必要な情報を見極めるスキル）が身につくので大事ですね。
2. デベロッパーツールでサイトのソースコードを見る
あまり答えばかり見ては勉強になりませんが、
どんなコードを使って実装しているかを見るのは勉強になります。
※同じレイアウトでも、違うタグを使って実装できるので、
デベロッパーツールで見たものだけが正解というわけではないことは覚えておいてください。
デベロッパーツール
デベロッパーツールは、エラーの原因を調べたり、どんなコードを使っているかを確認したりと、
使う頻度がかなり高いので使えるようにしましょう。
ドットインストールで使い方を学べます。
Chrome Developer Tools入門
３ヶ月目 案件獲得準備
3. ポートフォリオ作成
これまでに制作してきたものを、１つのサイトに実績としてまとめます。
ポートフォリオは必須です。
とは言っても、必ずしも求められるわけではないですが、
自分がどのくらいできるかを、口頭で説明するより説得力があります。
なにより、あるとアピールが楽です。
クラウドソーシングでも、転職活動でも使えるので
作っておきましょう。
ポートフォリオの作り方
ポートフォリオを作成する方法はたくさんあります。
・自分でデザイン、コーディングして作成する
・テンプレートを使用して作成する
・ポートフォリオサイトを活用する
・Wordpressテーマを使用して作成
ポートフォリオを作成する目的によって作成する方法が違います。
自分の目的に合った方法でポートフォリオを作成しましょう。
詳しいポートフォリオの作成方法、アピールポイントを踏まえて
下記の記事で詳しく解説しています。
▼非デザイナーでも簡単におしゃれなポートフォリオを作成
SUZUこの記事では、早く効率よくポートフォリオを作成するために、
「テンプレートを使用してポートフォリオを作成する方法」
について解説しています。
4. クラウドソーシング受注準備
クラウドソーシングでの活動を開始するための準備をします。
準備することは、３つです。
・クラウドソーシングサイトに登録する
・プロフィールを作成する
・サービス紹介文を作成する
クラウドソーシングサイトは、
「ココナラ」を使います。
他のサイトにも複数登録するのもありですが、
１つのサイトに集中してランクをあげる方が効率いいです。
そしてその中でも、なぜココナラなのか？
それはクラウドワークスやランサーズも良いのですが、
競争率が激しく、こちらから提案（営業）をひたすらしないといけないので、私は心が折れました。
ココナラは、こちらから提案するのではなく、
サービスを出品して、お客様からお問い合わせや申し込みがくる仕組みになっています。
心が折れる前に、コーディングの自信つけましょう。
▼ココナラで受注をするための準備
5. クラウドソーシング受注開始
ココナラのサービスを公開したらいよいよ受注開始です！
お問い合わせや見積もり相談が来るまでに知っておきたいことを確認しておきましょう。
知っておくことでトラブルを防ぐこともできます。
▼案件受注前に知っておきたいこと
まとめ
まずはコーディングで5万を目指そう！
コーディングがweb制作の基本。コーディングができれば将来の選択肢が増えます。
「自分で稼ぐスキル」を身につけると世界が違って見えます。
キツイのは最初の5万です。
5万稼ぐことができたら、次は10万を目指しましょう。
【関連記事】
