こんにちは、現在フリーランスのWeb制作者5年目のしょーごと申します。
これをご覧のかたは「模写」や「デザインカンプからのコーディング」という言葉を聞いたことがあるかもしれません。
これはどういうものかというと
模写コーディング＝実際のサイトを検証ツールで見ながらそっくりに再現すること
デザインカンプからのコーディング＝デザインデータからコーディングすること
を言います。
まずこの２つは「明確に区別されるもの」です。
実は2019年始めぐらいまで模写ぐらいしか学習方法が伝播されていなかったのもあり、
私含め当時の駆け出しフリーランスの多くが「模写」を行って学習を行い案件をこなしてきました。
しかしこの「模写」という行為には様々なリスク・デメリットが潜んでいるのと、2022年現在はもっと良い学習方法が存在するため、
この記事で解説させていただきます。
- 模写の何が問題なのか
- デザインからコーディングとの違い
- 模写で勉強になること
- 実案件の進み方
- これからのWeb制作の正しい学習方法
模写コーディング ＜ デザインカンプからのコーディング
ただし模写も場合によっては悪くない。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
模写という言葉のわかりやすさと先行
なぜ模写は流行った？
模写という言葉がいつから使われるようになったのかは定かではありません。
しかしWeb制作学習のノウハウが出回るようになった2018年頃から学習方法として一挙に有名になったのではと思います。
また、「デザインカンプからのコーディング」に比べ、「模写」の方が語呂がいいですよね。
言いやすいです。
模写コーディングの詳細
では模写コーディングとはどのように行うものなのか、模写対象として有名になったiSaraを取り上げます。
- まずは画像をダウンロードする
- サイトをみつつ再現していく
- わからない部分は検証ツールで確認していく
- レスポンシブも検証ツールを見ながら確認していく
デザインカンプからのコーディング
もう一度デザインカンプからのコーディングとは何かというと、
デザインカンプからのコーディング＝デザインデータからコーディングすること
となります。
例えば以下は私が販売しているデザインカンプになります。
- デザインから素材をダウンロードする
- デザインデータから余白、フォント、サイズなどを確認しつつコーディングしていく
模写の致命的欠点集
ではここから「模写コーディング学習における致命的欠陥」を紹介していきます。
先日このようなツイートを見かけましたが、私の主張も大体ここに書いてあるとおりです笑
欠点①：実務は99%デザインデータから行う
実務は基本的に
デザインデータ（PSD,Ai,XD,Figmaなど）を共有される→それと仕様書をもとにコーディング
という工程で、「実サイトを検証ツールで見ながらそっくりに模写する」という工程は一切含まれていません。
模写コーディングの実サイト再現スキルは実務からかけ離れたものです。
参考：Web制作実務の流れを解説しています
欠点②：実績にならない（してはいけない）
現在公開されているサイトの素材を勝手に引っ張っているわけなので、著作権的にだいぶ怪しいです。
また、ネット上に公開はしないほうが見のためです。
模写の最悪なケース
先日見かけてしまったのですが、現在iSaraと検索するとこのような検索結果になります。
この二番目のサイトは「模写コーディングの練習アップロード作品」になります。
このやばさに気づくでしょうか？
iSaraが寛容なのでまだ大丈夫でしたが、このサイトが集客でバリバリ稼働しているサイトなら普通に損害賠償ものです。
こうならないように
- meta name=”robots” content=”noindex”
- BASIC認証
をかけなければならないのです。
模写と明記すればいいわけではない
「模写した作品には模写と書いてGoogleドライブにアップしましょう」というアドバイスがあったりしますが、それでもかなりリスキーです。
そもそも模写の解釈が人によって違うので、「模写と書いても基本的に通じない」ですし、実サイトを写経したものはやはり怪しまれる傾向にあります。
③答えが見れてしまう
模写は「既に公開されているサイトを見つつそっくりに模写していく作業」です。
つまり、「答えが既に存在している」状況でのコーディングになります。
反対に実務では「答えが存在しない」状況でのコーディングになります。
なので、模写コーディングに慣れてしまうと実案件でデザインカンプからコーディングするときに答えがないのでとても困ってしまいます。
模写コーディングのメリット
と思われる方もいると思います。
ここまで模写を散々ディスってきてなんですが、実はわたしは模写は完全に無駄だとは思いません。
学習の最初期においては有効ですらあると思います。
模写のメリット①：答えがある
この「答えがある」というのはデメリットだけでなくメリットにもなりえます。
例えばこのようなヘッダー。
初学者の頃はヘッダーを実装するのも一苦労です。
人によっては全く手が出ないかもしれません。
そんなときに最初に模写から入れば答えが分かるので、挫折する可能性は減るかもしれません。
模写のメリット②：暗黙の了解を学ぶことができる
例えば
というようなWeb上のルールを検証ツールで覗くことで学ぶことができます。
なので、Progateが終わったばかりのような最初期はちゃんと本から学習したほうがいいです。
結論：模写は最初期にやるもの
ここまで「模写」と「デザインカンプからのコーディング」に関して述べてきましたが、今からweb制作を学ぶのであれば、模写は基本的にやる必要はありません。
模写コーディング＝実際のサイトを検証ツールで見ながらそっくりに再現すること
デザインカンプからのコーディング＝デザインデータからコーディングすること
ただいきなりデザインカンプからのコーディングだと厳しいということであれば、模写を通して答えを見つつコーディング練習をすればいいかなと思います。
ただし模写だけでは絶対に実案件でコケること間違いないので（私が経験者）必ず模写の後はデザインカンプからのコーディングを挟むようにしましょう！
模写コーディングの具体的なやり方
模写コーディングの具体的なやり方は模写コーディングのやり方を練習サイトを元に解説【無料】という記事で解説しています。
【2023年版】Web制作学習ロードマップ公開中
ロードマップに模写は含んでいません。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
