フロントエンド専門制作会社が教える速く正確な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 メンタルコントロール・メンタルケア
■メンタルコントロール
■メンタルケアも大切
著者プロフィール
-
「HTML+CSS」コーディングを提供するアウトソーシング専門サービスです。2007年10月からコーディングサービスを提供し、 業界トップクラスの制作体制・制作実績を誇ります。
販売元:C&R研究所
商品についてのお問い合わせ先:
https://www.c-r.com/contact/index
発送について:
発送を伴う商品については、原則として3日~5日程度で発送いたします。また、1回の注文につき送料として600円を別途ご請求いたします。
絶賛!発売中!
-
- 改訂新版 SUPERサイエンス 爆発の仕組みを化学する
- 2,453円
-
- 齋藤 勝裕(著者)
- サイエンス
-
-
- 改訂5版 貿易実務の基礎がわかる本
- 3,773円
-
- 曽我 しのぶ(著者)
- ビジネス書
-
- 運営会社
- FAQ
- お問い合わせ
- 利用規約
- オンライン販売について
- 特定商取引法に関する記載
- ゲームソフトの利用に関するガイドライン|
- 個人情報について
- PURCHASE GUIDE (ENGLISH)|
Copyright © Mynavi Publishing Corporation