どうも、さぼてんです。
今回は未経験からWebサイト制作で就職するまでの学習ロードマップについてお話ししていこうと思います。
僕はこの2022年の1月に未経験からWebサイト制作で就職をして、現在働いています。自分の就職活動や、就職活動を行なっている知人の話を聞いたりして、未経験からWebサイト制作で就職するのに、どれくらいのスキルがあれば採用してもらえるかっていうのが大体わかってきました。
今回、お金がかからない範囲で、学習ロードマップを考えてみましたので、これからWebデザインを勉強しようと思ってるけど、業界未経験という方は是非見ていただければと思います。
ちなみに勉強中、どうしても分からない事や不安な事があって、聞ける人が周りにいないよ〜という方はお返事いたしますので、是非お気軽にTwitterなどで交流していただければと思います。
コーディング
ドットインストールとプロゲートの無料の所を2周
ずコーディングの勉強についてはドットインストールとプロゲートという学習サイトのHTML,CSS,javascriptについての無料の部分、これらを2周ずつやりましょう。
この時のコツは完全に理解しようとしない事です。「なんかよく分からないけど先進んじゃおう」程度で全然大丈夫です。
ドットインストール
はじめてのWeb制作
https://dotinstall.com/lessons/basic_website
はじめてのJavaScript
https://dotinstall.com/lessons/basic_javascript_v5
JavaScriptでおみくじを作ろう
https://dotinstall.com/lessons/omikuji_js_v5
プロゲート
HTML&CSS初級編
https://prog-8.com/lessons/html/study/1
JavaScript (ES5)
https://prog-8.com/lessons/es5/study/1
https://prog-8.com/lessons/es5/study/2
JavaScript
https://prog-8.com/lessons/es6/study/1
模写2サイト
次は模写コーディングをします。「模写 コーディング」とかでGoogle検索するといろんな方がおすすめしているサイトがでてくるので、そのサイトのデザインを見ながらできるだけ近いデザインを再現できるようにコーディングしていきます。
まだまだ分からない事だらけなので、ひたすらGoogle検索しながらコーディングを進めていきます。どうしてもうまく再現しきれない部分は全然拘らなくて大丈夫です。
「ここはこうしたかったけど、まあいいや」くらいで先に進めてしまってください。
初心者の内の疑問っていうのは、たくさん出てくるんですけど、今後手を動かしている内に、理解しようとしなくても勝手に理解していきます。
手が止まって、モチベーションが下がるのがもったいないので、「細かい事は気にしない」っていう気持ちで取り組む事を強くおすすめします。
画像データが配布されていなかった場合は画像素材検索サイト「o-dan」などで別の画像を見つけてきて使用しましょう。もし画像の雰囲気が合っていなくて、少しダサくなってしまっていても問題ないと思います。ここではコーディングができるというアピールがメインになるからですね。
この後デザイン制作をやっていく上で、どうしても気になったら、良い画像の差し替えを行ってもいいかもしれないですね。
デザイン
バナー2つ制作、Webページ2つ制作
まず、ピンタレストというツールで作ってみたいなと思えるバナーとwebページを2つずつ見つけます。「Canva」などフリーの画像編集ソフトでいいので、できるだけ見つけてきたデザインデータに近くデザインしましょう。
この時のコツは自分でデザインするというよりは、「すでにあるデザインの通りに制作する」という事です。デザインって初心者の内から自分の頭の中でアイデアを出そうとするとダサくなりがちです。
既存のデザインデータっていうのは、プロのデザイナーさんがロジカルに見え方を意識してデザインされています。プロの真似をしながら徐々に表現方法を身につけていくって事ですね。
ポートフォリオサイト制作、レンタルサーバーにアップロード
「ポートフォリオサイト 参考」などでGoogle検索しつつ、自分でも作れそうなポートフォリオの構成を考えます。これも素敵だなと思うポートフォリオサイトの構成をほぼそのまま真似るといいと思います。
最低限必要な項目は自己紹介欄と制作物を掲載する実績欄です。それ以外の項目は好みであってもなくても大丈夫です。ポートフォリオサイトができたらインターネット上で閲覧できるように公開します。
レンタルサーバーを使用する費用は、大体月額550円〜1000円くらいです。ここまできたら就職まであと一歩の状況ですので、少し負担はかかってしまいますが、インターネット上にアップロードをしておく事をおすすめします。
面接などで、Webサイトを公開する一連の流れが理解できているというアピールにもなりますね。
ポートフォリオサイトをWordPress化する
ポートフォリオサイトをアップロードした段階で就職活動は全然行えます。あとは実務を通して必要な知識を学んでいくのが一番効率が良いのですがどうしても不安で、もう少し実力をつけてから就職活動したい!という方は、ポートフォリオサイトをWordPress化しましょう。
↓僕が学習に使用させて頂いたYouTube動画はこちらです。
ともすたちゃんねる様 WordPress開発講座
しもむらともき様 WordPress自作テーマを作ろう
このYouTube再生リストを2周ずつ動画を見ながら自分で手を動かしてみましょう。最初のプロゲートやドットインストールの時と同じで、理解しようとせずに言われるままコードを書いていきましょう。それぞれ2周ずつ行うと、ぼんや〜りとWordPress化の雰囲気が分かってきます。
後はGoogle検索しながら自分のポートフォリオサイトをWordPress化して再度レンタルサーバーにアップロードしなおします。ポートフォリオのWordPress化まで完了したら今回のロードマップ、完全に卒業です!
未経験、独学でここまで勉強し続けられる人ってかなり少ないです。もし最後までやりきれたという方は特に、自分で調べながら問題解決できるという自走能力がかなり優秀な方です。就職活動でも間違いなく高く評価されますので、自身をもってWeb制作の世界に飛び込んでみてください。
こんな感じでWeb制作や職業訓練の事など体験した事をこれからも発信していこうと思っておりますので今後もみていただけると嬉しいです。
それでは〜。