稼げないWeb制作者は静的コーディングの基礎を磨くべき！効率よくスキルアップする方法を最高月商90万円のコーダーが解説

インタビュアーのワカジツです！本日はよろしくお願いいたします。

まさたさんはXやBrainを通して「Web制作者として時給を高めていくなら、静的コーディングスキルを磨くことが大切」と発信していますよね。

Web制作者が静的コーディングの基礎を磨くべき理由には、どのようなものがあるのでしょうか？

静的コーディングの基礎をしっかり身につけることで、以下の2つのメリットがあると考えています。

1. 作業時間が圧倒的に短くなる
2. キャリアアップに大きく関係する

それぞれ詳しく解説します！

コーダーの仕事のうち、7割くらいはHTMLやCSSを使ったコーディング作業です。

そのため、静的コーディングのスキルをしっかり磨くことで、全体の仕事時間をかなり圧縮できます。

HTMLやCSSが、人によってスキルに大きな違いが生まれる部分なのでしょうか？

そうですね。Web制作だと他にPHP言語を使ったWordPress構築作業も行うのですが、そちらはある程度型が決まっていて、スキルに差が出にくい部分です。

例えるなら「HTMLやCSSは国語で、WordPress作業は算数」みたいなイメージですね。

HTMLやCSSは人によってコードの書き方が大きく変わるので、一見同じWebサイトでも中のクオリティが全然違う…ということはよくあります。

僕が1日4時間ほどの作業で月商50万円をキープできたのも、コーディングの基礎をかなり深く学んだからです。

コーダーとして働くうえで静的コーディングは避けて通れない作業なので、スキルアップを目指すことは重要です。

コーダーからキャリアアップして、Webディレクターや採用担当者になる際にも、静的コーディングのスキルは重要です。

自分がコードについて詳しくないと、コーダーが作った制作物の品質担保ができなくなります。

なるほど。自分に知識がないと、人をまとめるのは難しいかもしれませんね。

優秀なディレクターだと、コードを見ただけでコーダーの良し悪しを判断できます。

質が低い人の採用を避けるためにも、自分がコーディングについて詳しくなることは必須です。

それでは、静的コーディングスキルを効率よく身につける方法を教えてください！

1. ライブコーディング動画を見る
2. 作業の流れを決めておく
3. コーディングの書き方を理論的に学ぶ
4. CSS設計手法を取り入れる
5. JavaScriptの基礎的な知識も学んでおく

です。それぞれ詳しく解説します！

個人的に最も効率よくスキルアップできるのが、他の人のライブコーディング動画を見ることです。

活躍しているWeb制作者が、どのような考えや手順で0からコーディングを進めているのかを確認することで、具体的なイメージが湧きやすくなります。

ライブコーディングを真似して作業するだけでも、かなりレベルアップできますよ。

他の人の作業内容を見るのは、かなり学びになりそうですね。

ちなみにライブコーディング動画は、どこで見ればいいのでしょうか？

僕のBrain「【”わずか2ヶ月以内”で実務レベルのコーディングスキルが身につく】実践型コーディング講座」では、5時間を超えるライブコーディング動画を用意しているので、そちらをぜひ確認してみてください。

1日4時間の作業で、外注なしで月商50万円を達成している僕のコーディング映像を確認できるだけでなく、50本以上の動画講座でコーディングやJavaScriptの基礎を解説しています。

初学者でも、ある程度コーディングの知識がある方でも学びになるテクニックが詰まっているので、Web制作者として時給を高めていきたい方におすすめです！

Web制作を行う作業の流れをパターン化しておくことで、「何から始めればいいのかな」と迷うことなく、効率よく作業を進められます。

特に初心者は、何から手を付ければいいのかわからない人が多い印象なので、最初に手順を決めておきましょう。

具体的に、どのような手順でコーディングを進めればいいでしょうか？

僕の場合は、以下の手順で進めています。

1. Webサイトで使う色やフォントを把握する
2. セクションごとに上から順番に制作していく
3. レスポンシブ対応を行う
4. 最後にまとめて品質チェックを行う

人によって効率的な手順は変わると思うので、自分でやりやすい方法を見つけてみてください。

コーディングは何となく形や単語で覚えるのではなくて、理論的に勉強するのがおすすめです。

理論がわかっていないと、毎回「どのコードを使おうか」と迷いが生まれてしまい、作業時間が伸びてしまいます。

理論的なコードの書き方というのは、具体的にどのようなイメージでしょうか？

「なぜこのコードを書くのか」と聞かれた際に、スラスラ答えられるくらいに理解することですね。

最初は大変ですが、中長期的に見るとかなり楽できますし、安定して稼げているのは理論的でわかりやすいコードを書いている人です。

人に聞かれることを想定して、コーディングを学んでいきましょう。

CSS設計は「一定のルールを設けてコーディングを行うこと」で、ある程度決まった考え方があります。

このCSS設計を学ばずに我流で進めてしまうと、表示はちゃんとできていても中身の質が悪くなってしまうので、第三者が保守運用を行う際に困ってしまいます。

他の人が見たときに質が悪いというのは、よくはなさそうですね…。

制作会社はチームで動くこともあるので、その人単体で見たらちゃんとできていたとしても、全体で見るとダメという状況は避けたいと考えています。

Web制作に詳しい人だとコードを見ただけでCSS設計ができていないことはわかりますし、採用されづらくなってしまうので、注意が必要です。

HTMLやCSSなどの静的コーディングに加えて、簡単なJavaScriptによるアニメーションパーツの実装方法を身につけておくと、案件の幅が広がります。

例えばハンバーガーメニューやアコーディオンなど、実務で使う必要最低限のパーツの作り方さえ覚えておけばOKです。

まさたさん的に、どのような手順でHTMLやCSS、JavaScriptを学んでいけばいいでしょうか？

個人的に推奨している手順は、次のとおりです。

1. Progateなどで、HTMLとCSSの基礎文法やSassの使い方を学ぶ
2. 基礎的なデザインカンプを使って6サイトほど作成する
3. JavaScriptとjQueryの知識を再びProgateなどで学ぶ
4. 実務レベルのデザインカンプで静的コーディングを行う
5. PHPの基礎を学んで、WordPress構築ができるようになる

「【”わずか2ヶ月以内”で実務レベルのコーディングスキルが身につく】実践型コーディング講座」では、4番の「実務レベルのデザインカンプ」を4種類用意しているので、ぜひ学習に役立ててみてください！

最後に、コーディングを学ぶ以外で、さらに稼ぎを増やすためのコツがあれば教えてください！

• WordPressの構築方法を学んでいく
• スキルアップの時間を確保する

という2点を意識してみてください。それぞれ解説します！

冒頭でも話しましたが、コーダーの仕事の7割はコーディングで、残り3割はWordPress構築などの作業です。

ある程度コーディングができるようになったら、WordPressの構築方法を勉強することをおすすめします。

WordPressの構築はある程度形が決まっているので、コーディングよりも短い時間でコスパよく学習を進めることが可能です。

Web制作として、WordPressの案件は多いのでしょうか？

そうですね。WordPressは世界で最もシェア率が高いサービスですし、更新型の動的サイトを作る際に使われることは非常に多いです。

いまはブログなどを更新できるWebサイトが流行しているので、学んでおいて損はないスキルだといえます！

案件をこなしはじめると、ついついスキルアップの時間が確保できなくなってしまいます。

僕の経験上、「案件が終わってからスキルアップしよう」という考え方だと確実に時間を取れないので、あらかじめ時間を決めておくことがおすすめです。

作業が終わったらスキルアップしようが成功しないの、痛いほどわかります…笑

特にWeb制作は、AIが来る前から技術的な進歩が速い業界でした。いまはAIも登場していて、さらに勉強すべき内容が増えている印象です。

ちゃんと時間を作ってコンスタントに勉強していかないと、競合にスキルで劣ってしまう可能性があるので、注意しましょう！

ありがとうございました！