【無意味】サイト模写は意味ない!?やり方と注意点。Web制作で最もスキルが身に着く勉強です。

こんにちは。コウジ(@koji596)です。

 

本日はサイト模写のやり方を解説します。

 

Progateやドットインストールで最低限の基礎をインプットしたら、即アウトプットする必要があります。

アウトプットの手段として、サイト模写は非常に効果的なんです。

 

 

 

ただし、正しい方法で行わないと勉強効率が悪くなり、挫折にもつながります。

本日はサイト模写の方法や注意点を解説していきます。

 

Web制作案件の獲得に直結する内容なので、是非最後まで読んで下さい。

 

サイト模写とは

サイト模写とは、現在公開されているWebサイトを全く同じ見た目で書き写してみることです。

コウジ
漫画家がドラゴンボールを描いて絵の練習をするようなものです。

 

 

サイト模写する際はChromeの検証機能を使用します。

詳細は別途説明しますが、画像のようにWebサイトのソースコードや画像を取得する機能です。

 

コウジ
ProgateのHTML&CSS関連記事にも検証機能の使い方は載っています!

 

 

サイト模写によって、コーディング速度やHTML/CSS知識が一気にレベルアップします。

Progateだけでは実案件をこなすスキルは身につきません。サイト模写によって、案件で通用するスキルを身につけることが出来ます。

 

サイト模写の種類

一概に”サイト模写”と言っても、実は色々な定義で使われています。

厳密な定義は存在せず、人によって色んな言い方をするのですが、ここではサイト模写を3つに分けて説明します。

 

  • 既存サイトの作成
  • オリジナルサイト制作
  • デザインカンプからのコーディング

 

1つずつ見ていきましょう。

 

既存サイトの作成

1つ目の定義は、最初に説明した通り既存サイトを作成することです。

一般的な「サイト模写」はこの既存サイトの作成を意味します。

 

オリジナルサイトの作成

2つ目の定義は、既存サイトを参考にしながらオリジナルのサイトを作ることです。

インフルエンサーのYUJIさんが発信しています。

 

 

既存サイト作成では著作権がサイトオーナにあるので一般公開できないのですが、この方法だと著作権は自分になるので一般公開可能です。

 

デザインカンプからのコーディング

3つ目の定義はデザインカンプからのコーディングです。

デザインカンプとはAdobeソフト(PhotoshopやXD)などで作成される、Webサイトの見本図です。

 

これまではChromeの検証機能を使ってサイトを制作していましたが、実案件ではこのデザインカンプを基にサイトを制作することが多いです。

 

 

そのため、一度はデザインカンプを使ってくお必要があります。

以下の記事に詳細が書いてあります。

【模写はやめてください】デザインカンプからのコーディングと模写は全く違う話

 

サイト模写の注意点

Webサイトを作成する際は、ポートフォリオとして制作することを意識して下さい。

Web制作で案件を獲得するには2つのポートフォリオが必要です。

 

コウジ
ポートフォリオとはサイトの制作実績です。スキルを証明するために使います。

 

そのため、模写をやりながらポートフォリオも作成できると非常に効率が良いです。

具体的には次の2つの方法で模写を行いましょう。

 

  1. オリジナルサイトの作成
  2. デザインカンプからのコーディング

 

先ほど説明したように、既存サイトを真似してもポートフォリオとしては使えません。

既存サイトを参考にしながら、必ずオリジナルなサイトにしましょう。

 

また、デザインカンプは実績公開OKなものを使いましょう。

コウジ
具体的なオススメのデザインカンプは次章で説明します。

 

サイト模写のやり方

それでは具体的なサイト模写のやり方を説明します。

 

  1. オリジナルサイトの作成
  2. デザインカンプからのコーディング

 

それぞれについて見ていきましょう。

 

オリジナルサイトの作成

先ほど紹介したYUJIさんのツイートにあるように、既存サイトのデザインを90%真似して、内容は100%オリジナルにします。

 

例えば、僕はISARAというプログラミング学習サイトを参考に、オリジナルのプログラミングサークル紹介サイトを作成しました。

 

 

この時のデザインやソースコードはChromeの検証機能で確認します。

模写のやり方やChromeの拡張機能については以下の記事が分かりやすいです。

Webサイトをコーディング模写するやり方と使用するツール

 

デザインカンプからのコーディング

続いて、デザインカンプからのコーディングを学びます。

Adobe XDで作成されたデザインカンプは無料で使用可能ですので、模写の段階ではXDのカンプを探しましょう。

 

コウジ
使用する際は公式サイトから無料版をダウンロードして下さい。

Adobe XD 公式サイト

 

非常に使い勝手が良く、シンプルな作りなので、初心者でも感覚で使いこなせると思います。

 

 

個人的にコーディングにオススメなデザインカンプを2つ紹介します。

両方ともXDで作成されており、ポートフォリオとしての使用も許可されているので、大変ありがたいです。

 

無料デザインカンプ

まさかずさんが作成された無料のデザインカンプを紹介します。

【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】

 

シンプルながらも、案件でよく使われるコーディングが必要であるため、脱初心者に丁度良いです。

*レスポンシブは自分で対応させる必要があります。

 

有料デザインカンプ

続いて、きたしょーさんが作成されたデザインカンプを紹介します。

【Progate道場コース挫折者向け】ゼロから始めるHTML/CSSコーディング練習教材【ソースコード配布&デザインデータ付き】

 

有料ではあるものの、1,500円(値上げの可能性あり)と非常に良心的な値段です。

デザインデータの提供だけでなく、「どのようにサイトを作成するか」というコーディングの流れを説明してくれています。

 

確実に1,500円以上の価値はあるので、自分でサイトを作り切れるか不安な方は、きたしょーさんのカンプを使用しましょう。

 

まとめ

本日はサイト模写のやり方を説明しました。

サイト模写はWeb制作の学習過程で最も難しく、挫折する人が多いのですが、その一方で最も成長するフェーズでもあります。

ただし適切な方法で学習しないと、せっかく頑張っても学習効率が下がってしまいます。

正しく勉強して、一気にスキルを身につけましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

東京理科大学▷日経企業▷外資系コンサルティングファームという変わったキャリアを進んでます。現在はコンサルタントとして働きながら、プログラミング等で月5万円の副収入を達成し、独立目指して奮闘中です。キャリアに関連する情報を発信しています。