【初心者向け】Webサイトのコーディング勉強法【Progateの次のステップ】

WEBサイトのコーディング勉強法

こんにちは、WebエンジニアのKosaku(@bouru_02)です。

「WebエンジニアになりたくてHTML/CSSを勉強したけれど次に何をすればいいのかわからない…」

このページでは、HTML/CSS/javascript(jQuery)の基礎の勉強を終えた人の次のステップとしておすすめの勉強法であるWebサイトの模写コーディングについて書いていきます。

ProgateやドットインストールでHTML/CSS/javascript(jQuery)を一通り終えている人が対象です。

HTML/CSSってなに?という人は、先にProgateドットインストールなどのサービスで基礎を学びましょう!

Webサイトの模写コーディングは実践的勉強になる

Progateやドットインストールでは画面の指示に従ってコードを書いてきたかと思いますが、
実際のコーディングは指示なしで進めることになります。

かといって、いきなり一からサイトを作っていくのは難易度が高すぎます。

そこで、おすすめなのが既存のWebサイトを模写していく勉強法です。

模写といってもソースコードを見て写経するのではなく、ソースコードを見ずに同じサイトを作っていきます。

元のサイトがあるのでデザインを自分で考える必要もなく、わからなかったときに答えがみれるので、基礎を勉強した次のステップに最適です。

Progateやドットインストールが学校の授業だとすると、模写コーディングはいわば模擬試験です。


最初はランディングページの模写から始めよう

Webサイトの模写コーディングで初心者におすすめなのがランディングページの模写です。

ランディングページ(以下LP)とは正式には検索結果やSNSにからアクセスしたときに最初に表示されるページを指す言葉で、一つの商品やサービスを売るための、一枚の長いWEBページを指す場合が多いです。

LPの例:学習塾のLP(http://kobetsu-michishirube.com/)

ここではLPとは1枚のトップページというぐらいの認識でオッケーです。

LPは一枚のページで作られているため、複数のページで構成されているサイトと比べて簡単に制作できます

そのため、初心者がコーディングの勉強に使うのにおすすめです。

Webサイト模写コーディングの進め方

初めてのLP模写におすすめなのがプログラミングスクールiSara様(https://isara.life/)のLPです。

iSaraのLPは、デザインもシンプルでjQueryを使ったタブ切り替え、ページトップに戻るボタン、アコーディオンパネルなど様々なサイトで頻出の機能が入っているので初めて模写コーディングをおこなうサイトに適しています。

余談ですが、iSara運営の方々が書いているブログが駆け出しWebエンジニアにはとてもためになるのでチェック推奨です。以下の記事は特に参考にさせていただいています。ありがとうございます!

https://showtaki.com/first-work-skills/

https://manablog.org/web_study_map/

1.テキストエディタの準備

ここからはWebサイト模写コーディングの具体的な進めかたを説明していきます。

Progateではブラウザ上でコーディングをおこなうので必要ありませんでしたが、
ローカル環境でコーディングをおこなうためにはテキストエディタの準備が必要です。

コーディングに使われるテキストエディタは無料有料様々なものがありますが、特に決まりはないので好きなものを使ってください。

僕は「Sublime Text」を使用しています。使い方は以下の記事で詳しく説明されています。

2.ファイルの準備

次に、HTML/CSSを書いていくためのファイルを用意します。

任意の場所にフォルダを作成し、その中に「index.html」、「style.css」というファイルを作成します。

index.htmlにHTML、style.cssにCSSを記述していきます。

3.ツール、素材の準備

模写元サイトのソースコードを見ずにコーディングをおこなうといっても、目視だけでフォントや色を正確に再現することは不可能です。

なので、フォント、画像素材、色、幅はChromeの拡張機能を使用して元サイトのものを使用します。

こちらについては、はにわまん(@haniwa008 )さんの記事でとても分かりやすく説明されています。

https://haniwaman.com/replication-coding/#i-2

上記の記事で紹介されているツールは以下の通りです。

  • フォントを調べる     → 「 What Font
  • サイト上の画像を一括保存 → 「 Image Downloader
  • 色を調べる        → 「ColorPicker
  • 幅を計測する       → 「Ruler

4.コーディング

ツールを導入したら、いよいよコーディングです。

基本的には元サイトのソースコードを見ずに作ります。

しかし、どうしてもわからない箇所は見てもオッケーです。実際に僕もトップの画像のウィンドウ幅が変わったときの動きがどうしてもわからなくてソースコードをみました…!


どうしても中央からずれてしまうトップ画像

わからない箇所に時間をかけすぎてももったいないので、どうしても行き詰まったら答えをみましょう。

ただし、コピペして終わりではなく、きちんと見て理解してくださいね。

また、最近はほとんどのサイトがレスポンシブ対応になっているので、模写をする際もレスポンシブデザインで作りましょう。

個人的には、このレスポンシブデザインがとても難関でした。始めからレスポンシブの構造を意識して作らないと、めちゃくちゃややこしくなるので気をつけてください(笑)

模写コーディングのポイント
  1. 基本的に元サイトのソースコードは見ない
  2. ただし調べても解決法がわからなければ見てもよい
  3. レスポンシブデザインで作る

コーディング完成後

模写コーディングが終わりLPが完成したら、模写元サイトのソースコードを確認してみましょう。

見た目が同じようにコーディングしていても中身のソースコードは元サイトと全然違うということが多いと思います。

元サイトのコードは、ほとんどは自分で書いたコードよりきれいで効率よく書いてあるので勉強になります。

模写コーディング作成例

僕が模写コーディングをしたサイトをいくつか紹介します。

参考サイト:PAS-POL様(http://pas-pol.jp/)
難易度  :iSaraのLPと同程度。jQueryのスライダーの勉強になる。

参考サイト:Asoview様(https://www.asoview.com/brand/sports-tourism/)
難易度  :iSaraのLPよりも少し難しめ。positionの勉強になる。

これらのサイトは難易度もそれほど難しくないため、次に模写コーディングをおこなう際に参考にしてみてください。AsoviewのLPのほうが少し難易度が高いです。


次のステップへ

模写コーディングは、基礎の勉強に比べると一気に難しくなりますし、時間もかかります。しかし、一つのサイトを模写するたびに、確実になんらかの気づきがあり成長を感じます

その気づきが次の模写コーディングの際に役に立ちますので、模写コーディングは一つのサイトだけではなくいくつかやってみましょう!

ここまでの学習後、初めての案件をとるまでの流れについては以下の記事をご覧ください!

【実体験】Web制作未経験から独学で仕事をとるまでの全行程【4か月】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です