Twitter Bootstrap＋その他で「本当に」イケてるモックを作る手順

こんにちは、　6月に入社したR＆D部の@benzookapiです。　前職はi18nを専門に、JavaやPHPでいろんなwebやクライアントソフトウェアを作ってました。

ブログデビューの今回ですが、意外と情報が不足している Twitter Bootstrapを使った、「本当に」イケてるモック※を作る手順について書きたいと思います。

※モックとは、携帯電話の見本用の模型などの意味で、ここではWebアプリにおけるデザイナーさんに発注する前の仮画面といった意味で使ってます。

Twitter Bootsrapはいわずもがな手軽にイケてるページを作成できるフレームワークで、解説サイトなどを読むと「おーすげー、こんなかっこいいサイトがたったこれだけでできるんかい」とCSSいじるのがめんどくさい自分のようなエンジニアは感動してしまうのですが、いざそれを実際に開発するアプリに使おうとすると、実は色々不満が出て来てしまうのです。。

その不満とはずばり「ちょっとでも自分色を出そうとすると行き詰まってしまう」 です。

例えば、テンプレートの色合いをちょっと変えたい、ロゴ画像やボタンアイコンほしい、　吹き出しをエコに（画像なしで）手軽に付けたい、など、サンプルでなく本当の業務で欲しいモックの要望は、Bootstrapだけでは対応できません。
で、それらを補完する他のフレームワークやライブラリと併用としようとした途端、 ググりの嵐、　サンプルみたいに動かん、どれつかえばええんじゃ、　これ前調べた。。。という時間の浪費に陥ってしまうわけです。

以下はそんな自分の経験の備忘録で、「なるべく手軽に使えて互換性のある」サービスやライブラリを使って、Bootstrapベースのモックを作る手順です。



1. まずはBoostrapをダウンロード、読み込み。（手順については各サイトをご覧ください。これ自体は難しくないです。）

http://twitter.github.com/bootstrap/

2. ボタンなどのパーツは、上記サイトメニューのscalfolding～Componentsまでをみながらチョイス。（意外と気づかない。。）
ブラウザのページソースか、firebugなどのデバッグツールで、サンプルページの実際のHTMLソースからコピるのが確実。
scaffoldingのgrid（DIV）を使いたい場合は、HTMLソースからたどって、docs.cssをダウンロード。（これ、デフォルトで入ってないんです。以下参照。）

http://twitter.github.com/bootstrap/getting-started.html#file-structure 

3. デフォルトのままだとあまりにもHellowWorldなので、テンプレートを調整する。ここで、決して自分でRGBを決めてCSSいじりながら配色してはならない！
無駄な時間過ぎるだけ。　デザインにはいい感じになるRGB配色のパターンがあって、
デザイナーさんはだいたいそのプリセットから選びます。
というわけで、bootsrapのcssギャラリである以下から気に入ったものを選び、
CSSダウンロード（基本、bootstrap(.min).cssの上書きでOKです）

http://bootswatch.com/

4. やっぱり最近のUIぽくするには吹き出しほしいよね。て、あれ、吹き出しってBootstrapでどうやってつけるんだ？
そう、吹き出しボックスはbootstrapにありません。（Twitter使ってるじゃん！）なので吹き出し使うには別のjQueryやCSSライブラリを探すのですが、これがBootstrapとの相性なのか、なかなか簡単に動くものがない！
そこで色々試した結果、以下はdefault.cssだけでいい感じの吹き出しを入れれるんでおすすめです！

http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

※注意：IEでこの吹き出しを表示するには、自身のcssで以下のスタイルを該当クラスに追加する必要があります！

 .triangle-border, .btn, .bubble, .example-obtuse, .triangle-isosceles, .badge, .label {
    behavior: url(../css/ie-css3.htc); 

}

ie-css3.htcは、以下からダウンロードできます。
http://fetchak.com/ie-css3/

ちなみに、Bootstrap自体もIEでは丸角がうまく表示されないのですが、それもこれで直ります！


※追記：　執筆時に気づいていませんでしたが、TwitterBootstrapはリニューアルされて吹き出しJａｖａScriptが提供されているようです。
（Twitter上でご指摘いただきました）
http://twitter.github.com/bootstrap/javascript.html#popovers

Bootstrap使うにはこちらのほう使った方がいいと思います。

ごめんなさい、Twitterさん！ でも、上記の吹き出しCSSもCSS一枚でJavascriptなしで動作するんでBootstrap使わない時とかいいと思います。



5. ボタンとかのアイコンもBootstrap以外の大きめで海外サイトみたいなのがほしい！という場合は、ライセンスフリーで欲しいアイコンがすぐ手に入る以下がおすすめ！（検索は英語で。候補表示ありです。）

http://www.iconfinder.com/

6. サイトのオリジナルロゴもほしいよー。
以下サイトから気に入ったのを選び作成、ダウンロード！（Twitlogoは、さすがBootstrapと相性いい。　RGB変えればそれなりにオリジナリティでます！）

http://girlsnet.ninpou.jp/logo.html

以上で、　とりあえずおしゃれなモックが作れます。（と思います）

でもその後デザイナーさんの画面と差し替えた時、「やっぱプロは違うぜ。。」と打ち拉がれるわけですが。。

とりあえずレビュー通す時、お粗末なHTMLよりある程度イケてる画面のほうが断然いいよね！ってことで、モック作りに苦戦している方の参考になれば幸いです。

Tweet

　　シャノンについてはこちら