完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

作成：2014/01/27
更新：2015/08/07
Web制作

前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。

コーディング前の準備

１．仕様書の確認
２．入稿データの確認・スケジューリング

HTML5 マークアップ

３．テンプレート作成
４．条件付きコメント
５．GCF＋キャッシュクリア
６．OGP記述
７．ファビコン
８．アウトライン作成
９．バリデーターをチェック

CSS の設定

１０．ノーマライズスタイル

WordPress 組み込みの流れ

２１．WP コーディング基準確認
２２．ファイル作成＋タグ組み込み
２３．管理画面カスタマイズ
２４．カスタムフィールド実装
２５．Google Maps　api 実装
２６．検索機能強化／絞り込み検索追加
２７．メール自動返信機能追加[プラグイン]
２８．CRM（顧客関係管理）[プラグイン]
２９．スパム対策[プラグイン]
３０．管理者権限の変更
３１．セキュリティ対策

コーディング前の準備

１．仕様書の確認

作業前に最終納品日、文字コード、SSL、ディレクトリ構造のチェック。

Webサイト制作では、様々な職種の人たちが集まっていて、かつ作業を分担することも多いです。ルールがないと記述がバラバラになりメンテナンスも悪くなります。一貫性のあるWebサイトを構築するために制作のルールがきちんと明記されたガイドラインがあればスムーズにワークフローを進めることができます。以下、高使用頻度の仕様書やガイドライン。これらを参考に社内独自のルールを決めても良いでしょう。余力あればアクセシビリティ・ガイドラインも目を通します。

２．入稿データの確認・スケジューリング

次にクライアントさんからいただいたデザインデータの確認。「お問い合わせ」と「お問合せ」などの表記の統一をします。これも表記の仕様書みたいなものですね。これ忘れると、後でクライアントさんに表記が違うと注意されることがあります。

コーディングからのざっくりした流れは、静的ページだと1.HTMLコーディング／2.画像作成／3.１次アップ／ご確認／修正／2次アップ／ご確認／調整／納品／公開といった感じになると思います。

ウェブサイト構築スケジュールを一旦エクセルなどにまとめて、簡単なスケジュールを作成します。

ASCII.jp：Web制作における進捗管理の基本｜Webディレクション最新キーワード

HTML5 マークアップ

ビジュアルデザイン（カンプ等）がある程度確定し、制作ルール等を確認したら、コーディング作業に入ります。クライアントさんからいただいた原稿の文書構造を考えながらマークアップ。

３．テンプレート作成

社内で共有できるテンプレートを作っておいて、社内打ち合わせの場を開いて定期的に確認します。ないようであれば、新たに作成して動作チェック等をしておきます。

４．条件付きコメント

IE8以下をHTML5に対応させるにはhtml5shivを使って新しい要素を生成する必要があります。head内に以下。使用方法はこちら。

<!--&#91;if lt IE 9&#93;> 
<script src="js/html5shiv.js"></script>
<!&#91;endif&#93;-->

既存のIEにHTML5の新要素を認識させる｜HTML5速攻マスター

５．GCF＋キャッシュクリア

IEで閲覧している場合、Google Chrome Frameで表示する記述も追加。chromeがインストールされてない場合、IE最新レンダリングエンジンで表示。以下のコードをhead内のmeta charset="utf-8"直下に記入します。

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

追記：2015/08/07：Google Chrome Frameは終わっているので、今は以下の「,chrome=1」を抜いたもので大丈夫です。

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

これは必須ではないですが、以下のサイトに書かれてあるキャッシュ対策もすごい参考になります。レイアウトを変更したときにキャッシュが残ってしまってファイルが更新されず、ページが崩れて見えてしまうのを防ぐ方法。クライアントさんはCtrl + F5してくれませんからね。

６．OGP記述

SNS向けの記述も企業サイトに取り入れる機会が多くなりました。サムネイル表示と100文字抜粋するOGPの設置例。

html999 » はじめてのOGP設置方法とどこまで設定するかを考える

７．ファビコン

ファビコンのサイズや形式について。各種ブラウザに対応するファビコンの作成・設定方法。タッチアイコンやタイルアイコンなども。

ファビコン・カンニング・ペーパー

８．アウトライン作成

コンテンツの中身である文章の構造、階層を決めておきます。HTML5のコーディングではアウトライン（文章の概要／本の目次みたいなもの）を強く意識しながら進める必要があるので。

作ったページのアウトラインをチェックできるHTML 5 Outliner。インデント表示なので分かりやすいですね。Chrome拡張版はこちら。

９．バリデーターをチェック

バリデータチェックをしながらコーディングしてみましょう。おなじみですが、html5の検証には以下のバリデーターが利用できます。アウトライン確認可能。HTML5.JPでは仕様書の翻訳やリファレンスなどがあり、日本語なので分かりやすいですよ。CSS版はこちら（W3C CSS 検証サービス）。

HTML5ではUTF-8が強く推奨されてるので、UTF-8で作成します。

CSS の設定

１０．ノーマライズスタイル

ブラウザにははじめから、h1は「見出し」らしく大きく表示し、pには余白をつけるなど「デフォルトスタイル」が適用されています。ブラウザ間の差異や、オリジナルスタイルを作成するときに起きるトラブルを避けるため、デフォルトスタイルを無効にするのがリセットスタイルといいます。

リセットスタイルは「要素の特徴をないことに」しますが、ノーマライズスタイルは「ブラウザ間の差異をすり合わせる」ようにします。つまり、デフォルトスタイル（h1は大きく、p要素に余白がついたり）を引き継ぎながら、ブラウザ間の差異をなくそうというものです。こちら「normalize.css」から最新版をダウンロードして読みこむだけです。筆者はこちらを使う頻度が高いです。

レスポンシブデザイン設計

１１．モバイルファーストを基準に設計

大量のデータ（画面サイズや回線速度）を扱うPCを基準にしてしまうと、スマートフォンで閲覧したときにデータ量が多すぎて読み込み時間がかかる問題が発生してしまいます。モバイルを基準にした設計をすることで、PCやタブレットでも軽量になり快適に使うことができるという考え方がモバイルファーストです。モバイルスクリーンサイズの基準は、iPhone等のスマートフォンに多い、幅320pxで進めます。

5分で分かる製作現場（6）：モバイルファーストの本当の意味と、実践方法 (1/5) - ＠IT

１２．プログレッシブ・エンハンスメントの考え方を取り入れる

どの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。いずれにしても、クライアントさんにこの考え方を最初に話しておくことが大切です。

１３．ビューポート設定

スマートフォンOSブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=noと指定すればピンチイン／ピンチアウト（拡大・縮小）を無効化できます。width=device-widthはデバイスの横幅、スマホが320pxで表示されるようになります。initial-scale=1.0は表示初期倍率なので、等倍サイズで表示されるようになります。

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

HTML5/ページ全般/meta要素表示領域を設定する - TAG index Webサイト

１４．IE 対応

スマホやタブレットにIEはほぼ使われてないですけど一応。IEに対応させる為の方法。IE8以前はHTML5+CSS3メディアクエリ非対応なのでRespond.jsを読み込ませます。

<script src="respond.min.js"></script>

IE8以下でレスポンシブWebデザインを実現するRespond.js | HTML5/CSS3, JavaScript 次世代WEB研究開発

１５．メディアクエリ設定

お次はCSS内。ブレイクポイント（ウィンドウの幅）などの指定条件にあわせて、それぞれの条件に沿ったスタイルシートを記述していきます。もう一つはメディアクエリをIE6、IE7、IE8に対応させる方法とリンク。

@media only screen and (min-width: 481px) {
        /* Tablet css Layout: 481px to 768px */
}

@media only screen and (min-width: 769px) {
        /* Desktop css Layout: 769px to a max of xxxx px */
}

１６．フルードイメージ設定

ブラウザーの窓幅にあわせ画像サイズをフィットさせる方法をフルードイメージといいます。ナビゲーションなども％で分割します。

img {
  max-width: 100%;
  height: auto;
}

nav a {
  float: left;
  width: 27%;
  margin: 0 1.7%;
  padding: 25px 2%;
}

ASCII.jp：フルードイメージの導入とタイポグラフィの設定 (1/3)｜ゼロから始めるレスポンシブWebデザイン入門

１７．Retina対応

ディスプレイ解像度は今までのディスプレイと処理が異なるため、これまでのような制作フローだと画像が荒れて表示されてしまいます。以下はRetinaディスプレイ対応のまとめ。「元画像ファイル名＋@2x.png」のようにすれば、retina用画像に差し替えてくれるretina.jsの使い方など。

１８．ドロップダウンナビ実装

PCでは普通のナビ、スマホではセレクト（ドロップダウンナビ）にしてくれるjQueryプラグイン（TinyNav.js）を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。他、レスポンシブ対応ナビ10パターンまとめ。

１９．レスポンシブ対応スライダー

スライダーの実装は多いと思いますが、モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsを使います。スライド・フェードの早さはオプションで変更可です。

レスポンシブかつ軽量な画像スライドショーのjQueryプラグイン-ResponsiveSlides.js | memocarilog

２０．テーブル

料金表などテーブルが必要なページを作るときが必ず出てくると思います。スマホで見やすく表示する場合、こちらが参考になります。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

WordPress 組み込みの流れ

有料テーマは使わない方向で。読み込むファイル数が多すぎたり、使わない機能があるので、メンテナンス性や高速化を考え、０からhtmlテンプレートをWP化していく方法をとります。ここでは、自分用ではなくて、クライアントさんに納品するためのテーマ作成フロー、おさえておきたいことになります。デザイナーさんはWPやMT組み込み作業することもあるかもしれないので一応覚えておきます。

２１．WP コーディング基準確認

静的ページ作成前と同様に、WordPress記述のルールも以下の規約にならって統一します。

２２．ファイル作成＋タグ組み込み

WordPress をインストールしたらオリジナルテーマ(index.php/style.css/screenshot.jpg)を作成し、htmlをワードプレスに組み込んでいきます。cssは、組み込み前に作ったスタイルシートをインポートして、修正分だけstyle.cssに追加していきます。

２３．管理画面カスタマイズ

クライアントさんが使いやすいように、管理画面内の表示をカスタマイズします。顧客アカウントを追加し、管理権限を制限・非表示にすることによって、サイト構築内容が変更されてしまうのを防ぐ事ができます。以下のサイトを参考にできることの一部です。

ログイン時のWPロゴを消し、任意のロゴに変更
ダッシュボードに注意書き、使い方などの文言追加
投稿画面、サイトメニューの中から使わない機能を非表示
管理バー変更
ビジュアルエディタ変更
バージョンアップ通知OFF
不要なウィジェットを削除
フッターを自社のメールお問い合わせに変更

２４．カスタムフィールド実装

大量のデータを扱う場合や、カテゴリーやタグだけでは対応できないときがあるので、投稿画面入力フィールドを追加して、簡単にコンテンツ管理できるようにカスタマイズします。記事に決まった情報を直接書かせるよりも、カスタムフィールドという入力欄（テキストフィールド・チェックボックス）があることで、クライアントさんが使いやすくなります。