ブログ プログラミング

【初心者歓迎】Webサイトを模写するやり方について【参考例あり】

Webサイトの学習が一通り完了した人は、ポートフォリオ作成を検討していると思います。

そのポートフォリオとして主に行うのが、Webサイトの模写です。

本記事では、Webサイトの模写手順について悩んでいる人の疑問を解消します。

この記事を読むだけで、今すぐにでも模写サイト作成に取りかかれ、ポートフォリオが完成しますよ。

Webサイトを模写するときの順番について

Webサイトを模写する順番は、大きく6つのステップに分かれます。

模写するWebサイト(以下、模写サイト)選択

模写サイトのレイアウト検討

タグの設定

画像の抜き出し

コーディング

模写サイトとの比較

では、各ステップを順番に見ていきます。

【ステップ1】 模写サイトの選択

どのサイトを模写するか選びます。

このステップでは、あまり時間をかけないようにしましょう。

選ぶ際の基準は、以下のとおりです。

  • 検索上位のサイトであること
  • ある程度の分量があること
  • 模写の許可を出していること
  • アニメーション(モーダル、スライドショー、カルーセル等)が3つ以上あること

選定に時間を使いたくない人は、記事中盤で模写にオススメなWebサイトを紹介していますので、参考にしてください。

【ステップ2】 模写サイトのレイアウト検討

模写サイトが決まったら、そのサイトのレイアウトを考えます。

考える際は、Webサイト全体を印刷、またはPDFにしてレイアウトを書き込んでいきます。

最近のWebサイトであれば、レスポンシブデザインなので、最低パソコンとスマホ表示の2種類でレイアウトを検討します

私がWebサイトをPDFにするときには、googleの拡張機能である「gofullpage」を使用しています。

【ステップ3】 タグの設定

【ステップ2】で使用した、Webサイトの印刷物やPDFに、細かくタグを振っていきます。

この際、「div」タグばかり使用するのはやめましょう。

できる限り意味のあるタグを選択していきます。

ただし、タグ付けに凝りすぎて時間をかけすぎないようにしましょう(1,2時間程度でサクッと)。

理由は、実際にコーディングしているときに、自分が思っている以上にタグの位置や量が変わります。

ついでに、CSSを書く際の「id」や「class」名を合わせて考えながらやると、コーディングの際スムーズに作業ができます。

【ステップ4】 画像の抜き出し

 googleの拡張機能である、「image downloader」を使えば、Webサイトに使用している画像をすべて抜き出してくれます。

 抜き出した画像は、自分の作業フォルダに保存しておきましょう。

【ステップ5】 コーディング

【ステップ3、4】を元にコーディングを行います。

めちゃ苦茶時間がかかると思います。

また、分からないことだらけで、全く作業が進まないことがあり、心が折れると思います。

諦めずにできるところから進めるようにしましょう!

15〜30分悩んだところは、後回しにして翌日再度考えるようにすれば、すぐにできる場合もあります。

悩んだところは、他の人も悩んでいる可能性が高いので、それをブログやnoteなどにまとめて、発信をするようにしましょう。

【ステップ6】 模写サイトとの比較

コーディング後、模写サイトと比較をしましょう。

比較する際は、googleの拡張機能である「perfect piccell」を使用しましょう。

模写にオススメなWebサイト3選

記事の前半で「模写サイトを選択」するステップを紹介しました。

以下では、時間をあまりかけたくない人向けに、オススメなWebサイトをまとめました。

Airbnb

模写サイトとして一番くらいに人気のあるサイトです。

程よいボリュームと多彩なアニメーション、デザインが良いので、非常におすすめです。
(私の模写1発目はこれです)

レベルは高いかもしれませんが、1,2ヶ月HTML/CSS/JSの勉強をしている方なら、2週間くらいでできると思います。
(私の場合1ヶ月かかりました)

 このレベルのサイトが実装できれば、ほとんどのサイトがかんたんに思えますので、諦めずに頑張りましょう!

ISARA

これも模写として人気のあるLPです。

Airbnbの難易度が高いと感じたら、こちらからやっても良いかもしれません。

そこそこの分量と、アニメーションがあるため、勉強になります。

架空のHPサイト

これも模写で人気のある架空HPサイトです。

デザインカンプからコーディング例も記載しているため、非常に模写しやすいです。

今後実案件をこなしていく際の参考になりますので、非常におすすめです。

Webサイトを勝手に模写してはダメな理由

Webサイトを無断で模写し、ネットにアップロードすると著作権侵害になります。

そのため、事前に許可を取るなど、問題にならないように気をつけましょう。

対策としては、フリー素材の画像を使用したり、テキストをオリジナルにしたりなどがあります。

ただ、一生懸命時間をかけて作成したWebサイトですので、相手への経緯を持って、模写させてもらうようにしましょう!

それでは、頑張ってください!!!

スポンサーリンク

  • この記事を書いた人

かつのぶ

読書が大好きな地方エンジニア | 田舎企業就職→6年継続も給料変化なし→Web制作副業→現在ブログ挑戦中 | Web制作4ヶ月で初収益 | 主に読書から得た情報や日常で感じたことを中心に発信します | 朝活愛してます

-ブログ, プログラミング