PROGRAM

【簡単】サイト模写のやり方【小学生でもわかる手順を解説】

2020-07-27

【簡単】サイト模写のやり方【小学生でもわかる手順を解説】
読者

サイト模写ってなに?どうやってやるの?
どんなサイトを模写したらいいか知りたい!

このような悩みに答えます。

makoto

本記事の信頼性

私はプログラミングの勉強を初めて3ヶ月で、以下のスキルを身に着けました。

  • HTML
  • CSS
  • PHP
  • JavaScript
  • jQuery
  • WordPress

もちろん独学で、かかったお金は1万円以内です。

スクールに通えば月に数回の授業でウン十万とかかるので、それに比べるとかなり経済的かつ効率的にプログラミングを学習できたと思います。

サイト模写とは、ネット上に公開されているwebページを見ながら、全く同じようなwebページを自分でコーディングすることです。

実際にコーディングをしていく感覚を身につけられる、より実戦形式の練習法ですね。

本記事では、サイト模写のやり方の手順メリットについて紹介します。

ちなみに、サイト模写は初心者がいきなり手を出すと、間違いなく挫折します...

まだプログラミング始めたばかりという方は、まず以下の記事を参考に学習を進めてみるといいですよ。

makoto

サイト模写のメリット3つ

サイト模写のメリット3つ

サイト模写をやるメリットは以下の3つです。

サイト模写のメリット3つ

  • 実務案件に近い
  • よく使うパターンを覚えられる
  • ソースコードを見ることで答え合わせができる

ひとつずつ解説していきます。

サイト模写のメリット1.実務案件に近い

クラウドソーシングでコーディング案件を見てみるとわかりますが、

「デザインデータに沿ってコーディングをお願いします。」

という風に指定されます。

デザインデータとは、photoshopなどで作られたwebページの制作図みたいなものです。(psdファイルとも言います)

コーディングはこのデータを見ながら、ピクセル単位でデザイン通りにコーディングすることが求めらます。

サイト模写では、公開されているWEBページをマネするので、ここの流れは実はよく似ているため、勉強になるというわけですね。

サイト模写のメリット2.よく使うパターンを覚えられる

実際にネット上に転がっているwebページも、誰かが同じようにデザインデータをもとにコーディングして作られたものです。

なので、これからコーディング案件を獲得しようとしているあなたのお手本となるものばかり。

いろんなサイトを見てみると分かりますが、

ヘッダーがあって、ナビゲーションがあって、メインのコンテンツがあってフッターがあって...

みたいな構成はほとんど共通しています。

いくつかのサイトを模写していくうちに、頻出パターンみたいなものを自分で把握できるようになります。

それらをコピペしておくことで、コーディングスピードはどんどん上がっていきますよ!

makoto

サイト模写のメリット3.ソースコードを見ることで答え合わせができる

webブラウザには「検証ツール」という、webページのソースコードを確認できる機能があります。

試しにこのブログのソースコードをみてください。

chromeなら、右クリックから検証ツールをクリックすれば開きます。

そうすると、そのページのHTMLやCSSが分かります。

検証ツールの使い方については以下のサイトがわかりやすいです。

Progateですが、会員登録なしでも読めるのでありがたいですね。

サイト模写のやり方【手順を解説】

サイト模写のやり方【手順を解説】

それでは順を追って解説していきます。

サイト模写の準備

  • テキストエディタ
  • Page Ruler Redux
  • WhatFont
  • ColorPick Eyedropper
  • Image Downloader

テキストエディタはVisual Studio Code(VS Code)がおすすめです。

それ以外は全てgoogle chromeの拡張ツールで、すべて無料でダウンロードができます。

サイト模写のルール

  • ソースコードは見ない
  • widthとheightは計測してOK(Page Ruler Redux)
  • フォントサイズと種類も調べてOK(WhatFont)
  • 色コードも調べてOK(ColorPick Eyedropper)
  • 画像はダウンロードして使用OK(Image Downloader)
  • ピクセル単位で一致させる

サイト模写

それではいよいよ模写スタートです。

まずはHTMLのコーディングをしていきましょう。

やり方は人によるかもしれませんが、流れとしては、

  • HTMLで必要なタグを書いていく
  • 文章を入れていく(もちろんコピペOK)
  • CSSでデザインを合わせていく
  • レスポンシブデザインも対応させる

こんなかんじです。

また、それぞれの拡張ツールの使い方は以下のとおり

Page Ruler Redux

Page Ruler Redux

What Font

WhatFont

ColorPick Eyedropper

ColorPick Eyedropper

Image Downloader

Image Downloader

答え合わせ

最後完成したら答え合わせをしましょう。

ソースコードの確認です。検証ツールで確認していきましょう。

作り終えたあとは、開放感からついそこでやめてしまいがちですが、やりっぱなしは一番よくないです。

学校のテストも一緒で、間違った問題を見直すことでさらに知識が深まっていきますよね。

makoto

サイト模写におすすめのサイト

サイト模写におすすめのサイト

こちらの記事でサイト模写におすすめのサイトを公開しています。

どうせだったら自信のポートフォリオに公開できたほうがいいので、すべて公開OKなものばかりです。

よかったら参考にどうぞ。

サイト模写の次のステップ

サイト模写の次のステップ

上記の記事で紹介したサイトが模写できたら、もうコーディングで稼ぐことができるスキルは揃いました。

いよいよ案件の受注になります。

クラウドソーシングや知り合いからガンガン案件を受注しちゃいましょう!

登録必須のクラウドソーシング


ポイントは提案文を見て、70~80%できるなと思ったら即提案すること。

あとはググりながらでなんとかなります。

一番良くないのは、

できないからといってやらないこと

まずは手を動かして、考えるのは後からにしないと、いつまで経っても前には進めません。

© 2021 MAKOTO × BLOG Powered by AFFINGER5