calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

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

Sponsored Link

もくじ

コーディング前の準備

HTML5 マークアップ

CSS の設定

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

WordPress 組み込みの流れ

コーディング前の準備

１．仕様書の確認

confirmation_specification_coding

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

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

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

check_scheduling_coding

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

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

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

HTML5 マークアップ

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

３．テンプレート作成

template_creation_coding

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

４．条件付きコメント

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

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

５．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記述

ogp_coding

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

７．ファビコン

favicon_coding

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

８．アウトライン作成

create_outline_coding

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

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

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

reference_coding

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

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

CSS の設定

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

Normalize_coding

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

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

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

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

first_mobile_coding

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

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

progressive_enhancement_coding

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

１３．ビューポート設定

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

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

media_query_coding

お次は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 */
}

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

fluid_image_coding

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

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

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

１７．Retina対応

retina

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

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

navigation_coding

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

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

slider_coding

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

２０．テーブル

table_coding

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

WordPress 組み込みの流れ

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

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

wp_coding_coding

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

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

filecreation_coding

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

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

managementscreen_coding

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

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

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

customfield_coding

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

２５．Google Maps　api 実装

googlemaps_coding

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

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

search_enhancements_coding

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

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

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

emailautoresponder_coding

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

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

crm_coding

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

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

anti-spam_coding

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

３０．管理者権限の変更

administrator_coding

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

３１．セキュリティ対策

security_coding

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

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

この後によく読まれている記事

Comments

  1. サイトリニューアル手順をまとめ。各工程とその時に参考にしたいサイトご紹介！ より:
    2014年2月26日 12:01 PM

    […] 完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress) カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ 目指せSassマスター！デザイナーがすぐ実践出 […]

    返信
  2. 徹底効率化！Web制作者が生産性を高めるためにできる4つのこと | 株式会社LIG より:
    2014年3月3日 12:00 PM

    […] https://commte.net/4089 […]

    返信
  3. Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個 | 株式会社LIG より:
    2014年4月14日 11:56 PM

    […] https://commte.net/4089 […]

    返信
  4. 2014年完全版｜Webマーケ業界内定者のためのベスト記事46選 より:
    2014年12月22日 5:31 PM

    […] […]

    返信

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。