【経験談】プログラミング初案件までにかけた時間と必要なスキル

person using laptop プログラミング学習
Photo by picjumbo.com on Pexels.com
2020.10.29

私は全くWebの知識がないところからプログラミング学習開始し、

2020.9月初めて案件を獲得して納品まで完了しました。

この記事は、過去の自分のような

「副業でプログラミングに興味があるけど何から始めたらいいか分からない…」

「すでに勉強を始めているけど先が見えなくて辛い…」

という方の参考になればと思い書きました。


Web制作未経験者が初めての案件を獲得するまでに

「どれくらいの時間」をかけて、

「どんなスキルを付けてきたか」を

経験を振り返りながら共有します。


この記事を書いている私は、2020.4.27にプログラミング学習開始しました。

この時はWebサイトに関する知識は全くなく、

「ブラウザ」という言葉ももほとんど聞いたことがなかったです。


その後、勉強開始から約5ヶ月後の2020年9月21日に初案件を獲得し、

無事納品しました。（WordPressなど使用しない静的サイト。）

私個人の経験をもとにお話するので全員には当てはまらないと思いますが、

初案件を取るまでの経験談として参考になれば幸いです。

勉強開始から初案件をもらうまでにかかった時間は「約300時間」

私が勉強開始から初案件をもらうまでにかかった時間は

「約300時間」です。（私は、約5ヶ月）

私は平日は会社員として働いています。



学習時間は、

平日の仕事、夕食後に1時間。

休日(土日)に約5時間です。


時間帯は、月〜金に1時間と土日に10時間程度で、

週に15時間ほどでした。

初案件獲得までに約5ヶ月かかったので、

15時間×20週(5ヶ月)＝300時間です。

勉強期間3ヶ月でも案件獲得は可能？

可能です。

勉強期間の長い短いは、自分がどれくらい学習に時間を作れるかの違いです。


週末にもっと時間を作れる人や、

学校の長期休暇などでもっと時間を作れる人なら可能です。


脳は寝ているときに記憶するそうなので、

私は睡眠・休養も大切にしています。

初案件に必要なスキルは「HTML/CSS」と「jQuery」を少し。

初案件に必要なスキルは

  • 「HTML/CSS」
  • 「jQuery」を少しです。

実際の私の案件で使用したのは上記のみです。

（強いて言うなら、その他ファイルの圧縮）

私の初案件はデザインカンプ(JPG)からのサイトコーディングでした。

証券会社の比較サイトのコーディングです。



やったことは、

HTMLで必要な要素を書きだし、

CSSで見た目を整えて、

jQueryで動き(ハンバーガーメニュー)をつけて完成。

出来上がったファイルを圧縮してZipファイルを送信して納品しました。

初案件を取るまでに具体的にどんな学習をしてきた？

上記スキルを付けるためにしてきた学習は、下記の通り。

①ドットインストール

②本を見ながら、真似てコーディング

③学習サイトBRING YOUR OWN LAP TOPで学習

④iSARA模写

⑤ポートフォリオ作成

⑥クラウドソーシングに登録

その他1　模写解説ブログを書く

その他2　Twitter登録

①ドットインストール

生まれてはじめてのプログラミング学習教材は

ドットインストールです。

VSCodeをインストールするところから始め、

HTML/CSSを学習しました。

（無料でできる講座を一周くらいしかしていません。）

Webサイトってこうやってできるのか、

ということを初めて知りました。

Progateもドットインストールの後に少しやってみましたが、

キャラもかわいいし、

エディタ(VSCode)のダウンロードの必要もないので

とっつきやすくていいと思いました。

②本を見ながら、真似てコーディング

無謀にもドットインストールのHTML/CSSの後すぐに、

iSARA

のサイト模写に挑戦しようとしましたが、

どこから手をつけていいのか分からず、

パソコンの前でフリーズ。

ドットインストールでタグの付け方、

文字色の変え方等は学習していましたが、

いざサイトをコーディングしようとすると

何から手を付けていいのかわかりませんでした。

もう少し体系的に学ぶ必要があると思い、

本を一冊購入し、最終ページにあるコーディング制作を真似て

コーディングしました。

ここで初めてサイトをイチからコーディングしました。

イチからサイトを作るのは

ドットインストールやProgateとは全く違う経験で、

どういうステップでコーディングしていけばよいかが学べました。

今やるならmanaさんの本がいいと思います。

私はかなり後にこの本の存在を知ったのですが、

見ているだけでも楽しいです。


後から見たらこの本に私の知りたかったことが

たくさん書かれていたので、

初心者ならこの本から入ればよかったと思います。

③サイトで学習

本を見ながらコーディング後、

Webサイトで学習しました。

BRING YOUR OWN LAP TOP

上記サイトは英語になりますが、

YouTubeチャンネルを見てすごくためになったので、

会員登録しました。

12USD(約1,250円)/月

デザインやコーディング、AdobeXD、Photoshop、Illustratorの使用方法など

たくさんの動画教材があり

月額を払えばどれでも見られます。



今思うとレベル高めでしたが一つ一つの説明が丁寧で、

わからないところは止めたりしながら一緒に手を動かせたので良かったです。


現在は会員登録は停止していますが、

コーディング学習ですごくお世話になりました。

またデザインの勉強を始めるときに登録したいと思っています。



上記英語サイトでなくても、

日本語でもたくさん動画教材があるので、

1からサイトを1つ作成するような動画を

一緒に手を動かしながらやってみるのがいいと思います。

YouTubeなら無料です！

この段階で、サイト内で複数ページを作る経験をしました。

（ホーム、About、お問い合わせ等）

④iSARA模写

ある程度サイトコーディングのつかめたような気がしたので、

iSARA模写に挑戦しました。

でもやっぱり自力でやるのは無理でした。

YouTubeで解説動画を見ながら、

ググりながら進めました。

jQueryを実装したのはこのときが初めてです。

そしてこの時の経験から、

誰かの役に立てればと思いiSARA模写の解説ブログを書き始めました。

iSARA模写　解説①〜ヘッダー部分〜
iSARAヘッダー部分の模写をしています。
emienglish.net
2022.02.15

結局このときのブログ記事が、

後のコーディング案件をするときに役立ちました。

⑤ポートフォリオ作成

ねこぽんさん(@webdesigner_go)のサイト

ねこポン ブログ – 未経験からWebデザイナーへ！

を参考にさせていただきました。

サイトはねこぽんさんの人柄が出ていて、見ているだけで楽しいです。

ねこぽんさんも未経験から学習されて

事業会社とWeb制作会社のウェブデザイナーを経て、

今はフリーランスとして活動されています。


記事を見ているだけで、

とても元気づけられました。

サイト内ではポートフォリオ作成のコツ解説や、

テンプレートまでダウンロードできるようになっています。

私もありがたくテンプレートを使わせてもらっています。

デザインからコーディングまで自分ですべてすれば

いい経験にはなると思いますが、

どうしても自分のデザインではダサくなってしまうので、

あまりアレンジできていません。


知ってる人が見たら手抜きと思われるかもしれませんが、

ポートフォリオ内の作品に関しては自分でコーディングしたものです。



ポートフォリオはサーバーにアップしておくことをお勧めします。

私が使用したサーバーは、

mixhost

です。


FTPソフトは、

FileZilla

です。



下記が私のポートフォリオです。

Emiのポートフォリオ

⑥クラウドソーシングに登録

ポートフォリオが完成したところで

クラウドソーシングに登録しました。

ココナラ

ランサーズ

クラウドワークス

上記3つです。

登録しておけば、案件の相談などが来る可能性もありますが、

初心者・未経験・レビューなしでは案件が

向こうからやって来ることはほぼないと思います。


提案してみても返事すら来ないことが多く、

どうしたらいいかよく分かりませんでした。


そんなときに、

Twitterでよしおさん(@yesmyoshi)の案件サポートを発見し、応募。

運良くサポートを受けられることになり、

初案件を獲得できました。



その時のことは別途記事にする予定です。

その他1　模写解説ブログを書く

私は、模写解説ブログを書いていました。


これは実際に案件をする際に役立ちました。

ノートでも何でもいいので一度やったことは

記録に残しておくと本番でも役立ちます。

実際の案件で、

アコーディオンや吹き出しなどiSARAに似た実装が多く、

レスポンシブも模写での反省を活かしながら

案件をこなしました。

実際の案件では、実装したことのないキランと光るボタンや

テーブルの実装もググりつつでしたが

ググり力も模写で鍛えておいたほうが良いです。

その他2　Twitterに登録

プログラミング学習のために

初めてTwitterに登録しました。

案件サポートなどの機会にも恵まれ、

一緒に頑張っている人たちがいて励みになるので、

登録してよかったです。

コーディング初案件までに必要なかった学習

コーディング初案件までに必要なかった学習は下記のとおり。


・AdobeXD

・PHP

上記2つは、少し学習していましたが

私の初案件には必要ありませんでした。



いろんな方の体験談を読んで学習を進めてきましたが、

時には寄り道しながら勉強をすすめることもあると思います。

私の場合なら、XD、PHP、WordPressは寄り道でした。



でもやって無駄なことなんてないと思います。

あまり遠くまで寄り道してしまうと、

初案件までの時間がかかりすぎて

挫折してしまう可能性はあります。


可能であれば、何がやりたいか決めて

逆算するのが近道だとは思います。

以上、私がプログラミング学習を始めてから、

初案件獲得するまでに「かかった時間」と「つけたスキル」のお話でした。

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