コーディング規約とは？【html・css】SEO対策にも役立つGoogle推奨のレギュレーションを全公開。

コーディング規約は制作チームとしてコーディングを行う際に欠かせないものです。規約とはルールのことですが、各々がルールなしにコーディングをしていたら何ともバラバラで読み辛いものになってしまいます。
(※当記事で紹介するコーディング規約はHTMLによるコーディング規約です。)

では、どのようなコーディング規約を作れば、読みやすいコードになるのでしょうか？実際に弊社が使っている規約を公開しながら、「本当に優れた規約」を作るための考え方についてお話していきたいと思います。

参考：コーディングの代行会社の選び方！おすすめサービスはここ！

コーディングとは？

コーディング規約について解説する前に、コーディングについて簡単に説明します。

コーディングとは、プログラム言語を使ってプログラミングコードを記述していく作業のことです。
コードを書くことだけを指し、設計やテスト、バグの発見や修正検討といった作業を含みません。
この記事ではホームページを制作するためのhtmlのコードについて解説しますが、一般的はすべてのプログラミング言語においてコード化することをコーディングと呼びます。

コーディングは、プログラムを作成する「プログラミング」作業の一部であり、プログラミングと混同しがちな用語です。
プログラミングというのは、以下のような一連の作業といいます。

上記の４つの工程における２.の「プログラミングの記述」がコーディングになります。
プログラミングの過程において２.のコーディングという作業があるのは多くはWEBの工程、いわゆるhtmlコーディングについての作業が主流です。

それは通常のソフトウェアにおけるCやJavaなどと異なり、WEBはデザイン性を重視します。
PhotoShopやXDなどでWEBデザインされたデータをもとに、正確にブラウザで表示するためにコーディングしていくことは、通常のプログラマーでもできるのですが、コーディングというプログラムよりはすこし単純な作業をコーダーという職種がスピーディーに作業をして効率化を図る必要があるのです。
具体的には、html+CSS+Javascriptという言語を使ってコード化することをコーディング、もしくはhtmlだけの場合はマークアップと呼びます。

このコーディングの作業においてルール化したものがコーディング規約です。

コーディング規約は非常に大切

WEB制作を行う者にとってコーディング規約を作ることは非常に大切なことですが、具体的にどういった目的で規約が作られているのか？について説明します。

コーディング規約とは

まず「コーディング規約」の定義ですが、これは「HTMLをコーディングする上でのルール」のことです。コーディングルール、コーディングレギュレーションなどとも呼ばれています。

コーディング規約を作る理由

コーディング規約はコーディングを見やすくするためのものですが、具体的には以下に挙げるような目的で作られています。

• ・コミュニケーションコストの軽減
• ・品質を一定に保つ
• ・管理しやすくする

一つずつわかりやすく説明します。

●コミュニケーションコストの軽減

コードがあまりにゴチャゴチャして見にくいと、何を書いているのかその不明な点を本人に聞かなければなりません。最初にルールを決めておかないと、たびたび聞く羽目になり、コミュニケーションコストが積み重なってしまいます。しかし、コードの書き方やコメント（メモ）の入れ方を規約として用意しておけば、その後のコミュニケーションコストを軽減できるでしょう。

●品質を一定に保つ

ずっとコーダー専門でやってきた人以外にも、プログラマ、エンジニア、さまざまなバックグラウンドの人がコーディングに関わるものでしょう。何もルールを決めずにコーディングしていると、どうしてもそれぞれの個性が出てきてバラバラなコードになったあげく、エラーなど不都合が出てしまうかもしれません。

コーディング規約を定めておくことで不都合な状況を回避し、品質を均一化する（一定に保つ）ことができるため、安定した開発につなげていけるのです。

●管理しやすくする

何かコードを追加したり、状況に応じて改善したりする際に読みにくいと管理が大変です。毎回手間がかかる、つまり管理コストが高いということになりますし、積み重なっていくとそれはもう大きな損失です。規約を作って守ることは面倒に思えるかもしれませんが、のちのち被るはずの大きな損失に比べれば、規約作りはそこまでの手間ではないでしょう。

優れたコーディング規約の条件

コーディング規約は会社や制作チームごとに多種多様ですが、どういったHTMLコーディング規約が好ましいのか？という共通認識のようなものは存在するのです。ここでは世間で認識されている「優れたコーディング規約」の条件について解説します。

明確な理由があって定められている

コーディング規約は明確な理由を持って作っておいたほうが、より長く、より厳密に守っていきやすいです。もし定められている理由が不明瞭な規約があったらどうでしょうか？規約にあるのならコーダーはそれを守らなければなりませんが、納得できずに「ルールだから」といって守っていても「発展性」からいうと少し残念な点が浮かびます。

コーディングはどんどん進化していくものですし、さらにブラッシュアップしていくには、規約を使っている当人（コーダー）の「よりよくしていきたい」という意識が必要なのです。

規約を守ることはもちろん大切なのですが、真に納得できないものなのにそのまま守っているだけでは何も発展しないので、始めから「皆に納得してもらえる規約」を作るか、皆が精査して改善の声を上げていける環境を作ることも非常に大切でしょう。

メンテナンスしやすい

先に挙げたように、コーディング規約を作る理由の一つは管理しやすくするためです。管理、もっと言うとメンテナンス（保守）しやすい規約ほど好ましいということになります。

作った本人しかそのコードを見ないならあまり問題はないのでしょうが、本来複数人が関わるプロジェクトでは、コーディング担当の人と、メンテナンス担当の人は違うことがあります。制作物をクライアントに納品しても、そのメンテナンスを引き続きお願いされることもあれば、また違う制作会社が担当することもあるでしょう。

本来コーディングは人によって書き方がちょっとずつ違うので、読み取るには苦労が伴うものです。もともと難しいのですから、少しでも見やすいように工夫するのはごく正当なことだと言えます。

そもそも制作チーム内の人同士でも読み取るのが難しいコードなら、なおのことクライアント側が受け取って「読みやすい」と感じるはずがありません。その後のメンテナンスのために規約をしっかり定めていくことが大切なのです。

常に更新され続けている

コーディングしていく中で「これはよくない」「これでは成果が上がらない」といった規約も出てくることと思います。規約は守らなければなりませんが、場合によっては軌道修正していく柔軟さも大切です。

なぜコーディング規約を作るのか？というと、いいものを作るのが目的にあるはずです。制作会社・制作チームによって規約には違いが見られますが、広く評価されているGoogleコーディング規約をベース・参考にしている会社は多くあります。Googleコーディング規約は常にブラッシュアップされており、この点も評価されている部分なので、やはり「常に更新され続けている」というのは相当に重要な点なのだと判断できるでしょう。

規約がそのプロジェクトにとって最適かどうかは、その規約を運用しているコーダーが一番よく分かります。あるプロジェクトが完了した際、以下のようなことを考えるのは非常に有意義なことです。

• ・納得感を持って規約を守れたか？
• ・効果を感じない規約はなかったか？
• ・どんな規約ならもっとよくなる？

こういった部分を見直していくと、自ずと作るべき規約が見えてきます。一度作ったらもう改変したらダメ！いうことはありません。規約はコードを見るすべての人のためにあるものなので、よりよいものにしていく意識は必要です。

世間の流れを汲んでいる

WEBプログラムは時代と共に便利に進化していくものなので、それならば自分達が使うコーディング規約も、それに倣ってどんどん自分達に合うように新しいものを取り込みながら、進化させていくことが大切でしょう。

どんな分野でも同じだとは思いますが、WEBの世界は特に情報の行き来が非常に膨大で活発な分野ですから、進化のスピードも早く、そして激しいものとなります。進化とはそれ自身がどんどん良くなろうとする自然的な現象なので、「進化が早い」というのは本来好ましいことです。

現状に甘んじて、頑なに規約を進化させないでいると世間に取り残されてしまうので、最新のものを追っていくことは必要だと言えます。

W3Cに準拠している

W3CとはWEB業界の標準化を図る団体のことで、現在WEBに関わる世界中の会社・個人に広く影響を与えています。Web技術にはさまざまな仕様や規格が存在しており、際限なくバラバラな規格で製品を作っていると、そのユーザーが困り果ててしまいます。

つまりは互換性の話なのですが、これはあなたが今見ているブラウザを例に挙げるとわかりやすいと思います。たとえばGoogle Chromeでは設計した通りにちゃんとサイトが表示されるのに、Mozilla Firefoxではレイアウトが大きく崩れてしまう。

これではFirefoxユーザーに不親切ですし、ブラウザが違うとデザインも変わるというのはそのサイト自体も不安定というレッテルが貼られてしまいます。だからこそWEBの標準化に従うことはサイトの評価を下げないためにも重要なことなのです。 W3Cではコーディングについても標準化を目指しており、その仕様が公開されています。製品（サイト、サービスなど）の評価を下げないために、まずこの仕様に準拠していくと間違いがありません。

標準化して互換性の高いWebサービスならユーザーに喜ばれますし、サイトならユーザビリティの確保によって検索サイトに評価される・・つまりSEOの強化につながります。そのためW3Cに準拠したコーディングは好ましいとされているのです。

全般的なスタイルルール

優れたコーディング規約とは一体どういうものなのか？が分かってきたものと思いますが、実際にプロはどのようなコーディング規約を使っているのでしょうか？具体的に見たほうがわかりやすいので、ここで弊社が使っているコーディング規約を公開いたします。

プロトコル

埋め込みリソースからプロトコル表記httpsを使用する。(http,https)を省略する書き方は非推奨とする。

一般的な書式ルール

インデント

半角スペース2つ分もしくはTabでインデントする。Tabとスペースを混在させない。

大文字/小文字

すべて小文字のみ使用する。(名称のテキストは除く)

文末のスペース

文末の余計なスペースは削除する。

全般的なメタルール

エンコード

エンコードは、UTF-8（BOM無し）を使用する。

OGPタグの記述

指示がある場合は、下記のOGPタグを記述。

※テキストの_______下線部分は指示書内の文言を入力。
※パスの_______下線部分を適切に入力。

コメント

必要に応じてコードの説明を記述する。

TODOコメント

コードにTODO（TODO内容）をコメントとして記述する。@@のようなものではなくTODOキーワードだけ使用する。

ページャー付きページのcanonicalタグについて

新着一覧、製品一覧などのページでページャーが付くページには、headタグ内にcanonicalタグを記述する。

thumbnailメタタグ

<head>タグ内にモバイル検索結果にサムネイル画像を表示させるためのthumbnailタグを記述する。

HTMLのスタイルルール

ドキュメントタイプ

HTML5を使用する。以下で始まる形式で書く。
すべてのHTMLに<!DOCTYPE html>があるのがGood。
XHTML5はNG。HTMLとしては正しいとしてもvoid要素は閉じないように。いわゆる<br />ではなく<br>を使う。

HTMLのバリデート

可能な限り適切なHTMLを記述する。
パフォーマンスが低下するような場合でない限りは、できるだけ正確に記述する。
「W3C HTML validator」などの検証ツールを使用して確認する。

セマンティックに書く

目的に応じたHTMLを記述する。
例えば、見出しならh*要素、段落ならp要素、アンカーならa要素など目的に応じたHTML要素を使用する。
目的に応じてHTMLを使用することは、アクセシビリティ、再利用、およびコード効率の理由から重要。

マルチメディアの代替コンテンツ

マルチメディアの要素には、代替コンテンツを提供。画像には、意味のある代替テキストをalt属性に記述する。動画・オーディオコンテンツはキャプションを記述する。純粋に装飾的な用途の場合など意味を持たない画像については、代替テキストは使用しない。(alt=””とする)

構成関係の分離

HTML構造・見た目(CSS)・動作(Script)は、厳密に分離し3つの関係はできる限り最小にすること。
見た目に関するものはCSSに、振る舞いに関するものはSCRIPTへ記述する。
構造・見た目・動作を分離することは、メンテナンス上の理由から重要。HTMLドキュメントとテンプレートを変更する方が、スタイルシートとスクリプトを更新するよりもコストがかかる。

実体参照

実体参照は使用しないこと。UTF-8においては、&mdash;, &rdquo;, or &#x263a;のような文字は実体参照を使う必要はない。例外としてHTMLで特別な意味を持つ文字（ < や & など）は適用される。

type属性

CSSとScriptのtype属性は省略する。HTML5ではデフォルトで解釈される。

HTMLの書式

全般的な書式

ブロック・リスト・テーブル要素は改行し、それらのすべての子要素にはインデントを入れる。
（リスト項目間の空白に関する問題が発生した場合は、すべてのli要素を1行にまとめることが可能。）

<section>タグについて

<section>タグを利用する場合、直下には<h1>〜<h6>がないといけない。見出しになる内容がない場合は<div>タグを使う。

<nav><header><footer>タグについて

グローバルナビには<nav>タグを使用する。ページ共通部分のヘッダーには<header>タグを使用する。ページ共通部分のフッターには<footer>タグを使用する。

HTMLクオテーションマーク

属性値にはダブルクオテーションを使う。属性値に使うクオテーションは、シングル ’ よりもダブル ” が好ましい。

外部リンク target=”_blank”について

外部にリンクしている、<a>タグにrel=”noopener noreferrer”を記述する。ただし下記へのリンクに関しては、rel=”noopener noreferrer”は必要なし。

• ・Twitter Facebook Google関係等のリンク
• ・自サイト内でのリンク

CSSスタイルルール

CSSのバリデーション

可能な限り正確なCSSを記述する。CSSバリデーターにバグがある場合や独自の構文を必要としない限りは、正確なCSSコード書くこと。W3C CSS validatorなどのツールで検証テストする。

IDとクラスの命名

IDとクラス名には意味のある名前を使うこと。表示名や不可解な名前ではなく、具体的な名前を付ける。
(これらの名前は最も理解しやすく、変更される可能性が最も低いため。)

IDとクラスの命名スタイル

必要最低限の長さでIDとクラス名を使うこと。

CSSセレクタ

CSSに、h div p等のタグをセレクタに指定しないで、必要に応じてクラスを割り振る。親セレクタも同様にタグ指定はしない。

その他

imgタグのsrcsetの記述

imgタグにはsrcsetを記述しRetinaディスプレイで適切な画像が出力させるようにする。

フォントサイズの指定

vw vhなどのブラウザサイズに依存するサイズ指定はしない。原則としてpx remなどの固定指定を使用。
※デザイン上レイアウトの保持などが困難な場合は、部分的に使うことも可能。

OSおよび対応ブラウザ

※Edge、Chrome、FireFox、Safariは最新版。

レスポンシブにおけるリキッドとソリッド

レスポンシブにおいてブレイクポイントの指定が特段無い場合以下の内容

CMSが入っているページについて

一覧ページの1ページ内表示件数は一定数とは限らない。 1ページ表示件数に満たない場合もある。 表示件数が変化しても、レイアウトが崩れないようにする。 特にグリッド表示のデザインの場合には注意。

一覧ページ・詳細ページともに表示されるテキスト文字数は一定ではない。 文字数が多くなっても、少なくなってもレイアウトが崩れないようにする。 一覧ページ・詳細ページともに画像がアップロードされているとは限らない。

no imageのような形でデザインされている場合はよいが、no imageがデザインされていない（画像自体を非表示）の場合は画像がなくてもレイアウトが崩れないようにする。

ここまでが実際に弊社が使っているコーディング規約のすべてです。先ほど挙げた、優れたコーディング規約の条件を完璧に満たした規約であり、常に見直しをすることで、よりよいコーディングができるように努めています。

コーディングに関する困りごと、ご要望に対応

コーディングでお困りのことはありませんか？弊社ではWEBに関わる方や会社様向けに高品質なコーディングサービスを提供中です。

• ・社内にコーダーがいない、足りない
• ・SEOに強いコーディングを求めている
• ・モバイルマーケティングに力を入れたい
• ・納期が近いけど、外注は手間が掛かる

上記のような困りごと、ご要望のある方のご相談を受け付けています。

↓お問い合わせはこちら↓
コーディングの外注に関するお問い合わせ

社内にコーダーがいない、足りない

デザインをメインに行っている会社だけど、コーディングの量が多い案件が入ってくること、ありませんか？デザイナーに比べてコーダーが少ないと、なかなかコーディングが進まなくて大変ですよね。コーダーを増やしたいけど、いつもコーディング案件が入ってくるわけではないと、採用するのも人件費の問題で厳しい面があることと思います。

コーディングのみでも外注しようと思っても「結構な費用がかかりそう」と考える方も少なくないのですが、弊社は高品質なのに適正価格での受注を実現しています。なぜこの価格で抑えられるのか？というと、以下のような理由によるためです。

• ・効率重視でムダを削減
• ・広告費を削減

今回説明している通り、弊社はコーディング規約を常に最新のものに保ち、時代に合わせて改善、そして作った規約はしっかり守る、を遵守しています。見やすいコードを心掛けているのでムダが生じにくいですし、手間がかかりません。

また、広告費をあまりかけていないのですが、これはより安くサービスを提供したいという思いのためです。今、弊社のブログ・ホームページを見てくれている皆様にこそ、本当にコスパのいいサービスを受けてもらいたい、このために弊社は努力しております。

「安いところはどこも海外スタッフを使っているのでは？」このように思われることの多い業界です。サイト設計やデザインは非常に繊細さが要求されるため、クライアントの要望を微妙なニュアンスも含めて、確実に汲み取らなければなりません。日本語の分からない海外（オフショア）スタッフを挟むとどうしてもそういった意図が伝わらない・・そういった面は確かにあると思います。

しかし、弊社は日本人スタッフのみでも適正価格に抑えているのです。やはりムダが少ないという点が大きく、実際に高いコスパで満足いただけているので、コーダー不足でお悩みの方はぜひ弊社を頼っていただければ損はさせません。

SEOに強いコーディングを求めている

コーディングはSEOにとって重要なポイントの一つとされています。少し前までのSEO評価は被リンクの数（どれだけのサイトにリンクされているか）の比重が大きかったのですが、今最重要とされているのは、「どれだけユーザーにとって有益なのか」という部分です。

他にも「W3Cに準拠したコーディングかどうか」も重視されており、SEOのためにもW3Cに準拠することは大切、というのはWEB制作者にとって一つの常識となっています。 当然、弊社もW3Cに準拠した最先端技術コーディングを心掛けていますし、Webマーケティングを数多くの会社様に提案している実績があるため、より高度なSEO対策を提供可能です。

SEOに強いサイトを作ってもっと集客したい、商品・サービスを訴求したいとお考えの会社様は、ぜひ運営20年で培った経験と知見、そして最新のSEOを常に取り入れている弊社にご相談いただければと思います。

モバイルマーケティングに力を入れたい

近年ではスマホからのサイト閲覧がパソコンを上回っており、これまでPCサイトをメインに考えていた会社様が一挙にモバイルマーケティングに取り組むようになりました。PCサイトは手を抜くわけではなく、PC・スマホサイトどちらも大切にしていく。そうお思いの方には「リキッドレイアウト」を用いた弊社のコーディングサービスがお役立ちするはずです。

リキッドレイアウトとは、ブラウザに合わせてサイトコンテンツのサイズを変動させるデザインのことで、どんなスマホから見ても横スクロールバーが出ない（横にはみ出さない）特徴があります。 現在では小さな画面のタブレット、大きな画面のスマホなど画面サイズが多種多様に存在する時代なので、あらゆるデバイスのブラウザに合わせて変動するリキッドレイアウトの 強みが非常に大きく効いているのです。

弊社コーディングサービスではリキッドレイアウトによって、どんなタブレット・スマホからアクセスしても見やすいサイトを実現し、集客効果を高めます。なお「PCサイトのみ」「スマホサイトのみ」でのご依頼もOKです。どんなサイトにすればいいのか迷っている方であれば、こちらからお客様に合ったものを提案できますので、何なりと不安な点をご相談ください。

納期が近いけど、外注は手間が掛かる

たとえばいくつかの大きな案件を抱えており、納期に間に合うか厳しい状態だけど外注に頼んでも手間が掛かりそう・・そうお困りであれば、弊社コーディングサービスを頼ってみませんか。

弊社では二重チェック体制を取っているので、修正による戻しの可能性を下げ、結果的に納品スピードを早めることにつながっています。コーディング担当スタッフが対応したものを、もう一回別のスタッフが第三者としてチェック。その際にiPhone・Androidなど機種の違いによるレイアウトのブレがないかも、しっかりチェックしています。

こうすることで高品質かつスピーディーな納品を実現でき、実際に多くの迅速さが要求されるご依頼も高品質にて対応してきました。納期が近いけど外注も不安、というお客様はまずは弊社で見積もりいただければと思います。

コーディング規約とは？【まとめ】

コーディング規約を作って、それを守ることにはメリットしかありません。むしろ、何もルールなしにコーディングするのは、WEB制作の現場においてはご法度です。そこはクリアしていても、古い規約や効果の上がらない規約をずっと守っているチームもあるかもしれません。

弊社はコーディングサービスに自信を持っているので、実際に使っている規約も自信を持って公開できますし、お客様からは高品質と満足いただけております。ほかにもWordPressやLP制作のご相談にも対応可能です。WEB制作会社様や広告代理店様などWEB関連のお仕事をしている方は、ぜひ弊社のコーディング下請け・外注サービスをお頼りください。