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 は内側」という基本は頭に入っていたし、ボックスモデルの図も理解していたので（下のような画像）、余白なんて楽勝だと思っていました。
しかし実際の模写では「ここの隙間は 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ヶ月前は「デザインデータって何？」状態だった自分が、今では一応形になるものを作れるようになりました。
完璧を求めすぎず、「今日は昨日より少しだけ理解が深まった」くらいの気持ちで続けていけば、きっと大丈夫だと思います。
お互い頑張りましょう！
最後まで読んでいただき、ありがとうございました。同じような体験をされた方、または今まさに絶望中の方がいらっしゃいましたら、コメントで体験談をシェアしていただけると嬉しいです！
この記事が参考になったら、いいねしていただけると励みになります！💖
