今回はBootstrapを使ってサイト制作する方法を紹介します！

ブートなんとかって何ですか？

BootstrapはTwitter社が開発したCSSフレームワークです。フレームワークとはCSSの枠組み、スタイルが最初から定義されているライブラリファイルのようなものです。

フレームワークって最近よく聞きますね。 使うとどんなメリットがあるんですか？

商用利用可能でカスタマイズ自由なのは受託案件でも安心して使えますね！
レスポンシブサイトがHTML書くだけで作れるなんて便利です！！

フレームワーク使うと何がいいかというと受託案件の場合はクライアントと早い段階でCSSやJSの動作確認がモックアップ（ワイヤーフレーム）の時点でできるという所です。
（「アジャイル型」のワークフロー）

HTML、CSSが初期段階で制作できていれば、後はデザインやコンテンツ制作に集中する事ができるのでエンジニアだけではなくデザイナーの人にもCSSフレームワークはおすすめです！！

確かにレスポンシブサイトだと動きや表示に関して早期に決めておいた方が制作はスムーズですね。

私はランディングページやシングルページ案件でもほぼ全てにBootstrapを使っています。

この「マンガでなれる？Webデザイナー講座」のページもBootstrapをベースに作っています！

（サイトテンプレートのコーディング時間：約2時間程度）

え〜！？このサイトもBootstrapだったんですか。全然気づきませんでした。

Bootstrapの良い所は素早くレスポンシブのレイアウトが組めるので、最近のスピード重視のWeb案件には最適だと思います。

特にレスポンシブWebデザインの場合は自分でCSSを作成する場合はメディアクエリをデバイスごとに書く必要があるのでコーディング時間は何十時間にも膨れ上がってしまいます。

Bootstrapだと下記のように初めから設定されているので自分でメディアクエリを書く必要がありません。

私、CSSでメディアクエリ書くの苦手なんですよね〜。
スマホのデザインを指定したつもりなのに、PCのデザインまで影響出て崩れちゃったりしますし。

レスポンシブのコーディングに自信がない私でもBootstrapだとできそうな気がしました！！

来週からはIllustrator編で作ったIllustratorデザインカンプからBootstrapでサイト制作する方法を紹介します。

デザインカンプについては前回の講座を参照ください。