Progateが終わった後にやること
今回はProgateが終わった後に一体何をするべきなのかについてまとめていきたいと思います。
最近、プログラミングを学習している人が多いですが、当然一番人口が多いのは、Progateあたりで学習をやっている駆け出したての人です。
そのため、本記事を見てくれている人の中にも、今まさにProgateをやっている人は、かなり多いかと思います。
自分は過去の記事でも書いてきましたが、プログラミングの勉強を始めるなら、一番初めはProgateをやっておけば間違いないです。
自分でエディタを用意しなくてもいいし、自分のペースで進めやすいスライド形式になっているし、初心者にとっては一番とっつきやすいオンラインサービスになっています。
一番初めにProgateに取り組むのはわかったけれども、そのProgateの次は一体何をすればいいのかということをわかっている人は結構少ないです。
それは単に、Progateの次に取るべき行動を発信している人がかなり少ないからです。
Progateの次のアクションをわかっている状態で取り組むのと、わかっていない状態で取り組むのとでは、モチベーションがまるで違います。
ゴールまでの道筋がわかっていれば、自分の今頑張っている時間が、何時頃に報われて、どれくらいの収入が見込めるのかを具体的に描けるからです。
報酬が確定している未来と、そうではない未来では、人間どちらの方がやる気が出るかは、もうお分かりだと思います。
今回の記事では、時間の関係上、Progateの次のアクションしか話しませんが、その後の営業方法や案件獲得後のアクションまでの全行程が知りたいという人は、以下のnoteをチェックしてみてください^^
自分が駆け出し期の時に欲しかった情報を全て詰め込みました。
Progateの次のアクションについては、他にも色々な意見があると思いますが、自分が駆け出しならこうするというアクションをここから話していきます。
オリジナルサイトの制作
Progateが終わった次のアクションは、オリジナルサイトの作成ですね。
もし、お金に余裕があるのであれば、5〜10万円ほどするスクールに投資した方が圧倒的に上達は早いですが、今回はあくまで独学を想定しておきます。
Progateが終わったら、とにかくアウトプットをして知識を定着させることが大事です。
もはやProgateが終わった後にやるべきことは、アウトプットしかありません。
そこで、アウトプットのために模写をやる人が多いですが、個人的には模写はしなくてもいいと思っています。
模写はここでは、実案件でも使用することが多い、Photoshopデータをみながらコーディングすることと定義しますが、ピクセル単位まで全てを完全に模写しようとするのは、この段階ではまだ早いと思っています。
というのも、まだ知識もあやふやでろくにアウトプットもしていない段階で、ピクセル単位まで細かいことに気を配ってコーディングすることは、ほとんど成長に繋がらないからです。
それよりも、とにかく細かいデザインは気にしなくてもいいから、まずは知識を定着させるためにアウトプットしまくる方が大事だと思っています。
そのため、まずは模写ではなく先に、オリジナルサイトを作ってとにかく、インプットとアウトプットを高速に繰り返すのが一番いいです。
具体的なサイトの作り方は、過去の動画でも話しているのですが、サイト内容は100%オリジナルにして、デザインは他のサイトを90%真似することです。
オリジナルサイトを作る際に一番大変なのは「デザインを考えこと」だと思いますが、本来デザインを考えるのはデザイナーの仕事なので、デザインを考えるのに時間も体力も使ってはいけないです。
そのため、デザインは自分で考えるのではなく、自分好みのサイトを見つけてきて、そのデザインを90%模倣しましょう。
残り10%は、メイン色や差し色、画像やボタンデザインなどを少しずつ変えてオリジナル要素も入れましょう。
流石に全てのデザインが同じだと、サイトの中身が違っても、一瞬同じサイトに見えてしまうし、オリジナルサイトではなく、ただの模写感が出てしまうからです。
そして、サイトの中身に関しては、100%自分のオリジナルのものにしてください。
これで、コーディング作業に集中できつつ、模写ではない自分のオリジナルサイトが完成します。
サイトを作る際は、わからないことが大量に発生すると思うので、逐一Googleで検索しながら、解決していってください。
この「調べてはまたコーディングする。また調べてはコーディングする」の繰り返しが、人を大きく成長させます。
このオリジナルサイトの作り方は、過去の動画で出した時も、結構好評だったので、皆さんもぜひ試してみてください。
オリジナルサイトの作り方は、これまでまとめてきた通りですが、サイトを作るためには、まずはエディタをインストールしてください。
特にこだわりがなければ、Visual Studio Codeをインストールしておけば問題ないです。
そして、次に自分が参考とするサイトを探してください。
AirbnbやUber Eatsなど、自分が知っているサービスのサイトを色々のぞいてみて、真似できそうでかつデザインが気に入ったなら、それを参考にすればいいと思います。
ちなみに、自分はAirbnbのサイトを参考にして一つサービスサイトを作りました。
このオリジナルサイトは一つ作って、それでもまだ知識が定着していなさそうなら、二つ目を作りましょう。
知識が定着しているかいないかの基準は、あるサイトをみたときに、7割方コーディングイメージがわけばオッケーです。
ポートフォリオサイトの制作
オリジナルサイトを一つ二つ作って、知識がかなり定着してきたら、この時点で営業や転職活動用のポートフォリオを作ってしまいましょう。
ここでいうポートフォリオというのは、自分のプロフィールや過去実績などを掲載したサイトのことですね。
このポートフォリオにSTEP1で作成した、オリジナルサイトを2つほど掲載しておけば、副業の営業にしても、転職活動にしても数としては問題ありません。
実際に自分も副業として案件を取る時も、転職活動するときも、オリジナルサイト2つと、ポートフォリオサイトの計3つだけで、全く問題がなかったです。
いきなり15万円の案件をもらえましたし、転職活動も一ヶ月で3社の自社開発企業から内定をもらいました。
ポートフォリオを作る時は、これまたSTEP1で説明した制作方法をそのまま使えばいいです。
まずは、Googleで「ポートフォリオサイト」と調べれば、参考になるポートフォリオサイトがたくさん出てきたので、自分でもチェックしてみてください。
デザインカンプからのコーディング練習
最後は、デザインカンプからのコーディング練習です。
副業で案件を受注する時も、転職してからも、エンジニアは基本的にはデザイナーが作ったデザインカンプに従って、忠実にコーディングしていきます。
そして、そのデザインカンプはPhotoshopだったり、AdobeソフトのXDだったり、Figmaがよく使われます。
そのため、時間のある人は、これらのソフトで作られたデザインカンプからのコーディングの練習もしておいたほうがいいです。
カンプを見ながら、ピクセル単位でデザインを完全に再現する練習です。
カンプを使った模写は、かなり早い段階で持ってくる人がいますが、個人的にはこの段階でするのが一番学習効率がいいと思っています。
やはり、このような細かい作業はある程度アウトプットして、スキルがそれなりに身についてから、最終の仕上げとしてやるのが自然です。
psdデータからのコーディング練習をするときは、LIGさんという方がpsdのサンプルデータを無料で配布しているれているので、そちらを参考にすればいいと思います。
また、そのほかのpsdデータの扱い方については参考になりそうなサイトを、以下に貼っておきます。
https://haniwaman.com/photoshop-coding/
ただ、このデザインカンプからのコーディング練習に関しては、事前に練習しなくても、調べながらぶっつけ本番でも全然できるレベルなので、余裕があればやればいいと思います。
実際に、自分はphotoshopやXDの使い方を全く知らない状態でも、案件はこなせたし、エンジニアに転職してからの実務でも全く困ったことはありません。
まとめ
ここまでで、Progateのあとにあるべきアクションについてまとめてきました。
まずはオリジナルサイトを作って、ひたすらインプットとアウトプットを繰り返して、知識を定着させる。
オリジナルサイトの作り方は「参考とするサイトを用意して、デザインを90%真似して、サイトの中身は100%オリジナルにする」です。
オリジナルサイトができたら、次は自己紹介用のポートフォリオサイトを作りましょう。
最後に、時間に余裕があればデザインカンプからのコーディングを練習します。
これに関しては、最悪しなくても大丈夫です。
それが終わったら、営業活動や転職活動をすればいいです。
今回は、若干表面的な内容になってしまいましたが、もっと詳しく知りたい人、さらにこの先の営業のフェーズまで知りたい人は、ぜひ先ほど紹介したnoteをチェックしてみてください^^
- オリジナルサイトの制作
- ポートフォリオサイトの制作XXX
- デザインカンプからのコーディング練習
今回の内容については以下の動画でも解説しているので、ぜひご覧ください^^
（追加していただいた方だけに配布する限定動画もございます🎁）
