コーディングって何？初心者向けのコーディング基礎知識
そもそもコーディングとは何か？
実はデザインの制作が完了しただけでは、ネットショップサイトはまだできていません。
そのデザインをもとに、HTMLやCSS（のちほど詳しく解説します）といったマークアップ言語（コーディングをするための記述方法）で見出しをつけたり、リンクを設定したり、文字を太くしたりして、制作したデザインをブラウザ（Webページを見るソフト）で見える形にすることをコーディングといいます。
コーディングは、HTMLやCSSの仕様に沿って形成していく作業で、Web制作には欠かせない工程のひとつです。
これを読めば、コーディングの基礎から、具体的なポイント、コーディングを外注する場合に気をつけるべき点までわかるようになるでしょう。
初心者だけでなく、すでにある程度わかっているという方も、確認のチェックリストとして是非ご活用ください。
コーディングの基礎知識
デザインが終わったら、制作したデザインをそのままWeb上で表現していきます。
ここでは、制作したデザインをどうやってWeb上に表示させるかを考えます。
このとき必要になってくるのがHTMLとCSSの知識です。
HTMLとは
Webページを作るための最も基本的なマークアップ言語のひとつです。
コンピューターが人間に代わって文書を適切に分析できるようにするための言語です。
CSSとは
おもにHTML文書に対する表示、およびデザイン（文書の見栄え）などを指定します。
たとえば、HTMLで記述した文章を黒色から赤色にしたいと思った場合、CSSの記述を使って変更します。
特に動きのないサイトを作るならHTMLとCSSだけでじゅうぶんですが、よくトップページで使われているような写真がスライドして動くデザインをしたいときは、JavaScript（jQuery）などの知識も必要になってきます。
また、コーディングは、好き勝手に記述していいものではありません。
Webサイト制作では、複数の人たちが集まって作業を分担することも多いです。
ルールがないと記述がバラバラになりメンテナンスも悪くなります。
一貫性のあるWebサイトを構築するために、会社やプロジェクトによって、あらかじめコーディングルールを決めておくことで、メンテナンスや拡張など容易にできるようになります。
また、途中からプロジェクトに参加した方がスムーズに入っていけることも重要になってきます。
今回は検索エンジンのGoogleが推奨しているHTML、CSSのコーディングルールを一部ご説明します。
また、どうしても専門的な知識が必要なため、すべてを一度に理解することは大変です。
ここでは、コーディング方法には下記のような考え方にもとづいて制作する必要があるという認識のもと、読み進めてください。
- 参考：Google推奨コーディングガイドライン（Google）※すべて英文です。
Googleが推奨するコーディングルール
HTMLのコーディングルール
HTML5を使用する
以下ではじまる形式で書き、XHTML5は不可。
<!DOCTYPE html>
HTML5とは
Webページの記述などに用いるマークアップ言語、HTMLの第5版の事です。
今までWeb上で表現できなかった技術が、この言語を使うことによって、動画・音声・グラフィックの描画をかんたんに表現することができます。
画像にはalt属性を追加する
画像には、意味のある代替テキストをalt属性として、動画・オーディオコンテンツにはキャプションを記述してください。
装飾的な用途の場合など意味を持たない画像については、代替テキストは記述せずにalt=””としてください。
▼よくない例
<img src=”fruit.png”>
▼よい例
<img src=”fruit.png” alt=”フルーツ”>
CSSのコーディングルール
HTML上で<p id=”text”>サンプルテキスト</p>と記述したとします。
CSSでサンプルテキストを赤に変えたいと思った場合、CSSファイルで下記にようにidを指定することによって変化させることができます。
ただし、idは文書内で同じ値のものは一度しか使うことができないので、同じ値を使いたい場合は、classを使うといいでしょう。
#text {
color: #f00;
}
id、classの命名
idとclassにはちゃんと意味のわかる名前を使うことが推奨されています。
見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前をつけるといいでしょう。
▼よくない例（何を表しているかわからない）
#abc-2016 {}
▼よくない例（見た目を表しているため）
.button-green {}
.clear {}
▼よい例（役割を表しているため）
#gallery {}
.video {}
▼よい例（汎用的な名前のため）
.navi {}
.page {}
コーディングのポイントとクロスブラウザチェック
複雑なHTMLやCSSは、検索エンジンの評価が低くなるだけでなく、サイト表示時のパフォーマンス低下にも繋がるため、下記の点を注意してコーディングをするといいでしょう。
また、HTMLは文書構造、CSSはデザインをあてるものという役割をしっかり考えたうえでコーディングをすることがポイントです。
HTML
・無駄な改行や余計なスペースをなくし、見出し（h1、h2など）、段落（p）、
リスト（ul、liなど）、定義（dl、dt、dd）などの役割にあったタグで正しく構築する。
CSS
・外部ファイルに書いてリンクさせる。
・汎用性のあるセレクタ(*1)はclass(*2)で指定する、font（size、weight、styleなど）や
backgroud（color、image、position）などの複数あるプロパティ(*3)は、
まとめて記述するなどの簡潔な書き方をする。
(*1) たとえば、body {color:red;}というスタイルがあった場合、bodyの部分がセレクタです。
(*2) 同じスタイルを複数に適用したい場合は、.sample {color:red;}のような記述方法で指定します。
(*3) たとえば、p {color:red;}というスタイルがあった場合、colorの部分がプロパティです。
クロスブラウザチェックの必要性
デザインをもとに一通りコーディングが終わったら、クロスブラウザチェックをしましょう。
クロスブラウザチェックとは、様々なブラウザで制作したサイトをチェックすることで、おもにInternet Explorer（Edge）、Firefox、Google Chromeで確認することが一般的となっています。
また、2017年10月現在のブラウザシェアはGoogle Chromeが39.14%、Internet Explorer(11.0)が23.04%、Firefoxが15.7%、Edgeが4.85%となっています。
せっかく制作したネットショップが、ブラウザによってレイアウトが崩れ商品の購入ができないとなると、いい商材を扱っていても売り上げに繋がらなくなってしまいます。
それを未然に防ぐためにも、クロスブラウザチェックは重要です。
コーディングを外注先に依頼
デザイン制作同様、コーディングの知識も専門的で難しく、自分ではできない場合があります。
その場合は、コーディングを外注先へ依頼し、作業してもらうこともひとつの手段でしょう。
コーディングだけ請け負ってくれる制作会社も多数あり、makeshopでもコーディング代行プランというものがあります。
また、コーディングを外注先に依頼する場合は、下記のような点にも注意するといいでしょう。
・Webサイトを使って集客をしたいのか、売り上げに繋げたいのか、などの目的を見積もり時にはっきりと伝え、どのような方針やスケジュールでいくのかを確認しましょう。
・依頼したらそれで終わりではありません。
制作スケジュールを確認して、こちら側で発生する作業（おもにWebサイトに載せる原稿の用意など）を遅れないように準備していく必要があります。
・一度作って終わりというわけにはいかないので、Webサイトを作ったあとの運用まで見越して、フォローやフォロー時の料金まで確認しておくといいでしょう。
コーディングの記述が整っていると、検索エンジンであるGoogleからの判定もよく、上位表示してもらえる可能性が増え、集客効果も高まる可能性があります。
まとめ
おおまかではありますが、コーディングについていかがでしたか？
コーディングとは、Web制作には欠かせない工程のひとつであり、記述が整っているとサイト表示時のパフォーマンスも上がり、検索エンジンで上位に表示してもらえる可能性が増えて集客効果が高まる可能性があります。
さらに、Googleが推奨するコーディングルールにもとづきネットショップを構築することによって、一層上位表示に効果的なWebサイトを作ることが可能です。
また、自分でコーディングができない場合は外注先に依頼するのもいいでしょう。
その場合は、Webサイトでの目的を明確に伝えることと、しっかりと制作スケジュールを把握し、制作が円滑に進むよう、こちら側も努めなければいけません。
そして、Webサイトを作ったあとの運用のことも考え、外注先からのフォローやフォロー時の費用まで考慮しておくといいでしょう。
以上のことをふまえ、コーディングを進めていただきたいと思います。
makeshopで作成されたショップ様のHTMLやCSSの質問にお答えしております。
