※本記事にはプロモーション（広告）が含まれます。
コーディングの練習方法として、最初に勧められることが多いのが模写です。ただしやり方を間違えると、時間だけ使って何も残りません。
私はWeb制作に14年関わり、数十社の現場を見てきました。採用や案件の紹介で「何を見られているか」も、面談を通じて何度も確認しています。その視点から、模写の使い方を書きます。
結論：模写は練習にはなるが、実績にはならない
先に大事なことを書きます。
- 手を動かす練習としては、非常に有効
- ポートフォリオの中身としては、弱い
理由は単純で、模写にはデザインの判断が入っていないからです。誰かが決めたものを再現しただけなので、その人の判断力が見えません。
相手が見ているのは3つだけです。
- 指示どおりに作れるか（再現度）
- 崩れないか（スマホ表示、文字数が増えたとき）
- どこまで自分でやったか
模写で示せるのは1番と2番までです。3番を示すには、自分で構成から考えたものが1本必要になります。
模写に使う題材の選び方
「おすすめサイト」を探す前に、選ぶ基準を持っておいたほうが効率が上がります。
1. 実在する企業サイトを選ぶ
練習用に作られた教材サイトより、実際に運用されているサイトのほうが学びが多いです。理由は、運用を前提とした作りになっているからです。
要素の量、テキストの長さ、更新されるパーツ。これらは教材にはない要素です。
2. 自分が受けたい案件に近いものを選ぶ
ここが最も重要です。企業サイトの案件を受けたいなら企業サイトを、LPの案件を受けたいならLPを模写してください。
おしゃれで凝ったサイトを選びがちですが、実務で多いのはもっと地味なレイアウトです。練習の題材は、行きたい現場から逆算するのが正解です。
3. 最初は1カラムのシンプルなものから
いきなり複雑なアニメーション付きのサイトを選ぶと、途中で止まります。1ページを完成させる経験のほうが、途中で挫折した大作より価値があります。
4. スマホ表示も確認できるものを選ぶ
PCだけ模写しても、実務では通用しません。レスポンシブ対応まで含めて1本と考えてください。
どこから題材を探すか
特定のサイト名を挙げるより、探し方を持っておくほうが長く使えます。
1. Webデザインのギャラリーサイト
制作会社が実績を掲載しているギャラリー系のサイトが複数あります。業種やレイアウト別に絞り込めるため、狙った系統の題材を見つけやすいです。
2. 実際の制作会社の実績ページ
これは意外と見落とされています。自分が営業しようとしている制作会社の実績を模写すると、その会社が作るサイトの傾向が分かります。
私は制作会社の求人情報を見て直接営業していましたが、事前に実績を見ておくと、話が具体的になります。
3. 自分が普段使っているサービスのサイト
馴染みがあるぶん、「なぜこの配置なのか」を考えやすくなります。模写しながら意図を推測するのが、いちばん力がつく使い方です。
4. 学習サイトの模写用教材
最初の1本には向いています。手順が用意されているので、完成までたどり着ける確率が高いからです。ただし2本目以降は実在サイトに移ってください。
模写のやり方で差がつく5つのポイント
1. 開発者ツールで答えを見ない
最初から他人のCSSを見てしまうと、考える工程が消えます。まず自分で書いて、どうしても分からないときだけ見る。この順番を守るだけで、身につき方がまったく違います。
2. 幅を連続的に変えて確認する
「375px・768px・1024px」で確認して終わりにしないでください。崩れるのは、たいてい中間の幅です。幅を少しずつ変えながら、崩れる位置を探す癖をつけます。
3. 文字数を増やしてみる
実務で最も多い崩れ方が、これです。元のテキストを2倍にしても崩れないかを必ず確認してください。運用が始まってから起きる問題を、練習段階で経験できます。
4. 詰まった時間を測る
分からない箇所で何時間も止まっていることに、本人が気づいていないケースが多いです。30分詰まったら調べ方を変えるか、聞く。これを最初から習慣にしてください。
5. 完成後に元サイトと並べて見比べる
余白・行間・文字サイズ。並べると、自分がどこを雑に処理したかが分かります。この見比べをやるかどうかが、再現度の精度を決めます。
模写を何本やればいいのか
目安は3本
数をこなすより、種類を変えて3本のほうが効果的です。
- シンプルな1カラムのサイト（完成体験を作る）
- 企業サイトのトップページ（要素量が多いものに慣れる）
- LPまたは商品ページ（縦に長い構成に慣れる）
この3本を通すと、実務で出てくるパターンの大半に触れられます。
4本目からは自主制作に切り替える
ここが分かれ目です。模写を10本やっても、ポートフォリオとしての価値はほとんど増えません。4本目は「誰に向けた何のサイトか」を自分で設定して作ってください。
架空の店舗でも構いません。ターゲット・目的・構成を自分で決めたという事実が、判断力の証明になります。
模写で身につくもの・身につかないもの
期待値を正しく持っておくと、途中でつまずきにくくなります。
身につくもの
- HTML/CSSの記述に手が慣れる
- レイアウトの型を覚える（横並び・縦積み・カード配置）
- 細かい差に気づく目（余白・行間・文字サイズ）
- 崩れる条件を経験する（文字数・画像サイズ・幅の中間）
4つ目は特に価値があります。実務では、崩れるのは「作った直後」ではなく「運用が始まってから」だからです。練習段階で経験しておくと、納品前のチェックが変わります。
身につかないもの
- 要件を聞き取る力
- 実現できるかを判断する力
- 運用する人が触れる形にする設計
- チームでの進め方
これらは1人での練習では手に入りません。実案件に入って初めて経験するものなので、模写で身につかないことを気に病む必要はありません。
現場で評価されるのは「正確さ」だった
模写を続ける意味を、現場の視点から補足します。
私が入った30名規模で制作を回している現場で、最優先されていたのは技術の高さではありませんでした。レギュレーションを守ることと、事故を出さないことです。
命名規則、ディレクトリ構成、公開前のチェック。決まりごとに正確に従えるかどうかが評価の軸でした。
模写で鍛えられる「細かい差に気づく目」と「指定どおりに合わせる精度」は、まさにここに直結します。地味な練習に見えて、実務で最も使う能力を鍛えていると考えてください。
模写だけで止まってしまう人へ
やってはいけないこと
- 模写を並べただけのポートフォリオを作る — 判断材料になりません
- 模写した実績として案件に応募する — 著作権の問題があります
- 完璧を目指して1本に何か月もかける — 完成させる経験のほうが重要です
次に進む目安
次の3つができるようになったら、模写の役割は終わりです。
- 1ページを最後まで作り切れる
- スマホ表示で崩れない
- 詰まっても自分で調べて進められる
ここまで来たら、自主制作1本 → 実案件という順番に進んでください。
学習の順番のなかでの位置づけ
模写はHTML/CSSの段階の練習方法です。全体の順番はこうなります。
- HTML/CSS（模写で手を動かす）
- レスポンシブ対応
- JavaScriptの基礎 — 最大の壁
- WordPressなどのCMS構築
正直に書くと、私はHTML/CSSからJavaScriptに進むまで数年空いてしまいました。本当に折れかけたのもJavaScriptの壁です。
それでも仕事は続いています。遅くても、順番さえ守れば届きます。実際にかかった期間はコーダーの独学期間にまとめました。
模写が終わったら、市場価格を確認する
ある程度作れるようになったら、学習を続ける前に外の数字を知ってください。何を学ぶべきかを、独学の情報だけで決めると的が外れます。
私はフリーランスエージェントに7社登録しましたが、門前払いはゼロで、聞かれたのは経歴・得意分野・週何日働けるかの3点だけでした。技術テストもありません。
面談で「この経歴だと、あと何ができると案件の幅が広がりますか」と聞けば、担当者は具体的に答えてくれます。独学の方向を、案件側の視点で決められるのは大きな利点です。
実務経験が必要な案件が中心ではありますが、相談自体は無料です。Midworksのような会社を含めた比較はフリーランスコーダーにおすすめのエージェントにまとめています。
模写1本目の進め方（手順）
最初の1本で止まる人が多いので、詰まりにくい順番を書いておきます。
1. 完成形をスクリーンショットで保存する
PC表示とスマホ表示の両方を撮っておきます。あとで見比べるときの基準になります。ブラウザで開いたまま作業すると、細部の記憶が曖昧になります。
2. 全体を大きなブロックに分ける
ヘッダー、メインビジュアル、セクション1、セクション2、フッター。先に骨組みを決めてから中身を作るほうが、途中で構造をやり直さずに済みます。
3. セクション単位でPCとスマホを同時に仕上げる
PCを全部作ってからスマホ対応、という進め方は非効率です。1セクションごとに両方を仕上げるほうが手戻りが減ります。
4. 色とフォントサイズは先に決めておく
使う色と文字サイズを最初にまとめておくと、途中でブレません。実務でも同じ進め方をします。
5. 最後に「壊す」テストをする
文字数を2倍にする、画像を外す、幅を細かく変える。わざと壊してから直すのが、この練習でいちばん価値のある工程です。
よくある質問
Q. 模写したサイトを公開してもいいですか
他人のデザインをそのまま公開するのは、著作権の観点で問題になり得ます。学習目的でローカルに置くまでにとどめるのが安全です。実績として見せたいなら自主制作を作ってください。
Q. コードを見ながら模写するのは意味がないですか
最初の1本は見ながらでも構いません。ただし2本目からは、先に自分で書いてください。見ながら書くのは「写経」であって、考える練習にはなりません。
Q. 何時間くらいかかりますか
1ページで10〜20時間が目安ですが、個人差が大きいです。時間そのものより、完成させたかどうかで判断してください。
Q. 模写より実案件のほうが早く身につきますか
身につきます。ただし納品できる水準に届いていない段階で受けると、信用を失います。まず1本を完成させてからにしてください。
Q. デザインも自分で作るべきですか
コーダーとして働くなら必須ではありません。ただし「なぜこの配置なのか」が分かると実装の質が上がります。デザイナーとの違いはコーダーとWebデザイナーの違いにまとめました。
Q. 模写中に分からない部分はどう調べますか
「やりたいこと」で調べてください。「CSS 横並び 中央」のように、目的の言葉で検索すると目的の情報にたどり着きます。エラー文をそのまま貼るのは、動かなくなってからで十分です。
Q. 模写が終わったら何を作ればいいですか
架空の店舗サイトを1本作ってください。ターゲット・目的・構成を自分で決めることが目的なので、規模は小さくて構いません。5ページより1ページを作り切るほうが価値があります。
まとめ
- 模写は練習にはなるが、実績にはならない
- 題材は行きたい現場から逆算して選ぶ
- 開発者ツールで答えを先に見ない
- 3本やったら自主制作に切り替える
- 作れるようになったら、学習より先に市場価格を確認する
模写は入口としては優秀ですが、そこで止まる人がとても多い練習方法でもあります。「完成させる」と「自分で決める」の2つを意識してください。
この先に何を学ぶかはコーダーに必要なスキル、案件の取り方はコーダーの案件の取り方にまとめています。
