WEB制作初心者のコーディング練習に「模写コーディング」はいかが？

WEB制作において必須スキルであるHTMLとCSS。しかし、参考書を読んだだけでは、なかなか実践的なスキルは身につきにくいものです。そこでおすすめしたいのが「模写コーディング」という学習方法です。

わたしも歌以外で手に職をつけたくてWEB制作を勉強していました。
参考書やCODEPREP(https://codeprep.jp/)で学習するだけでは手応えが得られなかったため、模写コーディングに取り組みました。

この記事では、WEBサイトの構造理解を深め、HTML・CSSのスキルを効果的に磨くことができる模写コーディングについて、その具体的な手順や練習に便利なサイト、そして次のステップまで詳しくご紹介します。

模写コーディングとは、その名の通り、すでにある優れたWEBサイトのデザインを真似て、自分自身でHTMLとCSSを書いて再現（模写）することです。お手本があるため、初心者でも完成形をイメージしやすく、実践的なコーディングスキルを効率的に学ぶことができます。

いきなりコードを書き始めるのではなく、以下の手順で進めるのがおすすめです。

模写するサイトを選ぶ: まずは、お手本となるWEBサイトを選びます。最初はLP（ランディングページ）や構成がシンプルな企業のコーポレートサイトなどが良いでしょう。
サイトの構造を分析する: 選んだサイトがどのような要素（ヘッダー、メインコンテンツ、フッターなど）で構成されているのか、大まかな構造を紙に書き出すなどして分析します。
HTMLで骨組みを作成する: 分析した構造をもとに、HTMLでマークアップを行い、WEBサイトの骨組みを作成します。
CSSでデザインを整える: HTMLの骨組みが完成したら、CSSを使ってフォント、色、レイアウトなどを指定し、お手本のデザインに近づけていきます。
答え合わせをする: 最後に、Chromeのデベロッパーツールなどを使って、お手本のサイトのコードと自分の書いたコードを比較し、改善点を見つけます。

模写コーディングの練習には、以下のようなサイトが役立ちます。

SANKOU!: 日本国内のクオリティが高いWEBサイトが集められたギャラリーサイトです。業種やサイトの種類、色などから検索でき、模写したいサイトを見つけやすいのが特徴です。
MUUUU.ORG: こちらも国内の縦に長く、クオリティの高いWEBサイトを厳選して集めているギャラリーサイトです。デザインの参考になるサイトが豊富に揃っています。
codejump:「何から手をつけていいか分からない」という初心者の方に特におすすめです。模写コーディング専用の教材が用意されており、丁寧な手順解説も付いているため、迷うことなく学習を進められます。まずはこちらで練習を始め、自信をつけるのも良いでしょう。

模写コーディングに慣れてきたら、次のステップに進むとよいでしょう。

わたしもこれからチャレンジする予定です！

JavaScriptの学習: CSSだけでは実現できない、スライドショーやメニューの開閉といった「動き」をJavaScriptで実装してみましょう。
レスポンシブデザインへの挑戦: パソコン、タブレット、スマートフォンなど、異なる画面サイズでもレイアウトが崩れないレスポンシブデザインの模写に挑戦します。
オリジナルサイトの制作: 模写で培ったスキルを活かして、架空のカフェや自身のポートフォリオサイトなど、完全オリジナルのWEBサイトを制作してみましょう。

模写コーディングは、WEB制作の初心者にとって、実践的なスキルを楽しく、かつ効率的に習得できる非常に有効な学習方法です。本やスクールで得た知識を「使えるスキル」に変えるために、ぜひ挑戦してみてください。今回ご紹介した手順やサイトを参考に、まずは1つのサイトを完成させることから始めてみましょう。