【フロントエンド】Webサイト模写のススメ

  • このエントリーをはてなブックマークに追加

「progateやドットインストールでHTMLやCSSの書き方は覚えたけど、その後どうしたら良いか分からない」
という方向けにオススメの学習方法を紹介します。

サイト模写とは

やることはシンプルです。
実在するサイトと同じように、HTML、CSS、JavaScriptなどを駆使し、
再現してみることを言います。

実際に例を挙げていきます。

サイトを選択する

自分の気に入ったサイトで良いので、1つ選びます。
思い付かない方は縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORGなどを参考に選んでみましょう。

今回は 『PEAK&PINE』のサイトを模写してみることにします。

どこまでをコーディングするか決める

あくまでスキルアップのためにやるものなので、全てコーディングする必要はありません。
また自分のスキルに応じて、行うことも決めていきます。
上記のサイトですと、トップにスライドショーがありますが、そこはJavaScriptを使用するので、
まだ未学習の方は手を出さなくても良いです。HTMLとCSSを使って画像の配置だけに留めておきます。
そこの判断は自分で決めていくのですが、サイト模写の良いところは、スキル度合いによって
行う範囲を決められるところです。

今回は以下のように決めました。

  • コーディングするのはトップページのみとする
  • レスポンシブに対応する
  • スライドショーはJSで実装する

コーディング準備をする

どこまで行うかを決めたら、サイト内にある素材(画像・動画など)を取得します。

GoogleChromeの拡張で画像を一括でダウンロードしてくれる機能があるので
導入しておくと便利です。

ウェブページ上にある画像を一括保存できるChrome拡張「Image Downloader」が超便利

実際にコーディングする

あとは本番サイトを見つつ、実際にコーディングしていきます。
気をつけるのは、あまり本番サイトのコードを見ないようにすること。
ブラウザのデベロッパーツールを開くと、HTMLやCSSファイルの記述は全て見ることが出来ます。
しかし、あなたが実際に仕事としてコーディングする場合を想定してください。
恐らく、デザインデータを渡され、それを基にコーディングしていくはずです。
まずは見ないで、自分で考えてコーディングすることをオススメします。
書籍を参考にしたら、ググったりするのは全然問題ないです。

確認する

コーディングが一通り終わったら、本番サイトと表示のズレがないかどうか、などチェックしていきます。
リンクをマウスホーバーした時の挙動など、実装漏れがないかチェックしましょう。

注意点

当然ですが、サイト模写で作成したファイルはサーバにアップなどはしないようにしましょう。

まとめ

いかがでしたでしょうか。
簡単ではありましたが、サイト模写の手順について書きました。
一通りのインプットをした方は、あとはどんどんアウトプットすべきなので、サイト模写をして
どんどんコーディングしていきましょう。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。