マナティ

購入形態

PDF
2,646円
数量:

カートに追加されました。カートを見る

カートに入れる
紙の本を買う

フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド

ワークフロー構築、コーディング規約、制作&ディレクションTipsなど、高品質な制作を支える現場の仕事術

マイナビ出版

快速コーディングの秘訣、教えます!

Webの制作現場を取り巻く環境は、日々刻々と変化しています。

文法エラーやリンク切れなどのない「完全品質保証」を標榜するコーディングファクトリーでは、そういった状況に柔軟に対応するべく、常に現場での経験を共有し、よりよい制作環境を保てるようにしています。

本書は、その経験をもとに「制作の現場で、本当に必要なことは何か?」をテーマに、制作フローや環境構築にはじまり、コーディンガイドライン策定の基本、ディレクションやチェックの要諦、質と効率を高めるコーディングのポイントまで、さまざまな側面を解説しています。

チーム体制でコーディングを行うための前提知識やフローの構築(もちろん、個別の制作時にも役に立ちます)、「コーディングガイドラインセミナー」の内容をスケールアップした「コーディングの規約策定ガイド」、「速く」「正確に」「安全な」コーディングを行なうための実践的なTips、さらには、成果物のチェック体制やスケジュール管理といったワークフローの仕事術など、現場での経験から得た早く正確にコーディングするためのノウハウを徹底的に解説します。

発売日:2017-04-28

ページ数:256ページ

目次

はじめに
本書の構成
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 メンタルコントロール・メンタルケア
  ■メンタルコントロール
  ■メンタルケアも大切

著者プロフィール