コーディングの基礎学習（HTML&CSS）が終わったら、実在するサイトを模写するのが実力をつけるためにオススメですが、難しいのを選んでしまうと挫折してしまいがちです。
この記事ではサイト模写前の準備から、初心者にオススメの挫折しにくい模写サイトを５つ紹介します。
サイト模写前の準備
HTML&CSSの基礎勉強が終わって、実践練習として模写を始める前の準備の一通り紹介されているオススメ記事です。
模写をするポイントや流れ、サイト模写をするにあたって役に立つ便利なツールが紹介されています。
シンプルな基本のカタチ
KROWL というWeb業界への転職や就職をサポートサービスが提供しているコーディング課題のひとつです。
シンプルな構成ながらWebサイトに必要な基本的な要素が含まれているので、初めてのサイト模写にオススメです。
またコードの解説記事も用意されており、途中で手が止まってしまったら解説記事を読んで理解してから進めるので、挫折せずに終わらせることができます。
可愛いLP
シンプルな構造のLPサイトなんですが、写真や色合いがかわいいのでワクワクしながら模写ができます。
あまりにも可愛く、ずっとみていても飽きなかったので、模写をする前に各サイズ（PC・タブレット・スマホ）サイト全体の写真を取ってFigmaを使ってボックス構造がどのようになっているか理解する行程も行いました。
サイト全体の写真は- FireShot - というツールを導入すると簡単に取れます。
タブレットやスマホサイズの写真はデベロッパーツールでサイトサイズを調整してから撮ることができますよ。
ブログ型
ブログでよく使われているデザインのサイトですが、やっておくと幅が広がると思います。
WordPressのテーマのひとつ「Write」というシンプルなブログ型のサイトです。
ご紹介してるのはデモサイトで、トップページ内のリンクをクリックすると他のページ飛びますが、私はトップページのみ模写コーディングしました。
BootStrapを使ってみる
BootStrapが少し使えるようになったらオススメなのがAirbnbのギフトページの模写です。
ページ上のNavigationの検索ボックス部分が一番難しいので、うまくできなかったらとりあえず飛ばして先に進のもアリです。
これができたら脱初心者!「iSaraのLP」
多くの先輩方が模写初心者向けにオススメされているサイトで、jQueryでアコーディオンやトップページへ戻るボタンなども含まれているので今までご紹介したサイトより難易度が高いです。
ページも比較的長くてコーディング量も多めになりますが、このサイトをレスポンシブで模写できたら、初心者からは抜け出せているので頑張ってチャレンジしてみてください。
まとめ
初めてのサイトを模写であれば、難易度を落として「少し頑張ればできると思える様なサイト」から模写にチャレンジするのが挫折をせずにできるのでおすすめです。
初めから難易度の高いサイトに長い時間をかけるより、簡単めなサイトの模写を数多くこなして経験値を付けていきましょう。数をこなすことで、模写のスピードも速くなって自分なりやり方なども確立できるので頑張っていきましょう★