模写コーディングでプログラミングのスキルUP！おすすめサイト5選

「プログラミングの練習には模写コーディングがいいらしい」
「模写コーディングって何から始めればいいの？」
「模写するのにどんなサイトを選べばいいのかな？」

HTMLとCSSがわかるようになると、もっとプログラミングができるようになりたいと思うのではないでしょうか。

スキルを上げる練習方法はいろいろありますが、おすすめは模写コーディングです。

この記事では、プログラミングのスキルをレベルアップさせたい人のために、模写コーディングのやり方について解説します。

模写コーディングにおすすめのサイトもご紹介しますので、ぜひ読んでみてくださいね。

▼ ▼ 限定公開中 ▼ ▼

模写コーディングってどういうもの？メリットは？

まずは、模写コーディングとは何か、模写コーディングと写経は何が違うのかなどをご紹介していきます。

模写コーディングとは

模写コーティングとは、実際にあるWEBサイトをまねして作ることです。

完成したサイトを見ながら全く同じものを作ります。

パソコンの検証ツールを使うと、どのようなコードが使われているのか確認できるのですが、このツールは使わずに自分で考えながら作ります。

ちなみに検証ツールは、Windowsの場合、WEBサイトを開いているときに画面上で右クリックすると、メニューの1番下に「検証」と表示されます。

ここをクリックすると、そのサイトのコードが確認できますよ。

Macの場合は、「表示」→「開発/管理」→「ソースを表示」または「要素の検証」の順にクリックしていくと見れます。

模写コーディングをすると、WEBサイトがどのような構成になっているのか、どんなコードが使われているのかわかるようになるのです。

写経とは？

写経というと、お経を書き写すイメージが頭に浮かぶと思いますが、コーティングの練習では、コードを書き写すことを写経と呼びます。

検証ツールを使えば、使用されているコードを表示できるので、そのコードを打ち込んでいきます。

模写コーディングは自分で考える作業でしたが、写経は正解を見ながらそのまま書き写していくのです。

ただ書き写すだけで効果があるのかと思うかもしれませんが、正解がわかるので、実際こんなコードが使われているのかということが確認でき、知識を増やすことができます。

写経もコーディングの練習方法の1つです。

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

模写コーティングをすると次のようなメリットがあります。

実際に使われているWEBサイトをまねていくので、プロのテクニックを体感することができます。

どんなコーディングのパターンが使われているか、レイアウトはどうなっているかなどがよくわかります。

また、テキストのフォントや種類、背景の色に何が使われているのかなども確認していくので、WEBデザインの基本もわかってくるのです。

お手本となるサイトを見て、自分で考えながら作成するため時間はかかりますが、その分、プログラミングをよく理解することができます。

サイトを1つ模写できた後は格段に実力が上がるので、プログラミングのスキルアップに効果的な練習方法です。

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

模写コーティングには次のようなデメリットがあります。

わからないことは調べていいのですが、どうしてもわからない所も出てきます。

いろいろ調べても、結局正解にたどり着けないという場合もあるのです。

試行錯誤することで知識も増えて練習になるのですが、完璧に同じサイトを再現するのが難しいという点はデメリットです。

また、もしお手本のサイトと同じものができたとしても、とりあえず1つのパターンがまねできたというだけで、プロのレベルになったわけではありません。

プロはいろいろなパターンに対応できますが、模写コーディングをしただけではプロの応用力まで身につくわけではないのです。

模写を始める前に必要なこと

初めて模写コーディングをする人にとって完璧な模写は難しいので、途中で行き詰まってしまう場合があります。

なので、始める前に準備して欲しいことをご紹介しますね。

模写の準備①ルールを決める

どのくらいのレベルの模写を目指すのか、ルールを決めておくのがおすすめです。

ポイントは、最初はできるだけ簡単にしておくこと。

例えば、最初はレイアウトだけやってみる、テキストは「XXXXXX」で字数だけ合わせるなど、簡単なことから始めるといいでしょう。

それができたら、少しずつレベルアップしていきます。

テキストのフォントの種類とサイズもまねる、多少のズレは気にしないなど、自分のレベルに合ったルールを設定するのがポイントです。

最初から「答えは絶対見ない」のような厳しいルールを決めるのはNGです！

模写の準備②HTML/CSSは学んでおく

HTMLとCSSは、WEBサイトを作るときに必要な言語です。

HTMLは文書の構造や記述、CSSは色やフォントの大きさなどデザインを調整します。

模写をするには基本的なコーディングの知識が必要です。

何も知識がないままやろうとしても、結局HTMLとCSSを勉強しなくちゃ始まらないということになってしまいます。

なので、模写コーディングをする前にHTMLとCSSは学んでおきましょう。

模写の準備③Chromeの拡張機能をインストールしておく

模写コーディングをするには、お手本となる元のサイトの画像をコピーしたり、同じ大きさのレイアウト、同じフォントや色のテキストなどを再現しなければなりません。

これらを全部自分の目で見分けて正確に同じものを作るのは本当にたいへんです。

そのため、模写コーディングをするときはGoogle Chromeの拡張機能を使うと便利です。

ここでは5つの機能を紹介しますので、ぜひ参考にしてみてください。

Image Downloader

Image Downloaderとは、WEBページ上にある画像を一括でダウンロードできるGoogleの拡張機能です。

Chromeウェブストアのサイトを開いて、「Chromeに追加」をクリックするとすぐにインストールできます。

WEBサイトを開いてから「拡張機能」の「Image Downloader」をクリックすると、そのページで使用されている画像一覧がメニューで表示されるので、必要な画像を選んでダウンロードするだけです。

画像を1枚ずつクリックしてコピー＆ペーストしなくて済むのでとても便利ですよ。

参考：Image Downloader

WhatFont

WhatFontは、WEB上のテキストのフォントが何かを判別してくれる機能です。

フォントの種類、サイズ、色などを表示してくれます。

模写をするときに、この文字は何のフォントが使われているのか、正確に見分けるのは意外と難しいです。

探しているフォントが見つからなかったり、似ているけど本当にそのフォントなのかわからないこともあります。

WhatFontを使えばすぐにどのフォントかわかるので、探す時間が省けますよ。

参考：WhatFont

Smart Page Ruler

Smart Page RulerはWEBサイトで使用されているテキスト欄や画像、余白などの長さを測ってくれる機能です。

「拡張機能」から「Smart Page Ruler」を選んだあと、見ているページのどこでもいいので1回画面上でクリックすると、ポインターを移動するだけで自動で長さが表示されるようになります。

同じものを作成するには、大きさや長さが正確にわからないと作れませんよね。

Smart Page Rulerは1px単位で測ってくれるので、模写したもののサイズをピッタリ合わせたいときに使えます。

参考：Smart Page Ruler

Smart Color Picker

Smart Color Pickerはテキストや画像にどんな色が使われているのかを判別してくれる機能です。

画面上でクリックすると、テキストや画像のカラーコードが表示されます。

例えば色が白の場合、「#FFFFFF」「rgb (255,255,255)」などいくつかのカラーコードが表示されますので、必要に応じて使いたいコードを選ぶことができます。

ツールを使わず、まったく同じ色を見つけるのはたいへんなので、Smart Color Pickerをインストールしておくといいでしょう。

参考：Smart Color Picker

Responsive Viewer

携帯やパソコン、iPadなど、それぞれサイズは違いますよね。

Responsive Viewerは、サイズの違うデバイスの画面で、広告やWEBサイトがどのように見えるのか比較するのに使います。

同時に複数の画面を表示できるので、違いがはっきりわかります。

レスポンシブデザインのサイトを模写する場合は、元のサイトと自分が作ったサイトを比べるのにとても便利です。

参考：Responsive Viewer

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

始める前の準備ができたら、次は模写コーティングのやり方を見ていきます。

主な流れは下記のようになります。

それでは、1つずつ項目を見ていきましょう。

Step1.模写するWEBサイトを探す

まずはお手本となるWEBサイトを探します。

初めから構成やデザインが複雑なサイトを選んでしまうと途中で挫折してしまうので、最初はシンプルで真似しやすいサイトを選びます。

ペライチのような1ページだけのサイトや、デザインカンプと呼ばれるホームページの見本を活用するのもいい方法です。

デザインカンプは無料で配布されているものがあるので、ワイヤーフレームだけ作ってみたり、完璧な模写にトライしてみてもいいでしょう。

最初は自分のレベルに合ったサイトを選ぶことが大切です。

記事の後半ではおすすめサイトもご紹介しますね。

Step2.エディタを準備する

模写するにはコードを書いていく場所が必要です。

Macならテキストエディット、Windowsならメモ帳が初めから入っているので、そちらにコードを書き込んでもOKです。

また、プログラミングで編集作業は必要になるので、編集用ソフトのエディタをインストールしてしまってもいいでしょう。

MacでもWindowsでも使えるエディタは下記のようなものがあります。

Visual Studio Code

Brackets

Step3.基本になるファイルを準備する

このままコーディングを始めてもいいのですが、下記のような基本的なファイルを準備してから作業に入ると、効率よく模写を始めることができます。

• index.html：WEBサイトのトップページ
• css：大きさや色などのスタイル
• img：画像

index.htmlを設定すると、WEBサイトにアクセスしたときにトップページが表示されます。

cssはWEBサイトの見た目を調整するコードです。

imgのファイルには使用する画像を入れます。

このように基本的に使うファイルは用意しておいた方がコーディングがスムーズに進みます。

Step4.レイアウトを確認する

見本にするWEBサイトが見つかり、エディタと基本ファイルが準備できたら、いよいよ模写コーディングです。

まずはサイトの骨組みとなるレイアウトを確認します。

元のWEBサイトをよく見ながら、全体のレイアウトを大まかに把握していきます。

主な構成要素は次の通りです。

• body : サイトの要素のすべてが含まれている範囲
• header : タイトルの部分
• main : 本文
• section : 見出しのある文章の部分
• nav : メニューの部分
• footer : サイトの最後の部分

手書きでいいので、レイアウトを紙に書き出してみると、サイトの構成が一目でわかります。

大まかな骨組みがわかったら、コードをエディタに書き込んでいきましょう。

Step5.ソースを見ないで自力で作成してみる

レイアウトのコードが入力できたら、今度はそれぞれの部分のコンテンツを作っていきます。

テキストや見出しのフォント、サイズ、色などをお手本を見ながら自力で再現するのです。

検証ツールの正解は見ないでやりましょう。

その際、自分で決めた模写コーディングのルールに合わせて作成します。

Step6.検証ツールで合っているか確認する

headerからfooterまで一通り模写が終わったら、ここで検証ツールを使います。

元のサイトと自分が模写したサイトを比べて、どこが違うのか確認していきます。

Responsive Viewerを使って画面を比較してもいいです。

模写は手入力しているので、タイプミスの可能性はあります。

レイアウトの幅、余白、色、フォント、サイズなどを見ていき、違うところがあれば修正していきましょう。

模写コーディングおすすめサイト5選

模写をするときにお手本となるWEBサイトを探しますが、どのサイトにしたらいいのか迷ってしまう人もいるでしょう。

そんなお悩みを解決するために、模写コーディングにおすすめのサイトをご紹介します。

初級編、中級編、上級編とレベル別でまとめたので、ぜひ参考にしてみてください。

初級編：PAS-POL

文章も少なめで余白もあり、とてもシンプルな構成です。

同じパターンの繰り返しが多く、初心者でもまねしやすいサイトです。

下層ページもいくつかありますが、レイアウトがほとんど同じなので、練習するにはちょうどいいですね。

PAS-POL

初級編：デイトラ

株式会社デイトラが模写コーディングの素材と課題を無料で配布しています。

ProgateのHTML/CSSコースを修了して、初めて模写コーディングにチャレンジするくらいの人が対象です。

ただ、WEB上に公開されていないので、検証ツールで正しいソースを確認することができません。

4時間で完成できたら合格です。

HTMLとCSSを学んだ後に1度チャレンジしてみてくださいね。

デイトラ

中級編：Xeory

サイト型とブログ型の2種類のWordPressテーマを無料で配布しています。

2つのテーマのデモサイトがあるので、どんなテンプレートなのか確認してからダウンロードできます。

このテーマは公開されているため、検証ツールが使えます。

ひな型なのでサイトの基本構成がわかりやすくなっており、練習に向いているサイトです。

Xeory

中級編：JIN

JINもWordPressテーマを提供していて、主にブログを作ることを目的としています。

こちらは無料ではなく、ダウンロードする場合は有料です。

ただデモサイトは無料なので、こちらを使用して模写コーディングができます。

JINには、デザイン切り替え機能、解説ボックス、見出しデザインなど、たくさんの機能が実装されているので、難易度は初級よりも高くなります。

JIN

上級編：iSara

ランディングページ型で縦に長く、コンテンツは多いです。

ホームページと比べると機能はシンプルなので、あまり難しいコードは使われていません。

初級と中級の模写ができた人が練習するのにちょうどいいサイトです。

また、iSaraのサイトを模写すると、主催者が提示してる条件をクリアすれば、実績として使用できるというメリットがあります。

練習してスキルが上がってきたら、iSaraの模写コーディングにトライしてみるのもいいでしょう。

参考：iSara

まとめ

この記事では、プログラミングの練習として模写コーディングという方法を解説しましたが、なんとなくやり方がイメージできたでしょうか。

WEB上に実際にあるサイトを使ってできるので、誰でも試すことができます。

基本は自分の目で確かめて模写していきますが、今では便利なツールがたくさんあります。

Chromeの拡張機能を使って、フォントの種類や色、サイズなどを確認しても大丈夫です。

まずは自分にできそうだなと思うシンプルな構成のサイトから模写してみてくださいね。