[有料級！]WEBサイト制作を学ぶ第一歩！効率的なコーディング独学法

2025年2月14日 10:25

こんにちは、non（のん）です！
今回の記事は 有料級の特大ボリューム！
周りから「有料にしたら？」と言われるほどの内容ですが、たくさんの方に読んでいただきたいので無料公開 します！

「WEBサイトを作れるようになりたい！」
そう思って学習を始めたものの…

どこから手をつければいいかわからない
動画や本を見ても理解できなくて挫折しそう
いざコードを書こうとすると手が止まる

そんな風に悩んでいませんか？

しつこいようですが、私はWEBデザインのオンラインスクールを卒業した後、暗黒期を経験しました。仲間との出会いをきっかけにWEBサイト制作を本格的に学び始めましたが、最初はどこから学べばいいのかわからず、遠回りもたくさんしました。
↓暗黒期シリーズはこちらから

そこで今回は、私が過去を振り返ってみて「こうすればよかった…」と感じたコーディング学習法をまとめました！

「動画は沢山ありすぎて見ても分からない！」
→ どの動画・教材を選ぶべきか？
「基礎は学んだけど、次は何したらいいの？」
→ 実践でスキルをつける方法
「レスポンシブ？ハンバーガーメニュー？覚えることが多すぎる！」
→ つまずきポイントの突破方法

これを読めば、ゼロから学ぶ方でもスムーズにWEBサイト制作の学習を進められるようになります！
忙しいママも寝かしつけ後の貴重な学習時間を無駄にしないために、効率的な学び方を一緒に考えていきましょう！

①まずはYouTubeで基礎の基礎を学習をする

基礎の基礎は、先輩方が有益で分かりやすい動画をYouTubeにあげてくださっています。Udemyや書籍などの有料コンテンツに手を出す前に、まずはYouTubeで全体像を掴むところから始めると良いでしょう。

「基礎の基礎」学習ポイント

最初から「完璧に理解しよう！」と思わなくてOK！
とにかくコードを書いてみることで、「なんとなくわかる！」を増やしていく

まずはYouTubeでコーディングの雰囲気をつかんで、流れが分かってきたらUdemyや書籍で深掘りしていくのが効率が良いかと思います。

動画や書籍以外にも、コーディングを学べるprogateという学習サービスもあります。環境構築不要でブラウザで気軽にできますので、YouTubeでもまだハードルが高いと感じたらまずはProgateから始めるのも。私も最初に無料でできる範囲は一通りやりましたが、あくまで学習のためのサービスのため、実践的な制作は掴みにくいので、個人的にはやっても1回でいいと思います。

②模写コーディングで手を動かす

模写コーディングとは、既存のWEBサイトを真似して作る学習法です。HTMLとCSSの基礎がわかったら、次は実際のデザインを元に実装してみましょう。

模写コーディングのポイント

最初は簡単なデザインのサイトを選ぶ(グリッドが揃ったシンプルなレイアウトのサイト)
スクショを撮ってマークアップを先に考える(GoFullpageというChromeのプラグインでスクショを撮って、Macユーザーは「マークアップツール」、Winユーザーは「ペイント」の機能を使ってメモすると便利です)
「見た目を再現する」ことに集中する(細かい機能はひとまず気にしなくてOK)
わからないことがあれば「HTML CSS ○○(やりたいこと)」などと検索

実は私はあまり模写コーディングをしませんでした。ですが、振り返ってみるともっとやった方が良かったなと思います。模写コーディングは、プロが作ったサイトを見ながら「この部分はどんなタグが使われているんだろう」と検証ツールと睨めっこすることでコードの書き方を学ぶことができます。
私は模写コーディングはあまりしませんでしたが、気になるサイトがあると検証ツールで確認することはよくやっていて、今も継続中です。自分がコーディングする際も100％使いますので、検証ツールを見る癖はつけておいた方が良いですよ！

③レスポンシブデザインを理解する

レスポンシブデザインとは、パソコンとスマホなどデバイスの画面サイズに応じて、WEBサイトのレイアウトやデザインを自動的に切り替える手法です。
以前はパソコンサイズのレイアウトだけで済んだWEBサイトですが、スマホの普及により縦長のレイアウトも必要になりました。スマホが普及したての頃は未対応だったりスマホ版のサイトを別で作ったりしていましたが、今はレスポンシブデザインが一般的です。
こちらも動画で学べますし、模写コーディングで実際に実装することで身に付けることができます。

レスポンシブデザインの基礎

「flexbox」を理解する(縦並び横並びの可変の仕組みを理解する)
「メディアクエリ」を使ってデザインを調整
モバイルファーストで書いてみる(モバイルファースト：モバイル版のコードをまず書き、それを基準にパソコン版へ可変させる)

ポイント

最初はシンプルなカラムレイアウトの理解から始める
ブラウザの「検証ツール」でパソコン→スマホ表示の可変をチェックする

flexboxの親要素と子要素の関係を理解するまでは混乱しがちですが、レスポンシブデザインは必須知識です。挫折しないためにも、まずは簡単なレイアウトからチャレンジして少しずつ理解しましょう。
レスポンシブが理解できると、見やすいサイトが作れるようになります。

④ハンバーガーメニューを実装してみる

「ハンバーガーメニュー」とは、スマホやタブレットなど幅の狭いデバイスに用いる、開閉することでメニューの表示非表示をする仕組みのことです。3本の横線が並んだアイコンが、ハンバーガーの形に似ていることから名付けられました。
レスポンシブデザイン同様ハンバーガーメニューは必須の知識ですので、しっかり身につける必要があります。

実装のポイント

1つテンプレートを作っておくと、どんなサイトにも応用できる！
「HTML・CSS・JavaScript」を組み合わせて作る

私はハンバーガーメニューも色んな方のYouTube動画やブログ記事で学びました。Shinさんの「プログラミングチュートリアル」を一番最初に参考にさせていただいて、そこから自分なりにカスタマイズしていきました。他にも有益な動画をたくさんアップしてくださってますので、ぜひ見てみてください。
実際に最初に見た動画はこちら↓
https://youtu.be/Tpoa6RWttoM?si=dynMdTjVrDRsJTWD

ハンバーガーメニューはサイトによって、メニューが上から出てきたり、右から出てきたり、ふわっと出てきたり、様々ですが、1つ基本の型を作ってメモしておくと次に作る時にかなり時短になります。コードにコメントをつけておくと次回アレンジしたい時にどこを触ったらいいか分かりやすいのでお勧めです。
私は、後から使いそうなコードはNotionにまとめていて参照しています。
ハンバーガーメニューはJavaScriptの「ライブラリ」であるJqueryを使っても実装できますが、仕組みを理解する上でもJavaScriptで書くことをお勧めします。

⑤CSSアニメーションやJavaScriptで動きをつける

基礎最後のステップとして、サイトに動きをつけるスキルを学びます。ここからは応用に入るかもしれませんが、実際に制作をする際によく求められるスキルでもあるため、⑤としてここに入れました。

WEBサイトに動きをつける方法

CSSアニメーション(フェードイン、ズームインなど)
JavaScriptで動きをつける(スライダーやアコーディオンなど)
JqueryなどJavaScriptのライブラリの使う(JavaScriptで最初から書くのが難しい動きはライブラリを使った方が早く実装できます)

①〜④のステップ同様、YouTubeやブログ記事などで学ぶことができます。こちらも後から使いまわせるようにNotionなどにまとめておくと便利ですよ。
動きのあるサイトを作れるようになるとサイトのクオリティがグッと上がりますし、表現の幅が広がってクライアントからも喜ばれるスキルになります。

基礎を固めてどんどん作ってみよう！

長くなりましたが、ここまで学べば、「シンプルなサイトが作れるレベル」に到達できます。

学んだことを活かすには 「作りながら学ぶ」ことが一番の近道 です。
あとは分からないことを徹底的に調べたり、AIツールの力を借りたりすればどんどんスキルアップできます。

次回の記事では、企画構成力を鍛えるコツをお伝えしようと思っています。
気になる方はフォローしてお待ちいただけると嬉しいです。
「フォロー」＆「スキ」していただけると励みになります！