【模写コーディング】おすすめの練習サイト【入門編~上級編】

最終更新日

模写コーディングの練習におすすめのサイトを難易度にあわせて、入門編、初級編、中級編①、中級編②、上級編の5つ紹介します。

コーディングを始める前に必要な「レイアウト構成の考え方」についても、全てのサイトで解説していますので、サイト制作に関する理解が深まるかと思います。

また、全ての練習課題にXDのデザインカンプがついていますので、模写ではなくデザインカンプからコーディング練習をしたい方もぜひチャレンジしてみてください。

もちろん、練習で制作したサイトをポートフォリオとして使用していただいてもOKです。

それでは、さっそく【入門編】から順に紹介していきます!

【入門編】ウォーミングアップ用の模写サイト

HTMLとCSSの基礎学習を終えた後、最初の模写コーディングにおすすめなのがこちらの練習サイトです。

プロフィールサイト(1カラム / レスポンシブ)

【入門編】プロフィールサイト

デモはこちらです。

1カラムのシンプルなプロフィールサイトです。

コーディング量が少なく構成もシンプルなので、基礎学習を終えたばかりの方が模写するのにぴったりのサイトですが、学べる内容はいっぱいつまっています。

<課題内容>
ロードバイクが趣味の友人から、自転車を紹介するための簡単なWebサイトを作ってほしいと頼まれました。
サイトに掲載するのは、簡単な自己紹介と自転車の写真だけです。

<設定単価>
コーディング1ページ:1万円

<学べる内容>

  • header、footer、main、navの使い方
  • sectionの使い方
  • リストタグ(ul、li)の使い方
  • inline-blockの使い方
  • Flexboxを使用した横並びの配置
  • CSSで画像を丸く表示
  • レスポンシブ対応

全て基礎学習で学んだ基本的なタグや技術だけで作れますので、復習もかねてチャレンジしていただければと思います。

模写コーディングの学習は、こちらからスタートできます。

<模写コーディングの練習>

コーディングに悩んだら、まずは以下のレイアウト構成の解説を参考にしてみてください。

<レイアウト構成の解説>

サイトをどういったレイアウトで組んでいけばよいかという考え方を説明しているので、コーディングのヒントになるかと思います。

はじめて模写コーディングをするという方は、まずは上記で紹介した入門サイトがおすすめです。

補足として、

模写コーディングのやり方を詳しく知りたいという方は、「模写コーディングの手順」と「コーディング例」について解説してる、下記のページを参考にしてみてください。

以上で、入門編は終わりです。

次は初級編です。

【初級編】簡単なHTMLとCSSでできるLPの模写サイト

模写コーディングの初級者におすすめの練習サイトです。

ポートフォリオサイト(1カラム / レスポンシブ)

【初級編】ポートフォリオサイト

デモはこちらです。

こちらは1カラムのLPタイプのポートフォリオサイトです。
入門編よりも少しコンテンツのボリュームが増してますが、基礎のHTMLとCSSだけでコーディングできます。

<課題内容>
東京の西麻布を拠点に活動するフォトグラファーから、ポートフォリオ用のサイトを作ってほしいと依頼がありました。
プロフィール欄の他に、作品の紹介、近況の活動を知らせるニュース、コンタクトフォームが必要とのことです。

<設定単価>
コーディング1ページ:5万円

<学べる内容>

  • header、footer、main、navタグを使ったレイアウトの組み立て方
  • sectionの使い方
  • h1、h2タグの使い方
  • メインビジュアルの全幅表示(高さ固定)
  • PCとスマホでの画像切り替え
  • リストタグ(dl、dt、dd、ul、li)の使い方
  • Flexboxを使用した画像の横並び
  • コンタクトフォーム(form、input、textarea)の使い方
  • レスポンシブ対応

画像をFlexboxで横並びにしたり、dl、dt、ddタグでニュースを作ったりと、サイト制作でよく使われる定番の内容が多く含まれています。

入門編よりは少しコーディングの量がありますが、こちらも複雑なレイアウトや技術は使用していないので、初心者の方には作りやすいサイトになっています。

模写コーディングの学習は、こちらからスタートできます。

<模写コーディングの練習>

コーディングに悩んだ際のレイアウト解説は以下です。

<レイアウト構成の解説>

初級編は以上になります。
ここまでできたら、模写コーディングにも少し慣れてきたのではないでしょうか。

次は中級編に進みます。

【中級編①】少し複雑な2カラムの模写サイト

中級編は、2カラムのブログ形式のサイトです。

1カラムのLPタイプの模写コーディングを終えた方におすすめの練習サイトです。

WordPressの制作でもよく使われるレイアウトですので、学習しておくと実務でも役立ちます。

ブログサイト(2カラム / レスポンシブ)

【中級編】ブログサイト

デモはこちらです。

サイドバーのある2カラムのレイアウトもWebサイト制作の定番レイアウトです。

難しいタグは使用していないのですが、2カラムのレイアウトは作り慣れていない人にとっては勉強のやりがいがあるレイアウトです。

学習の内容は下記の通りです。

<課題内容>
旅するブロガーから旅行記事を公開するためのブログサイトの制作依頼です。
最終的にはWordPressで制作を行いますが、まずはトップページのみHTMLでコーディングを行います。レイアウトはブログ定番の2カラムです。

<設定単価>
コーディング(トップページのみ):5万円

<学べる内容>

  • 2カラムのレイアウト
  • article、asideの使い方(article、aside)
  • Flexboxを使用した横並びの配置
  • スマホ時のグローバルナビ横スクロール
  • Google Fontsの使い方
  • Twitter埋め込み
  • レスポンシブ対応

こちらのサイトでは、ariticleタグとサイドバーのasideタグを使用しています。
ワードプレスでブログ形式のテーマを作ったりするときなんかによく使うタグです。

その他に、Google Fontsを使用したりツイッターの埋め込みなども行っています。

模写コーディングの学習は、こちらからスタートできます。

<模写コーディングの練習>

レイアウト解説は以下です。

<レイアウト構成の解説>

個人的には、中級編の模写コーディングをたくさんやるのが一番レベルアップできるのではないかと思っています。

なので、中級編はもう1つ紹介しておきます。

【中級編②】実務を想定したグリッドレイアウトの模写サイト

実サイトでも多く見られるグリッドレイアウトの模写コーディングです。

初級者を抜けて次のステップへ進みたい方におすすめの練習サイトです。

ストアサイト(グリッドレイアウト / レスポンシブ)

【中級編】ストアサイト

デモはこちらです。

学習のポイントは、Flexboxを使用したグリッドレイアウトハンバーガーメニューのコーディングです。

こちらの練習では、トップページだけでなく実サイトと同じように全ページ制作します。

<課題内容>
南青山で家具やインテリアの企画、販売を行う会社から、製品を紹介するためのWebサイトを制作してほしいと依頼がありました。 オリジナルの製品を一覧で見せられるよう、グリッドレイアウトでコーディングを行います。

<設定単価>
コーディング:15万円
・トップページ
・Productsページ
・Products詳細ページ(16ページ)
・Aboutページ
・Companyページ

<学べる内容>

  • グリッドレイアウト
  • 固定ヘッダー
  • リストタグの使い方(dl、dt、dd、ul、li)
  • Google Mapのモノトーン化と埋め込み
  • ハンバーガーメニュー
  • レスポンシブ対応

コーディングのポイントを下記に記載していますので、こちらから学習をスタートしてください。

<模写コーディングの練習>

レイアウト解説は以下です。

<レイアウト構成の解説>

中級編は以上です。

最後は、上級編です。
上級編の模写は、jQueryの基礎学習を終えた方が対象です。

【上級編】jQueryを使用した上級者向けの模写サイト

上級編は、jQueryを使用したWebサイトの模写コーディングです。
JavaScript、jQueryの基礎学習を終えた方におすすめの練習サイトです。

メディアサイト(グリッドレイアウト / レスポンシブ)

【上級編】メディアサイト

デモはこちらです。

写真や記事のサムネイルをタイル状に配置するグリッドレイアウトです。
メディアなどのサイトでよく使用されています。

上級編のサイトでは、特にjQueryの学習に重点をおいています。
よく使用されている定番のjQueryを何個か盛り込みました。

<課題内容>
スニーカー専門のニュースメディアの制作依頼です。
最終的にはWordPressで制作を行いますが、まずはトップページのみHTMLでコーディングを行います。
動画の埋め込み、カルーセルスライダー、グリッドレイアウトなどコーディングのポイントがたくさんあります。

<設定単価>
コーディング(トップページのみ):12万円

<学べる内容>

  • グリッドレイアウト
  • 動画の埋め込み(video)
  • ハンバーガ―メニュー(css、jquery)
  • カルーセルスライダー(jquery)
  • スムーススクロール(jquery)
  • スクロール時の画像フェード表示(jquery)
  • レスポンシブ対応

jQueryに関しては、デモの動きだけで模写するのはかかなり難しいので、ネットで調べながら同じような動きになるように実装してみてください。

検索するときのキーワードは、「カルーセルスライダー」「スムーススクロール」など、上記の学習内容のワードを参考にしてください。

<模写コーディングの練習>

<レイアウト構成の解説>

コーディング力を向上させる3つのポイント

模写コーディングのおすすめサイトの紹介は以上ですが、最後にコーディング力を向上させるための3つのポイントについてお話ししておこうと思います。

コーディング力を向上させる3つのポイントは下記の通りです。

  • 自分のスキルにあったサイトから順に模写していく
  • 適正なHTMLとCSSで記述されたサイトを模写する
  • 色々なレイアウトのサイトをたくさん模写する

順に説明していきます。

自分のスキルにあったサイトから順に模写していく

模写コーディングは、必ず自分のスキルにあったサイトから順に進めていってください。

最初から自分のスキル以上のサイトにチャレンジすると、挫折の原因になってしまいます。

はじめて模写コーディングをする際は、かなり簡単なサイトからはじめてみるのがおすすめです。

目安としては、基礎学習の際にサンプルサイトを作ったりすると思うのですが、それに近いレベルのサイトです。

とはいえ、公開されているサイトの中に、なかなかそんなサイトはないと思うので、その場合は先ほど紹介した 入門編 の模写にチャレンジしてみてください。

適正なHTMLとCSSで記述されたサイトを模写する

模写コーディングを行う際は、なるべく適正なHTMLとCSSで記述されたサイトを模写するようにしてください。

コーディングが終わった後に、模写サイトのソースコードを見ながら自分の書いたコードのチェックを行うかと思いますが、正しくないHTMLで記述されたサイトで学習すると間違ったコードを覚えてしまいます。

適正なHTMLで記述されたサイトの見極め方ですが、1つの目安としてWeb標準であるW3Cの仕様にのっとってコーディングされているかどうかという見かたがあります。

W3Cの仕様でコーディングされているかどうかのチェックは、W3C Markup Validation Service で行えます。
Addressの入力欄に対象サイトのURLを入力して、checkボタンを押してみてください。エラーがある場合は、下にエラーの内容が表示されます。

ちなみに、当サイトで公開している模写練習用サイトのソースコードも全てこちらでチェックしています。

※2021年1月29日付けで、WHATWGのHTML Review DraftがW3C勧告となりました。

とにかく色々なレイアウトのサイトをたくさん模写する

コーディング力の向上に一番かかせないのはやはり練習です。
とにかく色々なサイトを作ってコーディングに慣れることです。

コーディングした分だけコーディング力が身につきます。

自分のスキルにあったサイトから順に模写する
適正なHTMLで記述されたサイトを模写する

この2つを意識しながら色々なサイトの模写に取り組んでみてください!

模写コーディング練習 課題一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

コーディング解説

関連記事