こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回は、
サイトの模写ってどのサイトをやればいい？というかやり方が分からない・・・
といった方に対する記事となります。
Web制作の勉強はProgateが終わった後にサイトの模写をするのがおすすめですが、どのサイトをやればいいのか分からないと思います。
自分も模写するサイト選びでめちゃくちゃ苦労した記憶があります。
今回は初心者におすすめのサイトと、そのやり方について解説します。
目次
サイトの模写コーディングとは？
まず模写とは何かという事ですが、実在するホームページを見た目通りに再現していく事です。
デザインはあり、デベロッパーツールなど使えばコードも見れますが、極力コードは見ないようにして書いていきます。
Progateは環境構築の必要がありませんが、模写はまず環境構築から始めなければいけないので、Progateに比べてかなり実践的な勉強法となります。
模写の前に写経もおすすめ
また模写と似たような物で写経と呼ばれる勉強法もあります。
写経は模写と違い、本などに書いてあるコードを丸写しします。
模写はデザインを見て自分で考えながらコードを書いていくのに対して写経は丸写しなのであまり意味がないようにも思えますが、Progateからいきなり模写は少々ハードルが高いかも知れないので、まずは写経をしてテキストエディタを使ってコードを書くという事に慣れるのもアリかと思います。
自分が最初にWeb制作のために購入した本がこちらです。
この本で3つのサイトを写経する事が出来ます（写経用の本という事ではありません）
1つ1つの意味を理解する必要はないので、1回目は全て丸写しして見本通りになればOK
あとはもう少し理解したいと思ったら、もう一度分かる範囲で理解を進めながらもう一度写経してみるとだいぶ慣れてくると思います。
実務では使わないような事も多く書いてあるので、全てを理解する必要は全くありません。
あくまでもコードを書く事に慣れ、実際に見本通りになることを実感するのが目的だと思いましょう。
模写におすすめのサイト
それではいざ模写をやろうと思った時、今の自分がどのくらい出来るのかがまず分からないと思います。
自分も模写するサイト選びでだいぶ苦労しました。
その中でおすすめなのが以下のサイトです。
このサイトはTwitterでも模写におすすめのサイトとして紹介されていた為、実際に模写している人も多いです。
また模写の進め方は後ほど解説しますが、模写は基本的にLPにします。
またこちらのページで模写におすすめのサイトがまとめてあるので、この中から自分が出来そうなサイトを選ぶのもアリかと思います。
模写コーディング開始
私の場合は実務ではまずHTMLを全部書いてからCSSを書きますが、模写ではセクションごとでもいいかと思います。
ヘッダー、セクション1、セクション2、フッター
といった感じです。
画像を取得する
コーディングを始める前に画像を取得します。
Chromeの拡張機能である Image Downloader を使えば一括で取得できます。
詳しくはこちらの記事を参照ください。
ファイルやフォルダを準備
環境構築されているProgateと違って、模写では環境構築から始めます。
初めての方はまずここで少し躓くかも知れません。
これについては以下の記事を参照下さい。
HTMLから書き始める
以前TwitterでCSSから書き始める人がいるというツイートをみた事がありますが、それはあり得ません。
まずはHTMLから書き始めましょう。
HTMLの書き方ですが、まずはページに表示されるコンテンツ以外のheadタグから書いていきます。
書き方については以下の記事を参照下さい。
ヘッダーの書き方についても分からなかったら以下の記事を参照下さい。
私は初めて模写をした時、ヘッダーから全く分かりませんでした。。。
基本的にはサイトと同じ見た目にする
模写なので基本的には全く同じに出来ればベストですが、最初はそこまで厳密に合わせなくてもいいかなと思います。
なので余白やサイズをpx単位で忠実に再現する必要はありません。
ただ色やフォントなどの情報は合わせたいという場合は以下の拡張機能が使えます。
- ColorPick Eyedropper（カラーコードを取得）
- WhatFont（フォント情報を取得）
デベロッパーツールは極力使わない
デベロッパーツールを使えばコードを見る事が出来ますが、極力カンニングはしないで進めましょう。
ただしどうしても分からなかったら部分的に見ちゃいましょう。
自力で解決出来ればいいですが、最初のうちは見ないと分からない事が多いと思います。
出来ればレスポンシブも挑戦！
今時レスポンシブ対応になっていないサイトはほとんどないので、出来ればレスポンシブにも挑戦してみましょう。
実務では必須なので、最初の模写では少々難しいかも知れませんが必ず出来るようになっておきましょう。
ホバーアニメーションやjsは後回し
ボタンにカーソルを乗せると色が変わったり、jsを使ったハンバーガーメニューなどは後回しでいいかと思います。
まずは「見た目だけ」再現出来るようになればOKです。
完成した後にやる事
一通り模写が完了したら、デベロッパーツール でコードをみてみましょう。
見た目が同じになってもコードはかなり違うと思います。
デベロッパーツールを使ってコードを見る事で「こういうやり方があるのか」と勉強にもなりますし、デベロッパーツール自体は模写中はあまり使わない方が好ましいですが、実務ではめっちゃ使うのでここで慣れておくのもいいかと思います。
どのくらい模写をすればいいのか？
模写はコーディングスキルをアップさせるのにとても有効な手段ですが、どのくらいやればいいのか気になるところかと思います。
私は5〜6サイトだったかと思いますが、人によっては10サイト以上模写する人もいます。
模写卒業の目安は？
模写を卒業する目安としては、iSaraのLPを模写出来るようになればOKです。
ここではレスポンシブ、ホバーアニメーション、js（ページトップボタン、アコーディオンメニュー）なども完成させましょう。
私はiSaraの模写は2回ギブアップして3回目でクリアしました。
ギブアップしたときは一旦勉強に戻ってまた挑戦みたいな感じです。
iSaraのLPは難易度的にはそれほど高くありませんが、とにかくボリュームが多いです。
2回目のギブアップはボリュームの多さに疲れてしまったからでした。
ボリュームが多いので、Sassを使ってファイルを分割する事が出来ればコードが見やすくなります。
私もiSaraの模写の時にSassを使い始めたので、模写を何回かやったらSassも勉強することをおすすめします。
Sassは実務では必須なので、早い段階で習得しちゃいましょう。
全てマスターしようとすると大変ですが、よく使うものだけでも覚えておけばOKです。
Sassについては以下の記事を参照下さい。
またiSaraの模写は条件付きで実績としてポートフォリオなどに載せていいと代表のケースケさんが許可して下さっています。
せっかく多くの方が https://t.co/41tkKy1Ku7 のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。
要は、「ご自身の制作実績として公開してOK」です。※ただし注意点があるので、添付画像をごらんください pic.twitter.com/kxamsjGTHK— ケースケ🇹🇭バンコク (@Keisukexlife) December 1, 2018
逆に他のサイトの模写を実績に載せたい時は必ず許可を取ってくださいね。
以上です。
模写はWeb制作の勉強において1つの壁とも言えるかも知れないので、ここはがんばって乗り越えましょう！
