Twitterを見てると、Web制作で月10万稼ぐためのロードマップなるものを 公開してくれている方がいらっしゃったので見てみるとめちゃくちゃ項目が多くて笑ってしまいました。

私は今こうして普通にフリーランスとしてWeb制作を行っていますが、 その能力は思った以上についてたんだなと実感できましたね。

勝手にツイートと画像を転載するわけにもいかないので、 リンクだけはらさせてもらいます。

ゆーすけ＠Webクリエイターさんのツイート https://twitter.com/U_suke313/status/1368880542704304128

この方が作成してくれたロードマップを見てみると 初学者からしたら心を折られるレベル何じゃないかなと思います。

こんだけやっても月10万しか無理なのか……って確実になるんじゃないでしょうか。

今現在の私から見ても結構めんどうくせぇなってなってしまう量ですね（笑）

ですが8割方自然とできるようになっているので、 時間をかければそんな大変なことでもないです。

Web制作に携わっている身として今回はこの方のロードマップを自分なりに批評してみようかなと思いました。

あくまで私個人での見方になるので、これが絶対に正しい！間違ってる！とかいうのではなくて このロードマップだけではちょっとわからないなって人向けになっています。

あとちょっと量が多いので分割していきます。

まずは結論から

結論から言っておきますと、仕事する上でゆーすけさんのロードマップを全てしっかりとマスターする必要はないということです。

ぶっちゃけると私も全部できてるのかと言われたらYesとは言えません。

が、やろうと思えばできる能力は持っているので完全に駆け出しの人は スキルアップの指標としてはすごく良いんじゃないかなと思っています。

というか必然的にそんな感じになってしまうなぁって感想です。

HTML＆CSSを学ぶ

Progate やドットインストール等での基礎学習

私の時代はリファレンスサイトや書籍を見て愚直に書いて覚えるってやり方でしたが、 今の時代はキレイにまとめてモチベーションをあげてくれるサイトがあるので そういったサイトを使って学ぶのは有りだと思います。

ただ、意識してやらないとやらされてるだけになってしまうので 一度Progate等で学んだら、サイトを通さずに自分の力でHTMLを打ち込んでみて 意味をしっかりと理解してみると学習効果が高まります。

CSSのfloatを無視してFlexboxに注力する

正しいですね。

個人的にもfloatはもう使わないでいいcssだと思っています。

仕組みは全然違うのですが、どちらも２カラム３カラムと複数の横並びを作る時に使うCSSです。

新しく作る分にはもうFlexboxを使えば事足りますが、 古いサイトに手を加えてくれっていう仕事がきたりすると 確実にfloatのCSSを組み込んで作っているサイトがまだまだ多いです。

なのでfloatがどんな動きをするのかというのはちゃんと覚えておいたほうがいいでしょう。

簡単に言うと、floatは文字通り浮かせる機能を持っています。

鵜呑みせず、Flexboxを使えるようになったらflexboxでやってたことを 一度floatで再現してみるとどのような動きになっているのか、 flexboxが優れているのかが理解できるようになると思います。

書籍で体系的な学習

正直HTML+CSSを学ぶなら書籍は必要ないかなと思ってます。

htmlやcssのために１０００円越えを払うのはアホらしいです。

htmlやcssは教科書的に一気に覚えるのではなくて、 必要になったらそのタグを検索するほうが節約にもなりますし 書籍よりも詳しく載っています。

VSCodeオススメのプラグインを導入

これも必要になったら入れるぐらいでいいかなと思います。

Pretter等の保存時に自動でコードを整形してくれるプラグインは便利ですが、 時折そうするのやめてくれ！って形成をしてくるので必要であれば無効化するとよいです。

コードを保管してくれるやつは絶対にいれておきましょう。

断片的に覚えておけばあとは予測変換で出してくれるので 脳内メモリの節約にもなりますし、コーディング速度もあがるので 使っていて便利だなってやつだけいれてたらOKです。

無駄に入れまくるとそもそも必要あるのかってなるやつもありますから 必要に応じていれていきましょう。

デベロッパーツールの学習

個人的に学習した覚えはないですね。

WindowsだとChrome・Firefox・EdgeとかはF12を押すと デベロッパーツールがでてきます。

デベロッパーツールで一番最初に覚えたほうがいいのは ソースコードが表示される「Elements」の部分とエラーとかが確認できる「Console」の２つです。

それ以外はそこまで気にしなくてもいいかなって感じですね。

データベースとかを扱ったりキャッシュを気にするようになったら ネットワークやメモリあたりのタブを活用していく感じです。

なので最初は「Elements」と「Console」の２つに絞って学ぶといいでしょう。

デザインカンプからコーディング練習

駆け出し時代、正直なところ私はコレをほとんどやったことはないのですが、 正直これだけやっていればコーダーとして一番成長できるのでオススメです。

というのも基本的にコーディングで仕事をしたい場合は デザイナーが作ったデザインを元にコーディングしていくことがメインになってくるので 誰かが作ったデザインを元にそのままブラウザで再現する力を身につけるのは 正直一番コーディング力が上昇します。

主要ブラウザで寸分の違いもなく再現するというのはかなり骨の折れる作業です。

昔の人はIEに散々苦しめられていましたが、 今はnode.js側でその差異を吸収してくれて吐き出してくれる仕組みが沢山あるので そのへんの知識も合わせて学びながらコーディングしていくとかなり成長します。

ほんとにコレはオススメです。

Emme＆Snippet＆VSCodeのショートカットキーの学習

コレに関してはは効率化なので後回しでOKです。

覚えなきゃ仕事ができないというわけでもないです。

ただ、覚えると作業の速度は上がるので ある程度仕事ができるようになってもっと工数を節約したい！ ってなった時にステップアップとして学習していくほうがいいでしょう。

恐らく駆け出しが学んだところで有効性があまり理解できる人は少ないかと思います。

もちろん優秀な人は最初から学べばいいと思いますが、 優秀じゃない人のほうが多いと思いますので後回しで大丈夫です。

Photoshop操作方法の学習

私はWeb制作をやる前にイラストを描いてた時代があったので Web制作をする際にPhotoshopを学ぶという感覚はありませんでしたが、 確実に使うことになるので覚えておくべきだと思います。

Photoshopの話からは少しズレてAdobeの話になるのですが Adobe製品は月額ちょっとお高いんだけどそれに見合ったメリットはかなりあります。

というのも仕事する上でデファクトスタンダードがAdobeソフトなんですよね。

なのでお金がないからってフリーのソフトを無理矢理覚えたところで 渡されるデータがAdobe製ものがほとんどだからです。

ちゃんと理解のある人はPDFにして吐き出してくれますが、 大抵のデザイナーはそこまで気が利かないと思ってたほうが良いです。

デザイナー側としては制作する人に渡すんならAdobe製品持っててあたりまえだから別にPDFにする必要ないっしょ って考えの人がほとんどだと思うのでWeb制作界隈で活躍したいならコーダーであろうが PhotoshopとIluustratorを持っておいたほうがいいです。

本音を言うとコーダーメインで活躍する人が使うAdobeソフトって

ぐらいなんですよね……

後は動画編集とかもする場合でAfterEffectsやらPremiumProや付随してくるエンコーダーぐらいです。

それだけしか使わないのにフルの金額を払わされるのは結構辛いんですよね。

ただ、１回仕事達成したら報酬分で１年分のAdobe使用料はまかなえるから 今後もWeb制作の仕事をしていきたいのであれば先行投資としてCreativeCloudを契約しておくべきだと思います。

フリーランスの場合だと経費にできますからむしろ契約しておきべきかなと思います。

私はWeb制作のアルバイトをしてた時代に会社からいただいたCS6のPSとAIを使ってますが、 結構限界が来てるのでそろそろCCの契約をしようかなと考えてます。

CS6で耐えられてるのは単純に会社員時代でCCを使ってたからですね（笑）

なのでAdobe製品を使ったことがあまりなくてWeb製作者になりたいなら Adobe製品を使えるようになったほうがいいです。

まとめ

今回はゆーすけさんのWeb制作で月10万稼ぐための最短ロードマップである 「HTML+CSSを学ぶ」に焦点を当ててみて私の視点で批評してみました。

総合的に見るとこれに沿って行けば仕事は普通に貰えますよって感じですね。

ぶっちゃけスクールに通わずにこのロードマップに沿って勉強すれば 無駄な金を使わずに制作できるようになります。

次回はjQueryとSassの件について触れてみます。

それでは。