模写コーディングのおすすめサイト。初心者向けから難しいサイトまで

HTML・CSSの入門書を読み終えました。 次のステップとしてサイトの模写コーディングをやろうと思っています。

初心者向けに模写コーディングに適したサイトを教えてください。 あと、どこまで正確に模写すればいいのでしょうか?

今回はこのような疑問に答えていきます。

HTML・CSSの基本を学んだ次のステップとして、 Webサイトの模写コーディングはとてもおすすめです。

でも初心者がいきなり難易度の高いサイトを模写するのは難しいと思います。 そこでこの記事では、模写コーディングのポイントや、 初心者向けのおすすめサイト、 中級者向けのおすすめサイトを紹介します。

この記事を読むと、 どのような順序で模写コーディングを進めていけばいいのかイメージできます。

模写コーディングする際のポイントとルール決め

ポイント

模写コーディングをする場合、「画像やフォント、レスポンシブ対応をどうするか」等の ポイントがいくつかあります。

そうしたポイントに対して自分のレベルに応じたルールを決めておくと 効率良く模写コーディングができます。

まずは大まかなレイアウトから

いきなり細部からコーディングするのではなく、 まずは大きな枠組みをとらえてください。

ヘッダー、本文、サイドバー、フッターといった大きな枠組みをまず把握して、 大枠から作っていきます。
次に大枠をいくつかの部分にわけて中枠を作成します。その後に細部をコーディングしていきます。

レスポンシブ対応

現在はほとんどのサイトがレスポンシブサイトですから、 レスポンシブ対応は大事なスキルです。

初心者段階では、出来ればレスポンシブ対応しましょう。 難しければPC用のみや、スマホ用のみでもOKです。

中級者レベルではレスポンシブ対応は必須です。 余力があればタブレット用もやりましょう。

画像などの資材

画像などの資材は、そのサイトからダウンロードして作成してもOKです。 サイトの画像とは違う自分の好きな画像を使ってもOKです。

サイトの画像を使う場合はChromeの拡張機能「Image Downloader」を使うと便利です。 一括で画像を取得できます。 このツールで取得できない画像(背景画像)は、 ディベロッパーツールで画像を確認してダウンロードしてください。

フォントや色

フォントや色に関してはツールやブラウザの開発ツールを使って抽出してください。 ツールを使わずに、フォントや色を見た目で当てようとするのは時間の無駄です。

フォントを取得するツールはChromeの拡張機能「What Font」を使うと便利です。

ピクセルパーフェクト

ピクセルパーフェクトとは、文字通りピクセル単位で正確なサイトを作ることをいいます。

初心者レベルではピクセルパーフェクトは目指さない方がいいです。 細かい部分に時間がとられすぎてしまいます。

中級者レベルではなるべくピクセルパーフェクトを目指しましょう。 ただし完璧を求めて時間をとられすぎるのはやめたほうがいいです。 その辺りは自分のサジ加減できめてください。

初心者向け:模写コーディングのおすすめサイト

模写コーディングのルール

初心者向け模写コーディングルールのおすすめは次の通りです。

  • 出来ればレスポンシブ対応(PC用、スマホ用だけでもOK)
  • 画像はダウンロードする
  • フォントや色はツールを使って取得する
  • ピクセルパーフェクトは目指さない
  • 本文の内容は適当に〇〇〇とかでもOK

LP(ランディングページ)型

LP(ランディングページ)とは縦に長いページで、 企業がサービスや商品を売ることを目的として作られたページです。

HTMLコーディングの案件で一番多いのがLPの作成依頼です。 ですからLPを作る練習はしておきましょう。

さっそく紹介していきます。

★ Chatwork

Chatwork

https://lp.chatwork.com/7chatwork/

Chatworkのランディングページです。
HTML・CSSだけの、初心者にもってこいのページです。

注意点は1点だけで、 このサイトはデフォルトフォントとして、Adobeの「貂明朝(てんみんちょう)」 という有料フォントを使っています。 ですから、フォントに関しては他の明朝体フォントで代替してください。

★ LOOKME

LOOKME

https://lp.lookme.me/

LOOKMEというマッチングサイトのランディングページです。 これもシンプルで簡単なページですが、タブの切り替えにjQueryを使っています。

コーポレート型

コーポレート型というのは企業のWebサイトの事です。
企業が自社情報を載せるためのサイトを作る場合は、このコーポレート型が多いです。 普通は複数のページから構成されています。

無料ホームページテンプレート 1カラムタイプ

1カラムタイプ

https://template-party.com/template/tp_biz46/tp_biz46_blue/

Template Party」という無料ホームページテンプレートを多数配布しているサイトがあります。 その中のテンプレートの1つです。

初心者向けということで1カラムタイプの企業サイトを選びました。 トップページ以外は2カラムのページもありますから、 トップページとコンタクトページだけでも模写してみると良いと思います。

株式会社マネジメントサービスセンター

MSC

http://www.msc-net.co.jp/

【MSC】株式会社マネジメントサービスセンターのWebサイトです。
今まで紹介してきたサイトと比較すると難易度は少し上がりますが、 難しくはありません。 1カラムのページだけでも模写してみることをおすすめします。

中級者向け:(少し難しい)模写コーディングのおすすめサイト

模写コーディングのルール

中級者向け模写コーディングルールのおすすめは次の通りです。

  • レスポンシブ対応必須
  • 画像はダウンロードする
  • フォントや色はツールを使って取得する
  • ピクセルパーフェクトを目指す
  • 本文の内容はコピペして同じ内容にする

LP(ランディングページ)型

ラクーンドッグ

ラクーンドッグ

http://jaljan.co.jp/tomesoderemake/

ラクーンドッグという着物リメイク・留袖リメイクサイトのランディングページです。

1つのページにコンセプトから、料金、Q&A、問い合わせフォームの全ての内容が 詰まっていて、JavaScriptを使った動きもあるサイトです。

コーポレート型

無料ホームページテンプレート 2カラムタイプ

2カラムタイプ

https://template-party.com/template/tp_job1/tp_job1_red/

先程紹介した「Template Party」の無料ホームページテンプレートです。 今回は赤をベースとした2カラムタイプの企業サイトを選びました。。 レスポンシブ対応もしっかりと模写してみてください。

YCU 横浜市立大学

横浜市立大学

https://www.yokohama-cu.ac.jp/

横浜市立大学のWebサイトです。 黄緑をベースとした見やすいサイトで、JavaScriptを使った適度な動きもあります。 トップページだけでも模写コーディングしてみると勉強になります。

実務をこなすためには模写コーディングだけでは足りない

仕事

いずれは実務でHTMLコーディングを行って、お金を稼ぎたいと思っている方も多いと思います。 特に模写コーディングをやるほどの意欲のある方ならなおさらです。

ですが、 実務レベルだと模写コーディングだけでは足りないのが現実です。

クラウドソーシングサイトのHTMLコーディング案件を見てみるとわかるのですが、 実務ではIllustrator、Photshop、XDで作ったデザインを基にHTMLコーディングするのが普通です。

デザインデータから画像を切り出したり、フォントを調べたりという作業が必要となります。 つまり、デザインデータの取り扱いもマスターする必要があります。

模写コーディングはこの部分(デザインデータの取り扱い)を省いていますから、 実務をこなすには模写コーディングだけでは足りないのです。

ですから、順番として


模写コーディング
 ↓
デザインデータの取り扱い方法(Illustrator、Photoshop、XD)
 ↓
実務

このようなステップで進むのがおすすめです。

まとめ:模写コーディングは段階的にステップアップする

HTMLコーディングのスキルアップの方法として模写コーディングはとてもおすすめです。

ただしいきなり難しいサイトを模写しても挫折するだけですから、 自分のレベルに合った模写コーディングをしましょう。

模写する際にはレスポンシブ対応、ピクセルパーフェクトなどのポイントがいくつかあります。この点も徐々に難易度を上げて課題をクリアしていきます。

本格的にコーディング学びたい方には プログラミングスクールで体系的・効率的に学習するのも一つの方法です。

テックアカデミーの「フロントエンジニアコース」なら、 HTML/CSS、JavaScript、jQuery、Vue.js、Bootstrap、Firebase、Web APIなどの フロントエンドエンジニアになるための知識を体系的に、効率よく学ぶことができます。 まずは無料体験を受けてみるのがおすすめです。

TechAcademyの無料体験はコチラ

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