私は現在35歳でWebコーダーとして２年目に突入しました。
元々Web制作に関しましては、素人でしたが、2021年の１月から勉強を始め、4月に初案件獲得。
6月より現在の職場でコーダーとしてWeb制作の現場で働き始めました。
ほぼ素人の私がどうやって案件を獲得し、就職を果たしかその流れを記載していきますので、ぜひご参考にして下さい。
はじめに
スクールは必要か？
まず、こういった時に考えが浮かぶのがオンラインスクールの存在です。
ネットで検索すると大量のオンラインスクールが表示されると思います。
値段やカリキュラムも多岐にわたっており、だいたい数万円～数十万円くらいです。
絶対に必要なものではないと思います。
私のように独学で勉強されてる方も多くいます。
スクールの利点
スクールによっては、サポート状況は様々ですが、以下のような利点があると思います。
- その道のプロが作成したカリキュラムで、効率よく最短で学習ができる
- メンターに質問ができる上、コードのレビューなどもしてくれる。
- 副業や転職のサポートをしてくれるスクールもあり。
- スクール受講生同士で仲間ができる
- 卒業制作がそのままポートフォリオとして使える
などなど それなりのお金を払うだけあり、入学するメリットは大きいです。
そもそも高いだけで通う意味がなかったら、誰も受講しませんよね（笑）
気になるなら体験入学や話を聞いてみる
体験入学は無料で参加できますので、気になるのならば、体験入学や無料相談など実際に試してみて決めましょう。
私も実際に体験入学しましたが、無料で参加でき、その後に勧誘などもなかったので気軽に体験してみましょう。
入学するならしっかりとしたスクールを選ぶ
スクールはまさに様々ありますが、決して安くはない金額を払いますので、しっかりとしたスクールを選びましょう。
安いスクールはクラウドワークスでメンター募集などしてますので、スクールで検索した際に上位に表示されるテックアカデミーのような大手に入学するのが安心だと思います。
無料スクールは絶対に受講する
なんと世の中には無料スクールという物が存在します。
詳細は後述しますが、30日限定で完全無料で学べるスクールがあります。
Web制作の基礎中の基礎が学べるので必ず受講しましょう。
Zero Plus Gate
１．Twitter などのSNSを開始する
前置きが長くなりましたが、ここから独学で頑張る方向けに、どうやって案件を獲得するかを記載していきます。
まず最初にSNSです。
絶対ではありませんが、まずはSNSを開始すると良いです。
理由は下記の通りです。
・学習内容をツイートすることで、やらないといけなという気持ちになる。
・同じ学習している方がたくさんいるので、モチベーションアップになる。
・有益な情報が多く手に入る。
Web制作に役立つ情報や、時には仕事の募集などされてる方もいらっしゃいます。
ぜひSNSにも登録して仲間を探してみましょう
SNS登録する際の注意事項
SNSをやる際に注意した方がいいことがあります。
Web制作始めました！！
などといってSNSを始めるとまず、ダイレクトメールが良く届きます。
内容は、様々ですが、
「私も始めました」とか「サポートさせてください」などといった感じですが、そのままやりとりを続けると、高確率でスカイプなどで話しませんか？ といってきます。
これはほぼ、営業の電話です。
私もこれまで6人くらいと方と電話しました。
ものすごく人当たりが良くて話しやすい人ばかりですが、最終的にスクールを進めてきます。
これまで仲良く話してたので、ものすごく断りづらいです。
そのまま流されてスクールに入らないよう注意しましょう。
（入るならちゃんと自分で調べて納得したところに入りましょう。）
2．Zero Plus Gate を受講する
プログラミングスクールと検索すると多くのプログラミングスクールが出てきますが、誰でも受講できて、無料なのは私が知る限りここだけです。
「Zero Plus Gate」はWeb制作の始め方から、PCサイトの作成、JavaScript、WordPressの使い方など、Web制作の基礎中の基礎を動画講座で学習することができます。
無料と侮るなかれ、動画講座だけでなく、サポートも万全の体勢です。
- Slackで講師に何回でも質問ができる
- 平均10分×60本の動画でスキマ時間に学習できる
- 最大4回の学習サポート面談
30日間限定で完全無料です!
30日過ぎるとコンテンツへアクセスできなくなります。
私が「Zero Plus Gate」を強くおすすめする理由は、無料で学べるという点だけではありません。
「Zero Plus Gate」を通じて、WEB制作の基礎をしっかりと学ぶことができるからです。
家を建てるとき、まずは強固な基礎が必要です。同じように、プログラミング学習でも最初に基礎を固めることが、次のステップへ進むための鍵となります。
基礎が不十分なままでは、応用や高度なスキルを習得するのは難しいでしょう。
「Zero Plus Gate」は、“「最初の一歩目」をしっかり支える存在でありたい”という思いから生まれたスクールです。初心者に寄り添い、WEB制作を学ぶための最適な教材と学習環境を提供します。
WEB制作の第一歩を踏み出したいと考えている方にとって、「Zero Plus Gate」は最良の選択です。
Zero Plus Gate
私ももちろん受講しているので、その内容や良かった点悪かった点などを纏めています。
こちらもご参考にどうぞ。
3．progate（プロゲート） を始める。
プロゲートはプログラム初心者用学習サイトです。
豊富なコースから学習したいコースを選んで学習を進めていきます。
「Zero Plus Gate」で基礎をしっかりと学びましたが、「Zero Plus Gate」はあくまで基礎を学ぶためのスクールです。
例えば、PCサイトの制作を学ぶことはできますが、スマホサイトの制作や応用的なスキルまではカバーしていません。
次のステップとしておすすめしたいのが、「Progate（プロゲート）」です。「Progate」に登録することで、さらに幅広い知識を習得できます。
Progateの魅力
Progateの最大の魅力は、ただテキストを読むだけでなく、実際に手を動かしてコーディングしながら学べる点です。学んだ知識を即座に実践に移すことができるため、理解が深まりやすくなります。また、ブラウザ上でコーディングが完結するため、煩雑な開発環境の設定が不要で、気軽に学習を始められるのも大きなメリットです。
有料プランで効率的に学習
ただし、Progateは無料プランでは一部の内容しか学べません。本格的に学習を進めるには、月額1,078円（税込）の有料プランへの登録が必要です。
ここでポイントとなるのは、「短期集中で学習を終えること」です。1か月で必要な内容をしっかり学べば、実質1,078円で多くの知識を身につけることができます。学習が完了したら有料プランを解約することで、コストを最小限に抑えられます。
基本的な流れ
プロゲートの基本的な流れを説明します。
1.コースを選択すると下記のように、項目ごとに分かれているので、学習したい項目を選ぶ。
２．スライドで分かりやすい解説を見る。
３．実際にスライドの内容をコーディングする。
４．章の最後にチャレンジ問題という腕試し問題に挑戦する。
これを繰り返して学習を進めていきます。
progateのどのコースをやればいいの？
さて、ではWeb制作を始めるにあたってどのコースをやればいいのか？
ですが、下記のコースをやりましょう！
■Web開発コース
- HTML & CSS 初級編～上級編 ＋ Flexbox編 （目安３日～１週間）
- Javascript 1～2の配列まで （目安１日～２日）
- jQuery 初級編 ～ 上級編 （目安2日～３日）
以上になります。
こちらを一通りやればWeb制作に必要な知識は手に入ります。
HTML & CSSコース
HTML&CSSコースは全て一通り学習しましょう。
ただ、コースの内容を全部覚える必要はありません。
コーディング中に分からないところや忘れたところが出てきたら、また戻ってスライドを見れば良いです。
Javascript
繰り返しやif、配列など基本的なことが分かれば大丈夫です。
また、ゼロから書けなくても基本コピペで作るのでJavascriptはそこまで深く学ぶ必要はありません。
jQuery
jQueryはjavaScriptを簡単に記述できるようにしてくれる、Web制作に必須のライブラリです。
オワコンと言われることもありますが、まだまだ現役でガンガン使われてます。
チャレンジ問題はどうするの？
Progateのレッスンの合間に出てくるチャレンジ問題は、正直言ってかなり難しいです。これまで学んだことの復習として設計されていますが、基本的にはノーヒントで自分でコーディングする必要があります。
正直、これをスムーズに解ける人はほとんどいないと思います。私自身も最初は全然解けませんでした。
個人的な意見としては、チャレンジ問題に時間をかける必要はないと思います。私もほとんど取り組みませんでした。その理由は、チャレンジ問題に取り組むよりも、実際に手を動かして模写コーディングを進めたほうが効率的だからです。
模写をしていると、わからないことが何度も出てきます。そのたびに自分で調べて解決することで、より深く理解できるようになります。知識を詰め込むだけでは上達しません。実際に手を動かしてコーディングすることで、スキルが身についていくのです。
次のステップへ
Progateは基本を学ぶための優れたツールですが、そこに時間をかけすぎる必要はありません。短期間で効率よく学び、次のステップへ進むことを目指しましょう。模写や実践的な課題に取り組むことで、より早く成長できるはずです。
4.複数コーディングして力をつける
progateを一通り学習し終えたら、コーディングを始めましょう。
コーディング上達の秘訣はインプットよりアウトプットです。
頭で色々覚えるより実際にコーディングして勉強した方が何倍も速く習得できます。
絶対に分からないことだらけですが、そのたびprogateのスライドを見たり、ネットで調べたりで進めていきましょう。
模写をしてコーディング力をつける
実際に存在するサイトを模写（現在存在してるサイトを真似してコーディング）します。
おすすめの模写サイトなど、難易度別に教えてくれるているサイトなどたくさんありますので、それを参考に進めます。
模写のいいところは、コーディングが終わった後に、実際のサイトを見て答え合わせができることです。
自分のと見比べてみると新たな発見があるはずです。
それを次回のコーディングに活かしましょう。
https://code-step.com/coding-recommend/
XDカンプからのコーディングを行う
模写を複数こなしたら、XDカンプ（デザイン）からのコーディングを行いましょう。
実際のコーディングでは、デザイナーから渡されたXDやFigma、illustratorなどで作成したデザインを元にコーディングを行います。
デザインからの数字の拾い方や画像の書き出し方法などを学びましょう。
ネットを探せば、コーディング用にカンプを用意してくださる方もいらっしゃいます。
https://code-step.com/xd-public/
どれくらいコーディングすればいいか
さて、どれくらいコーディングすればいいかですが、私の場合は模写１、カンプ２くらい作って、それからポートフォリオを作成し始めました。
最初のうちは案件応募してもとれませんし、案件獲得に向けて早めに動いておきましょう。
案件獲得活動しながら、コーディングの練習も進める形です。
JSはどれくらいやればいいか？
JSはWebサイトで使われる基本的な機能が作れるようになっておけば安心です。
- ハンバーガーメニュー
- スライドメニュー
- タブ切り替え
- スライドショー
- 追従ヘッダー
これが出来れば通常のWebサイトでは大丈夫です。
5．ポートフォリオ作成
ある程度コーディングの力をつけたら、ポートフォリオを作成します。
ポートフォリオは自らの作品や、実績を見せるサイトで、Web制作の案件を獲得するのに必須です。
現時点では掲載する実績はありませんので、模写などのコーディング実績を掲載します。
ただ、いきなり自分のサイトを作成しろと言われても難しいと思いますので、ネットに転がっている無料テンプレートなどを利用するのが良いと思います。
ただ、テンプレート丸出しだとアピールできるところがありませんので、テンプレートを元に特色を加えるとよいです。
私の場合は、自らの写真をクリックすると、セリフが出るという謎のサイトになってました。
また、ポートフォリオを作成するにはレンタルサーバーが必要になります。
レンタルサーバーは下記の２社が有名です。
どうしても出費は発生してしまいますが、ポートフォリオは必要ですので、ここは投資と思い工面しましょう。
6.案件獲得へ動き出そう
ポートフォリオが出来ると、いよいよ案件獲得へ動きましょう。
案件の獲得は大きく分けて２つになると思います。
・クラウドワークスのような副業サイトで、単発の案件を受注するか
・Web制作会社さんから仕事を請け負いで仕事を得るか
それぞれ記事をまとめてますので、こちらをご参考ください。
7.ひとつ上のコーダーへ
案件獲得を初めてもなかなか最初はうまくいきません。
最初の一つの案件を獲得するのはそれだけ難しいのです。
案件を獲得できる可能性をあげるため、デザイン道理にコーディングできるようになったら、さらに技術を向上させましょう。
CSS設計を学ぶ
htmlは、デザイン通りにコーディングできるのがスタートラインといっても過言ではありません。
他のプログラム言語より簡単ですが、その分しっかりと考えてコーディングしないと後々、大変なことになるのが、htmlとCSSです。
それを解消するのがCSS設計という考え方です。
CSS設計の手法は様々ありますが、「BEM」が基本で多くの場で使われているので、BEMだけ覚えておけば大丈夫です。
sassを学ぶ
sassはcssの拡張言語です。
関数や変数など便利な書き方が出来、コーディング速度の向上につながります。
また、案件によってはsassが使えるかどうか聞かれますので、sassについても習得しましょう。
WordPressを学ぶ
ここまで学習できたら、もう立派にコーダーと名乗っても良いと思います。
コーディングは出来るけど、ワードプレスは出来ないという方も結構います。
その分案件の競争度は下がりますので、ワードプレスを勉強して、ワードプレス案件にも応募してみましょう。
ちなみにワードプレスは書籍での勉強がおすすめです。
私は全て書籍で勉強しました。
おすすめは書籍は下記をご覧ください。
まとめ
以上 未経験からのWeb制作ロードマップでした。
Web制作に近道はありますが、結局自分がどれだけ勉強したかにかかっています。
案件応募と技術向上の勉強を繰り返し行いましょう。
一つめの案件を獲得するのは難しいですが、諦めなければチャンスはやってきます。
一つ獲得すると後はとんとんと行けるはずです。
頑張りましょう！！