こんにちは！ Web制作ライターのナナミです。
HTMLとCSSの基本を覚えてきたら、今度は実際に作ってみる作業をしたいですよね。
そんな時にオススメなのが模写、既存のサイトを再現するようにコーディングをしてみることです。
模写ってどうやればいいんだろう……
今回はこの疑問を解決すべく、いちばん勉強になる模写の方法を伝授したいと思います！
記事を参考にして、コーディングレベルをぐーんとアップしちゃってくださいね。
また、次の記事ではそもそもプログラミング初心者は何から始めれば良いのか、その学習手順やおすすめの教材を紹介しているので良ければ参考にしてください。
→ プログラミング初心者が独学で0から学習を始められる完全入門ガイド
模写だけでは実務レベルにならない
オススメって言ったのに実務レベルにならない？ と思うかもしれないですが、実はそうなんです……。
なぜなら実際にコーディングの仕事をする場合、参照するのはPhotoshopやIllustratorで作られたデザインデータ。実際の業務では、そこから必要な画像を切り出したりする作業も含まれているからです。
模写の場合、参照するのはすでにでき上がっているものなので、必要な画像などはそこからダウンロードすればいいだけ。本来実務でやる部分をすっ飛ばしている状態です。
模写「だけ」では実務を完璧にこなすことはできません。そこは念頭に置いておきましょう。
それでも模写をする意味とは？
それでも！ それでも模写は意味があるんです！
模写をすることにより、HTMLやCSSのコーディングの流れや、それぞれの言語のルールの確認、プロパティの種類を知ることができます。
PhotoshopやIllustratorのデータを用意するよりも手軽にできるし、何よりすでにでき上がっているので「答え」があります。
実務レベルの練習をする前の段階、HTML・CSS覚えたての状態での練習にはもってこいの方法なのです。決して無駄ではないんです！
模写での学習効果をUPさせる3つのポイント
模写は初心者の練習にもってこいですが、ただ単にコードを丸ごと写したり、なんとなくやってみたりするだけではなかなか上達しません。
下記の3つのポイントを意識して、模写でしっかりスキルを身につけていきましょう。
ルールを決める
やみくもにやるのではなく、ルールを決めましょう。一般的なコーディングのルールというより、これからやる模写でのルールです。
例えば、「今回は流れを掴むために、細かい部分ではなくレイアウトだけを真似しよう」とか、「今回はさらにレベルアップするために完コピしよう」とかです。
模写は1px単位までぴったり合っていないと絶対ダメ、とは言いません（実務レベルではそこまで求められますが）あくまでもこれは練習です。その目的をしっかり持って取り組めば、たとえ1pxずれていたとしても無駄にはならないのです。
例として、レベル別の模写ルールを作ってみました。こんな感じで自分ルールをつけながら、段階的に厳しくしてレベルアップしていきましょう。
入門レベル
作成の流れを掴むために、レイアウトだけ真似をする。
- 画像はダウンロードする
- 文字などは「あああ」でもOK
- ちょっとずれてても気にしない
- 背景画像とか気にしない
- レスポンシブは無視
初級レベル
CSSの練習をするために、細かい要素も真似していく
- 画像はダウンロードする
- 文字はコピペする
- フォントの種類は気にしない
- ちょっとずれてても気にしない
- 背景画像もちゃんと入れる
- 角丸やフォントの大きさも近くする
- レスポンシブにする
中級レベル
実務レベルに近づくよう、完璧を目指す
- 画像はダウンロードする
- 文字はコピペする
- フォントの種類はツールで調べる
- 1px単位で真似する
- 背景画像もちゃんと入れる
- 角丸やフォントの大きさも完璧に同じにする
- 要素の意味を考え、適切なHTMLタグを使う
- レスポンシブも完璧に
要素を分解して考える
模写というよりコーディングそのものに言えることですが、デザインが何で構成されているのかを分解して考えるのが重要です。
それはこういうボタンの見た目だけでなく……
侍エンジニアのサービス紹介を見る
下記のような、全体のレイアウトも同様です。
コーディング初心者にありがちなのが、ひとつひとつを丁寧に作り込みすぎてなかなか先に進まないパターンです。確かに最終的にそこまでの作り込みは必要ですが、最初からそれをやらなくてもOKです。
最初は全体をざっくりと分解して、そこからだんだん細かく分解していくのが、効率の良いコーディングの秘訣です。絵を描く時にアタリをつけるように、文章を書くときにプロットを作るように、少しずつ完成に近づけていくことを意識してみましょう。
わからなかったらググる
初心者ですから、どうやったらこのレイアウトを実現できるんだろう……とわからなくなることもたくさんあると思います。
そんなときはGoogle先生に頼りましょう。テストではないので、どんどん調べてOKです。
むしろこの調べる作業は、実務の練習につながり繋がります。コーディングは実務中にわからないことを調べながら進めていくものだからです。
HTMLやCSSの勉強の際、いろんなブログを見て「暗記しなくていい」と書かれていたことを思い出してみてください。調べることもスキルのうちと解説されていませんでしたか？
まさにそれが練習できるチャンス、どんどん調べて検索力を身につけていきましょう。
調べてもどうしてもわからなかったら、最悪「答え（模写しているサイトのソース）」もありますので、そちらを参照してみてもいいでしょう。ただし、次も同じような部分で詰まった時のために、どう調べれば出てくるのかを考えながら参照するとベストです。
課題にぴったり！レベル別模写サイト
模写のポイントがわかればあとはやるだけ！
ナナミオススメの模写課題サイトを選んでみたので、ぜひチャレンジしてみてくださいね。
なおこれらのサイトは、Webデザインの参考サイトから抜粋しました。自分で見てみて、お気に入りのサイトが見つかればそれをやってみるのもいいですね！
入門編
模写が初めてな方は、シンプルなレイアウトから始めるのが一番です。LP（ランディングページ）などのペライチサイトからはじめてみましょう。
こちらのLPはレイアウトがシンプルながら、positionなどのちょっとコツがいるCSSも使われているので練習にぴったりです。
初級編
LPでちょっとこなれてきたら、ザ・Webサイト！という感じのスタンダードなレイアウトにチャレンジしてみましょう。
こちらのサイトはまさにWebサイトの基本を抑えているな、というレイアウトでおすすめです。
中級編
基本のWebサイトに慣れてきたら、今度はちょっと癖のあるデザインにチャレンジ。ここまでくるともうHTMLやCSSだけでは完全再現は難しいかもしれないですね……。
JavaScriptの勉強もしつつ、こんなWebサイトの模写にチャレンジしてみると、超レベルアップが期待できます！ レッツチャレンジ！
模写で学んだら次は実務へ
模写をすることによって、コーディング自体の流れはしっかりと掴むことができます。
コーディング練習は楽しいのが一番。自分が好きなサイトや面白そうなサイトを模写するのはテンション上がると思うので、ぜひいろんなサイトを模写してみてください。
しかしそれではまだゴールとは言えません。次はPhotoshopやIllustratorを使いこなし、実務レベルでのコーディングの練習へとステップアップしていってくださいね。
