【初心者向け】Webサイトの模写から学べること

こんにちは。macco（まっこ）です。

今回は「Webサイトを模写することで何が良いのか」「実際にWebサイトの模写をして気づいたこと」について解説します。

Webサイトの模写とは、実在するWebサイトを見ながら、同じような見た目になるようにHTMLとCSSを使って作ることです。

こんな人におすすめ

• HTMLやCSSに苦手意識がある
• HTMLとCSSの基礎学習は済んでいる
• Progateの「HTML&CSS初級編、中級編、上級編」が完了している（道場コースはクリアしていなくても問題ないです）
• ドットインストールの「ウェブサイトをつくれるようになろう」が完了している
• 模写を始めたいけれど、どのWebサイトを参考にしたら良いか分からない

自己紹介

• HTMLとCSSを始めて勉強したのは2013年頃
• 実務で企業のホームページ制作を3件くらいこなす
• 2020年4月からProgateやドットインストールで復習

模写から得られるもの

Webサイトの模写をすることで、以下のメリットがあります。

• デザインを見たときに、HTMLでどのタグを使用するか見当がつく
• 模写を実現するためには、どうすればいいか？という目的があるうえで情報を調べるので、自分の力で解決する能力があがる
• 自分の苦手な部分（メニューが作れないなど）が見える
• 簡単なLP（ランディングページ）や小規模なWebサイトがつくれるようになる

Progateやドットインストールなどのオンライン学習サービスは、自分にとってコーディングまたはプログラミングが面白い、またはやりがいなどを感じれるかどうかのきっかけづくりに使うサービスです。

とても良いサービスですが、内容は大まかな基礎で構成されているため、クリアしてもすぐに自分１人の力でWebサイトをつくれるようにはなりません。

しかしWebサイトの模写をすることで、HTMLやCSSの実力をつけることは可能です。

受け身の状態からアウトプット主体になることで、初心者から抜け出すことができます。

模写をやってみて気づいたこと

コーディング練習💡
模写1回目の完了✨

本日で1回目の模写を完了ということにします😃

厳密にいうとPC、タブレットのメニューにある検索アイコンは未実装ですが、他は大体大丈夫…だと思いたい😂

添付：左からPC、タブレット、スマホ

模写対象サイトhttps://t.co/V9wblyr4x5 pic.twitter.com/3FNjz5SHoL

— macco@アラフォーWeb人間 (@maccoweb) August 27, 2020

ここからは、私が実際にやってみて気づいたことを中心に書いていきます。

一番初めに模写の参考にするWebサイトはコレ

初めてWebサイトの模写を行う場合、どのサイトを参考にしたらよいか迷うと思います。

初心者の方は以下のサイトがオススメです。

http://demo.themegraphy.com/write-ja/

こちらは、WordPressというCMS（コンテンツマネージメントシステム）のテーマの1つ「Write書くためのテーマ」というものになります。

オススメする理由は以下のとおりです。

• デザイン・レイアウトがシンプルなので、初めてWebサイトの模写を始める方に向いている
• 使用している画像が少ないため、レイアウトに集中しやすい
• シンプルな割には学べる要素が多い
• 実際に使用するHTMLのタグやCSSのプロパティの一部を知ることができる
• FontAwesomeやリセットCSSの対応に挑戦できる
• レスポンシブ対応に必要なビューポートの設定やメディアクエリの使い方が分かる

難しいWebサイトを参考にすると挫折する確率があがってしまうので、最初はシンプルなWebサイトから模写するようにしましょう。

参考にするWebサイトの画像を取得する

Chromeブラウザの拡張機能「Image Downloader」を使えば、Webサイトで使用している画像を取得することができます。

使い方については、こちらの記事が参考になります。

Image Downloaderの設定方法と使い方！画像をまとめてダウンロードしよう！

またCSSのbackgroundプロパティで背景画像として指定している画像は、「Image Downloader」で取得できないので、以下の画像を参考に取得しましょう。

模写のルールを決めておく

模写をする前にルールを決めておくことで、より迷いが生まれにくく模写がやりやすくなります。

私の場合は以下のルールを作って模写を行いました。

そのまま流用しても良いですし、自分なりにアレンジしても良いかと思います。

• PC⇒タブレット⇒スマホの順番でコーディングする
• リセットCSSを使う（modern-css-reset）
• Font Awesomeを使う（バージョンは5.14.0を使用）
• フォルダ構成
  • index.html（Writeのページ）
    • img（使用画像を配置するフォルダ）
    • css（CSSファイルを配置するフォルダ）
    • js（JSファイルを配置するフォルダ）
• CSSフレームワークBootstrapは使わない
• HTMLの構造やID、クラス名は考えて付けてみる
• あくまで見た目がそれっぽくできれば良しとする
• 使用するエディタはVisual Studio Code
• 確認ブラウザはGoogle Chrome

大事なのは、参考にするWebサイトを完全に再現することではなく、あくまで見た目がそれっぽくできれば良しとすることです。

また動作を要求するJS関連のもの（スマホ表示の右上にあるハンバーガーメニュー）は実装が難しいので、模写とは別途切り離して練習しても良いかと思います。

初心者のうちは、自分ができないところ、苦手なところを明確化することが最重要です。

終わりに

今回は、Webサイトの模写を行う意味やコツについて解説してきましたがいかがでしたでしょうか。

私も実際にやってみて時間がすごくかかり、何度も挫折しかけましたが、何とかそれっぽく模写することができました。

そして自分の苦手な部分も分かってきたような気がします。

Webサイトの模写を始めてやる方にとっては、ハードルが高く感じてしまうところもあると思いますが、やってみることで得るものもかなり大きいですし、実力がつきます。

まだやられていない方は、一度挑戦してみることをオススメします。

最後までお読みいただきありがとうございました。

2020/09/13追記
WPテーマWriteを例に模写コーディングのやり方について記事を書きました。
良かったらあわせてご覧ください。

2020/10/25追記
本テーマのまとめ記事はこちら↓