【プログラミング独学】Web制作で最速で案件を頂く学習方法

アイキャッチ画像プログラミング

はじめまして。コバヤシミヅキです。

Web制作を勉強し始めて、3ヶ月で初案件を獲得しネット上で稼ぐことが出来た僕の実際に行ってきたことをもとに記事を書いていきたいと思います。

正直なところ初めてお仕事をお受けするときは不安もありました。

それ以上にこの業界で小さな成果でも良いからなにか実績がほしい、今まで勉強してきたことの結果を残したいという気持ちが大きかったです。

今まではなんの取り柄もなく、ただダラダラと生きてきた大学生でした。

ですがWeb制作を3ヶ月間集中して勉強することで、自信にもなりましたし目標もできたり、毎日を無駄にしないようやるべきことを淡々とこなす様になりました。

また、プログラミングを学習していく過程をできるだけわかりやすく、簡潔に説明しました。

この記事通りに学習をすすめることで、プログラミングの基礎が最短で、かつ確実に身につけられると思いますので、一緒に頑張りましょう!!

 

     この記事で分かること

  • プログラミングで稼ぐ方法が具体的に分かる
  • 3ヶ月で案件が取れるようになる

Web制作での目標設定をしよう

まずはじめに、この記事を読んでくださっているということはなにかきっかけや目標がありプログラミングを勉強しようと考えていると思います。

なんの目標もない状態でただ学習していても、モチベーションの維持が大変ですし、学習スピードも遅くなってしまいます。

細かな目標は現時点では考えなくてもよいかと思いますが、ある程度の大まかな目標は持つようにしましょう。

目標と言っても人それぞれ目指す場所は違います。

例えば

  • 転職したい
  • 就職に役立てたい
  • 時給労働を抜け出したい
  • 副業で月5万円稼ぎたい

など、挙げればいくらでもありますね。

正直なところ始めはお金を稼げるようになることを目標として良いと思います。

期間を設定しよう

あと、大切なのは適切な期間を設定することですね。

上記の目標を掲げたとしても3ヶ月でできることを1年も2年もかけてたら時間の無駄ですよね。

逆に、期間が短すぎても達成できればすごいですが、達成できなかった時に落ち込んでしまいますのでやめるべきです。

そんな事言われても、まだなにもわからないよという方安心してください。

目標はこれで決まり

僕が提示する目標は3ヶ月で初案件獲得する」

これを目標にしましょう。

この記事通りに学習を進めていけばおそらく多くの人は、案件をこなせるようになるようになります。

人によって学習に当てられる時間は限られていますので、一概には言えませんが学習スピードの遅い僕でもできた内容です。

また、学習していく中で自分のしたいことが分かってきます。

アプリ開発をしたくなったり、他のプログラミング言語を学んでみたくなったりします。

それはそれで、とても良いことですよね。そうすると、具体的な目標も建てられるようになっていると思いますので、まずは「3ヶ月で初案件獲得」を目標に学習を進めていきましょう!

それ以前に自分にはプログラミングは向いてるの?と思う方は以下の記事を参考にしてみてください。

学習環境を整えよう

プログラミングを勉強したいけどなにが必要なの?

という疑問にお答えします!

パソコン1台でOK

Apple公式サイト

引用元:Apple公式サイト

プログラミング学習を始めるのに必要なものはなにもありません、パソコン1台で始められます。

ぶっちゃけ動けばなんでも良いです。僕が勉強を始めたときは、もともと部屋にあった動くかもわからないデスクトップパソコンで始めました。笑

Web制作の基礎の時点でメモリを大幅に使う作業もないので、スペックも気にしなくて良いと思います。

なので、まずはもともと持っているものや持っていなければ、中古でも結構なので安いノートPCを用意し、学習を開始しましょう。

PC選びは以下を参考にしてくださいね。

クラウドソーシングに登録しよう

クラウドソーシングとはインターネット上で企業や個人がスキルを持った不特定多数の人に業務を委託するという新しい業務形態のことです。

これからプログラミングの勉強を始めようとしている人は登録しておいたほうが良いです。

登録し、実際にどのようなお仕事があるのかを確認しておくと、学習するべきことが具体的にわかります。

まずは登録無料でクラウドソーシングサービス最大手のクラウドワークスを利用してみてください!

日本最大級のクラウドソーシング「クラウドワークス」

仕事を探す

ホームページ制作・Webデザイン

HTML・CSSコーディング

このような内容で検索すると実際のコーディング案件が出てくるので参考程度に見てみましょう!

プログラミング学習に必要なソフト

  • VScode
  • Google chrome

上記の2つはプログラミングを学習する上で必須のソフトです。

VSCODEとはコードエディタのことです。

プログラミングのコードはWindowsやMacに入っているメモでも書くことが出来ます。

上記のVSCODEとは、機能をプログラミング向けに最適化されたメモ帳のことです。

以下から無料でダウンロードが出来ます!

なぜ他のブラウザではなくGoogle chromeを使うのか。

理由としては、検証という機能が超絶便利だからです。

見ているWebページのコードを右クリックで簡単に表示させることが出来たり、模写に便利なプラグインが揃っているという点からおすすめしています。

Web制作の基礎を学ぼう(HTML、CSS)

パソコンに付箋が貼ってある画像

まずは、Web制作の仕事を行う上で必須のHTMLとCSS(+jQuery)の勉強をしましょう。

人によって動画を見て学ぶのか、書籍を用いて学ぶのか、実際に手を動かして学ぶのかで勉強のし易さが変わってくると思います。

この時、なにで勉強するか迷うと思いますが以下から自分に合う勉強方法を見つけてみましょう!

おすすめは「書籍+動画」「書籍+Progate」などで書籍をなにかしらの媒体と組み合わせる方法です。

理由として、学習や制作の最中に手元においておき、辞典のような感覚でサクッと調べられるので時短になりますし網羅的に学習もできます。

書籍から学ぶ

よくわかるHTML5+CSS3の教科書【第3版】

こちらの書籍はとにかく分かりやすいですし、レスポンシブデザインやグリッドレイアウトにも対応しているので持っておいて損はない一冊になっています。

初心者でも、なにか制作するときにも手元においておきたいですね。

僕も未だに読み返すことがあります。笑

動画で学ぶ

ドットインストール

こちらもプログラミングの動画教材として有名ですね。

HTML、CSSだけでなくBootstrapなど他にもコンテンツが充実しているので、動画で勉強したいという人には最適です。

YouTube
YouTube
YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

え?YouTube?と思った方、待ってください。

YouTubeで初心者向けにプログラミングを解説している動画がめちゃくちゃあります。

試しに「HTML 入門」などで検索してみてください。

あなたに合う教材が見つかるかもしれません!

実際に手を動かして学ぶ

Progate
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

僕はProgateと書籍を組み合わせて基礎を固めていきました。

実際に手を動かしながら進めていけるので、とても楽しいですし勉強をしているという意識もなく学習を進めていくことが出来ます。

1からコードを書いてサイトを作成することもできるのである程度の力をつけることが出来ます。

基礎学習をする上で頭に入れておくべきこと

ここでは、基礎学習を行う上で頭に入れておいたほうが良いことを3つだけご紹介します。

これが頭に入っているだけで学習スピードや効率が大幅に変わってきますので、是非参考にしてみてくださいね。

暗記はしない

プログラミング学習において、暗記ほど効率の悪い勉強方法はないです。

真面目で、中学や高校で良い成績を取ってきた人ほど、暗記をしがちです。

今の時代、どこでもインターネットと繋がっていて、分からいことがあればすぐに検索できるのに暗記してたら効率悪すぎですよね。

カンニングOK

プログラミングはテストではありません。

実際にコードを書くときに、書籍やネットで調べるのは禁止なんてことは絶対にありません。笑

実際のコードを書くときには、学校のテストとは違うのでカンニングOKなのです。

悩み続けない

基礎学習をしていく上で、同じところで何時間もひらめくまで諦めないという人がいます。(僕がそうでした笑)

良いことだとは思うのですが、プログラミングではNGです。

理由としてはやはり時間がもったいない。

上でも解説したとおり、暗記不要、カンニングOKですから、一つの疑問を解決するのに何時間も時間を撮っていられないんですよね。

なので、自分で10分悩んだら調べるというようなルールを決めて基礎学習に取り組みましょう!

プログラミングスクールに通うのはあり?

僕個人としては、全然ありだと思います

独学でプログラミングを学ぶとなると相当な気合マネジメント能力が必要になってきます。

その学習以外の面をスクールに任せ、学習のみに専念するという気持ちでスクールに入り、その道のプロに指導をしてもらうというのは、大幅なショートカットになり得ます。

しかし、通うべきでない人もいます。

それは、プログラミングスクールに通えば楽に転職、就職ができると考えている人です。

どうしても、スクールでは受動的になってしまいがちですよね。

やはり自発的に行動できる人を企業は求めていますので、上記のような人は避けるべきです。

続けられるか心配、最短でプログラミングを身につけたいと考える人はプログラミングスクールに通うことをおすすめします!

サイト模写をしてみよう

基礎学習を終えたら、実際のお仕事を受注するためにサイト模写(模写コーディング)をします。

Progateを終えたばかりでは、少し難しいかもしれませんが、とても大切な工程なので確実にこなしていきましょう。

これができるようになると、自分の力がわかり案件獲得までグッと近づきますので頑張りましょう!

サイト模写とは、現在公開されているWebページを自分の力で作ってみることを指します。

詳しい手順や必要なツールはこちらの記事で紹介していますので参考にしてみてください!

2~3個のサイトを模写出来るようになったら次に進みましょう!

デザインカンプからのコーディングをしよう

サイト模写がある程度できるようになったら、次はデザインカンプからのコーディングをしましょう!

ほぼ、実際のお仕事の内容と同じなので、これができるようになれば実際のコーディング案件は受注出来るようになります。

デザインカンプとは

デザインカンプというのは制作するWebサイトの完成イメージとなる図です。

Web制作の現場では

ワイヤーフレーム(サイトの狙いや目的を示した仕様書)の作成

ワイヤーフレームに沿ったデザインカンプを作成

デザインカンプをもとにコーディング

大体このようにプロジェクトが進められます。

なのでデザインカンプからのコーディングができれば、早速お仕事への提案も可能というわけですね。

コーディングの流れ

デザインカンプからのコーディングの流れは以下の記事で詳しく説明していますので是非参考にしてみてくださいね。

coming soon

無料で僕の作ったデザインカンプも配布していますので、チャレンジしてみてください!

自分の制作物を作ろう

ここまでくれば、ある程度の力はついているはずです。

この段階から徐々にクラウドソーシングサービスを使って提案を始めても良さそうですね。

しかし、自分でなにかを作ったことが1度もないというのは依頼者側からすると少し心配ですよね。

それを解決するために、ポートフォリオサイトの作成をします。

ポートフォリオサイトとは

ポートフォリオサイトとは、簡単に言うと自己紹介ページのようなものです。

自分のプロフィールや経歴、制作した制作物などを1つのWebサイトにまとめたものです。

お仕事を受ける際の名刺代わりにして見てもらうのが一般的で、それをもとに依頼者が制作者を決める判断材料となります。

以下が僕の初めて作ったポートフォリオサイトになります。

Mizuki | Portfolio

見ていただくと分かるのですが、全然大したことないですよね。

とにかくこのぐらいのレベルで良いので1つ自分の制作物を作成し、慣れることが大事になります。

サーバーを契約しポートフォリオサイトを公開する

せっかく作成したポートフォリオサイトですが、自分のPCの中だけにあっては誰にも見てもらえません。

なのでそれを誰でも見ることが出来るようにWeb上に公開しなくてはいけません。

以下の記事でおすすめのサーバー・ドメイン取得サービスを紹介していますので参考にしてください。

サーバー・ドメインにも触れておこう

ここでも公開することだけが目的ではありません。

実際の案件でも、サーバーにアップして納品のような形や、サーバー・ドメインを取得してほしいというような依頼がたくさんあります。

それらにも対応できるようにここで1度その仕組みを理解し、クライアント様の要望に答えられるようにしましょう!

Xserverでは無料期間やXfreeという無料でサーバーが借りられるサービスがあるので、ここで登録するのがおすすめです。

エックスサーバー

また、FTPソフトの使い方もここで慣れておくと良いと思います。

少し使えばどちらも簡単に覚えることが出来るのでやってみましょう!

実際に案件に提案してみる

ここまでで、実際の案件に提案はできる程度のスキルはついていると思います。

不安もあると思いますが、ここで実際の案件に提案してみましょう。

いきなり、1からホームページを構築するというようなお仕事は難しいかもしれないので、既存のホームページの修正などの仕事に提案するとよいかと思います。

そこで力をつけた後に1からホームページの構築やココナラでサービスを出品しても良いかもしれません。

以下からどんなサービスがあるか確認してみてください!

ココナラでサービスをさがす

あとは行動するのみ!

本記事のまとめ

まずは目標設定をしよう。決められなければ「3ヶ月で初案件を獲得する」を目標に。

プログラミングを始めるには今あるPC1台で十分

VScodeとGoogle chromeをダウンロードしておこうHTML・CSS(jQuery)の基礎を最速で身につけよう

サイト模写をしてアウトプット

デザインカンプからのコーディングで実務レベルへ

ポートフォリオサイトを作成し信頼されるエンジニアになろう

鬼のように提案して案件を獲得しよう

ここまで、コツコツ積み上げた後に僕は案件を獲得することが出来ました。

以下の記事では初案件を獲得した時のレベルや依頼内容を紹介していますので、参考にしてください!

本記事を見ていただいた方なら分かるかもしれませんが、プログラミングの習得は思った以上に時間と労力がかかります。

ですが、スキルを持つことでみなさんが今抱えている金銭的な悩みを解決したり、充実した日々を送れるようになることは間違いありません。

頑張りましょう!!

タイトルとURLをコピーしました