ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【初心者向け】模写コーディングがオススメな理由とやり方を解説

プログラミング
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

ネコ君
ネコ君

HTML,CSSの基礎が終わったけど実践的なスキルが身につかない。

今回はこのような悩みを解決する記事です。

プログラミング初心者の一連の流れとして、

【Progate、ドットインストールで基礎学習→基礎勉強しまくる→実践スキルが身につかない→何をすればいいか悩む】

このようになる方が多いかと思います。

Progateなどで基礎学習はもちろん効率的で良いですが、学習後インプットした物を実践的なスキルに変えなければ何の意味もありません。

そもそもProgateだけではHTML,CSSの全てを網羅できておらず、100がプロとすると10にも到達していません。

【実体験】Progate(プロゲート)でどこまでスキルが身につくの?【HTML,CSS編】

そこでオススメの学習方法がこれからご紹介する「模写コーディング」という方法です。

この模写コーディングをマスターすれば、クラウドソーシングにある簡単なLP案件くらいはこなせるレベルに到達するかと思います。

プログラミング初心者でエンジニアを目指す方はぜひ最後までご覧ください!

こんな方にオススメ
  • 基礎学習の後に何をすれば良いか分からない方
  • クラウドソーシングで案件をこなせるようになりたい方
  • 実践的なHTML,CSSのスキルを身に付けたい方
スポンサーリンク

模写コーディングとは?

さて、これから学習していく「模写コーディング」とはそもそも何なんでしょうか?

読んで字の如く既存で存在するサイトを模写しコーディングするという事です。

Hiko
Hiko

もう少し模写コーディングについて詳しくご説明しますね!

もうご存知の方も多いかと思いますが、HTML,CSSはサイトの外枠(見た目)を作るプログラミング 言語でしたね!

つまりこのような(WordPres.com)サイトの見た目もHTML,CSSで作られています。

模写コーディングとはこのようにHTML,CSSですでに出来上がっているサイトを見ながら、全く同じサイトを作ることを言います。

ネコ君
ネコ君

美術で例えると、モナリザの絵を見ながら同じように書き写すことだね!

模写コーディングとは、「既存で存在するサイトを見る」→「全く同じ見た目を0からコーディングして作る」この作業のことを言います。

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

ではなぜ初心者の方に模写コーディングをお勧めするのかご紹介します。

メリット
  • プロのコーディングを真似することができる
  • 綺麗なコーディングができるようになる
  • コーディング速度が上がる
  • HTMLの組み立て方が上手くなる
  • 仕事の時と似た状況にある
  • 使えるタグやメソッドの幅が増える
  • デザイン力が上がる
  • 完成物をポートフォリオ(実績)として使える
  • プログラミングが楽しくなる

ざっとまとめるとこれだけメリットがあります。

まず始めに参考にするサイトはプロのエンジニアが作ったものなので、今まで使ったこと無いメソッドや組み立て方を学ぶことができます。

コーディングの方法に正解はありませんが、綺麗なコーディングは存在します。

WordPress.comなどの有名なサイトのソースコードを見てみると、無駄のない綺麗なコーディングがされているのが分かるかと思います。

綺麗なコーディングができるようになると、コーディングの速度が上がる、CSSの書く量が減る、HTMLの組み立てが上手くなるようになります。

綺麗なコーディングをするメリット
  • コーディング速度が上がる
  • CSSを書く量が減る
  • サイトの編集作業する際にやりやすい
  • HTMLの組み立て方が上手くなる
  • サイトを見ただけで、瞬時にHTMLの構成が頭に浮かぶ

模写コーディングは個人で仕事を受注した時と同じ状況に近いので、将来フリーランスを目指す方にもオススメの学習です。

その理由として、、、

  1. デザインカンプと呼ばれるサイトの見本を渡される
  2. 見本を参考に同じサイトを作る
  3. 納品

このような流れで作業を進めるので、この状況が模写コーディングと似ているからです。

仕事の際には色が違っていたり、配置がずれていると話にならないので、模写コーディングする際には誰が見ても同じ見た目にするようにしましょう。

もう一点模写コーディングの魅力をお伝えすると、模写コーディングしたサイトを自分の実績として使えるようになります。※著作権には注意してください

初心者の方にはサイト制作の実績が無く仕事が取りにくいですが、模写コーディングしたサイトを自分の武器にして営業している駆け出しフリーランスの方も多いですよ!

効率のいい模写コーディングの学習方法

1.模写するサイトを決める

模写するサイトを決めるのがとても重要で、レベルに合っていないサイトを選んでしまうと100%挫折します。

最初は無理せず自分のレベルに合ったサイト選びが重要です。

↓スキル別にオススメの模写サイトを選んでみました↓

2.検証ツールは使わずに自力で完成させる

初めての方は必ずつまずいて検証ツール(答え)を見てしまいがちですが、我慢して自力で解決するようにしてください。

もしこれが仕事の場合は検証ツールで答えなんて見れません。

そのことを考えてこの学習の過程でググる力(調べる力)を身につけましょう。

HTML,CSSの事であれば必ず答えはGoogleに載っています。

分からない→自分で考える→ググる→実行する

検証ツールは使わずにこの流れで完成に近づけていってください。(色は同じでなくてもいいです)

3.レスポンシブデザインもCSSで実装する

最近ではモバイルファーストなので、レスポンシブ化も欠かせません。

ブレイクポイントは1つでいいので、CSSの@mediaを使ってレスポンシブ対応にしましょう。

画面を最も小さくして幅400pxの時に模写した物と同じになっていればOKです。

CSSでメディアクエリ(@media)を使ってレスポンシブ(スマホ対応)にする方法

4.検証ツールを見て答え合わせ

完成物は見本に90%くらい近ければ、検証ツールを使って答え合わせをしましょう。

このステップが最も重要で、見本と自分でコーディングしたコードとどこが違うのか確認して見ましょう。

おそらく、divタグの使い方が全く違うかったり、classやidの指定、posisionの指定方法がかなり違うかと思います。

検証ツールを見て、知らないメソッドやタグがあった場合はメモして、使い方を調べて次回使えるようにしましょう。

【Chrome検証ツール使い方】初心者が抑えておくべき便利な4つの機能の使い方

このステップでやる事
  • 自分のコードと見本を見比べる
  • HTMLの構造をみる
  • class,idの指定の仕方をみる
  • 知らないCSSメソッドをメモする
  • メモしたものを調べて使い方を学ぶ

5.デザインを参考にする

おそらく模写コーディングにチャレンジしている方は将来フリーランスやエンジニアを目指している方が多いかと思います。

フリーランスを目指す方ならなおさら、サイトの設計やデザインの能力も必要になってきます。

この学習の中でレイアウトやデザインの勉強も同時にするといいでしょう。

ここにはアイコンを使ったら見やすいとか、影やhoverさせると閲覧者にクリックしてもらいやすくなるなとか、デザイン例は無限にあるので、少しずつ吸収していきましょう。

まとめ

いかがでしたでしょうか!

この記事を参考に模写コーディングの学習効果や実践力がつくことがお分かり頂けたかと思います。

3サイトくらい模写コーディンすれば、かなりの実力がつくかともいます。

コーディングするだけ実力もつきますし、実績として使える武器も増えるので、基礎学習が終わった方はぜひチャレンジしてみてはいかがでしょうか!

最後までご覧いただきありがとうございました。

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

↓合わせて読みたいプログラミングの記事↓

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
プログラミング
HikoPro Blog

コメント

タイトルとURLをコピーしました