サイト模写ってなに？どうやってやるの？
どんなサイトを模写したらいいか知りたい！
このような悩みに答えます。
本記事の信頼性
私はプログラミングの勉強を初めて3ヶ月で、以下のスキルを身に着けました。
- HTML
- CSS
- PHP
- JavaScript
- jQuery
- WordPress
もちろん独学で、かかったお金は1万円以内です。
スクールに通えば月に数回の授業でウン十万とかかるので、それに比べるとかなり経済的かつ効率的にプログラミングを学習できたと思います。
サイト模写とは、ネット上に公開されているwebページを見ながら、全く同じようなwebページを自分でコーディングすることです。
実際にコーディングをしていく感覚を身につけられる、より実戦形式の練習法ですね。
本記事では、サイト模写のやり方の手順やメリットについて紹介します。
ちなみに、サイト模写は初心者がいきなり手を出すと、間違いなく挫折します...
まだプログラミング始めたばかりという方は、まず以下の記事を参考に学習を進めてみるといいですよ。
サイト模写のメリット３つ
サイト模写をやるメリットは以下の３つです。
サイト模写のメリット３つ
- 実務案件に近い
- よく使うパターンを覚えられる
- ソースコードを見ることで答え合わせができる
ひとつずつ解説していきます。
サイト模写のメリット１．実務案件に近い
クラウドソーシングでコーディング案件を見てみるとわかりますが、
「デザインデータに沿ってコーディングをお願いします。」
という風に指定されます。
デザインデータとは、photoshopなどで作られたwebページの制作図みたいなものです。（psdファイルとも言います）
コーディングはこのデータを見ながら、ピクセル単位でデザイン通りにコーディングすることが求めらます。
サイト模写では、公開されているWEBページをマネするので、ここの流れは実はよく似ているため、勉強になるというわけですね。
サイト模写のメリット２．よく使うパターンを覚えられる
実際にネット上に転がっているwebページも、誰かが同じようにデザインデータをもとにコーディングして作られたものです。
なので、これからコーディング案件を獲得しようとしているあなたのお手本となるものばかり。
いろんなサイトを見てみると分かりますが、
ヘッダーがあって、ナビゲーションがあって、メインのコンテンツがあってフッターがあって...
みたいな構成はほとんど共通しています。
いくつかのサイトを模写していくうちに、頻出パターンみたいなものを自分で把握できるようになります。
それらをコピペしておくことで、コーディングスピードはどんどん上がっていきますよ！
サイト模写のメリット３．ソースコードを見ることで答え合わせができる
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
What Font
ColorPick Eyedropper
Image Downloader
答え合わせ
最後完成したら答え合わせをしましょう。
ソースコードの確認です。検証ツールで確認していきましょう。
作り終えたあとは、開放感からついそこでやめてしまいがちですが、やりっぱなしは一番よくないです。
学校のテストも一緒で、間違った問題を見直すことでさらに知識が深まっていきますよね。
サイト模写におすすめのサイト
こちらの記事でサイト模写におすすめのサイトを公開しています。
どうせだったら自信のポートフォリオに公開できたほうがいいので、すべて公開OKなものばかりです。
よかったら参考にどうぞ。
サイト模写の次のステップ
上記の記事で紹介したサイトが模写できたら、もうコーディングで稼ぐことができるスキルは揃いました。
いよいよ案件の受注になります。
クラウドソーシングや知り合いからガンガン案件を受注しちゃいましょう！
登録必須のクラウドソーシング
ポイントは提案文を見て、70~80%できるなと思ったら即提案すること。
あとはググりながらでなんとかなります。
一番良くないのは、
「できないからといってやらないこと」
まずは手を動かして、考えるのは後からにしないと、いつまで経っても前には進めません。
駆け出しエンジニアにピッタリのクラウドソーシングサイト
「FLEDGLING」は駆け出しエンジニアへ仕事を依頼する変わりに、報酬を相場よりも抑えることができるという、新しいクラウドソーシングサービスです。
駆け出しエンジニアの悩みで多いのが、
実績がないから仕事が獲れない。仕事が獲れないから実績がない。
ということです。
FLEDGLINGを利用するメリットは、FLEDGLING内での仕事は全て実績として公開OKということ。
つまり、『報酬よりもまず実績を取りに行きたい』というエンジニア向けのサービスになっています。
詳しくは以下の記事で解説しています。
