完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。
Sponsored Link
もくじ
コーディング前の準備
HTML5 マークアップ
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次アップ／ご確認／調整／納品／公開といった感じになると思います。
ウェブサイト構築スケジュールを一旦エクセルなどにまとめて、簡単なスケジュールを作成します。
HTML5 マークアップ
ビジュアルデザイン（カンプ等）がある程度確定し、制作ルール等を確認したら、コーディング作業に入ります。クライアントさんからいただいた原稿の文書構造を考えながらマークアップ。
３．テンプレート作成
社内で共有できるテンプレートを作っておいて、社内打ち合わせの場を開いて定期的に確認します。ないようであれば、新たに作成して動作チェック等をしておきます。
４．条件付きコメント
IE8以下をHTML5に対応させるにはhtml5shivを使って新しい要素を生成する必要があります。head内に以下。使用方法はこちら。
<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]-->
５．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の設置例。
７．ファビコン
ファビコンのサイズや形式について。各種ブラウザに対応するファビコンの作成・設定方法。タッチアイコンやタイルアイコンなども。
８．アウトライン作成
コンテンツの中身である文章の構造、階層を決めておきます。HTML5のコーディングではアウトライン（文章の概要／本の目次みたいなもの）を強く意識しながら進める必要があるので。
作ったページのアウトラインをチェックできるHTML 5 Outliner。インデント表示なので分かりやすいですね。Chrome拡張版はこちら。
- ASCII.jp：HTML5のアウトラインとセクションを理解する (1/3)｜浜 俊太朗のHTML5マークアップ移行ガイド
- 『アウトライン』について / HTML5マークアップ時の基本 | HTML5でサイトをつくろう
９．バリデーターをチェック
バリデータチェックをしながらコーディングしてみましょう。おなじみですが、html5の検証には以下のバリデーターが利用できます。アウトライン確認可能。HTML5.JPでは仕様書の翻訳やリファレンスなどがあり、日本語なので分かりやすいですよ。CSS版はこちら（W3C CSS 検証サービス）。
HTML5ではUTF-8が強く推奨されてるので、UTF-8で作成します。
CSS の設定
１０．ノーマライズスタイル
ブラウザにははじめから、h1は「見出し」らしく大きく表示し、pには余白をつけるなど「デフォルトスタイル」が適用されています。ブラウザ間の差異や、オリジナルスタイルを作成するときに起きるトラブルを避けるため、デフォルトスタイルを無効にするのがリセットスタイルといいます。
リセットスタイルは「要素の特徴をないことに」しますが、ノーマライズスタイルは「ブラウザ間の差異をすり合わせる」ようにします。つまり、デフォルトスタイル（h1は大きく、p要素に余白がついたり）を引き継ぎながら、ブラウザ間の差異をなくそうというものです。こちら「normalize.css」から最新版をダウンロードして読みこむだけです。筆者はこちらを使う頻度が高いです。
レスポンシブデザイン設計
１１．モバイルファーストを基準に設計
大量のデータ（画面サイズや回線速度）を扱うPCを基準にしてしまうと、スマートフォンで閲覧したときにデータ量が多すぎて読み込み時間がかかる問題が発生してしまいます。モバイルを基準にした設計をすることで、PCやタブレットでも軽量になり快適に使うことができるという考え方がモバイルファーストです。モバイルスクリーンサイズの基準は、iPhone等のスマートフォンに多い、幅320pxで進めます。
１２．プログレッシブ・エンハンスメントの考え方を取り入れる
どの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。いずれにしても、クライアントさんにこの考え方を最初に話しておくことが大切です。
- 一撃デザインの種明かし（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">
１４．IE 対応
スマホやタブレットにIEはほぼ使われてないですけど一応。IEに対応させる為の方法。IE8以前はHTML5+CSS3メディアクエリ非対応なのでRespond.jsを読み込ませます。
<script src="respond.min.js"></script>
１５．メディアクエリ設定
お次は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%;
}
１７．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を使います。スライド・フェードの早さはオプションで変更可です。
２０．テーブル
料金表などテーブルが必要なページを作るときが必ず出てくると思います。スマホで見やすく表示する場合、こちらが参考になります。
WordPress 組み込みの流れ
有料テーマは使わない方向で。読み込むファイル数が多すぎたり、使わない機能があるので、メンテナンス性や高速化を考え、０からhtmlテンプレートをWP化していく方法をとります。ここでは、自分用ではなくて、クライアントさんに納品するためのテーマ作成フロー、おさえておきたいことになります。デザイナーさんはWPやMT組み込み作業することもあるかもしれないので一応覚えておきます。
２１．WP コーディング基準確認
静的ページ作成前と同様に、WordPress記述のルールも以下の規約にならって統一します。
- クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフ...
- WordPress コーディング基準 - WordPress Codex 日本語版
２２．ファイル作成＋タグ組み込み
WordPress をインストールしたらオリジナルテーマ(index.php/style.css/screenshot.jpg)を作成し、htmlをワードプレスに組み込んでいきます。cssは、組み込み前に作ったスタイルシートをインポートして、修正分だけstyle.cssに追加していきます。
２３．管理画面カスタマイズ
クライアントさんが使いやすいように、管理画面内の表示をカスタマイズします。顧客アカウントを追加し、管理権限を制限・非表示にすることによって、サイト構築内容が変更されてしまうのを防ぐ事ができます。以下のサイトを参考にできることの一部です。
- ログイン時の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でカテゴリー&タグを絞り込み検索をする | webOpixel
- WordPress標準の検索フォームを使って、カスタムタクソノミーを使った簡易的な絞り込み検索をつけるメモ | マイペースクリエイターの覚え書き
２７．メール自動返信機能追加[プラグイン]
問い合わせに関してはContact Form 7をカスタマイズするのが早いと思います（自由度は少し低いです）。自動返信の機能をつけたり、メール送信後にリダイレクト、表示を切り替える方法です。
２８．CRM（顧客関係管理）[プラグイン]
簡易版CRMであるFlamingo。お問い合わせやメールアドレスを簡単に管理できます。利用するには、Contact Form 7を事前にインストールして有効にします。
２９．スパム対策[プラグイン]
スパム対策サービスであるAkismet。海外からのスパム書き込みもほとんどスパムフォルダに隔離してくれます。以下、APIキーの取得方法と設定方法。
３０．管理者権限の変更
編集者と投稿者の違いなど権限を付与する前にチェックしておきたい内容です。
３１．セキュリティ対策
見積もりに入れ忘れないようにしたいセキュリティ対策。もう一つはパスワード管理、SSL、IP制限。
- 【WordPress】あなたの大切なサイトを守るセキュリティ対策のまとめ（2013年秋） | バシャログ。
- WordPress使いならこれだけはやっておきたい本当のセキュリティ対策10項目 | WP-D
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
この後によく読まれている記事
Comments
-
[…] https://commte.net/4089 […]
-
[…] https://commte.net/4089 […]
-
[…] […]
Leave a Comment
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
[…] 完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ 目指せSassマスター！デザイナーがすぐ実践出 […]