トレーナーアシスタントの澄田です。
ここSTUDIO山口を去年の11月に卒業した私ですが、入校してからフリーランスとして開業するに至るまでに、どのように学習を進めたのかという質問を多く受けます。
特に、学習意欲の高い受講生さんからは、デジハリの教材「＋α」で何を取り組みましたか？何がおすすめですか？ という声をよくいただきます。
そんなわけで、今回は私のオススメする「＋α」の勉強法のひとつである
「WEBサイトのコーディング模写」について書いていこうと思います。
（以下、コーディングの知識が必要になる部分があります。）
（あくまで個人的な意見ですので、もっと良い方法があればぜひ教えてください！）
WEBサイトのコーディング模写とは何か
自分の好きなWEBサイトを、html/cssなどで再現する練習のことです。
あくまで一例ですが、大まかな手順としては
（１）模写するWEBサイトを決める
（２）WEBサイトから画像をダウンロードする
（３）html/cssで再現する
（４）可能ならJavaScriptにもチャレンジ
（５）答え合わせ
となります、それぞれ詳しくみていきましょう。
詳しい手順とポイント
（１）模写するWEBサイトを決める
イケサイ（https://www.ikesai.com/）やMUUUUU.ORG（https://muuuuu.org/）といった
ギャラリーサイトなどを見て、自分の取り組んでみたいサイトを決める。
point. 1 自分のレベルにあったサイトを選ぶ
例えばアニメーションやエフェクトを多用しているサイトにいきなりチャレンジすると挫折します（経験談）
初めての方は、「WEBサイト 模写 おすすめ」などで検索すると、難易度別に紹介してくれている記事がヒットするので、その中から選ぶと良いです。
一度チャレンジしてみると、自分のレベルにあったサイトがどんなものなのか、がわかってきます。
ちなみに私が初めて取り組んだのは、こちらのサイトです。
point. 2 自分の好きなジャンルから選ぶ
全然好きでもないサイトを選ぶと、だんだんモチベーションが下がってきます。
私は野球より断然サッカー派ですが、なぜか某野球チームのサイトにチャレンジして挫折しました。
point. 3 ボリュームが小さいものを選ぶ
個人的には、ボリュームの小さい「トップページのみ」を、数をこなしてくのがオススメです。
あまりに縦長でボリューミーなLPなどは飽きやすいので注意。
point. 4 画像の数が多すぎないものを選ぶ
画像の数があまりに多いと、画像データを取り扱うのに時間を取られてしまいます。
また、コーディングの手間を省く目的で画像を多用しているサイトは、あまり勉強になりません。
（２）WEBサイトから画像をダウンロードする
手動で一個ずつやっていると時間がかかります。
後で紹介するツールを使って、一括ダウンロードすることができます。
cssのbackgroundプロパティで表示させている画像は、検証ツールから手動でダウンロードできます。
（３）いざコーディング
まずは大まかな部分からhtml/cssに着手してみましょう。
point. 1 ツールを有効に使う
進めていくと「ここの margin は何ピクセル？」「この文字のfont-familyは？」「これ何色？」などという疑問が生まれるはずです。
後で紹介する「what font」や「Page Ruler Redux」といったツール、あるいはデベロッパーツールを使って調べながら、進めましょう。
point. 2 できるだけ答えは見ない
デベロッパーツールやソースコードは、できるだけ見ないようにしましょう。
例えば「5分間行き詰まったら答えを見る」というルールを決めて取り組むのも良いです。
point. 3 余裕があれば下層ページも意識する
「cssを使い回す」ことを意識するのはとても大事です。
下層ページにも出てくるスタイルやレイアウトを確認し、使いまわすつもりで進めましょう。
point. 4 完璧主義はやめる
あくまで自己学習ですので、1px単位で完璧に再現する必要はありません。
フォントについても、似たフォントで再現できればOKです。
もちろんPC版だけ、スマホ版だけ、あるいは自分でブレークポイントを設定する、などもOKです。
（４）可能ならJavaScriptにもチャレンジ
ハンバーガーメニューやトップに戻るボタン、スライドショーなど、基本的なものは再現しましょう。
難しそうなアニメーションにもぜひチャレンジしてみてください。わからないところはトレーナーがサポートします！
（５）答え合わせ
デベロッパーツールやソースコードを見て、自分の書いたコードと比較してみましょう。
なぜ違ったのかを考察することが、最も重要な工程です。
スタジオのトレーナーに見てもらえば、自分では気づけない事も発見でき、さらに良い勉強になると思います。
もし行き詰まったら
全然知らないcssがたくさん出てきたり、ブレークポイントが細かすぎたり、レイアウトをJavaScriptで調整していたり…… 模写を進めていくと、行き詰まることがあると思います（経験談）
もちろん、トレーナーに質問して解決して欲しいですが……
「自分のレベルに合っていない」
「飽きてしまった」
「コードがぐちゃぐちゃになってしまった」
と感じたら、気持ちを切り替えて、別のサイトに変えるのをオススメします！
数をこなすことで得られるものはたくさんあります！
最後になりますが、役立つツールを載せておきますので、是非活用してください。
役立つツール
以下すべてgoogle chromeの拡張機能になります。
１ Image Downloader
一括で画像をダウンロードできるツール。
chromeウェブストアのリンク： https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
２ WhatFont
フォントを調べられるツール。模写に限らず、普段の勉強でも使用しやすいのでオススメです。
chromeウェブストアのリンク： https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
3 ColorPick Eyedropper
カラーピッカーで色を取得することができます。
chromeウェブストアのリンク：
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
4 ColorZilla
こちらもカラーピッカー。前者よりも機能が豊富。好きな方を選んで使ってみてください。
chromeウェブストアのリンク： https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
５ Page Ruler
長さを測ることができるツール。指定した領域のwidthとheightを測ることができて便利です。
chromeウェブストアのリンク： https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal
６ webページショット - Screenshot Extension
普段の制作にも使用しますが、スクリーンショットだけをヒントに模写をしたい、という上級者にオススメです。
個人的にはFirefoxの標準機能のスクリーンショットの方が、きれいに撮れるので好きです。
chromeウェブストアのリンク： https://chrome.google.com/webstore/detail/webpage-screenshot-entire/akgpcdalpfphjmfifkmfbpdmgdmeeaeo
というわけで、長々と書いてしまいすみません。
ぜひ「＋α」の勉強に役立ててください！