この記事の目次
模写とは書き写すことです。なぜWEB制作に模写がおすすめなのか、その理由を説明する前にWEB制作のプログラミングについて知っておいてください。
WEBサイトを完成させるには、大まかな4つのステップがあります。
1つ目は、プログラムの設計・構成です。ここでは制作するWEBサイトの目的やお客さんのターゲットなどを決めます。
2つ目は、デザインの作成です。ここでは設計・構成に基づいてWEBサイトのデザインを決めます。
例えばトップページのメインカラーをグリーンにするなど、サイト全体のイメージを具体化します。
3つ目は、コーディング作業です。コーディングとはコードを書くことで、HTMLやCSSといったプログラミング言語を使います。
作成したサイトをWEB上に表示できるようにする作業がコーディングです。
4つ目は、テストとリリースです。完成したサイトがデザインどおりに表示されるかテストし、不具合があれば修正します。
サーバーにアップして作成したWEBサイトを公開すれば完成です。
4つのステップの中で、初心者がつまずきやすいのが3つ目のコーディング作業です。
コードを書くときはHTMLやCSSなどの専門知識が必要になりますが、知識だけではコーディングできません。
実際に試行錯誤しながら何度もコードを書くことによってゴーディングの手法が身につきます。
独学する場合、コーディングの壁を乗り越えれば比較的かんたんにWEB制作ができます。その壁を乗り越える方法が、模写です。
WEB制作における模写のことを、一般的に模写コーディングといいます。
模写コーディングとは、既存サイトを模写しながらコーディングを学ぶことです。すでに出来上がっているサイトのコードを書き写すので、コーディングの実際を学ぶことができます。
既存サイトのHTMLやCSSを書き写しながら参考にするので、初心者は模写コーディングという方法でコードの書き方を覚えてください。
独学でWEB制作の知識を学ぶことと、実際にコードを書いてWEBサイトを制作することは別次元の話です。
知識としてコーディングを学んだあと、何から手をつければいいのかほとんどの初心者は迷います。仮に作業に着手したとしても、かなりの努力と試行錯誤を重ねるはずです。
しかし模写コーディングという方法を使えば、すぐにコードを書き始められます。頭に入れた知識を実際のコーディング作業で再確認し、復習することで、より理解を深めることが可能です。
例えば、コーディング作業ではheader、footer、main、navの使い方、sectionの使い方、リストタグ（ul、li）の使い方など、多くのテクニックが使われます。
模写コーディングのメリットは、コーディング作業に必要なテクニックを初心者でもかんたんに覚えられることです。
既存サイトのコードを書き写すことを模写と説明しましたが、実際には自分のWEBサイトのデザインを考えながらコードを書いていきます。
もし模写のハードルが高いと感じたら、まず写経という方法で慣れてみてください。
写経とは丸写しのことです。写経にはクリエイトという要素はありませんが、丸写しするのでコーディングの実際に慣れるという効果があります。
模写コーディングをする前にやっておくポイントが4つありますので、それについて説明します。
WEB制作にとってデザインの決め方はとても重要です。模写コーディングに取りかかる前に、いろいろなサイトのWEBデザインを見ておきます。
WEB上にはデザインを集めたギャラリーやクリップ集などのサイトがあるので参考にしてください。
ポイントは自分が作りたいと思うWEBサイトを見つけることです。
参考にするサイトが見つかったら、自分なりに構図やレイアウトを分析します。
サイトの目的、ターゲット層の絞り込み、色の使い方、レイアウトなどに注目して分析してください。
ポイントはサイトの個性や他のサイトとの違いを見極めることです。
WEBサイトには大きく分けてLP型、コーポレート型、ブログ型の3つの型があります。
LP型は1ページでサイトを展開するのが特徴で、コーポレート型は店舗のサイトなどに使われることが多く、ブログ型はブログのサイトで多く使われるレイアウトです。
初心者が模写コーディングするならLP型がおすすめになります。ページが1枚だけなので作業自体が複雑ではなく取り組みやすいです。
LP型を集めたデータサイトがあるので、その中から参考にするサイトを見つけてください。
コードを書くといっても、初心者はコード自体を見たことがない人が多いです。
模写コーディングする前に参考サイトのソースコードを見ておくと、作業がしやすくなります。
ソースコードの表示のやり方ですが、Google CromeやMicrosoft Edgeならサイト上を右クリックして、ページのソースを表示、という項目を選んでください。
HTMLで書かれたソースコードを見ることで、サイトの構造がわかります。
初心者が模写コーディングをする時のおおまかな手順を、5つのステップで説明します。
模写コーディングする場合、既存サイトなら何でもいいというわけではありません。自分がWEB制作するサイトと同じ種類のサイトを選びます。
例えば旅行好きの人が旅のサイトを作りたいのなら、旅行や観光などに関するサイトを模写してください。
WEB上にはおすすめの模写サイトを紹介するページがたくさんありますので、それらの中から自分に適したサイトを選びます。
レベルの高いサイトを選ぶと挫折につながりかねないので、初級者向けの模写サイトを選ぶのがコツです。
すでにソースコードの見方を説明しましたが、ここではHTMLとCSSの構造をチェックする方法を説明します。
参考サイトを右クリックすると、サブメニューの中に検証という項目があるのでクリックしてください。
するとサイトの右側にソースコードが表示されます。左側のサイト表示と右側のコードを参照すれば、どのような構造になっているかの比較が可能です。
上にあるタブからElementsを選ぶとHTMLのコードが、Sourcesタブを選ぶとCSSのコードが確認できます。
実際に模写をするときに使用するのがテキストエディタです。HTML言語を編集するツールなので、事前にダウンロードしてパソコンにインストールしておきます。
いろいろなテキストエディタがありますが、初心者におすすめなのはAtomというエディタです。
Atomエディタはシンプルで使いやすく、WindowsでもMacでも利用できます。無料なので気軽に使える点もおすすめです。
参考サイトを右クリックして検証を選び、表示されたソースコードを見ながらテキストエディタで書いていきます。
実際に自分で作業すると、このコードを書くとこのように表示される、と具体的に確認できます。
表示されているソースコードと同じように再現するのがコツです。
書くのが難しいと感じたら、コードをコピペしてテキストエディタに貼り付けてください。
ただし、模写コーディングは自分の手で書いてみることが大切です。
テキストエディタにコードを書いたら、ブラウザに表示させます。
書いたコードに名前を付けて保存しますが、○○.htmlという名前にしてください。
保存した○○.htmlを開けば、書いたコードがブラウザに表示されます。
以上が基本的な模写コーディングの流れです。
同じサイトを何回も繰り返し、慣れてきたら別のサイトでも行ってください。
5つのステップを繰り返すことにより、WEB制作のノウハウが身につきます。
ブラウザにGoogleChromeを使っている人が多いので、ここでは模写コーディングに便利なChromeの拡張機能を5つご紹介します。
サイトの画像を一括保存できる拡張機能です。模写コーディングするときにこの拡張機能を利用して画像素材を集められます。
背景画像を表示
日本語名前の拡張機能ですが、背景画像をたくさん使っているサイトで使うと便利です。
画像を右クリックして保存を選ぶだけで背景画像を収集できます。
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja&
参考サイトに使用されている色が気に入ったとき、この拡張機能でカラーコードを取り出せます。
この拡張機能があれば、サイト内のどの部分でもサイズを測ることができます。
例えば参考サイトの余白など、さまざまなサイズを計測して模写できるので非常に便利です。
https://chrome.google.com/webstore/detail/page-ruler/jcbmcnpepaddcedmjdcmhbekjhbfnlff?hl=ja&
サイト全体をキャプチャーできる拡張機能です。お気に入りの模写サイトを見つけたら、キャプチャして保存できます。
模写サイトは内容が変更されたり表示されなくなったりすることがあるので、保存しておけば安心です。
模写コーディングしたいときにいつでも作業ができます。
サイトを模写するとき、使われている文字のフォントや文字の太さなどを知りたくなります。フォント情報をチェックできるのがこの拡張機能です。
ただし、初心者の場合はフォントまで厳密に模写する必要はありません。まずWEB制作の工程を身につけることが重要なので、このように便利な機能もあるということを知っておいてください。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja&
模写コーディングを終えたら、サイト全体をチェックしてずれがないか確認することが大事です。チェックのやり方を説明します。
表示したときにデザインがズレていると、作成したWEBサイトは台無しです。
模写コーディングなので厳密なチェックは必要ありませんが、大きなズレがあったらどこが悪いのか検討して修正してください。
やり方は、参考サイトと模写サイトをキャプチャして比較します。
目視でのチェックよりも、Perfect PixelというGoogle Chromeの拡張機能を使うとかんたんにデザインの比較チェックができます。
WEBサイトはパソコンだけでなくスマホやタブレットでも表示します。
それぞれのサイズできちんと表示できるか、またパソコンからスマホ、スマホからタブレットなどへのレスポンスがスムーズかどうかもチェックしてください。
とくにパソコンからタブレットへのレスポンスは表示が崩れやすいので要注意です。
ウィンドウサイズを変更しながら確認すると、表示の崩れをチェックできます。
一般の人はいろいろなブラウザでWEBサイトを見ていますので、それらで表示や動作崩れが起きないかチェックします。
代表的なブラウザのGoogle Chrome、Microsoft Edge、Internet Explorer、Safari、Fire Foxなどで表示させて目視確認してください。
初心者はコードを打ち込むときに間違うことがあります。とくに多いのがタグのエラーです。
目視でチェックするのは難しいので、タグのエラーをチェックするツールを利用してください。
おすすめはGoogle Chromeの拡張機能で、HTMLエラーチェッカーです。
模写コーディングでもコードの誤字や脱字をチェックする習慣をつけておくことは大事です。
コピペする場合でもミスは起こりますので、模写したテキストとオリジナルのテキストを比較してチェックしてください。
この場合に利用すると便利なのが、テキスト比較ツールのdifff（デュフフ）です。
ボックス内に比較するテキストをコピペすると、異なる個所がハイライトされるのでかんたんにチェックできます。
Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。
LIGブログに掲載されました
