模写コーディングってどうやるの？どれぐらいやればいいのかな？練習サイトはどうしよう？
Web制作やコーディングの勉強を始めると「模写コーディング」という言葉に出会うと思います。
しかし「模写コーディング」は実はいたずらにやっても、いつまで経っても実践レベルにはなれない、しかし成長のために重要な過程だったりします。
そこで今回は「模写コーディングの役割と練習サイトと具体的なやりかた」を徹底解説します！
今回の記事を読んでいただくことで、現役コーダーから見た模写コーディングとの付き合い方がよく分かるようになるので、初学者の方は是非最後まで見て欲しいです！！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
模写コーディングに意味はある、と今は思う
私は2020年頃に、「【模写はやめてください】デザインカンプからのコーディングと模写は全く違う話」というブログ記事とYouTube動画を出しました。
このコンテンツでは、
実務と模写はかけ離れすぎてるから、推奨しません！
ということを言っており、代わりに初学者向けの第一歩になれる、簡単なデザインカンプからのコーディング課題
を出したのですが、
いきなりデザインカンプからのコーディングとか、難しすぎて挫折しそうです…
こういった声をずっと聞いてきて、初学者の方にとっての模写の重要性を再認識するに至りました。
つまり、模写で教科書のコード写経レベルを脱してからデザインカンプのコーディングに移れば、もっとスムーズなのではないかと。
そこで、いっそのこと今回は模写コーディングを徹底解説しようと思ったわけです。
模写コーディングは橋渡しに過ぎない
模写コーディングはあくまで「デザインカンプが行えるレベル感までの橋渡し」に過ぎません。
決してずっとやるものではないので、今回紹介する題材を1つでもこなしたら、次に「【入門】デザインカンプからのコーディング練習【無料です】」に取り組むことをおすすめします。
模写とデザインカンプからのコーディングは全く違いますからね。
模写コーディングとはそもそも何なのか？
Web制作の実務では、Photoshop、Adobe XD、Figmaなどで作られたデザインカンプからコーディングするのが一般的です。
しかしWeb制作の学習で言われる模写というのは、デザインカンプからではなく、既に公開されているサイトをそっくりそのまま再現しようとすることを指します。
以下の画像のように、検証ツールで元サイトの表示を見ながら、自分のエディターでコーディングして、できるだけ元サイトに近づけることを目指します。
模写コーディングに取り組む前提のレベル
教科書を一冊は終わらしておきたい
模写とは言え、HTML&CSSの基礎学習が終了している必要があります。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座を終わらせておきましょう。
この本をとりあえず一周できていれば、あとは模写の中で分からない部分を自分でググって解决できるようになります。
う〜ん、それだと物足りないかもね…模写で一行目から書けなくて、絶望すると思います。
模写コーディング前の準備
拡張機能やエディターの準備
模写コーディングでは少しだけ事前準備が必要になるので、準備しておきましょう。
- Image Downloader（拡張機能）
- VSCodeのセットアップ（エディター）
- 検証ツールに慣れておく
❶Image Downloader
模写コーディングでは、サイト上の画像が必要になりますが、その画像を簡単にダウンロードできる拡張機能になります。
❷VSCodeのセットアップ
VSCodeの最低限のセットアップは終わらせておきましょう。
特にまだLive Serverを使ったことがない人は、以下の記事で基本セットアップは終わらせておきましょう。
❸検証ツールに慣れておく
模写コーディングでは検証で元サイトを見ながら、サイズを合わせたり答え合わせをしていくことになります。
また、レスポンシブ対応も行うため、検証ツールの操作は必須です。
検証ツールの使い方に関しては、下記の記事に一通り目を通しておくと良いです。
模写コーディングで使う練習サイト2選
模写課題①iSara
バンコクのノマドエンジニア育成講座 iSara[イサラ]は有名な模写OKサイト（公式公認）です。
実は私自身も2018年のiSara出身で、このiSaraLPを模写して卒業しました。
ただ、このiSaraのページはかなり縦長になっており、ボリュームがすごいです。
そこで、iSaraの模写をするに当たっていくつかアドバイスをします。
❶ヘッダー6時間、ファーストビューに一日は普通
まず模写の段階の人は、最初のヘッダー完成まで半日かかっても普通だと捉えましょう。
私もヘッダーに5時間かかった記憶があります。
特にヘッダーはレスポンシブで表示が切り替わるので、そこも加味してコーディングする必要があります。
ただ、ファーストビューが終わるとコーディングのスピードが上がってくるので、意外にその後はスイスイ行けたりします。
❷ブロック分けを行うべし
ブロック分けの考えは実務に入っても重要です。
私もブロックを思い描きながら、HTMLを書いています。
以下の図のようなブロック分けを頭の中でできればいいですが、最初のうちは図示してもいいかもです。
❸コードが正しいかは確認したい
今回久しぶりにiSaraのコードを見ていたら、hタグの中にpタグが入っていました…
これは文法上誤りになりますね。そもそもpタグの必要性を感じないです。
ざっと見た感じ、ここだけ気をつければ良さそうかなと思います。
❹アコーディオンの開閉やフォーム機能は飛ばす
iSaraサイトではアコーディオンやフォームがありますが、これはjQueryやWordPressなどの勉強が必要になってきます。
なので、とりあえず見た目だけ再現できればいいかと思います。
また、非常に長いので、全部やる必要もないかと思います。
ファーストビューは最低でも、終わらせたいですね。
模写課題②デイトラの練習課題
私が一番おすすめしているWeb制作スクールの「デイトラ
」の「Web制作コース」が、無料模写コーディング課題を出してくれています。
最初から作業ファイルを配布してくれているのが有り難いのと、ボリューム、難易度共にちょうど良い感じになっています。
- レイアウトが難しくない
- 素材準備が必要ない
- 一日で終えられるボリューム
しかし、デメリットもあります。
- 参考デザインがpngでも配布なので、コーディングしにくい
- テキストサイズや色、大きさなどが全く分からないので、感覚でコーディングすることになる
ここの見出しって、大体28pxとかかな？
みたいな感覚コーディングになってしまいますね。
まぁ模写コーディングって、なんとなくそれっぽくコーディングできるようにする練習なので、デザインに正確なコーディングはこの後学べばよいかなと。
模写コーディングの具体的なやり方
ここからは模写コーディングの具体的なやり方の手順をお伝えします。
①作業ディレクトリと素材を揃える
まずは作業用ディレクトリ（フォルダ）を用意します。
一般的には以下のような構造になるかと思います(imgの中に画像やアイコンなどを入れるイメージ)
iSaraの場合、サイトからダウンロードした素材もimgに入れていきましょう。
「デイトラ」で配布されてる課題の方はそのまま用いればいいです。
②HTML雛形作成
HTMLの最初の雛形を作成しますが、忘れがちな以下の点は確実に押さえて下さい。
| title | サービス名や企業の名称を入れる |
| description | 説明文を入れる |
| リセットCSS | ブラウザデフォルトのCSSが邪魔なので消す。個人的にはdestyle.cssなどが好み。 |
| 自分のCSS読み込み | リセットCSSの後に読み込み。ファイルパスが異なると読み込めない |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ここにタイトルを入れる</title>
<meta name="description" content="ここにディスクリプションを入れる。">
<link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>③模写元サイトをみつつコーディング
あとは、元サイトを見つつコーディングして表示を合わせていきます。
VSCodeのLive Serverを起動しながら進めましょう。
検証ツールで色や大きさ、余白、フォントなどを確認することができます。
font-familyについてはbodyに一括指定するのが一般的なので、bodyのCSSを確認して合わせておくといいですね。
難しい部分があれば、HTML,CSSのコードをカンニングしてもOKです。
模写コーディングはとにかく「それっぽくコーディングして成功体験を積んで、早めにデザインカンプからのコーディングに移動して正確性を高める」ことを主眼としています。
❹全体の見直し
一通りコーディングができたら、レスポンシブの挙動など実際のサイトと見比べつつ、どれぐらい再現できているかを確認してください。
私がiSaraに通っていた時はメンターの方に模写作品のレビューをしてもらってましたが、レスポンシブでの崩れの指摘が特に多かった印象です。
タブレット付近（700px~1000px）とかは要注意ですね。
模写の段階から、表示崩れに敏感になれると素晴らしいです。
模写コーディングの先は何をする？
模写コーディングはあくまで「デザインカンプからのコーディング」に挑戦するための橋渡しでしかありません。
模写を一作品でも終わらせた方は、是非「【入門】デザインカンプからのコーディング練習【無料です】」に挑戦してみてください。
それでも難しければ、別の模写を挟むのでも全然いいと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
これを解説している私自身は、6年でWeb制作案件を200件以上こなしており、模写コーディングも一番最初に取り組んだ学習手段です。