Web制作実務役立ち

模写コーディングのやり方を練習サイトを元に解説【無料】

模写コーディングのやり方を練習サイトを元に解説【無料】
本ページにはプロモーションが含まれています。
初学者さん

模写コーディングってどうやるの?どれぐらいやればいいのかな?練習サイトはどうしよう?

Web制作やコーディングの勉強を始めると「模写コーディング」という言葉に出会うと思います。

しかし「模写コーディング」は実はいたずらにやっても、いつまで経っても実践レベルにはなれない、しかし成長のために重要な過程だったりします。

そこで今回は「模写コーディングの役割と練習サイトと具体的なやりかた」を徹底解説します!

これを解説している私自身は、6年でWeb制作案件を200件以上こなしており、模写コーディングも一番最初に取り組んだ学習手段です。

今回の記事を読んでいただくことで、現役コーダーから見た模写コーディングとの付き合い方がよく分かるようになるので、初学者の方は是非最後まで見て欲しいです!!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

模写コーディングに意味はある、と今は思う

シャッター

私は2020年頃に、「【模写はやめてください】デザインカンプからのコーディングと模写は全く違う話」というブログ記事とYouTube動画を出しました。

このコンテンツでは、

しょーご

実務と模写はかけ離れすぎてるから、推奨しません!

ということを言っており、代わりに初学者向けの第一歩になれる、簡単なデザインカンプからのコーディング課題

【入門】デザインカンプからのコーディング練習【無料です】

を出したのですが、

まさひろくん

いきなりデザインカンプからのコーディングとか、難しすぎて挫折しそうです…

こういった声をずっと聞いてきて、初学者の方にとっての模写の重要性を再認識するに至りました。

つまり、模写で教科書のコード写経レベルを脱してからデザインカンプのコーディングに移れば、もっとスムーズなのではないかと。

そこで、いっそのこと今回は模写コーディングを徹底解説しようと思ったわけです。

模写コーディングは橋渡しに過ぎない

模写コーディングはあくまで「デザインカンプが行えるレベル感までの橋渡し」に過ぎません。

決してずっとやるものではないので、今回紹介する題材を1つでもこなしたら、次に「【入門】デザインカンプからのコーディング練習【無料です】」に取り組むことをおすすめします。

しょーご

模写とデザインカンプからのコーディングは全く違いますからね。

模写コーディングとはそもそも何なのか?

Web制作の実務では、Photoshop、Adobe XD、Figmaなどで作られたデザインカンプからコーディングするのが一般的です。

しかしWeb制作の学習で言われる模写というのは、デザインカンプからではなく、既に公開されているサイトをそっくりそのまま再現しようとすることを指します。

以下の画像のように、検証ツールで元サイトの表示を見ながら、自分のエディターでコーディングして、できるだけ元サイトに近づけることを目指します。

模写コーディングに取り組む前提のレベル

教科書を一冊は終わらしておきたい

模写とは言え、HTML&CSSの基礎学習が終了している必要があります。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座を終わらせておきましょう。

created by Rinker
¥2,237 (2024/04/17 00:40:53時点 Amazon調べ-詳細)

この本をとりあえず一周できていれば、あとは模写の中で分からない部分を自分でググって解决できるようになります。

ありさちゃん
ありさちゃん
Progateだけじゃ足りないですか?
しょーご

う〜ん、それだと物足りないかもね…模写で一行目から書けなくて、絶望すると思います。

模写コーディング前の準備

拡張機能やエディターの準備

模写コーディングでは少しだけ事前準備が必要になるので、準備しておきましょう。

模写前の準備
  1. Image Downloader(拡張機能)
  2. VSCodeのセットアップ(エディター)
  3. 検証ツールに慣れておく

❶Image Downloader

https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj

模写コーディングでは、サイト上の画像が必要になりますが、その画像を簡単にダウンロードできる拡張機能になります。

❷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制作コース」が、無料模写コーディング課題を出してくれています。

【無料練習素材】あなたはできる?模写コーディング腕試し!

https://note.com/tokyofreelance/n/n4baf7dd10306

最初から作業ファイルを配布してくれているのが有り難いのと、ボリューム、難易度共にちょうど良い感じになっています。

この課題のメリット
  1. レイアウトが難しくない
  2. 素材準備が必要ない
  3. 一日で終えられるボリューム

  しかし、デメリットもあります。

この課題のデメリット
  1. 参考デザインがpngでも配布なので、コーディングしにくい
  2. テキストサイズや色、大きさなどが全く分からないので、感覚でコーディングすることになる
初学者さん

ここの見出しって、大体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)とかは要注意ですね。

しょーご

模写の段階から、表示崩れに敏感になれると素晴らしいです。

模写コーディングの先は何をする?

シャッター

模写コーディングはあくまで「デザインカンプからのコーディング」に挑戦するための橋渡しでしかありません。

模写を一作品でも終わらせた方は、是非「【入門】デザインカンプからのコーディング練習【無料です】」に挑戦してみてください。

それでも難しければ、別の模写を挟むのでも全然いいと思います。

しょーご

この記事ではWeb制作完全独学ロードマップも意欲的に更新しているので、そちらも参考にしてみてください!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!