プログラミング

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

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

こんにちは、現在フリーランスのWeb制作者3年目のしょーごと申します。

これをご覧のかたは「模写」や「デザインカンプからのコーディング」という言葉を聞いたことがあるかもしれません。

これはどういうものかというと

模写コーディング=実際のサイトを検証ツールで見ながらそっくりに再現すること

デザインカンプからのコーディング=デザインデータからコーディングすること

を言います。

まずこの2つは「明確に区別されるもの」です。

人によって模写の定義が違ったりしますが、ここでは上記のように定義します

実は2019年始めぐらいまで模写ぐらいしか学習方法が伝播されていなかったのもあり、

私含め当時の駆け出しフリーランスの多くが「模写」を行って学習を行い案件をこなしてきました。

しかしこの「模写」という行為には様々なリスク・デメリットが潜んでいるのと、2021年現在はもっと良い学習方法が存在するため、

この記事で解説させていただきます。

この記事で分かること
  • 模写の何が問題なのか
  • デザインからコーディングとの違い
  • 模写で勉強になること
  • 実案件の進み方
  • これからのWeb制作の正しい学習方法
この記事のスタンス

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

ただし模写も場合によっては悪くない。

模写という言葉のわかりやすさと先行

なぜ模写は流行った?

模写という言葉がいつから使われるようになったのかは定かではありません。

しかしWeb制作学習のノウハウが出回るようになった2018年頃から学習方法として一挙に有名になったのではと思います。

また、「デザインカンプからのコーディング」に比べ、「模写」の方が語呂がいいですよね。

言いやすいです。

しょーご
しょーご
ここまで言っておいてなんですが、私も「模写コーディング」と「デザインカンプからのコーディング」をごっちゃにして話してたことがあるので、私にも非があります。今回は自分の罪を濯ぐためにも今回でハッキリさせようと思います。

模写コーディングの詳細

では模写コーディングとはどのように行うものなのか、模写対象として有名になったiSaraを取り上げます。

検証ツールでどのようにコーディングしているのか確認
スマホ時などレスポンシブも検証で確認
画像は拡張機能などで取得する
模写の流れ
  1. まずは画像をダウンロードする
  2. サイトをみつつ再現していく
  3. わからない部分は検証ツールで確認していく
  4. レスポンシブも検証ツールを見ながら確認していく

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

もう一度デザインカンプからのコーディングとは何かというと、

デザインカンプからのコーディング=デザインデータからコーディングすること

となります。

例えば以下は私が販売しているデザインカンプになります。

Adobe XDになります
デザインデータからのコーディングの流れ
  1. デザインから素材をダウンロードする
  2. デザインデータから余白、フォント、サイズなどを確認しつつコーディングしていく

模写の致命的欠点集

ではここから「模写コーディング学習における致命的欠陥」を紹介していきます。

先日このようなツイートを見かけましたが、私の主張も大体ここに書いてあるとおりです笑

欠点①:実務は99%デザインデータから行う

実務は基本的に

デザインデータ(PSD,Ai,XD,Figmaなど)を共有される→それと仕様書をもとにコーディング

という工程で、「実サイトを検証ツールで見ながらそっくりに模写する」という工程は一切含まれていません。

模写コーディングの実サイト再現スキルは実務からかけ離れたものです。

参考:Web制作実務の流れを解説しています

欠点②:実績にならない(してはいけない)

現在公開されているサイトの素材を勝手に引っ張っているわけなので、著作権的にだいぶ怪しいです。

また、ネット上に公開はしないほうが見のためです。

模写の最悪なケース

先日見かけてしまったのですが、現在iSaraと検索するとこのような検索結果になります。

この二番目のサイトは「模写コーディングの練習アップロード作品」になります。

このやばさに気づくでしょうか?

iSaraが寛容なのでまだ大丈夫でしたが、このサイトが集客でバリバリ稼働しているサイトなら普通に損害賠償ものです。

こうならないように

  • meta name=”robots” content=”noindex”
  • BASIC認証

をかけなければならないのです。

なおこれはデザインカンプからのコーディングも一緒です。実在のサービスでは無いとはいえ、練習作品を検索結果に乗せるべきではありません。

また、似たようなサービスがあるときに競合する可能性があります。必ず上記2つはつけておきましょう。

模写と明記すればいいわけではない

模写した作品には模写と書いてGoogleドライブにアップしましょう」というアドバイスがあったりしますが、それでもかなりリスキーです。

そもそも模写の解釈が人によって違うので、「模写と書いても基本的に通じない」ですし、実サイトを写経したものはやはり怪しまれる傾向にあります。

③答えが見れてしまう

模写は「既に公開されているサイトを見つつそっくりに模写していく作業」です。

つまり、「答えが既に存在している」状況でのコーディングになります。

反対に実務では「答えが存在しない」状況でのコーディングになります。

なので、模写コーディングに慣れてしまうと実案件でデザインカンプからコーディングするときに答えがないのでとても困ってしまいます。

模写コーディングのメリット

ありさちゃん
ありさちゃん
いや模写コーディングで学べることもたくさんありますよ!
まさひろくん
まさひろくん
僕がいままでやった模写コーディングは無駄だったのかな…?

と思われる方もいると思います。

ここまで模写を散々ディスってきてなんですが、実はわたしは模写は完全に無駄だとは思いません。

学習の最初期においては有効ですらあると思います。

模写のメリット①:答えがある

この「答えがある」というのはデメリットだけでなくメリットにもなりえます。

例えばこのようなヘッダー。

初学者の頃はヘッダーを実装するのも一苦労です。

人によっては全く手が出ないかもしれません。

そんなときに最初に模写から入れば答えが分かるので、挫折する可能性は減るかもしれません。

模写のメリット②:暗黙の了解を学ぶことができる

例えば

初学者時代のしょーご
初学者時代のしょーご
「なるほど、sectionタグで塊ごとに囲って、先頭のタイトルはh2タグで囲むのか」

というようなWeb上のルールを検証ツールで覗くことで学ぶことができます。

しょーご
しょーご
とはいえその模写先のコーディングが正しいとは限らないので、間違った知識が付く可能性もあります。

なので、Progateが終わったばかりのような最初期はちゃんと本から学習したほうがいいです。

結論:模写は最初期にやるもの

ここまで「模写」と「デザインカンプからのコーディング」に関して述べてきましたが、今からweb制作を学ぶのであれば、模写は基本的にやる必要はありません。

用語の整理

模写コーディング=実際のサイトを検証ツールで見ながらそっくりに再現すること

デザインカンプからのコーディング=デザインデータからコーディングすること

しょーご
しょーご
どうぜ学ぶなら実績にもできて実戦形式と同じ「デザインからのコーディング」をやろうぜという考え

ただいきなりデザインカンプからのコーディングだと厳しいということであれば、模写を通して答えを見つつコーディング練習をすればいいかなと思います。

ただし模写だけでは絶対に実案件でコケること間違いないので(私が経験者)必ず模写の後はデザインカンプからのコーディングを挟むようにしましょう!

しょーご
しょーご
本記事で「模写」と「デザインカンプからのコーディング」の違いがわかっていただけたのなら幸いです!

【2021年版】Web制作学習ロードマップ公開中

ロードマップに模写は含んでいません。

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング課題 XD PSDデザインデータ配布
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

 

あなたに是非読んでほしい記事です!