この記事の目次
WEB制作には欠かせない作業であるコーディングと、その役割について説明します。
アクセス数の多いWEBサイトは、魅力的なデザインのものが多いです。しかしデザインを作成しただけでは、WEBサイトはできません。
コーディングとは、作成したデザインをブラウザ上で見えるようにする作業のことです。
コーディングの具体的な作業は、コードを書くことです。
コードを書くためにはマークアップ言語という記述方法を使います。
これにより文字を太くしたり、見出しをつけたり、リンクを設定したりして、デザインをブラウザ上で見えるようにします。
マークアップ言語はコンピューター言語の一種で、HTML、その改良版であるXML、XHTMLなどが代表的な言語です。
一般的にコーディングのことを、わかりやすくHTMLコーディングと呼ぶこともあります。
おもにHTML言語を使ってデザインや文章を作成していくのが、コーディング作業です。
WEB制作に必ず出てくるのがプログラミングという用語です。
プログラミングとはWEBサイトの設計から完成までをプログラムすることで、プログラミング言語を使って作業します。
プログラミングがWEBサイト完成までのプログラム全体を意味するのに対して、
コーディングは、プログラミング言語を記述する（コードを書く）作業のみを指します。
コーディングで使う言語はすでに述べたHTMLと、CSSです。
コーディングではコードを書きますが、使用する言語はHTMLとCSSです。ここでは2つの言語の違いについて説明します。
HTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）のことで、WEB制作の基本となる言語です。
ハイパーテキストという言葉からわかるように、文章の構造を作成するために使います。
CSSとはCascading Style Sheets（カスケーディング・スタイルシート）のことで、HTMLで作成した文章を黒から赤に変えたりするときに使います。
HTMLは文章の記述を担当しますが、CSSは文章の表示やデザインなどを担当して、文書の見栄えをよくする言語です。
HTMLだけでコーディングしてもWEBサイトのデザインを作れますが、WEBサイトの情報が乱れて検索エンジンに引っかからなくなったり、ブラウザによっては表示が変わったりします。
デザイン担当のCSSと組み合わせるメリットは、WEBサイトをしっかり表示させて検索効果をアップさせることです。
コーディングにはHTMLとCSSが必要ですが、写真がスライドするなど複雑に動くデザインのWEBサイトを作りたいときは、さらにJavaScriptという言語が必要になります。
ここでは入門編としてシンプルなWEB制作を目指しますので、JavaScriptについて知りたい方はプログラミング言語のサイトを参考にしてください。
人それぞれにコードの書き方が違っても、コンピューターに指示すれば同じ処理ができます。
しかし、コードを書く場合にはコーディングルール（コーディング規約）という記述作法に従うのが一般的です。
なぜルールが必要なのか、そのメリットについて説明します。
数人でWEB制作をしたり、チームでプロジェクトを進行させたりする場合、コードの書き方がバラバラだとチーム内のコミュニケーションが取りにくくなります。
コーディングルールに従った方が作業はスムーズになります。
あとでコードの修正が必要になったとき、コーディングルールに従って記述されていれば修正しやすくなり、メンテナンスも簡単です。
チームにあとからスタッフが参加した場合、記述がバラバラだと理解するのが困難になります。コーディングルールに沿って書かれていれば、作業を引き継ぐときも苦労しません。
個人でWEB制作を行う場合でも、コーディングルールを決めておけばパターンを再利用できます。
いくつもWEB制作をするときなど、すでに書いたコードのパターン（の一部）を使い回せば作業がスピーディーになり、効率的です。
WEB制作のたびに違うコードの書き方をしていると、その都度いろいろ調べたりするので効率が悪くなります。
チーム作業でも個人作業でも、あらかじめコーディングルールを決めておくことはとても大切です。
WEB制作をする上で重要なのはSEO対策です。せっかくWEBサイトを立ち上げても検索順位が低いとガッカリします。
SEO対策でポイントになるのがコーディングで、コーディングルールには一般公開されているものや会社独自のものなどいろいろです。
ここではGoogleが推奨しているコーディングルールについて説明します。
Googleは世界中で多くの人が使っている検索エンジンなので、コーディングでのSEO対策をするには適しています。
また依頼されてWEB制作をした場合、コードの書き方に意見や注文が出たときにもGoogleが推奨しているという理由で説得しやすいです。
コーディングに使用する言語はHTMLとCSSですが、Googleコーディングルールにはそれらのフォーマットとスタイルの規則について定義してあります。
例えば、HTMLのコーディングルールではHTML5を使用するなどです。
HTML5とはHTMLの第5版のことで、この言語を使えば今まで表現できなかった動画、音声などをかんたんに実現できます。
CSSのコーディングルールでは、有効なCSSを使用することやW3C CSS検証ツールなどを使用してテストすることなどについて説明されています。
さらに詳しく知りたい場合は、サイト上にGoogleが用意したGoogle HTML/CSS Style Guideが掲載されていますので参考にしてください。
英文ですが翻訳されたサイトもあります。
WEB制作にあたって実際にコーディングする場合、知っておくと役立つツールがありますので紹介します。
WEBデザインを作成するときに便利なツールです。個人ブログをはじめ、企業などのホームページを作るときに使われています。
世界中のWEB制作に使用されるほど有名なツールで、オープンソースなので誰でも自由に改良して使えます。
デザインの無料テンプレートがたくさん用意されており、それらを活用すればWEBサイトのデザインもかんたんに制作が可能です。
便利な機能が充実しておりセキュリティの面でも安心できるので、WEB制作のコーディングツールとして覚えておいてください。
WEB制作に必要な編集機能や管理機能、表示機能などが充実している総合的なツールです。
HTMLやCSSのコードをイチから書き込む必要がなく、デザインビューという画面上でそのまま文字が記述できます。
CSSの場合などは、文字を装飾するフォーマットが用意されているのでデザインを制作するのがとてもかんたんです。
基本的なHTMLやCSSの知識は必要ですが、コーディング作業が苦手だったり、直感的に作りたかったりするときには役立ちます。
比較的かんたんにWEB制作ができる本格的なツールです。
文章を編集するためのツールをテキストエディタといいます。いろいろなテキストエディタがありますが、代表的なのがWindowsに付属しているメモ帳です。
メモ帳でもコードを書けないことはありませんが、WEB制作のツールとして使うのなら本格的なテキストエディタを選んでください。
テキストエディタにはコーディングするのに便利な機能が備わっており、文字数によって改行や折り返しができたり、文字に色をつけたり、コード入力の補助機能があったりするので重宝します。
コーディングについて説明してきましたが、WEB制作の大まかな流れがわかるとさらに理解が深まります。
初心者にもわかりやすい5つのステップです。
WEB制作で一番最初にすることは企画を立てることです。重要なのはWEBサイトの目的で、何のためにWEBサイトを制作するのかを考えます。
とくに必要な要素は、WEBサイトを見てもらいたい人を明確化することです。
企画ができたら、設計の段階に進みます。設計でメインとなる作業はサイトマップの作成です。
サイトマップとはWEBサイトの全体の構造図で、ページとページのつながりがひと目でわかるように設計します。
企業のホームページを例にすると、構造図の一番上にトップページ、その下にくるのが会社概要、事業内容、お問合わせなどのページです。
このように階層に分けて設計していきます。
デザインの制作は初心者にとって難関です。デザインが苦手な人は、お気に入りのサイトを見てマネをしてください。
いろいろなサイトを見て気に入ったデザインを組み合わせ、お好みのものに仕上げるという方法がおすすめです。
はじめからオリジナリティを求めるのではなく、とりあえず自分のWE制作を目標にします。
デザインが用意できた次の段階がコーディング作業です。コーディングすることによってデザインがWEB上に表示されるようになります。
すでに説明したように、HTMLで文章を構造化し、CSSでデザインを整えます。
コーディングが終了した段階で、ブラウザにサイトが表示されるようになります。あとはサーバーにデータをアップしてドメイン設定などをするだけです。これで自分のWEBサイトをネットに公開できます。
しかし、このままではブログの更新や新着記事の表示、問い合せフォームの設置などがうまくいきません。
そこで、すでに紹介したWordPressなどのツールを使ってWEB制作を完成させます。
コーディングについて知っておくと役立つ便利な情報がありますので、いくつかをご紹介します。
せっかくWEBサイトを立ち上げるのですから、見てくれるお客さんを増やしたいものです。
検索エンジンの評価を低くさせるのは複雑なHTMLやCSSです。複雑すぎるとサ
イト表示のパフォーマンスも悪くなります。
複雑化を避けるようなコーディングをしてください。
クロスブラウザチェックというのは、コーディングが終わったサイトをいろいろなブラウザでチェックすることです。
Google Chrome、Internet Explorer、Edge、FireFoxなど一般的に使用されているブラウザで表示させます。
これによってサイトをチェックし、レイアウトの乱れなどがあれば修正が必要です。
コーディングを学ぶにはいろいろな方法がありますが、独学するのならオンライン学習サイトが役立ちます。
有料のサイトもありますが、基礎的なことだけを学ぶのなら無料でも学習が可能です。
すでに説明したようにWEb制作の全体の流れを知るだけでも、オンラインの学習サイトは適しています。
たくさんの学習サイトがあるので、自分に合ったサイトを選んでください。
独学は挫折しやすいので、成功させるためのポイントを3つご紹介します。
1つ目は、目的をしっかりと決めることです。なぜWEB制作をするのか、目的が明確であればモチベーションがあがります。
2つ目は、制作の期間を決めることです。これを決めないと、ダラダラといつまでも続いてしまいます。学習効率のアップには期間設定が必要です。
3つ目は、ある程度のコストをかけることです。費用を惜しんで独学を選ぶケースもありますが、正しい教材を手元に置いていつでも見られる環境にしてください。
気に入ったオンライン学習サイトがあれば有料でも活用すべきです。
Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。
LIGブログに掲載されました
