初心者でもBootstrapを賢く使いこなす！基礎からカスタマイズ、無い機能の追加まで -これからのWebサイト設計の新しい教科書

Post on:2015年4月3日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

Bootstrapは非常に便利なフレームワークですが、大切なのはその使い方。
Bootstrapの基礎知識をはじめ、カスタマイズ・無い機能の追加・運用、そしてCSSフレームワークの考え方や数多くあるフレームワークの選べ方まで、これからのWebサイト設計に役立つオススメの本を紹介します。

本書はBootstrapの完全マニュアルと言っていいほど、非常に充実した内容となっています。また、単に技術的なチュートリアルだけでなく、CSSフレームワークの利点や誤解、導入方法などの解説も充実しており、Webの制作そしてワークフローに関して深く知識を習得することができます。

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

著：: 松田直樹、後藤賢司、こもりまさあき
出版社：: MdNコーポレーション
発売日：: 2015/3/23

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書は2部構成。1-7章は知識編。
最近のWeb制作事情と考え方をしっかり押さえ、CSSフレームワークを使った従来とは進化したフローが解説されています。プロジェクトのフローなど、この機会に一度見直してみるのもいいかもしれません。

国内や海外の事例も豊富に掲載されています。
キャプチャはちょうど当ブログでも訳したものがあるので、参考に。
参考：コンバージョン率が改善された実例から学ぶフラットデザインの効果的な使い方

4章からいよいよ、CSSフレームワーク。
フレームワークを導入することで従来のワークフローからどう変わるのか、構造的なコーディングルール、用意された豊富な基本パーツ、もちろんパーツの追加も可能、デバイスやブラウザごとの表示エラーがないなど多くの利点があり、またそれらにかかる作業時間も大幅に短縮できます。

フレームワークは気になるけど、どれを使えばいいのか？どう使えばいいのか？悩む人は少なくないと思います。
Bootstrap, Foundationをはじめ、フレームワークは数多くリリースされています。それらの特徴と選び方、フレームワークに向いているプロジェクト向いていないプロジェクトなど、自分にあったフレームワークが分かります。

フレームワークにはグリッドのみ、最小限のコンポーネントのみのものも数多く存在します。

後半の8章からは、Bootstrapを使ったWebサイトの設計・実装を解説する実践編。
まずはグリッドの実装、そしてカラムやレイアウトを調整し、ナビゲーションや画像やボタンなどの配置と、Bootstrapを使ったページ作成の手順が分かります。

Bootstrapをベースにした実装もグリッドの設計から、カラム設定、ナビゲーションやコンテンツのコンポーネントの実装などここだけでもかなりのボリュームなのですが、カスタマイズ方法は更に充実しています。元のCSSファイルをベースに、ブレイクポイントの変更、グリッドの追加、エレメントのデザイン変更、そして変更したスタイルをどのようにCSSファイルにまとめるかまで、カスタマイズする際に知っておきたいことが全て学べます。

Bootstrapを利用するには、それだけでは足りないこともあります。Bootstrapにはない機能を追加することもできます。
最近のWebサイトで見かけるさまざまなコンポーネントやエフェクトの組み込み方が分かります。

サイトパフォーマンスの改善や作業効率の向上に有用なBootstrapの機能を補完するツールやテクニックもさまざまなものがあります。

巻末の付録、Bootstrap3で使用されているCSSのclassの一覧がこれまた便利。Bootstrapを使用する時だけでなく、自分で設計する際の参考にもなります。

各コンポーネントやJavaScriptで使用されているclassやdata属性も全て一覧になっています。

これからのWebサイト設計の新しい教科書の目次

マルチデバイスで変わるWebサイト

デバイスの多様化が意味するもの

マルチデバイス対応が求められる背景

マルチデバイス対応の主流はレスポンシブWebデザイン

「モバイルファースト」の実例と考え方

マルチデバイスに対応したサイトならではの課題
変わる「Webデザイン」のあり方

Webサイトは詰め込み型からプレゼンテーション型へ

コンテンツファーストで変わるWebサイトの価値

よりシンプルになるデザイン

フラットデザインがもたらすもの

ページ単位の設計からの脱却
Webデザインはより「設計志向」へ

コンポーネントの考え方を取り入れた設計へのシフト

コンポーネントの考え方で情報設計そのものが変わる

マルチデバイス対応サイトの4つの設計分類

コンテンツ設計

サイトストラクチャ設計

レイアウト設計

形態設計（ビジュアル、UI）

インタラクション設計

実装ルール設計

ワークフロー設計

プロジェクトの進行効率化
CSSフレームワークの基本と考え方

CSSフレームワークとは

CSSフレームワークの設計思想

CSSフレームワークの利点と誤解

ワークフローにCSSフレームワークを導入する
主要なCSSフレームワークの特長

主要なCSSフレームワーク1: Bootstrap

主要なCSSフレームワーク2: Foundation

その他のCSSフレームワーク

CSSフレームワークの使いどころと選び方

フレームワークを使った事例

フレームワークのコンポーネントを試せるツール
CSSフレームワークを使ったサイト設計

サイト設計はまずコンテンツありき

CSSフレームワークを中間成果物から取り入れる

コンポーネントを設計する

グリッドを設計してレイアウトを行う

ワイヤーフレームやプロトタイプを作る

CSSフレームワークでデザインカンプを作成
Bootstrapの構成と基本

Bootstrapのファイル構成

マルチクラスを使ったBootstrapのCSS設計

グリッドシステム

ブレイクポイント

画像や動画表示のレスポンシブ対応

カラースキーム

Bootstrapの主なコンポーネント

JavaScriptコンポーネントの実装方法と注意点

Foundationのコンポーネント
初級：サンプルのモックアップを作る

Bootstrapをベースにしたモックアップの作成

オーソドックスなグリッドパターンの実装

デバイスサイズによってカラム数を変更する

HTMLの構造に依存しないレイアウトテクニック

デバイスサイズでコンテンツの表示を切り替える

ナビゲーションバーの実装

画面幅いっぱいのバナーエリアを実装

アイコン付きのボタンと装飾

カルーセルの実装

モーダルウインドウの実装

ツールチップを表示する

ラベルやバッジを追加する
実践：Bootstrapをカスタマイズする

Bootstrapのカスタマイズ方法

カスタマイズ用のCSS設計のコツ

Bootstrapのソースファイル

ソースファイルに定義された変数

カスタマイズ専用のSCSSを用意する

ブレイクポイントを変更する

グリッドとガター、コンテナーサイズを変更する

縦中央揃えのグリッドを追加する

ボタンやラベル、リンクの色を変える

タイポグラフィをカスタマイズする

背景画像をRetina対応にする

テーブルをレスポンシブ対応させる

IE8でもレスポンシブ対応させる

その他のカスタマイズ

使うべきコンポーネントだけをコンパイルする
実践：Bootstrapにない機能を追加する

オフキャンバスメニューを追加する

スクロールアップバーを追加する

全画面の写真・動画の背景

パララックス（視差効果）の実装

スクロール効果の実装

タッチ操作対応のカルーセル

Pinterest風のタイルレイアウト

フォームのUIを強化する

アイコンフォントを追加する

ブラウザやコンテンツの出し分け

Bootstrapのリソース
実践：実装の効率化とチューニング

HTMLコーディングをより早くするツール

HTMLをよりセマンティックにする

Bootstrapのアクセシビリティを向上させる

サイトパフォーマンスを向上させる重要性と対策

タスクを「gulp」で自動化する

CSS・JSリソースを結合・Minifyする

CSSから未使用のセレクタを削除して最適化する

画像を最適化・軽量化する

SVGを活用する

オリジナルのアイコンフォントを作る

Bowerでリソースを管理する