これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装 立ち読み

これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装

出版社 エムディエヌコーポレーション
著者 松田 直樹、後藤 賢司、こもり まさあき
対応デバイス
PC対応 Android対応

この本の内容

【複数デバイス対応を効率化するフロー&ノウハウがわかる!】

本書は、Webサイトをマルチデバイス対応(レスポンシブWebデザイン対応)させる上での、設計の考え方とCSSフレームワーク(Bootstrap)を利用した実装方法を伝える解説書です。

前半(1-6章)では「コンポーネント」の概念を取り入れた新しいサイト設計の考え方、フレームワークの特徴などを丁寧に紹介しています。実践編となる後半(7-11章)では、代表的なフレームワークであるBootstrapを用いて作成したサンプルをもとに、マルチデバイス対応サイトを設計・制作する手法、BootstrapのSass(SCSS)を使ったカスタマイズ方法を解説。最終章では実装をより効率化・チューニングする手法も紹介しています。なお、本書のサンプルデータはダウンロードにて提供します。

WebサイトがPCだけで見るものではなくなった昨今、サイトのマルチデバイス対応は必須要件となりつつあります。その一方、実装に工数を費やす従来の制作フローでは、作業効率や時間的コストの面で対応し切れなくなっているのが制作現場の実状ではないでしょうか。このような現況やニーズに応えた、「これからの」複数デバイスの考え方・ノウハウを理解していただくための必読の1冊です。

この書籍の目次


クレジット
はじめに
目次
本書の使い方
本書のダウンロードデータについて
■Lesson1 マルチデバイスで変わるWebサイト
01 デバイスの多様化が意味するもの
02 マルチデバイス対応が求められる背景
03 マルチデバイス対応の主流はレスポンシブWebデザイン
04 「モバイルファースト」の実例と考え方
05 マルチデバイスに対応したサイトならでは課題
■Lesson2 変わる「Webデザイン」のあり方
01 Webサイトは詰め込み型からプレゼンテーション型へ
02 コンテンツファーストで変わるWebサイトの価値
03 よりシンプルになるデザイン
04 フラットデザインがもたらすもの
05 ページ単位の設計からの脱却
■Lesson3 Webデザインはより「設計志向」へ
01 コンポーネントの考え方を取り入れた設計へのシフト
02 コンポーネントの考え方で情報設計そのものが変わる
03 マルチデバイス対応サイトの4つの設計分類
04 コンテンツ設計
05 サイトストラクチャ設計
06 レイアウト設計
07 形態設計(ビジュアル、UI)
08 インタラクション設計
09 実装ルール設計
10 ワークフローの変化
11 プロジェクトの進行効率化
■Lesson4 CSSフレームワークの基本と考え方
01 CSSフレームワークとは
02 CSSフレームワークの設計思想
03 CSSフレームワークの利点と誤解
04 ワークフローにCSSフレームワークを導入する
■Lesson5 主要なCSSフレームワークの特長
01 主要なCSSフレームワーク(1) Bootstrap
02 主要なCSSフレームワーク(2) Foundation
03 その他のCSSフレームワーク
04 CSSフレームワークの使いどころと選び方
05 フレームワークを使った事例
06 フレームワークのコンポーネントを試せるツール
■Lesson6 CSSフレームワークを使ったサイト設計
01 サイト設計はまずコンテンツありき
02 CSSフレームワークを中間成果物から取り入れる
03 コンポーネントを設計する
04 グリッドを設計してレイアウトを行う
05 ワイヤーフレームやプロトタイプを作る
06 CSSフレームワークでデザインカンプを作成
■Lesson7 Bootstrapの構成と基本
01 Bootstrapのファイル構成
02 マルチクラスを使ったBootstrapのCSS設計
03 グリッドシステム
04 ブレイクポイント
05 画像や動画表示のレスポンシブ対応
06 カラースキーム
07 Bootstrapの主なコンポーネント
08 JavaScriptコンポーネントの実装方法と注意点
09 Foundationのコンポーネント
■Lesson8 初級:サンプルのモックアップを作る
01 Bootstrapをベースにしたモックアップの作成
02 オーソドックスなグリッドパターンの実装
03 デバイスサイズによってカラム数を変更する
04 HTMLの構造に依存しないレイアウトテクニック
05 デバイスサイズでコンテンツの表示を切り替える
06 ナビゲーションバーの実装
07 画面幅いっぱいのバナーエリアを実装
08 アイコン付きのボタンと装飾
09 カルーセルの実装
10 モーダルウィンドウの実装
11 ツールチップを表示する
12 ラベルやバッジを追加する
■Lesson9 実践:Bootstrapをカスタマイズする
01 Bootstrapのカスタマイズ方法
02 カスタマイズ用のCSS設計のコツ
03 Bootstrapのソースファイル
04 ソースファイルに定義された変数
05 カスタマイズ専用のSCSSを用意する
06 ブレイクポイントを変更する
07 グリッドとガター、コンテナーサイズを変更する
08 縦中央揃えのグリッドを追加する
09 ボタンやラベル、リンクの色を変える
10 タイポグラフィをカスタマイズする
11 背景画像をRetina対応にする
12 テーブルをレスポンシブ対応させる
13 IE8でもレスポンシブ対応させる
14 その他のカスタマイズ
15 使うべきコンポーネントだけをコンパイルする
■Lesson10 実践:Bootstrapにない機能を追加する
01 offcanvasメニューを追加する
02 スクロールアップバーを追加する
03 全画面の写真・動画の背景
04 パララックス(視差効果)の実装
05 スクロール効果の実装
06 タッチ操作対応のカルーセル
07 Pinterest 風のタイルレイアウト
08 フォームのUIを強化する
09 アイコンフォントを追加する
10 ブラウザやコンテンツの出し分け
11 Bootstrapのリソース
■Lesson11 実践:実装の効率化とチューニング
01 HTMLコーディングをより早くするツール
02 HTMLをよりセマンティックにする
03 Bootstrapのアクセシビリティを向上させる
04 サイトパフォーマンスを向上させる重要性と対策
05 タスクを「gulp」で自動化する
06 CSS・JSリソースを結合・Minifyする
07 CSSから未使用のセレクタを削除して最適化する
08 画像を最適化・軽量化する
09 SVGを活用する
10 オリジナルのアイコンフォントを作る
11 Bowerでリソースを管理する
巻末:Bootstrap3のclass/data属性一覧
巻末:用語索引
執筆者紹介
奥付