【悲報】模写コーディングは意味ありません【ヒント:デザインカンプ】

悩む人

模写コーディングって意味ありますか?

模写コーディングって意味ありますか?HTMLやCSSの基礎を身につけたので、サイト模写に挑戦しようと思ってます。とはいえ、「デザインカンプからのコーディング」をすべきと聞きます。いったいどっちの意見が正しいのかな?

こんなお悩みを解決します。

✔︎本記事の内容

  • 模写コーディングは意味ありません
  • 模写コーデイングは価値アリですよ
この記事を書いている僕は、フロントエンドエンジニア歴2年ほど。

結論いうと、実務で使わないので不要です。
「デザインカンプからのコーディング」ですよ。

しかし、実績のない方はやるべきかと。
ポートフォリオとして有効です。

【悲報】模写コーディングは意味ありません

WEBサイトを建設する工事現場の人

理由は、下記のとおり。

  • 理由①:そもそも、実務で使わない
  • 理由②:会社独自の「型」がある
  • 理由③:著作権的にグレーゾーン
模写コーディングとは、検証ツールを使いつつ、既存サイトを再現することです。

理由①:そもそも、実務で使わない

当たり前な思考ですが、実務で模写りますか?

模写るんじゃね?→というと、すでにサイトは出来上がってますよね?模写るワケは何でしょうか?

実務で、模写コーディングなんてしませんよ。
デザインカンプからコーディングします。

とはいえ、参考サイトのURLがくっついてる場合が多く、そのデザインや設計を参考にする程度です。

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

デザインカンプとは、デザインの設計図です。
Adobe XDが有名ですね。

家を作るときも、いきなり作り始めるなんてあり得ませんよね?必ず、家を建てるための「設計書」があります。それを元に、建築していくかと。

WEB制作やデザインも同じでして、「Adobe XD」などのデザインツールを見つつ、コーディングしていきます。

検証ツールからコーディングする工程なんて
1ミリも存在しないことを理解できるかと。

理由②:会社独自の『型』がある

模写コーディングは、あくまでも自己流。
正解がないため、いろんな書き方ができます。

しかし、実際の実務では、会社独自に設定した「型」を使って、コーディングする場合が多いです。たとえば、会社独自にCSSのクラス名が決まってたりするので、オリジナリティでコードを書くこともわりと少なかったりします。

模写だと最終的に、本家とコードが違っても見た目が同じなら「まぁOK」という感じです。それに「検証ツール」を使えば、コードも見れてしまうので、ズルだってできてしまいます。再度いいますが、実務ならあり得ませんよ。

模写コーディングが
いかに実務とかけ離れてることが分かるかと。

理由③:著作権的にグレーゾーン

第三の理由は、著作権違反です。

ただ、コーディングするだけなら問題ないかと。
あとは、サイト運営者が模写を許可してる場合。

もし、ネットにアップロードするなら、それは「偽サイト」に対する責任を負うことになりますからね。

ネットにアップロードはNG

PAS-POLの模写サイト

PAS-POLの模写サイト:NG

他社サイトを勝手にコーディングして、ネットにあげてしまうのは著作権違反だったりします。上記は、「偽サイト」と誤解されてもおかしくない。フツーに、訴えられたら負けですね。

<meta name="robots" content="noindex, nofollow">

アップするにせよ、上記のメタタグが必要。こうすれば、クローラーにインデックスされることもないですし、検索に表示されることもないワケです。この方はGithub上に公開してますが、上記タグを設定してないので検索に表示されてます。


サイト模写をポートフォリオにするのは
今の時代、無理がありますね。

「Googleドライブに模写サイトを格納しとく」がベストかと。

【安心】模写コーディングは価値アリですよ

クラウド上にアップロードする女性

模写コーディングは意味ないとお話ししました。
なぜなら、実務で使わない&著作権アウトだから。

しかし、実績のないあなたがどうやって案件を獲得しますか?

答えは、ポートフォリオです。

は?と思われるかもですが、ゴリ押しで案件受注するしかないですね。

ポートフォリオを持って100件くらい営業すれば
案件は獲得できますよ。

まぁ僕の場合は、10件中3件ヒット
打率は3割ほどでしたが…

基礎スキルを身につける4つの学習方法

上記で基礎スキルを身につけたら
ポートフォリオを作っていきましょう。

模写コーディングに必要なツール

ゼロベースで模写ると、けっこうダルいです。
下記は、無料で使える模写ツールです。

上記のとおり。
詳しい使い方は、実践しつつググりましょう。

検証ツールは、使ってもOKです

「検証ツールを使ってはいけません…」という意見もありますが、使ったところで問題ありますか?どの道、模写コーディングは実務で使われないので、悩んだらサクッと答えを見てしまう方が効率的かと。

  • まずは、検証ツールを使わないで模写る
  • わからない箇所は、徹底的にググって解決する
  • それでもわからないなら、答えをみる

上記のとおり。
いきなり答えを見ても、さすがに成長しないかと。

模写り方に、正解なんて存在しません

模写コーディングのメリットは
「マークアップ構造の理解」です。

たとえば、ヘッダーの中にサイトロゴやメニューが配置されてるのか...という感じ。自分の頭でサイト構造を分解してコーディングするので、非常にやりがいは大きいです。

ココは、基礎学習から学んできたことでして
アウトプットする段階で理解がより深まるかと。

実務で模写は不要ですが「デザインからコード構造を読み取る」訓練になります。

模写コーディングにオススメなサイト3つ

  • 初級レベル:PAS-POL←定番模写サイト
  • 中級レベル:iSara←著作権フリー
  • 上級レベル:ノマドニア←ちなみに、僕は4期生

レスポンシブ対応もやりましょう。
実務では、レスポンシブも必須ですので。

上記ができたら、Googleドライブに格納して
ポートフォリオを武器に案件獲得を目指しましょう。

もちろん、ネットにUPは犯罪ですよ。

とはいえ、模写サイトを実績にしたくない

そんなときは「デザインカンプからのコーディング」を行うべし。下記のサイトで実績を作りましょう。

上記をポートフォリオすればOK。

模写コーディングの後にやること

スバリ、オリジナルのポートフォリオ作成です。

それは、なぜか?
カンタンです、模写は実績じゃないから。

詳しくは、下記をご覧ください。

模写コーディングの前にやるべきこと

ノーコードでポートフォリオを作りましょう。
コードを書く必要がないため、サクッと作れます。

ポートフォリオを作る3人の男性 【名刺不要】ポートフォリオに最適なCarrdの使い方【ノーコードでOK】 

===

というわけで、今回は以上。
最後に、まとめます。

  • 模写コーディングは、不要
  • なぜなら、実務で使わないから
  • デザインカンプからのコーディングが実務
  • とはいえ、サイト模写はポートフォリオに有効
  • 模写コーディングに取り組む、価値アリです

ザックリとこんな感じです。
ポートフォリオで案件獲得を目指しましょう。

それでは、楽しいコードライフを!