目次

はじめに
本書の構成
Webをとりまく状況の変化について

Chapter1　制作フローと環境の構築
　1-1　プロジェクトの全体像を把握してゴールをはっきりさせる
　　■制作に着手する前に、ゴールをはっきりさせよう
　　■プロジェクトのゴール設定
　　■プロジェクトの全体像を把握する
　1-2　フローを明確にして計画をたてる
　　■フロー構成図をつくる
　　■タスクのリストアップと細分化
　　■各タスクの概要
　　■クライアントとゴール＆フローを共有する
　　お役立ちコラム　入稿データの確認──効率向上のための第一歩
　1-3　制作環境を構築する
　　■エディタ（オーサリングツール）
　　■FTPサーバとクライアント
　　■デザイン確認（スライス）ツール
　　■ドキュメント確認用ツール
　　■データ受け渡し用オンラインストレージ
　　■プロジェクト管理ツール
　　■コミュニケーションツール
　　■バージョン管理システム
　　■検証（チェック）環境
　　■制作の効率化をはかるツール

Chapter2　コーディングガイドラインの策定
　2-1　コーディングガイドラインを作る、その前に
　　■コーディングにおけるWeb業界の現状
　　■制作現場の声からわかること
　　■コーディングガイドライン策定の目的
　　■担当者によるクオリティの差異を解消
　　■コーディングガイドラインを活かすには定期的に更新を
　　■コーディングガイドライン策定の準備
　2-2　コーディングガイドライン策定のポイント①──コーディングファクトリーのHTML制作ルール
　　■DOCTYPE──主流はHTML5
　　■文字コード──UTF-8（BOMなし）を推奨
　　■改行コード──基本的にはCR+LFを採用
　　■改行とインデント──見やすく、把握しやすいソースコード
　　■パスの記述──ルートパスとドキュメントパス
　　■viewportの設定──多用なデバイスへの対応が求められる
　　■マークアップ全般──2つの趣旨のルール
　　■タグの記述ルール──h1の用法を明確に
　　■その他の取り決め例
　　■HTML制作ルールでの注意点──制作現場に合わせて策定項目を吟味する
　　■テンプレートの活用──テンプレートファイル一式を用意
　2-3　コーディングガイドライン策定のポイント②──コーディングファクトリーのCSS制作ルール
　　■理想的なCSSの要件
　　■id／class命名ルール
　　■フォントに関する記述ルール
　　■セレクタ・プロパティ・値の書き方──見やすさを向上させる記述ルール
　　■ショートハンドプロパティ──編集作業の効率を向上
　2-4　コーディングガイドライン策定のポイント③──コーディングファクトリーのその他の制作ルール
　　■JavaScript制作ルール
　　■ディレクトリ作成ルール
　　■ディレクトリの命名ルール
　　■ディレクトリ格納ルール
　　■画像ファイルの命名ルール
　　■コーディング後チェック
　　■その他ルール化したほうがいいこと
　2-5　コーディングガイドラインの導入・上手な運用のしかた
　　■コーディングガイドラインを作る際の工夫──広く意見を収集する
　　■導入時に行うべきこと──納得を得られる理論的な説明を
　　■コーディングガイドラインをさらに浸透させるために──生産力方程式の提示
　　■コーディングガイドラインの見直し──定期的に「課題を持ち寄る場」を設ける

Chapter3　速く正確で安全なコーディングメソッド
　3-1　速い・正確・安全なコーディングのためにできること
　　■コーディングのフロー
　　■速い・正確・安全なコーディングのためにできること
　　■本章の構成
　3-2　押さえておきたいコーディングの基本
　　■マークアップとCSS設計の基本
　　■破綻しないCSS設計のポイント
　3-3　ベーステンプレートの制作
　　■ベーステンプレートとは
　　お役立ちコラムリセットCSSとノーマライズCSS
　　■チームで使うベーステンプレートに必要な要素
　　■ベーステンプレートの構成
　　■共通エリアの対応
　3-4　モジュールコーディング
　　■今、求められているのは「CSS設計力」
　　■モジュールコーディングとは
　　お役立ちコラム OOCSSとSMACSSの使い分け
　　■設計のポイント
　　■各モジュールのコーディングプラクティス
　3-5　レスポンシブWebデザインコーディング術
　　■レスポンシブWebデザインとは
　　お役立ちコラム widthとdevice-widthの違いは？
　　■レスポンシブWebデザインは工数（制作の手間）を削減できるか
　　■レスポンシブWebデザインコーディング
　3-6　快速デバッグ／チェック
　　■快速なチェック
　　■快速なコーディングのデバッグ／チェックツール
　　■「なんで崩れるのかわからない……」に対する早い解決のしかた
　3-7　速い・正確・安全なコーディングTips
　　■パーツテンプレートとページテンプレートの活用術
　　■使いやすいパーツテンプレートのつくりかた
　　■ページテンプレートの活用
　　お役立ちコラム 工数とクオリティのバランスを忘れずに
　　■エディタでの高速検索、置換術

Chapter4　ディレクションとチェックの勘どころ
　4-1　ディレクションの基本的な流れ
　　■ディレクションとは
　　■主な作業のメリット
　　■フェーズをカテゴリで整理する
　4-2　データの整理と管理のポイント
　　■データの整理
　　■データの管理
　　■納品するデータ
　4-3　仕様確認のポイント
　　■基本仕様と対応ブラウザ（デバイス）
　　■レスポンシブWebデザイン
　　■既存サイトのリニューアル
　　■その他サイトおよびページ特有の仕様
　　お役立ちコラム 言葉の意味の相違
　4-4　スケジュール・進捗管理のポイント
　　■スケジュールの組み立て方
　　■進捗管理
　　■必ずやらなければならないこと／やらなくてもいいこと
　4-5　コミュニケーションのポイント
　　■コミュニケーションツールの活用
　　■電話とメールでのやりとり
　4-6　チェックのポイント
　　■目視チェックとは
　　■チェックシートを作る
　　お役立ちコラム 手書きのチェックバック──コーディングファクトリーの場合
　　■何をチェックをする?――チェック項目
　　■「正解」となるデータを用意する
　　お役立ちコラム 文字サイズ変更のJavaScriptに注意
　4-7　トラブルシューティング
　　■デザインが再現できない、JavaScript・CMSの機能が実装ができない
　　■時間がなくて納期に間に合わない
　　■クライアントから大量のフィードバックが
　　お役立ちコラム もしクレームが来てしまったら、まずやるべきこと

Chapter5　質と効率を高めるWeb制作の仕事術
　5-1　Webアクセシビリティ対応について
　　■Webアクセシビリティの概要
　　■コーディングでできること
　5-2　Webフォントについて
　　■Webフォントとは
　　■代表的なWebフォントの紹介
　　■Webフォントを実装する際の注意点
　5-3　速く・正確・安全に大規模サイトを制作する
　　■規模の大きなサイト制作時に注意すべき点
　　■具体的な施策
　5-4　レスポンシブブWebデザインにおけるテーブル実装パターン
　　■レスポンシブWebデザインのテーブルレイアウト
　　■「カスタムデータ属性」を利用したテーブルの実装方法
　　■複雑な表はスクロールで対応
　5-5　未確定要素の取り扱いについて
　　■状況を把握してスケジュールを調整する
　　■仮の内容で制作を進める方法
　　■デザイン調整中のモジュールは「ダミーモジュール」
　5-6　EJSとCSVを用いて正確・安全にページ量産できる方法
　　■EJSとは
　　■CSVを使うメリット
　　■量産制作方法
　　■量産のしくみ
　5-7　さまざまデータの比較に便利な「WinMerge」
　　■テキストやソースコードの比較
　　■フォルダ全体の比較
　　■SourceTreeのマージツールをWinMergeに変更する
　　お役立ちコラム 競合を解決した後に、変更差分のファイルを残さないようにする
　5-8　メンタルコントロール・メンタルケア
　　■メンタルコントロール
　　■メンタルケアも大切

著者プロフィール

• 株式会社モノサス／コーディングファクトリー（著者）

  「HTML＋CSS」コーディングを提供するアウトソーシング専門サービスです。2007年10月からコーディングサービスを提供し、 業界トップクラスの制作体制・制作実績を誇ります。