サイト模写でコーディングスキルを身につける！？メリットとそのやり方

「サイト模写」とは、実際に運用されている企業や個人のWebサイトを見よう見まねで再現する練習方法です。
Webデザインだけを模写する練習方法もあるため、区別するために模写コーディングと呼ばれることもあります。

サイトを模写するイメージ

模写と聞いたときに最初に思い浮かぶ“美術の練習方法”で用いられ意味と同じような考え方の方法です。
「ただ人のサイトをコピーして何が上達するの？」と懐疑的な方のために、模写という練習方法が秘める「メリット」、そしてメリットを最大限実感するための「コツ」をご紹介いたします。

模写で参考にするWebサイトは、プロの手によって監修されています。
仮に見よう見まねでも、全く同じシステムを再現できれば“プロの技術”を再現したという成果が得られるのです。

自然とオリジナルサイトにもプロの配慮が現れるようになり「実践を想定したWebサイト作り」の意識が身につきます。

実際に運用されているサイトは、後ろに控える複数の作業者を意識して作られています。
独学中は自分だけが分かれば良かったコードですが、実務レベルに引き上げるためには「美しいコードの記述が必要」だということが、身をもって体感できるのです。

サイト模写をするに当たって、参考にするサイトを選定する必要があります。
そのような場合に「ぱっと見ただけでも大体の要素が実装できる」という感覚でサイトを選びましょう。
数値的な実感として“70％は何も見ずに再現できる”というのが1つの目安です。

インターネット上のサイトは、“検証ツール”を使えばどのように記述されているのか確認できるような仕組みが採用されています。
この機能はサイト模写においての“答え”になるため、検証ツールを初めから使用するのはやめましょう。

最初は見栄えが悪くても良いので、最初は自分の頭でコードを組み立てます。
最終的な答え合わせとして検証ツールを使用すると、どうすればキレイなコードが書けるか深いところまで思考できるため、確実にスキルアップが実現可能です。

現在の実力を計るのに最適

サイト模写は、すでに運用されているサイトを見て全く同じサイトになるように完全再現する練習方法です。
基本的には練習専用の制作物なため、オリジナリティという観点では自己PRには繋がりません。

しかし、サイト模写をすることで、実際に運用されているWebサイトの作り方が感覚的に身につきます。
また、知らないコードや記述方法に出会えるため学びも多く、実務レベルの記述能力を手に入れたいアマチュアコーダーのみなさんには非常にオススメの練習方法なのではないでしょうか。

サイト模写はコーディングの良い練習になるというメリットがあります。