【初心者必見】模写コーディングのやり方

プログラミング, ウェブ

模写コーディングのやり方

コーディングを初めて始める方はどのように学習していくか分からない方も多いかと思います。
コーディングを習得するため最短でインプットできる模写コーディングのやり方をこの記事を通じてアウトプットさせていただきます。

WEBサイトってどうやってつくればいいの？・・・
どのように勉強していけばいいかわからない・・・

など、初めてWEBサイトやページを作成する為には、どのように技術や知識をインプットし、アウトプットさせれば良いか分からない方も多いと思います。
そんな方にオススメの「模写コーディング」のやり方や手順についてご紹介させていただきたいと思います。

模写コーディングのやり方をご説明します

公開されているWEBサイトを見ながら、全く同じようにWEBサイトやWEBページを作成することを「模写コーディング」といいます。
模写コーディングすることによりHTMLやCSSでサイトの設計がすぐにイメージできるようになります！
まずは、自分自身でいいなぁと思うサイトの設計を模写することが重要だと思います。
自分の好きなサイトは見てても飽きないですしね！模写コーディングを行う方法としてメリットや手順をわかりやすくご説明させていただきます。

▼こちらの記事ではレスポンシブコーディングについて詳しく解説しています！
レスポンシブコーディングの手順を徹底解説！

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

模写コーディングのメリット
  • 1.コーディングのスピードが速くなる
  • 2.HTMLタグ、CSS、動的なスクリプトなどの技術が向上する
  • 3.WEBページのレイアウトやデザインスキルが向上する
  • 4.業界として今後重要になってくる「UI/UXデザイン」の知識が増える
  • 5.SEOも考慮したマークアップを理解する事ができる

※ちなみに模写コーディングは実績やポートフォリオとしては使えないので、提示する際はオリジナルのWEBサイトやWEBページを作成することをオススメします。

コーディングの上達方法として、こちらの記事も読んでいただけると嬉しいです！
くりのすけさんからも記事をシェアしていただき驚きました！
少しでもコーディングにつまずいている方の助けになればいいかと思います。

僕自身はゼロベースでエディターのみでコーディングし、モバイルファーストのレイアウトでポートフォリオサイトを作成しました。
サイト立ち上げ後約1ヶ月でGoogleにもMFI（モバイルファーストインデックス）に無事認定されました。現在はサイトを立ち上げればディフォルトでモバイルクローラーになります。
WEBサイト制作やコーディング案件などの仕事も請け負う事ができるようになるので自分でサイトを作成することをオススメします。

模写コーディングの手順

模写コーディングの手順

初めの入り口は無料でプログラミングが学べるサイトの利用がオススメです。
コーディングを始める前に自分が模写コーディングができる段階まで達しているか自己分析をしましょう。
ある程度学習が進んでしないと必ず挫折するので、Progateやドットインストールなどプログラミング学習サイトでHTMLやCSSを学びましょう！

手順1.プログラミング学習サイトで基礎を学ぶ

ドットインストールの特徴

業界でも最大級の授業数から、自分にぴったりの授業を探したい方。初心者の方でもおすすめの1本の動画が約3分間で見飽きないよう構成されており、サクッと学びやすく感じました。
無料の範囲で学習した方は中上級者向けのレッスン動画をプレミアムサービスにて配信されているので、より高度で複雑なロジックを使ったプログラミングや、スマートフォンアプリの作成方法などを実際にコードを書きながら学習できるようなコースもあります。
ドットインストールで学習を始めたい方はこちら

Progateの特徴

動画よりも学びやすい、「スライド学習」を採用しました。自分のペースで学習できること、復習しやすいことが強みの学習サイトです。実際にプロダクトを創りながら学ぶから、使えるスキルが身につきます。
ブラウザ上で、コードを書いて結果も確認ができ、クリアするごとにモチベーションも上げながら基礎技術を深く学んでいけると感じました。
Progateで学習を始めたい方はこちら

▼こちらの記事ではプログラミングが学べるサイトをご紹介しています！要チェック！
プログラミングが学べる学習サイト5選

手順2.エディタを準備

エディタを準備

sublimetext・vscodeなどの軽量テキストエディターを使用する事をオススメします。
メモ帳というテキストを編集するためのソフトがインストールされていますが、標準テキストエディターよりも機能の豊富で最近のフリーエディターは驚くほど機能的なので、まずはインストールしてみましょう！
特に僕がオススメするエディターは「sublimetext」です。
インターフェースは英語ですが、プラグインを追加すれば日本語にもする事が可能です。

現在のエディターシェアでダントツは「VisualStudio Code」らしいです。。
Microsoftなので将来的にもサポートや機能拡張など見据えればこのエディターは将来的にも安泰かと思います。

▼「VisualStudio Code」
インストールはこちらから

▼「SublimeText」インストールはこちらから
インストールはこちらから

手順3.模写するサイトを決める

模写するサイトを決める

自分自身でカッコいいなぁ、見やすいサイトだなぁと思うサイトでもいいですし、下記のようなギャラリーサイトを参考にしてもらっても良いかと思います。
現在はモバイルファーストでのレスポンシブデザインが一般的なのでモバイルを主体に考えてコーディングを行う事が重要になります。

レスポンシブレイアウトに特化したギャラリーサイト
レスポンシブレイアウトにおすすめのギャラリーサイトはこちら

LPに特化したギャラリーサイト
LPページのレイアウトにおすすめのギャラリーサイトはこちら

コーディングしながら崩れている場合など、Chromeデベロッパーツールなどで検証していき崩れを適宜修正することも重要だと思います。

Chromeデベロッパー検証ツール

僕自身はまずはプレビューせず、エディターにHTMLを全て記述し、CSSファイルまでを完成させるまでプレビューしなくなりました。最後にブラウザで確認をおこない、検証モードで微調整をしています。

模写コーディングのチェックポイント

レイアウトやデザインをイメージする
崩れた際などの自己解決スキルを向上させる

▼こちらの記事ではコーディングが上達するコツをご紹介しています！要チェック！
爆速！コーディングが上達する6つのコツをご紹介！

手順4.模写コーディングにおすすめのツールを使う

ここでは模写コーディングをする際に、画像ファイルなどやページ全体のキャプチャーを用意する事が簡単にできるツールをご紹介させていただきます。今から紹介するツールはGoogleChromeの拡張機能のため、ブラウザはGoogleChromeの使用を推奨します。

Image Downloader

WEBサイトに表示される画像ファイルを一気にダウンロードが可能です。
セレクトオール＞ダウンロードで参照するサイトの画像全てをローカル（デスクトップ）などに保存してください。
Image Downloaderインストールはこちら

Full Page Screen Capture

完成版のサイト全体のキャプチャーと模写したサイト全体のキャプチャーを照らし合わす際に便利です。ボタン一つで画面すべてを一枚の画像として保存ができます。
完成版の画像を見ながらコーディングするのもオススメですね。
Full Page Screen Captureインストールはこちら

PerfectPixel

完成版と模写したページの相違点が一目瞭然になります。完成版のキャプチャー画像をロックし、自分の組んだページと見比べることも簡単にできるツールです。
初心者の方はこんなに違いがあるの！？っと驚くかもしれません。コーディングに慣れればこのツールは使用しなくても良いと思います。
PerfectPixelインストールはこちら

手順5.模写コーディングの答え合わせ

模写コーディングの答え合わせ

一通り完成したら、Chromeのデベロッパーツール(検証ツール)を使い答え合わせをしていきましょう。この工程はとても重要で、実務としても検証ツールを使用し調整をおこないます。
自分がコーディングしたものと参考にしたサイトのソースを見比べて記述の違いをチェックしていきましょう！こんな簡潔に記述ができるんだぁと新たな発見があったりとインプットしちゃってください！タグの使い方やCSSのプロパティの記述ルールやアニメーションの適用方法など答え合わせをする事でたくさん学ぶ事ができます。
基礎からしっかり学びたい方はまずは未経験からでも挫折させないサポートが特徴のプログラミングスクールtech boost（テックブースト）はエンジニアが選ぶプログラミングスクールで１位を獲得したこともあるスクールなのでおすすめです。
言語もHTML、CSSなどのフロントエンドの言語からRuby、PHPなどのバックエンドの言語まで学ぶことができます。これからはエンジニアの需要がますます伸びてくると思います。僕自身もIT関連の仕事をしていますが、WEBは学んで損はないと思います。

まとめ

僕自身は最初は1ページコーディングするのに4時間～6時間かかっていましたが、今は一般的なLPページでは1時間以内に作成する事ができるようになりました。WEBサイトに関しても1日〜2日で立ち上げることも可能になりました。
本当にこればっかりは数をこなす事がとても重要です。
今後はSEOを考慮したコーディングやページスピードの最適化などコーディングと言っても様々な技術があるので突き詰めていくべきだと思います。
実際に検索上位の最適化など成果が出るとモチベーションも上がりますしコーディングも楽しくなってくると思います。
この記事を参考に少しでもコーディングに対する楽しさを知っていただければ幸いです。

おすすめの記事

プログラミング, ウェブコーディング, 模写, やり方, 手順, エディタ, 検証

Posted by bolgly｜ブログリー