マンガでなれる?WEBデザイナー講座

第1話 デザイナーもラクできる!Bootstrap3でサイト制作を始めよう

マンガでなれる?Webデザイナー講座 | 第1話  デザイナーもラクできる!Bootstrap3でサイト制作を始めよう

mika

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

yoko

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

mika

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

yoko

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

Bootstrapを使うメリット

レスポンシブWebデザイン対応のサイトがHTMLを書くだけで短時間で制作できる!

Webパーツが豊富に用意されているので自分でHTML,CSSをゼロから書く必要はない。

Webサイトでよく使用されているアコーディオン、タブ、カルーセルなどのjQueryプラグインが用意されており、classを指定するだけでJavaScriptが動作する。

LESS, SASSで使うと一括でCSSのスタイル変更やカスタマイズが可能になる。

ライセンスはMIT(Apache 2 license)なのでソース改変、修正、配布、カスタマイズ、商用利用可能。

例)下記のようにダウンロードした「Bootstrap」のCSS、JavaScriptの著作権と特許権の記述はそのままにして、可変なく使用すればOKです。

/* Generated by less 2.5.1 */ /*! * Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
yoko

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

mika

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

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

yoko

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

mika

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

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

(サイトテンプレートのコーディング時間:約2時間程度)

yoko

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

mika

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

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

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

対象デバイス 画面幅
大画面PC用 1200px以上
一般PC用 992px~1199px
タブレット用 768px~991px
スマホ用 768px未満
yoko

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

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

mika

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

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

ベクターで作るWebデザイン編

第1話 デバイスの多様化に向けて求められるグラフィックデザイン

http://creativeweb.jp/manga/webdesigner/page1/

第2話 ベクターデータで作るメリットとIllustratorの基本設定

http://creativeweb.jp/manga/webdesigner/page2/

第3話 Illustratorで作るレスポンシブWebデザインのワイヤーフレーム

http://creativeweb.jp/manga/webdesigner/page3/

第4話 Illustratorのワイヤーフレームからデザインを作る

http://creativeweb.jp/manga/webdesigner/page4/

第5話 Illustratorのデザインカンプから画像を書き出す方法

http://creativeweb.jp/manga/webdesigner/page5/

Twitterでシェアよろしくお願いします

Twitterでフォローする