
こんにちは、ジもちーです!

オムツがテープタイプからパンツタイプに進化した息子です!
今回は模写コーディングとデザインカンプからのコーディングのやり方・違いについて記述していきます。
- 模写コーディングってなんぞ?
- デザインカンプってなんぞ?
- 何をどう始めればいいんぞ?
- オラわくわくすっぞ!
こんな方々はぜひ参考にしてください!
この記事で分かることは下の目次の通りです☟
模写コーディングとは
模写コーディングはProgateやドットインストールなどでHTML&CSSの基礎を学び終えた方が次のステップに進むために行う学習方法です。
模写コーディングを簡単に言うと「色々なサイトを見ながら自分でコードを書いてそのサイトを模写していくこと」
要はパクリです。
はっきり言って最初は一からサイトを設計して作るのは無理です。
だから人が作ったすばらしいサイトをパクッて練習するのです。
模写コーディングの仕方

先ずは模写コーディングをするお気に入りのサイトを探しましょう!
まあでもいきなり有名サイトなどの難しいものを模写するのは人生で一度もボケたことがないのに一本グランプリに出場するくらい無謀なことです。
スベリ散らかしてハゲることまちがいなしです。
そうならない為に簡単なサイトのテンプレートを模写することから始めることをオススメします。
参考リンクを下に2つほど載せておきます☟

模写コーディングに必要な「ツール」
「ツール」ってなんぞ?って方はパソコンの装備だと思ってください。
ドラクエでもFF(ファイナルファンタジー)でも装備なしでは戦えません。
先ずは初期装備を整えましょう。

「装備ってお金がかかるんじゃないの?」
って不安になっているそこの素っ裸のみなさん、ご安心ください。
初期装備にかかる費用は0円です!
さっそくツールを揃えて裸に鎧を着せてあげましょう。
必要なツールはこちら
- テキストエディター
- Google Chrome
- Google Chrome拡張機能4つ
テキストエディター
こちらはコードを書くためのものです。
コードを書いてすぐにGoogle chormeなどのブラウザで表示確認が出来ます。
私のオヌヌメは「Visual Studio Code」通称VSCode
正直言うとおススメというよりもこれしか使ったことがありません。
なんか初心者におススメで使いやすくて仕事でもこれを使っている人が多いという情報がどっかから降ってきたので使っている次第です。

こいつ適当かよ
これに関してはそこまで吟味する必要がないと思ってます。
仕事で使うテキストエディターが決められているとかでない限りはちょっと「テキストエディター おススメ」とかでググって特に迷わずすぐにインストールしてください。
なぜならそんなことに悩むならばすぐに使ってコードを書く練習とともに使い方を学習していく時間にあてた方が良いからです。

とりあえず、ビールで!の感覚でとりあえずVSCodeで!でもおけです
Google chrome
知らない人なんていないと思いますが一応。
これはブラウザの種類ですね。種類は
- Google Chrome(グーグルクローム)
- Firefox(ファイヤーフォックス)
- Microsoft Edge(マイクロソフト エッジ)
- Internet Explorer(インターネットエクスプローラー)
- Safari(サファリ)
なんかがあります。
その中でもGoogle chormeは色んな拡張機能があって便利なのでまだダウンロードしてないよって方がいたらすぐにダウンロードしてください。

これをダウンロードしてないとみんなで「ポケモン」やってるのに一人だけ「たまごっち」やってる幼少期のわたしみたいになってしまいますよ(´;ω;`)
Google chrome拡張機能4つ
模写コーディングを始めるのに最低限必要な拡張機能4つを紹介します。
拡張機能ってどうやってダウンロードすんの?って方は先ずはGoogle chromeで「拡張機能」で検索してみよう!
- What Font(フォントを調べる)
- Image Downloader(画像のダウンロード)
- Page Ruler(幅の計測)
- Color Picker(カラーコードを調べる)
これらのツールの使い方はYouTubeで模写コーディングしている実際の映像を見ると分かりやすいです。
おススメ参考動画はこちら☟
デザインカンプからのコーディングとは

そもそもデザインカンプってなんぞ?
デザインカンプとは簡単に言うと「制作するサイトの完成イメージ」です。
クラウドソーシングでもまずはこのデザインカンプを元にコーディングする案件からやっていくことが多いと思います。
デザインカンプを開くためには専用のデザインツールを必要とします。
その中でも主に使用されているのがこの3つ
- 「XD」
- 「Photoshop」
- 「Illustrator」
これらを使ってデザインカンプを開きコーディングをしていきます。
初めてのデザインカンプでは圧倒的に「XD」がおススメです。
なぜならこの中で唯一、無料で使用することが出来るからです。
先ずは「XD」を無料でダウンロードし、無料で公開されている「XD」で作成されたデザインカンプから練習を始めていきましょう。
無料で公開されているデザインカンプはこちら☟


模写コーディングのメリット・デメリット
メリット
- 参考に出来るサイトが無限にある
- 自分のレベルにあった練習がしやすい
- デベロッパーツールの使い方を学ぶことが出来る
- 検証ツールで正解を見ることが出来る
デメリット
- 基本的にポートフォリオとして掲載することが出来ない
- 実案件では模写コーディングはしない
- デザインカンプの見方を学ぶことが出来ない
デザインカンプからのコーディングのメリット・デメリット
メリット
- 実案件に近い練習が出来る
- 出来上がったサイトをポートフォリオに掲載が出来る
- デザインツールの使い方を学ぶことが出来る
デメリット
- 練習に使えるものが少ない
- 基本的には有料(少しだけ無料もあり)
- 正解が用意されていないものもある
さいごに

どちらもやってみた私のおススメはデザインカンプからのコーディングです。
デザインカンプからのコーディングの利点は何と言ってもポートフォリオに掲載して自分のスキルを証明することが出来ることです。
有料のものが多いですが、今後クラウドソーシングや制作会社への営業活動、Web制作会社への転職活動をする予定のある人はポートフォリオが充実していた方が絶対に得をします。
注意点としては模写コーディングもデザインカンプからのコーディングも最初から難しいものに挑戦しないことです。
難しくて躓き、前に進めなくなると挫折してしまうことがあります。
自分のレベルにあった練習をしていきましょう!
コメント