MENU

前段

検証環境

コーディングするにあたってデスクトップ環境(Windows、Machintosh)、スマートフォンやタブレットなどの対応が必要なブラウザや端末を対象に、デザインや情報、機能が適切な範囲に収まっていること。

表示確認ブラウザ (2018年3月時点)

ハードウェア環境にあるブラウザの変化に伴い、バージョン指定や仕様がしばしば変わりますので、以下のブラウザの指定は2018年3月時点でとします。

Windows
  • Microsoft Internet Explorer 10以上推奨
    (Microsoftのサポートが終了しているIE9以下は、サイトターゲットやクライアント要望により対応する場合もあります。)
  • Microsoft Edge
  • 制作時に最新のGoogle Chrome
  • 制作時に最新のMozilla Firefox
Macintosh
  • 制作時に最新のSafari
  • 制作時に最新のGoogle Chrome
  • 制作時に最新のMozilla Firefox
iOS
  • 制作時に最新のiOSと1世代前のバージョンまで
  • 制作時に最新のSafari
Android
  • 制作時に最新のAndroid OSと1世代前のバージョンまで
  • 制作時に最新のGoogle Chrome

ウェブ・アクセシビリティ

ウェブ・アクセシビリティとは、「高齢者や障害者など心身の機能に制約のある人でも、ウェブで提供されている情報にアクセスし利用できること」を意味します。
ウェブ・アクセシビリティについてはWCAG (Web Content Accessibility Guidelines)という指針がW3Cによって提唱されています。WCAGへの対応としては、無償の範囲で以下までが含まれます。

  • 非推奨タグは原則使わない。
  • HTMLチェッカーなどでソースの文法をチェックをできるだけ行い、構文エラーを少なくする。
  • 見出し、段落、リストなどの要素を使って文書の構造や役割を適切に記述する。
  • 表示スタイルは文書の構造と分離し、書体、サイズ、色、行間、背景色などの見た目についてはスタイルシートで設定する。
  • 画像や動画には、代替情報を用意する。
  • リンクに画像を用いる場合は、リンク先の内容が予測できるようにテキストなどの代替情報を用意する。
  • 文字サイズと書体はユーザが変更できるようにする。
WCAG (Web Content Accessibility Guidelines)

WCAGについての詳細は下記を参照してください。

文法チェック

WEB標準に100%準拠させるかどうかはポリシーにもよりますが、できるだけ不要な文法エラーを減らすためのチェックは必要です。

HTML、CSSそれぞれの文法チェック用のサイトがあるので、下記サイトにチェックをできるだけ行ってください。

ユーザビリティ

パソコンやウェブの操作が慣れていない方でも、可能な限り、ストレスなくサイト内を遷移していただけるように、次のような考え方とルールの元に制作を行います。

文字色、大きさについて
地色と判別がつかなくなるような文字色や、概ね10px以下の小さすぎる文字などは用いないようにします。また、原則的に文字サイズはユーザ側の閲覧環境に合わせて可変できるように%やremやemなどを適宜設定します。
テキストリンクについて
テキストリンク部分については、リンクがリンクであることがわかるように、原則としてアンダーラインを引き、地の文と区別して認識できるように配慮します。
また、同様の意図から、マウスを乗せた時(以下マウスオーバー時)に、色が変わる、アンダーラインが消えるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。
ただし、デザインの在り方で原則アンダーラインが出来ない場合でも、リンク色を付けたりマウスオーバーを透過にするなど、変化するようにします。
ボタンについて
画像でのリンク部分(ボタン、ナビゲーション等)については、リンクであることがわかるような処理(陰や立体的に見える処理を施す、アイコンを付ける)をすることで、クリッカブルであることが認識できるように配慮いたします。また、マウスオーバー時には、色が変わるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。CSSで構成されるボタンも同様です。

書式ルール

インデント

インデントにはタブ文字、もしくはスペースでは2〜4文字とします。
近年ではSassを使用したり、Brackets拡張機能「Beautify」でHTML/CSS/JSの記述を整えることも出来ますので、サイト全体を通して同じ体裁にします。

大文字/小文字

セレクタ、プロパティ、値等全て、小文字で表記します。alt属性など値が文字列の場合は除きます。
Javascript等のプロバティ、変数指定で文字列内で大文字を使用する場合は、CSS等と混同されないよう、適宜使用して下さい。 

<img src="rhythm.png" alt="RhythmFactory">

テンプレート

HTML5のテンプレートとしてミニマム、OGP（Open Graph Protocol）等を設置した基本レイアウトの2種類を用意しました。

OGPやTwiiter Cardについては下記を参考にしてください。

HTML5テンプレート (ミニマム)
<!DOCTYPE html>
<html lang="ja">

<head>
    <!--Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Meta-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!--Favicons-->
    <link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="/favicon-152.png">

    <!--CSS-->
    <link rel="stylesheet" media="all" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">

    <!--JS-->
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js/plugin.js"></script>
    <script src="js/function.js"></script>

    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-999999999-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments)
        };
        gtag('js', new Date());
        gtag('config', 'UA-999999999-1');

    </script>
</head>

<body>

    <!-- Example: <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> -->
    <!-- Example: <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> -->
</body>

</html>
HTML5テンプレート（OGPやFavicon全種等の基本レイアウトを追加した場合）
<!DOCTYPE html>
<html lang="ja">

<head>
    <!--Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Meta-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!--Favicons-->
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicons/favicon.ico">
    <link rel="icon" type="image/vnd.microsoft.icon" href="images/favicons/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="images/favicons/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/favicons/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/favicons/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/favicons/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/favicons/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/favicons/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="36x36" href="images/favicons/android-chrome-36x36.png">
    <link rel="icon" type="image/png" sizes="48x48" href="images/favicons/android-chrome-48x48.png">
    <link rel="icon" type="image/png" sizes="72x72" href="images/favicons/android-chrome-72x72.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicons/android-chrome-96x96.png">
    <link rel="icon" type="image/png" sizes="144x144" href="images/favicons/android-chrome-144x144.png">
    <link rel="icon" type="image/png" href="images/favicons/android-chrome-192x192.png" />
    <link rel="icon" type="image/png" href="images/favicons/favicon-16x16.png">
    <link rel="icon" type="image/png" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" href="images/favicons/favicon-48x48.png">
    <link rel="icon" type="image/png" href="images/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" href="images/favicons/favicon-160x160.png">
    <link rel="icon" type="image/png" href="images/favicons/favicon-196x196.png">
    <link rel="manifest" href="images/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="images/favicons/mstile-144x144.png">

    <!--Facebook-->
    <meta property="og:title" content="SHAFT - シャフト株式会社">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://schaft.ws/">
    <meta property="og:image" content="https://schaft.ws/images/sns/sns_shaft.jpg">
    <meta property="og:site_name" content="SHAFT - シャフト株式会社" />
    <meta property="og:description" content="シャフト株式会社は「売上向上が目的」のデザイン会社です。">
    <meta property="og:locale" content="ja_JP">

    <!--Twitter-->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="SHAFT - シャフト株式会社">
    <meta name="twitter:url" content="http://SHAFT.ws">
    <meta name="twitter:description" content="シャフト株式会社は「売上向上が目的」のデザイン会社です。">
    <meta name="twitter:image" content="https://schaft.ws/images/sns/sns_shaft.jpg">

    <!--CSS-->
    <link rel="stylesheet" media="all" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">

    <!--JS-->
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="js/plugin.js"></script>
    <script src="js/function.js"></script>

    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-999999999-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments)
        };
        gtag('js', new Date());
        gtag('config', 'UA-999999999-1');

    </script>
</head>

<body>
    <header>
    </header>

    <nav>
    </nav>

    <main>
    </main>

    <setion>
    </setion>

    <article>
    </article>

    <aside>
    </aside>

    <footer>
    </footer>

    <!-- Example: <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> -->
    <!-- Example: <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> -->
</body>

</html>

DOCTYPE宣言

DOCTYPE宣言は省略可能ですが、DOCTYPE宣言が無いとブラウザのレンダリングモードが互換モードになります。特別な理由がなければ、標準モードにするためにDOCTYPE宣言を記述します。

<!DOCTYPE html>

文字コード

文字コードセットはUTF-8を選択します。ファイルの文字コードをUTF-8で保存し、META要素のCONTENT属性で文字コードを宣言します。META要素は必ずTITLE要素の前に宣言します。

<meta charset="utf-8">

レンダリングモード

IE用に、最新のレンダリングモードにするように指定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ビューポート

ページ幅可変の場合はviewportを下記のように設定します。

<meta name="viewport" content="width=device-width, initial-scale=1">

ページ紹介文

content属性に、ページの概要を全角150文字程度で記入します。

<meta name="description" content="[全角150文字程度]">

ページキーワード

サイトやページのキーワードを半角カンマ区切りで列挙します。キーワード数は5個を目安とします。

<meta name="keywords" content="[***],[***],[***],[***],[***]">

TITLE要素

TITLE要素は、ページの階層によって次の書式を使います。

ホーム
<title>サイト名</title>
第2階層トップ
<title>カテゴリー名 | [サイト名]</title>
通常ページ
<title>ページ名 | カテゴリー名 | [サイト名]</title>

OGP（Open Graph Protocol）

下記は必須のプロパティなので必ず設定してください。通常のサイトであればog:typeはwebsite固定で問題ありません。

<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">

下記はオプションのプロパティです。

<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">

Facebook用にOGPを設定するには、さらに fb:app_id というプロパティを追加します。

<meta property="fb:app_id" content="任意のID">

ファビコン

画像の作成

512x512～700x700ピクセルの画像を用意し、「様々なファビコンを一括生成。favicon generator」でジェネレートし、設置します。imagesディレクトリにfaviconディレクトリを作成して格納します。

Windows 8以上のMetroタイル・アイコン用（タイルカラーやテーマカラーは任意に変更してください）
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#efefef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
ページピンのアイコン

Mac OS X 10.11 (El Capitan) の Safari から採用された ページピンのアイコン は favicon や apple touch icon とは別の記述をしなければ表示されない、アイコンです。

SVG画像の用意が必要で、指定がない場合はページタイトルの頭文字のイニシャルが表示されますのですが、可能なら設置をお願いします。

「HTML: Safari のピン（タブ固定時）にアイコン画像を表示する」を参考にしてください。

SNS用の画像の用意

OGPを設置する場合、SNS用の画像を1200ピクセルx630ピクセルで用意します。
閲覧する環境により、サイズが変わることを考慮して、横長ですが、主要な要素はセンターから630ピクセルx630ピクセルの正方形の範囲内に収めておくことを推奨します。
また、WordpressなどのCMSで、ページ特有の画像を用意する場合でも同様で、アイキャッチ画像の項目やカスタム項目を用意するなどの配慮をします。

ノーマライズスタイル/リセットCSS

各ブラウザはH要素やP要素などにデフォルトのCSSスタイルを独自に設定しており、各ブラウザ間で差異があるため表示が統一されません。
各ブラウザの違いを解消するためにリセットCSSが複数用意されていますが、テンプレートではnormalize.cssと、HTML5 DoctorのリセットCSSを推奨しています。

<link rel="stylesheet" href="css/normalize.css">

normalize.cssはスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにするCSSのライブラリです。そのため、normalize.cssでは B は太字、リストは黒丸といったスタイルが維持されています。
リストの黒丸などのスタイルもリセットしたい場合は、HTML5 DoctorのリセットCSSを使ってください。

ダウンロードは下記になります。

jQuery

jQueryはIE8 以前をサポートする1.x 系、IE8 以前のサポートは捨てて、高速に安定して動作させることを目指した2.x 系があります。
条件に合わせて必要なバージョンを読み込みます。以下はCDNでの例で、ダウンロードしローカルファイルとして設置して下さい。 

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

その他のライブラリやフレームワークスの扱いについて

jQuery以外にも、Bootstrap、Font Awesome、React.js、Angular.js、sassでのcssのご用意などなど。。。新たなスキルを必要とするライブラリやフレームワークスが続々と登場してます。
制作サイトやプロジェクトのポリシー、担当技術者のスキルにも寄りますが、機能や構造に応じて適宜使い分けしていただければと思います。
弊社での運用観点から、修正や変更などを行う運用メンテナンスの発生を考慮すると、HTML、CSS、JSについて二次編集が可能な状態で制作物をご用意してください。

IE9以下も対応したい場合

IE9以下用のCSSハックを書きたい場合、下記のようなマークアップを追加します。

<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->

IE9以下用にHTML5の追加要素に対応したり、メディアクエリに対応させるには下記を追加します。

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

HTMLのスタイル ルール

BODY要素

ブロック要素

テキストや画像は必ずブロックレベル要素に含まれるようにマークアップします。

セマンティックに書く

見出しならH要素、段落ならP要素と、目的に応じたHTML要素を使ってください。

ナビゲーション類のマークアップ

ナビゲーションはNAV要素とUI要素等で構成します。

H要素の利用

見出しはH1〜H6要素で、順番をとばしたりせず、上から順番にマークアップします。

特にH1〜H3においては、SEOの観点からページ内では1つずつ設置し、サイト内での重複を避ける必要があるようです。

  • トップページでLogoにH1、ページの説明をH2を設置した場合、下階層で共通で使用するlogoやページの説明には別なDIV要素やStrong要素にすること。
    これは下階層では、H1はページのタイトル、H2はサブタイトル、H3はカテゴリ名などページ内容を検索エンジンに伝える役目をしているためです。
  • H4〜H6は1ページ内で複数可能なようです。
  • レイアウト目的の場合はDIV要素等の使用を推奨します。
UL要素の利用

ナビゲーション類、リンクリストなどリストを意味するコンテンツは、UL要素でマークアップします。

DL要素の活用

用語と説明、画像と説明など内容と内容が関連するペアのリストは、DL要素でマークアップします。

IMG要素

IMG要素にはalt属性で代替テキストを指定します。

STYLE要素、style属性の禁止

STYLE要素、style属性は使用しません。代わりに外部CSSで指定します。

type属性

HTML5 においては、script 要素 の場合、type 属性のデフォルト値として 「text/javascript」 が、style 要素の場合は 「text/css」 がセットされますので、CSSとJavaScriptのtype属性は省略します。


<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" href="js/scripts" /></script>


<link rel="stylesheet" href="css/styles.css" />
<script href="js/scripts" /></script>
コメント

レイアウトなどに関連するDIV要素などには、どこまでがその範囲かわかるようにコメントで区切ります。

開始コメント：　<!-- 領域名-->
終了コメント：　<!-- /領域名-->




    ...
メディアクエリ

Googleの検索エンジを基準としたWebレスポンシブによるHTML/CSSを用意するケースが非常に多くなりました。
JSでデスクトップとスマートフォンを切り分けるケースもありますが、主にビューポートとCSSのメディアクエリにより、表示をコントロールをします。
モバイルファストにすることで、スマートフォンの表示速度が早くなると言われていますので、可能でしたらモバイルファストでCSSをご用意下さい。

特に決まりも規定も一般的に存在して無いのがメディアクエリなのですが、ポートレイト(縦)を中心に、大まかなブレイクポイント基準をまとめました。

サイズ 対象
最大414px スマートフォン
415px以上、768以下 タブレット
768px以上 デスクトップ 
...（基本のスタイル設定）...

/*414px以下*/
@media screen and (max-width: 414px) {
...（スタイルの設定）...
}

/*415以上、768px以下、 */
@media screen and (min-width:415px) and ( max-width:768px) {
...（スタイルの設定）...
}

/* 769px以上 */
@media screen and (min-width: 769px) {
...（スタイルの設定）...
}

デザインの横幅が1000pxを超える事が多い場合、スマートフォン向けと、タブレットとデスクトップ向け画面の2種類に対応する場合は、タブレットでデスクトップ向け画面を表示する時にjavascriptでタブレットとスマートフォンを判別し、Viewportにて調整をすることもあるので、サイトに適した設置法で、タブレットとデスクトップ向け画面の2種類にするのか、更に細分化するのか適宜ご用意下さい。

プロトコルの省略

使用上問題なければURLからプロトコル表記（http:,https:）を省略してください。

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

情報設計ガイドライン

ディレクトリ構造

的確な情報整理とページ構成を保ち、以下のようなディレクトリ構造でサイト制作を行います。

CSSやJSは、ルートディレクトリにCSSフォルダとJSフォルダに分けてまとめて格納するようにして下さい。

imagesフォルダは、HTMLの階層構造にできるだけ合わせ格納するようにして下さい。
これは、修正があった際に対象の画像をできるだけ早く探せる事に繋がります。

ディレクトリ名

ディレクトリ名は英数半角10文字程度で、内容をイメージしやすい名前にします。
ローマ字で命名する場合はヘボン式とします。

画像フォルダ

共通で利用できる画像については、カレントディレクトリにimagesフォルダを作成して格納します。
そのほか、各ディレクトリ別にimagesフォルダを作成し、画像ファイルを格納します。

ファイル名

ファイル名、拡張子ともに全て小文字の英数字、アンダーライン（ _ ）ピリオド（ ． ）の文字で表記します。
また、ファイル名を複数の単語で表す際は、単語をアンダーライン（ _ ）で区切ります。

例
<!-- Example: -->
<link rel="stylesheet" href="css/file_name.csss">
<script src="js/file.name.js"></script>

最後に

このガイドラインは、制作先や運用メンテナンスが別れていたり、複数で制作作業をするケースもあるため、担当外の方が早くメンテナンスを行えるためにご用意しましたので、メンテナンス性も意識してコーディンすることを心がけて下さい。

　TOP