Webサイトの学習が一通り完了した人は、ポートフォリオ作成を検討していると思います。
そのポートフォリオとして主に行うのが、Webサイトの模写です。
本記事では、Webサイトの模写手順について悩んでいる人の疑問を解消します。
この記事を読むだけで、今すぐにでも模写サイト作成に取りかかれ、ポートフォリオが完成しますよ。
目次
Webサイトを模写するときの順番について
Webサイトを模写する順番は、大きく6つのステップに分かれます。
模写するWebサイト（以下、模写サイト）選択
模写サイトのレイアウト検討
タグの設定
画像の抜き出し
コーディング
模写サイトとの比較
では、各ステップを順番に見ていきます。
【ステップ1】 模写サイトの選択
どのサイトを模写するか選びます。
このステップでは、あまり時間をかけないようにしましょう。
選ぶ際の基準は、以下のとおりです。
- 検索上位のサイトであること
- ある程度の分量があること
- 模写の許可を出していること
- アニメーション（モーダル、スライドショー、カルーセル等）が3つ以上あること
選定に時間を使いたくない人は、記事中盤で模写にオススメなWebサイトを紹介していますので、参考にしてください。
【ステップ2】 模写サイトのレイアウト検討
模写サイトが決まったら、そのサイトのレイアウトを考えます。
考える際は、Webサイト全体を印刷、またはPDFにしてレイアウトを書き込んでいきます。
最近のWebサイトであれば、レスポンシブデザインなので、最低パソコンとスマホ表示の2種類でレイアウトを検討します。
私がWebサイトをPDFにするときには、googleの拡張機能である「gofullpage」を使用しています。
【ステップ3】 タグの設定
【ステップ2】で使用した、Webサイトの印刷物やPDFに、細かくタグを振っていきます。
この際、「div」タグばかり使用するのはやめましょう。
できる限り意味のあるタグを選択していきます。
ただし、タグ付けに凝りすぎて時間をかけすぎないようにしましょう（１，２時間程度でサクッと）。
理由は、実際にコーディングしているときに、自分が思っている以上にタグの位置や量が変わります。
ついでに、CSSを書く際の「id」や「class」名を合わせて考えながらやると、コーディングの際スムーズに作業ができます。
【ステップ4】 画像の抜き出し
googleの拡張機能である、「image downloader」を使えば、Webサイトに使用している画像をすべて抜き出してくれます。
抜き出した画像は、自分の作業フォルダに保存しておきましょう。
【ステップ5】 コーディング
【ステップ３、4】を元にコーディングを行います。
めちゃ苦茶時間がかかると思います。
また、分からないことだらけで、全く作業が進まないことがあり、心が折れると思います。
諦めずにできるところから進めるようにしましょう！
15〜30分悩んだところは、後回しにして翌日再度考えるようにすれば、すぐにできる場合もあります。
悩んだところは、他の人も悩んでいる可能性が高いので、それをブログやnoteなどにまとめて、発信をするようにしましょう。
【ステップ6】 模写サイトとの比較
コーディング後、模写サイトと比較をしましょう。
比較する際は、googleの拡張機能である「perfect piccell」を使用しましょう。
模写にオススメなWebサイト3選
記事の前半で「模写サイトを選択」するステップを紹介しました。
以下では、時間をあまりかけたくない人向けに、オススメなWebサイトをまとめました。
Airbnb
模写サイトとして一番くらいに人気のあるサイトです。
程よいボリュームと多彩なアニメーション、デザインが良いので、非常におすすめです。
（私の模写1発目はこれです）
レベルは高いかもしれませんが、１，２ヶ月HTML/CSS/JSの勉強をしている方なら、２週間くらいでできると思います。
（私の場合１ヶ月かかりました）
このレベルのサイトが実装できれば、ほとんどのサイトがかんたんに思えますので、諦めずに頑張りましょう！
ISARA
これも模写として人気のあるLPです。
Airbnbの難易度が高いと感じたら、こちらからやっても良いかもしれません。
そこそこの分量と、アニメーションがあるため、勉強になります。
架空のHPサイト
これも模写で人気のある架空HPサイトです。
デザインカンプからコーディング例も記載しているため、非常に模写しやすいです。
今後実案件をこなしていく際の参考になりますので、非常におすすめです。
Webサイトを勝手に模写してはダメな理由
Webサイトを無断で模写し、ネットにアップロードすると著作権侵害になります。
そのため、事前に許可を取るなど、問題にならないように気をつけましょう。
対策としては、フリー素材の画像を使用したり、テキストをオリジナルにしたりなどがあります。
ただ、一生懸命時間をかけて作成したWebサイトですので、相手への経緯を持って、模写させてもらうようにしましょう！
それでは、頑張ってください！！！
