悩む人
模写コーディングって意味ありますか?
模写コーディングって意味ありますか?HTMLやCSSの基礎を身につけたので、サイト模写に挑戦しようと思ってます。とはいえ、「デザインカンプからのコーディング」をすべきと聞きます。いったいどっちの意見が正しいのかな?
こんなお悩みを解決します。
✔︎本記事の内容
- 模写コーディングは意味ありません
- 模写コーデイングは価値アリですよ
この記事を書いている僕は、フロントエンドエンジニア歴2年ほど。
結論いうと、実務で使わないので不要です。
「デザインカンプからのコーディング」ですよ。
しかし、実績のない方はやるべきかと。
ポートフォリオとして有効です。
【悲報】模写コーディングは意味ありません
理由は、下記のとおり。
- 理由①：そもそも、実務で使わない
- 理由②：会社独自の「型」がある
- 理由③：著作権的にグレーゾーン
模写コーディングとは、検証ツールを使いつつ、既存サイトを再現することです。
理由①：そもそも、実務で使わない
当たり前な思考ですが、実務で模写りますか?
模写るんじゃね?→というと、すでにサイトは出来上がってますよね?模写るワケは何でしょうか?
実務で、模写コーディングなんてしませんよ。
デザインカンプからコーディングします。
とはいえ、参考サイトのURLがくっついてる場合が多く、そのデザインや設計を参考にする程度です。
デザインカンプからのコーディングとは?
デザインカンプとは、デザインの設計図です。
Adobe XDが有名ですね。
家を作るときも、いきなり作り始めるなんてあり得ませんよね?必ず、家を建てるための「設計書」があります。それを元に、建築していくかと。
WEB制作やデザインも同じでして、「Adobe XD」などのデザインツールを見つつ、コーディングしていきます。
検証ツールからコーディングする工程なんて
1ミリも存在しないことを理解できるかと。
理由②：会社独自の『型』がある
模写コーディングは、あくまでも自己流。
正解がないため、いろんな書き方ができます。
しかし、実際の実務では、会社独自に設定した「型」を使って、コーディングする場合が多いです。たとえば、会社独自にCSSのクラス名が決まってたりするので、オリジナリティでコードを書くこともわりと少なかったりします。
模写だと最終的に、本家とコードが違っても見た目が同じなら「まぁOK」という感じです。それに「検証ツール」を使えば、コードも見れてしまうので、ズルだってできてしまいます。再度いいますが、実務ならあり得ませんよ。
模写コーディングが
いかに実務とかけ離れてることが分かるかと。
理由③：著作権的にグレーゾーン
第三の理由は、著作権違反です。
ただ、コーディングするだけなら問題ないかと。
あとは、サイト運営者が模写を許可してる場合。
もし、ネットにアップロードするなら、それは「偽サイト」に対する責任を負うことになりますからね。
ネットにアップロードはNG
PAS-POLの模写サイト：NG
他社サイトを勝手にコーディングして、ネットにあげてしまうのは著作権違反だったりします。上記は、「偽サイト」と誤解されてもおかしくない。フツーに、訴えられたら負けですね。
<meta name="robots" content="noindex, nofollow">
アップするにせよ、上記のメタタグが必要。こうすれば、クローラーにインデックスされることもないですし、検索に表示されることもないワケです。この方はGithub上に公開してますが、上記タグを設定してないので検索に表示されてます。
駆け出しエンジニアに、サイト模写する人が多いですが、著作権を考えてないから残念だったりします。たとえば「PAS-POL 模写」でググるとGithub上の模写サイトが検索上位に出てきます。本家とそっくりなので騙される人は騙されます。僕が発注者なら「想像力の欠如」としてお断りさせていただきます😶🌫️
— インペリアル ミヤビ＠🇬🇪ブロガー (@ImperialMiyavi) March 11, 2022
サイト模写をポートフォリオにするのは
今の時代、無理がありますね。
「Googleドライブに模写サイトを格納しとく」がベストかと。
【安心】模写コーディングは価値アリですよ
模写コーディングは意味ないとお話ししました。
なぜなら、実務で使わない&著作権アウトだから。
しかし、実績のないあなたがどうやって案件を獲得しますか?
答えは、ポートフォリオです。
は?と思われるかもですが、ゴリ押しで案件受注するしかないですね。
ポートフォリオを持って100件くらい営業すれば
案件は獲得できますよ。
まぁ僕の場合は、10件中3件ヒット
打率は3割ほどでしたが…
基礎スキルを身につける4つの学習方法
上記で基礎スキルを身につけたら
ポートフォリオを作っていきましょう。
模写コーディングに必要なツール
ゼロベースで模写ると、けっこうダルいです。
下記は、無料で使える模写ツールです。
- Perfect Pixel：1px単位でズレを確認できる
- GoFullPage：画面全体をキャプチャする
- Image Downloader：サイト画像をダウンロードできる
- 背景画像を表示：Background-imgを取得できる
- ColorPick Eyedropper：サイトカラーを検出できる
上記のとおり。
詳しい使い方は、実践しつつググりましょう。
検証ツールは、使ってもOKです
「検証ツールを使ってはいけません…」という意見もありますが、使ったところで問題ありますか?どの道、模写コーディングは実務で使われないので、悩んだらサクッと答えを見てしまう方が効率的かと。
- まずは、検証ツールを使わないで模写る
- わからない箇所は、徹底的にググって解決する
- それでもわからないなら、答えをみる
上記のとおり。
いきなり答えを見ても、さすがに成長しないかと。
模写り方に、正解なんて存在しません
模写コーディングのメリットは
「マークアップ構造の理解」です。
たとえば、ヘッダーの中にサイトロゴやメニューが配置されてるのか...という感じ。自分の頭でサイト構造を分解してコーディングするので、非常にやりがいは大きいです。
ココは、基礎学習から学んできたことでして
アウトプットする段階で理解がより深まるかと。
実務で模写は不要ですが「デザインからコード構造を読み取る」訓練になります。
模写コーディングにオススメなサイト3つ
レスポンシブ対応もやりましょう。
実務では、レスポンシブも必須ですので。
上記ができたら、Googleドライブに格納して
ポートフォリオを武器に案件獲得を目指しましょう。
もちろん、ネットにUPは犯罪ですよ。
とはいえ、模写サイトを実績にしたくない
そんなときは「デザインカンプからのコーディング」を行うべし。下記のサイトで実績を作りましょう。
上記をポートフォリオすればOK。
模写コーディングの後にやること
スバリ、オリジナルのポートフォリオ作成です。
それは、なぜか?
カンタンです、模写は実績じゃないから。
詳しくは、下記をご覧ください。
模写コーディングの前にやるべきこと
ノーコードでポートフォリオを作りましょう。
コードを書く必要がないため、サクッと作れます。
【名刺不要】ポートフォリオに最適なCarrdの使い方【ノーコードでOK】
===
というわけで、今回は以上。
最後に、まとめます。
- 模写コーディングは、不要
- なぜなら、実務で使わないから
- デザインカンプからのコーディングが実務
- とはいえ、サイト模写はポートフォリオに有効
- 模写コーディングに取り組む、価値アリです
ザックリとこんな感じです。
ポートフォリオで案件獲得を目指しましょう。
それでは、楽しいコードライフを！
