模写コーディングの始め方は？始める前の準備ややり方、おすすめのサイトを紹介

模写コーディングは、既存のWeb（ウェブ）サイトを模倣してコーディングすることで、HTML・CSSの実践的なスキルを磨く学習方法です。コーディングの方法が理解できるだけでなく、デザイン力や新たな知識の習得、実力の把握にも効果を発揮します。

今回は、模写コーディングを始める前の準備や具体的なやり方、そしてスキルを効果的に身に付けるためのコツについて詳しく解説します。

模写コーディングを始める前の準備
模写コーディングのやり方
模写コーディングでスキルを身に付けるコツ
模写コーディングにおすすめのWebサイト
まとめ

模写コーディングを始める前の準備

効果的に模写コーディングを行うためには、いくつかの準備が必要です。下記4つのステップを踏むことで、スムーズに学習を進めることができます。

模写のルールを設定する

模写コーディングを始める前に、自分なりのルールを設定しましょう。例えば、「デザインのみを参考にし、ソースコードは見ない」「時間制限を設ける」「レスポンシブデザインまで再現する」などです。ルールを設定することで、学習の目的や目標が明確になり、モチベーションの維持にもつながります。

HTMLとCSSについて学ぶ

模写コーディングを効果的に行うためには、HTMLとCSSの基本的な知識が不可欠です。

HTMLは「Hyper Text Markup Language」の略称で、Webページの構造を定義するためのマークアップ言語のひとつです。テキスト、画像、リンクなどの要素を階層的に組み立て、Webページの骨格を作ります。

一方、CSSは「Cascading Style Sheets」の略で、HTMLで作成した構造に対してスタイルを適用するための言語です。色、フォント、レイアウト、アニメーションなど、Webページの視覚的な側面を制御します。CSSを使うことで、同じHTML構造に対して異なるデザインを適用したり、レスポンシブデザインを実現したりすることが可能です。

いずれも模写コーディングでは必須の知識となるため、オンライン学習サイトや書籍を活用して、言語の基礎を学んでおきましょう。Webコーディングに必要なスキルと習得方法については、下記で詳しく解説しています。

模写の前に「写経」をしてみる

写経とは、既存のコードをそのまま打ち込む練習方法です。Webサイトのデザインのみを見て行う模写とは違い、写経ではサイトのソースコードを見ながら、そのとおりに記述していきます。

シンプルなWebページのソースコードを写経することで、HTMLとCSSの基本的な構造や書き方に慣れることができるため、模写コーディングの前に行うのがおすすめです。

また、写経をする際は単に書き写すだけでなく、なぜこのコードなのかと考える癖をつけるほか、実行結果を確認することを意識しましょう。

Google Chromeの拡張機能を追加しておく

Google Chromeには、Web開発に役立つさまざまな拡張機能があります。例えば、ColorPick Eyedropper（カラーコード抽出）やSmart Page Ruler（要素のサイズ測定）などの拡張機能を追加しておくと、模写コーディングの際に便利です。

ColorPick Eyedropperは、Webページ上の任意の場所の色を簡単に取得できる拡張機能です。クリックするだけで、その箇所の正確な色のHEXコード（例：#FF0000）やRGB値を表示してくれます。対するPage Rulerは、Webページ上の要素のサイズや位置を測定するための拡張機能です。ピクセル単位で幅、高さ、余白などを測定でき、要素間の距離も簡単に確認できます。

Smart Page Rulerは、Webページにある要素のサイズを正確に測ることができるデベロッパーツールです。この機能を使うことでWebサイトにあるオブジェクトの高さや横幅、配置されている位置など、さまざまな測定を行うことができます。

これらの拡張機能を使用することで、模写コーディングの精度が向上し、元のデザインに即したWebページを作成可能です。

模写コーディングのやり方

準備が整ったら、実際に模写コーディングを始めましょう。下記6つの手順に従って進めていきます。

1. 模写するWebサイトを決める
2. エディタとファイルを用意する
3. 模写するWebサイトの構造を確認する
4. Webサイトのソースコードをエディタに模写する
5. Webブラウザで表示させてみる
6. 検証ツールを使って差異を確認する

手順1｜模写するWebサイトを決める

まずは、模写するWebサイトを選びます。初心者の場合は、ランディングページ（LP）やポートフォリオサイトなど、1ページで構成されたシンプルなWebサイトから始めるのがおすすめです。

また、模写するサイトを選ぶ際は自分の興味のある分野や業界のサイトを選ぶと、モチベーションの維持につながるのでおすすめです。なお、後ほど模写に最適なWeb サイトも紹介するので、そちらもぜひ参考にしてみてください。

手順2｜エディタとファイルを用意する

コーディングには、テキストエディタが必要です。Visual Studio Codeをはじめ、テキストエディタにはたくさんの種類があるため、使いやすいものを選びましょう。

Visual Studio Code（通称VSCode）は、Microsoftが開発した無料のオープンソースのコードエディタです。多くのプログラミング言語に対応し、豊富な拡張機能やデバッグ機能を備えています。

なお、コーディングを始める前にHTMLファイル（index.html）とCSSファイル（style.css）といった基本ファイルを作成しておくと、作業がスムーズに進みます。

手順3｜模写するWebサイトの構造を確認する

選んだWebサイトの構造をよく確認します。ヘッダー、メインコンテンツ、サイドバー、フッターなどの主要な要素を特定し、それぞれの配置や関係性を理解します。この段階で、大まかなHTML構造をイメージしておくと良いでしょう。

手順4｜Webサイトのソースコードをエディタに模写する

確認した構造をもとに、HTMLとCSSのコーディングを始めます。まずはHTMLで基本的な構造を作り、次にCSSでスタイルを適用していきます。この際、オリジナルのサイトをできるだけ見ないようにし、自分の理解と記憶を頼りにコーディングすることで、より効果的な学習ができます。

手順5｜Webブラウザで表示させてみる

コーディングが完了したら、作成したHTMLファイルをWebブラウザで開いて表示を確認します。オリジナルのサイトと見比べながら、デザインや配置の差異を確認しましょう。また、この段階で大きな違いがあれば、コードを見直して修正します。

手順6｜検証ツールを使って差異を確認する

最後に、ブラウザの開発者ツールを使って、オリジナルのサイトと自分が作成したサイトの出来映えを確認します。CSS のプロパティやHTML構造の違いを確認し、必要に応じて修正を加えます。この過程で、より効果的なコーディング方法や新しいテクニックを学ぶことができます。

模写コーディングでスキルを身に付けるコツ

模写コーディングを通じて効果的にスキルを身に付けるために、下記のコツを意識しましょう。

正しい手順で模写コーディングを行う

前述した6つの手順を基本の流れとし、体系的に模写コーディングを進めることが重要です。

特に、構造の確認と要素の特定をきちんと行ってから実際のコーディングに入ることで、効率的に作業を進められます。正しい手順を踏むことで、より深い理解と確実なスキル向上につながります。そのほか、手順を意識することで、実際の業務でも適切なアプローチを取れるようになるでしょう。

自分のレベルに合ったサイトを選ぶ

初心者の段階では、シンプルな構造のサイトから始め、徐々に難易度を上げていくことが大切です。自分のスキルレベルに合ったサイトを選ぶことで、段階を踏みながらステップアップしていけます。

適切な難易度のサイトを選ぶことで、挫折せずに継続的に学習を進められるほか、自信とモチベーションの向上にもつながります。

模写コーディングが終わったら完成物をチェックする

模写が完了したら、オリジナルのサイトと自分の作成したサイトを細かく比較します。レイアウトやスタイル、レスポンシブデザインの動作など、さまざまな観点から差異を確認し、改善点を見つけましょう。

模写に満足して終わるのではなく、常に改善点を探し続けることでよりレベルの高いコーディングスキルが身に付くはずです。また、他者にフィードバックを求めることで、新たな視点や改善のヒントを得やすくなります。

模写コーディングにおすすめのWebサイト

ここでは、模写コーディングの練習に適したおすすめのWebサイトを難易度順にいくつか紹介します。

【初級】PAS-POL

PAS-POLは、初心者向けの模写コーディング練習に最適なサイトです。シンプルで明確なレイアウトとなっており、Webサイトの基本構造とスタイリングの基礎を効果的に学ぶことができます。

ヘッダー、メインコンテンツ、フッターの基本構造が明確で、レスポンシブデザインの基礎も学べます。また、シンプルな色使いと余白の取り方も参考になり、デザイン感覚も養えるでしょう。

【中級】JIN

JINは、中級者向けの模写コーディング練習に適しているWordPress用のテーマです。ユーザビリティが高く、ユーザーの使いやすさを追及できるのが特徴です。また、JINの模写を通じて、複雑なレイアウトの構築方法や、動的な要素の実装技術を学ぶことができます。さらに、JavaScriptを使用した動的な要素の実装も学べるでしょう。