1. はじめに
こんにちは！Kouです。
現在大学2年生で、今年の5月からWeb開発の勉強を始めました。
この記事を書こうと思ったきっかけは、Progateでの学習から実際に模写コーディングで実践してみたときに「教材だけでは分からない苦労が山ほどあった」からです。
Progateを修了した時は正直「もうHTML/CSSはバッチリ！」と思っていました。レッスン自体もサクサク進んで、最後の方は「これ簡単じゃん」なんて調子に乗っていたんです。
しかし、いざ模写コーディングを始めた瞬間...
「あれ？何から始めればいいの？」
教材で学んだことが全然活かせない現実に直面しました。あの時の絶望感は今でも忘れられません。同じような体験をしている方の「あるある！」と思ってもらえるよう、当時の苦労話をまとめてみました。ぜひ最後まで読んでみてください。
📝 Web開発をイチから勉強しています
日々のコーディング学習の様子や新しい発見を X（@kou_webapp）で呟いています。同じく勉強中の方、ぜひ繋がりましょう！🙌
これまでの学習の流れ
2025年5月〜6月：Progateで基礎を学習（天国時代）
- HTML & CSSコースをスムーズに修了
- 「Web開発って思ったより簡単かも」と勘違いしてしまう
- 自信満々で次のステップへ
⇩
⇩
7月〜現在：模写コーディングをやってみる（地獄の始まり）
- 無料のデザインデータを使って模写に挑戦
- 現実の厳しさを痛感する日々
- 少しずつですが成長を実感
使用ツール
- エディタ：Cursor
- デザインツール：Figma（デザインの確認）
- ブラウザ：Chrome（開発者ツール）
絶望ポイント①：デザインデータって何？
Progateで学んだときは「font-size: 16px」「color: #333」みたいに、必要な値は全部指定されていたので、CSSの値を入力するだけでした。
「いざ模写コーディングやるぞ！」と思って
Figmaのデザインファイルを開いた瞬間、「...で、これをどうやってCSSにするの？」と固まりました。
デザインを見ても「このテキストのサイズは？」「この余白は何px？」「この色のコードは？」という基本的なことが全く分からない。Figmaの使い方すら知らなかったので、デザインを眺めるだけで1時間が過ぎていく始末。今思うと先にある程度Figmaの勉強もしておくべきだったと思います。
自分が最初にやったことは、見た目で「だいたいこのくらいかな？」と適当に数値を決めてしまいました。全然似ていないものを作る→修正を繰り返す→時間だけが過ぎるという無駄な時間を過ごしてしまいました。
これ以上は無理だと思い、YouTubeでFigmaの基本操作を学び、要素をクリックすると具体的な数値が表示されることを発見しました（今さら）。今思うとめちゃめちゃ恥ずかしいですね。笑
「検証機能」という便利なものがあることも知りました。しかし最初の数日は本当に何も分からなくて、「自分にはWeb開発は向いていないのかも」と本気で思いました。
絶望ポイント②：余白地獄にハマる
Progateでレッスンではmarginとpaddingの概念は完璧に理解しているつもりでした。「marginは外側、paddingは内側」という基本は頭に入っていたし、ボックスモデルの図も理解していたので（下のような画像）、余白なんて楽勝だと思っていました。
Progateからスライドを引用しました
しかし実際の模写では「ここの隙間はmarginで作るべき？paddingで作るべき？」という選択で毎回15分悩む羽目になりました。
特に複数の要素が絡んだ時の余白の相殺や、コードの上書きなど、思った通りの位置に要素が配置されない謎現象が多発して、本当に困り果てました。
例えば、ヘッダー、メインコンテンツ、フッターがある時に「どこからどこまでの余白をどの要素が担当するのか」という考え方が全く分かりませんでした。見た目は完璧にできたと思ったレイアウトが、少し画面サイズを変えただけで崩壊した時は本当に絶望しました。
開発者ツールで既存のサイトを片っ端から調べるようになってから、
- 「このサイトはここをmarginで取ってるのか」
- 「意外とpaddingを使ってるな」
などの発見が少しずつ溜まっていき、だんだん判断できるようになってきました。また、marginの相殺について実際に体験して理解が深まったのも大きかったです。完璧な正解を求めすぎず、「正解は一つじゃない」ことを受け入れられるようになったのも成長だと思います。
絶望ポイント③：レスポンシブという名の悪夢
メディアクエリの書き方は習ったので、「@media (max-width: ○○px)」を書けば画面幅に応じてCSSを切り替えるだけでスマホ対応完了だと思っていました。こんなに簡単でいいの？と拍子抜けしたくらいです。
ところがPCで完璧だと思ったレイアウトをスマホで確認した瞬間、「これは一体何なの？」みたいな謎の物体が表示されました。
画像のサイズ調整、テキストの改行位置、ボタンのタップしやすさなど、考慮すべき点が山ほどあることを痛感しました。特に「PCでできたものをスマホサイズに調整する」のではなく、「スマホとPCで別々に作り直す」レベルの作業が必要だと知った時は本当にショックでした。
最初からモバイルファーストで考える重要性を学び、スマホサイズで作ってからPCサイズに拡張する方法に変更してから少しずつ改善されました。また、ブラウザの検証ツールだけでは不十分で、実機での確認が必須だということも身をもって体験しました。レスポンシブ対応は「作り直し」に近い作業が必要な場合もあると理解してからは、最初から両方のサイズを意識して設計するようになりました。
絶望ポイント④：ブラウザ間の表示差という現実
Progateの環境では一つのブラウザでしか確認していなかったので、「どのブラウザでも同じように表示される」と完全に思い込んでいました。HTMLとCSSは標準仕様があるんだから、どこで見ても同じでしょ？という認識でした。
しかしChromeとSafariで微妙に表示が違うことを発見した時は衝撃でした。特にフォントの表示やボタンのスタイルに差があることに気づき、さらに友人にスマホで確認してもらったら、自分の環境とは全然違って見えていることが判明しました。
せっかく細かく調整したデザインが、ブラウザが変わるだけで台無しになる現実を知った時は本当に絶望しました。
複数ブラウザでの確認を基本中の基本として作業工程に組み込むようになってから、この問題は大分改善されました。特にSafariは独特の癖があることを実感したので、Chrome、Safariでの確認は最低限として、可能な限り実際のデバイスでもチェックするようにしています。完璧を求めすぎず、ある程度の差は仕方ないと割り切ることも覚えました。
今後の学習計画と現在の課題
今までは静的なサイトの模写に取り組んでいましたが、次のステップとしてJavaScriptの学習をはじめました。特にDOM操作やイベント処理から始めて、最終的には簡単な動的サイトを作れるようになりたいと考えています。
ただ、HTML/CSSでこんなに苦労したので、JavaScriptではさらに大きな壁が待っていそうで今から不安です。
現在感じている課題が1つだけあります。
それは、コードの書き方がまだ完全に我流になってしまっていることです。動くものは作れるようになってきましたが、保守性や可読性を考えた書き方ができているかはまだまだ怪しいです。
また、CSSの設計方法をもっと体系的に学びたいと思っています。今は場当たり的にスタイルを当てている感じなので、大きなサイトを作る時に破綻しそうな予感がします。そして何より、実際の開発現場での常識やルールを知りたいです。独学だと「これで合ってるのかな？」という不安が常にあります。
今振り返って思うこと
3ヶ月前の自分に声をかけるとしたら、「教材を終えたのはスタート地点に立っただけだよ」と教えてあげたいです。
当時は「なんで教材ではこんなに簡単だったのに、実際にやると全然できないんだろう」と自分の無力さを疑いましたが、今思えばそれが当然だったんだなと。教材は基礎を学ぶためのもので、実践は全く別のスキルが必要だということを痛感しました。
同じ境遇の方へのメッセージ
もしProgateを終えて模写コーディングに挑戦している方がこの記事を読んでくれているなら、「つまずくのは当然」だと思ってください。僕も最初の1週間は本当に何も進まなくて、「向いていないのかも」と何度も思いました。
それでも、少しずつでも続けていると確実に成長している実感があります。3ヶ月前は「デザインデータって何？」状態だった自分が、今では一応形になるものを作れるようになりました。
完璧を求めすぎず、「今日は昨日より少しだけ理解が深まった」くらいの気持ちで続けていけば、きっと大丈夫だと思います。
お互い頑張りましょう！
最後まで読んでいただき、ありがとうございました。同じような体験をされた方、または今まさに絶望中の方がいらっしゃいましたら、コメントで体験談をシェアしていただけると嬉しいです！
この記事が参考になったら、いいねしていただけると励みになります！💖