こんにちは。ゆうや(@yuya596)です。
本日はサイト模写のやり方を解説します。
Progateやドットインストールで最低限の基礎をインプットしたら、即アウトプットする必要があります。
アウトプットの手段として、サイト模写は非常に効果的なんです。
Progateを続けていても
毎日レベルが1ずつしか上がらない次のステージであるサイト模写を続けると
レベルが10ずつ上がりオリジナルサイトを作ると50ずつ上がり
案件を受注すると100ずつ上がる
そしてエンジニア就職すると
レベルが1000ずつ上がっていくすぐさま次のステージに移れる人は強い
— YUJI@ZONE入学者1510名突破 (@YUJI_MZTN) August 3, 2020
ただし、正しい方法で行わないと勉強効率が悪くなり、挫折にもつながります。
本日はサイト模写の方法や注意点を解説していきます。
Web制作案件の獲得に直結する内容なので、是非最後まで読んで下さい。
Contents
サイト模写とは
サイト模写とは、現在公開されているWebサイトを全く同じ見た目で書き写してみることです。
サイト模写する際はChromeの検証機能を使用します。
詳細は別途説明しますが、画像のようにWebサイトのソースコードや画像を取得する機能です。
サイト模写によって、コーディング速度やHTML/CSS知識が一気にレベルアップします。
Progateだけでは実案件をこなすスキルは身につきません。サイト模写によって、案件で通用するスキルを身につけることが出来ます。
サイト模写の種類
一概に”サイト模写”と言っても、実は色々な定義で使われています。
厳密な定義は存在せず、人によって色んな言い方をするのですが、ここではサイト模写を3つに分けて説明します。
- 既存サイトの作成
- オリジナルサイト制作
- デザインカンプからのコーディング
1つずつ見ていきましょう。
既存サイトの作成
1つ目の定義は、最初に説明した通り既存サイトを作成することです。
一般的な「サイト模写」はこの既存サイトの作成を意味します。
オリジナルサイトの作成
2つ目の定義は、既存サイトを参考にしながらオリジナルのサイトを作ることです。
インフルエンサーのYUJIさんが発信しています。
プログラミング学習に模写は必要ないです
手本になるサイトを用意して
90%を模倣して、残り10%に独自性をいれるこれだけでサイト模写とオリジナルサイト制作
の両方が一度に終わる手本サイトの
▶︎サービス内容
▶︎色やロゴ、フォント等のデザイン
を変更するだけでオリジナルサイトになる— YUJI@ZONE入学者1510名突破 (@YUJI_MZTN) February 4, 2020
既存サイト作成では著作権がサイトオーナにあるので一般公開できないのですが、この方法だと著作権は自分になるので一般公開可能です。
デザインカンプからのコーディング
3つ目の定義はデザインカンプからのコーディングです。
デザインカンプとはAdobeソフト(PhotoshopやXD)などで作成される、Webサイトの見本図です。
これまではChromeの検証機能を使ってサイトを制作していましたが、実案件ではこのデザインカンプを基にサイトを制作することが多いです。
そのため、一度はデザインカンプを使ってくお必要があります。
以下の記事に詳細が書いてあります。
【模写はやめてください】デザインカンプからのコーディングと模写は全く違う話
サイト模写の注意点
Webサイトを作成する際は、ポートフォリオとして制作することを意識して下さい。
Web制作で案件を獲得するには2つのポートフォリオが必要です。
そのため、模写をやりながらポートフォリオも作成できると非常に効率が良いです。
具体的には次の2つの方法で模写を行いましょう。
- オリジナルサイトの作成
- デザインカンプからのコーディング
先ほど説明したように、既存サイトを真似してもポートフォリオとしては使えません。
既存サイトを参考にしながら、必ずオリジナルなサイトにしましょう。
また、デザインカンプは実績公開OKなものを使いましょう。
サイト模写のやり方
それでは具体的なサイト模写のやり方を説明します。
- オリジナルサイトの作成
- デザインカンプからのコーディング
それぞれについて見ていきましょう。
オリジナルサイトの作成
先ほど紹介したYUJIさんのツイートにあるように、既存サイトのデザインを90%真似して、内容は100%オリジナルにします。
例えば、僕はISARAというプログラミング学習サイトを参考に、オリジナルのプログラミングサークル紹介サイトを作成しました。
この時のデザインやソースコードはChromeの検証機能で確認します。
模写のやり方やChromeの拡張機能については以下の記事が分かりやすいです。
デザインカンプからのコーディング
続いて、デザインカンプからのコーディングを学びます。
Adobe XDで作成されたデザインカンプは無料で使用可能ですので、模写の段階ではXDのカンプを探しましょう。
非常に使い勝手が良く、シンプルな作りなので、初心者でも感覚で使いこなせると思います。
個人的にコーディングにオススメなデザインカンプを2つ紹介します。
両方ともXDで作成されており、ポートフォリオとしての使用も許可されているので、大変ありがたいです。
■無料デザインカンプ
まさかずさんが作成された無料のデザインカンプを紹介します。
【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】
シンプルながらも、案件でよく使われるコーディングが必要であるため、脱初心者に丁度良いです。
*レスポンシブは自分で対応させる必要があります。
■有料デザインカンプ
続いて、きたしょーさんが作成されたデザインカンプを紹介します。
【Progate道場コース挫折者向け】ゼロから始めるHTML/CSSコーディング練習教材【ソースコード配布&デザインデータ付き】
有料ではあるものの、1,500円(値上げの可能性あり)と非常に良心的な値段です。
デザインデータの提供だけでなく、「どのようにサイトを作成するか」というコーディングの流れを説明してくれています。
確実に1,500円以上の価値はあるので、自分でサイトを作り切れるか不安な方は、きたしょーさんのカンプを使用しましょう。
まとめ
本日はサイト模写のやり方を説明しました。
サイト模写はWeb制作の学習過程で最も難しく、挫折する人が多いのですが、その一方で最も成長するフェーズでもあります。
ただし適切な方法で学習しないと、せっかく頑張っても学習効率が下がってしまいます。
正しく勉強して、一気にスキルを身につけましょう!