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

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

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

もくじ

コーディング前の準備

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

HTML5 マークアップ

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

CSS の設定

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

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

• １１．モバイルファーストを基準に設計
• １２．プログレッシブ・エンハンスメントの考え方を取り入れる
• １３．ビューポート設定
• １４．IE 対応
• １５．メディアクエリ設定
• １６．フルードイメージ設定
• １７．Retina対応
• １８．ドロップダウンナビ実装
• １９．レスポンシブ対応スライダー
• ２０．テーブル

WordPress 組み込みの流れ

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

コーディング前の準備

１．仕様書の確認

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

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

• メディアクエリー　仕様書
• コーディングガイドライン（HTML5）ver1.0
• システム開発の仕様書テンプレートや参考サイトのまとめ
• 他人にやさしいソースコードの書き方 コーディング規約 JavaScript編 | Web制作会社スタイル
• 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

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

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

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

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

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

HTML5 マークアップ

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

３．テンプレート作成

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

• HTML5でマークアップしてみよう－HTML5リファレンス
• Initializr - レスポンシブ対応テンプレ
• 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してくれませんからね。

• 【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis
• JavaScriptやCSSのキャッシュ問題を回避する簡単な方法 - Two Kinds Of Happiness

６．OGP記述

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

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

７．ファビコン

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

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

８．アウトライン作成

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

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

• ASCII.jp：HTML5のアウトラインとセクションを理解する (1/3)｜浜 俊太朗のHTML5マークアップ移行ガイド
• 『アウトライン』について / HTML5マークアップ時の基本 | HTML5でサイトをつくろう

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

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

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

• 文法チェック／Validator.nu (X)HTML5 Validator
• W3Cバリデーションチェック／The W3C Markup Validation Service

CSS の設定

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

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

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

• なぜリセットではなく Normalize.css を使うのか
• CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス

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

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

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

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

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

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

• 一撃デザインの種明かし（15）：クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント (1/2) - ＠IT
• Yahoo!が採用する「プログレッシブ・エンハンスメント」とは何か

１３．ビューポート設定

スマートフォン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 */
}

• ASCII.jp：メディアクエリーの設定とグリッドデザインの導入
• 【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ

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

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

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の使い方など。

• Webサイト＆WebアプリのRetina対応方法まとめ | KRAY Inc
• jQuery×HTML5×CSS3を真面目に勉強（4）：WebページをRetina対応させるテクニック～基礎知識編 (1/2) - ＠IT

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

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

• li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js - かちびと.net
• レスポンシブ対応のナビゲーションメニューを実装するチュートリアル11選 | BlackFlag

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

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

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

２０．テーブル

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

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

WordPress 組み込みの流れ

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

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

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

• クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフ...
• WordPress コーディング基準 - WordPress Codex 日本語版

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

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

• WordPressのテーマファイルをHTML5にするチュートリアル | コリス
• WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

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

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

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

• WordPress 管理画面のカスタマイズ まとめ | hijiriworld Web
• WordPress管理画面を顧客用にカスタマイズする方法 | hT DESIGN blog
• WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ - かちびと.net
• WordPress カスタムカラーズ 管理画面からサイトの配色を変えられるテーマの作成 | hijiriworld Web

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

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

• カスタムフィールドの使い方 - WordPress Codex 日本語版
• PHP が分からない人でも WordPress のカスタムフィールドを使ってカスタマイズする方法 | ウェブル
• WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する

２５．Google Maps　api 実装

カスタムフィールドと組み合わせれば、投稿画面で住所を入力するだけで、自動でGoogle Mapsを呼び出して表示することができます。住所を入力するカスタムフィールドを投稿画面につけておいて、それをインクルードして地図を自動表示させます。

• WordPressのカスタムフィールドに住所や地名を登録するだけでGoogleマップが表示されるようにカスタマイズする - かちびと.net

２６．検索機能強化／絞り込み検索追加

不動産・都道府県などジャンルが多いコンテンツを制作する場合、検索機能の強化をしないと使い勝手が悪くなります。

筆者も都道府県ナビサイトを構築中するとき「カテゴリ✕タグ✕タクソノミー✕カスタムフィールド」のような複数の絞込機能（セレクトボックス＋チェックボックス＋テキストフィールド）をつけましたが、以下のサイトが参考になりました。（※カスタムフィールドも検索対象にする方法）

• WordPressでカテゴリー&タグを絞り込み検索をする | webOpixel
• WordPress標準の検索フォームを使って、カスタムタクソノミーを使った簡易的な絞り込み検索をつけるメモ | マイペースクリエイターの覚え書き

２７．メール自動返信機能追加[プラグイン]

問い合わせに関してはContact Form 7をカスタマイズするのが早いと思います（自由度は少し低いです）。自動返信の機能をつけたり、メール送信後にリダイレクト、表示を切り替える方法です。

• WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録 | NxWorld

２８．CRM（顧客関係管理）[プラグイン]

簡易版CRMであるFlamingo。お問い合わせやメールアドレスを簡単に管理できます。利用するには、Contact Form 7を事前にインストールして有効にします。

• Flamingo – WordPress経由のユーザーとの接触履歴を管理できるプラグイン | ネタワン

２９．スパム対策[プラグイン]

スパム対策サービスであるAkismet。海外からのスパム書き込みもほとんどスパムフォルダに隔離してくれます。以下、APIキーの取得方法と設定方法。

• Akismetを有効化してスパムコメントを防ぐ設定とAPIキーの取得方法 - SEOのホワイトハットジャパン

３０．管理者権限の変更

編集者と投稿者の違いなど権限を付与する前にチェックしておきたい内容です。

• 管理者、編集者、投稿者、寄稿者、購読者の違い - WordPressの使い方

３１．セキュリティ対策

見積もりに入れ忘れないようにしたいセキュリティ対策。もう一つはパスワード管理、SSL、IP制限。

• 【WordPress】あなたの大切なサイトを守るセキュリティ対策のまとめ（2013年秋） | バシャログ。
• WordPress使いならこれだけはやっておきたい本当のセキュリティ対策10項目 | WP-D

2016/07/19

JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ

JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 メタ言語でなく、C

2016/08/1

CSSのみで実現させる、すごいアニメーションやフレームワークまとめ

CSSのみでおしゃれなアニメーションを付与できるフレームワークやライブラリ。新しいものだけでなく、少し古いけど使えそうなものも掘り起こしてまとめました。 画像

2013/02/4

これなら分かる！WEB制作を無料で「学べる」サイトまとめ

基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・

2015/11/16

プログラミングやコーディングを学習したい人に役立つツール

初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使