feb19.jp

Nobuhiro Takahashi
Designer / Engineer

消費される UI - Twitter Bootstrap

Twitter Bootstrap や似た趣旨を持ったフロントエンドライブラリ (Pure とか) を使って UI を作ればかっこいいとか、デザイントレンドをフォローしていてイケてる的な話を最近よく見かけるのでちょっと自分の考えをまとめてみる。


Twitter Bootstrap とは

モバイルファースト指向に基づいて、レスポンシブウェブに対応している、HTML コンポーネント集、フロントエンドライブラリです。

モーダルウィンドウや、様々なピッカー、スライダーなど HTML デフォルトにはまだ出揃ってはいないコンポーネントが用意されています。そしてそれらが簡単に表示でき、高速にビューが構築できる、というメリットがあります。

そして先日 RC1 が公開された Twitter Bootstrap 3 ではより最近気味のフラットデザインに基づいてデザインされており、デザイントレンドがフォローアップされています。
http://getbootstrap.com

Twitter Bootstrap は多くの場所で使われており、以下のようなニュースが先日出ていました。

Twitter Bootstrap、ウェブ全体の1%に影響を及ぼすまでに
http://techwave.jp/archives/bootstrap_powering_1per_of_web.html

最近のウェブアプリケーションフレームワークには Twitter Bootstrap がバンドルされていて、生成されるテンプレートにクラスをちょっとつけるだけで簡単にそれっぽいフロントエンド UI を作成することができるようにもなっています。


Twitter Bootstrap とデザインエンジニアリングとの差異

Twitter Bootstrap 自体や、似たフロントエンドフレームワークは大変すばらしいのですが、使う側は危険性が伴うことを理解しなければなりません。

・Twitter Bootstrap は元々有る UI をそれっぽく表示するスキンや、
 拡張するためのコンポーネント群であって、
 UI の選択自体の妥当性が担保されるものや、
 サイト自体が使いやすくなるものではありません。

・Twitter Bootstrap でできた UI はそもそもデフォルトの UI ではないので、
 Twitter Bootstrap でできた UI に触ったことの無いユーザーは、
 使い方が分からないということはよくあります。

・Twitter Bootstrap は CSS をかなり盛るので、
 この状態からさらにカスタマイズするという選択肢は、
 実は難度の高いマークアップが必要になります。


Twitter Bootstrap に責任はない

Twitter Bootstrap 自体は素晴らしいです。
ボタンも押しやすそうですし、コントラスト、フォントサイズも十分。
なんにせよモックであったり、特にカスタマイズを考えない簡単なページであれば、高速で組めるのでとても素敵で、便利です。

しかしニーズとして View コンポーネントを実現するために使われるので、パーツ単位で検討しがちで、全体を通しての UI 検討がされていないことが多いので、「Twitter Bootstrap 使っているのにダサい」サイトができてしまいます。

そして最悪なことに、「Twitter Bootstrap 臭がする」と言い出すモンスター UI 消費者が現れたりします。
(これはユーザーよりプロデューサー級の人が言ったりする)


Twitter Bootstrap をカスタマイズする猛者たち

それでも Twitter Bootstrap をカスタマイズしてデザインを当てて、よりコンポーネントを充実させる猛者たちがいます。
もはやここまでやるなら Bootstrap でなくてええんちゃうのとか思ってしまいます。こういったテンプレートを作る方はやはり全体的な UI の設計思想がきちんと整理されているのではないかと思います。

Chakra
http://themes.alessioatzeni.com/html/chakra/dark/index.html

Unify
http://htmlstream.com/unify/

Ace
http://192.69.216.111/themes/preview/ace/


フレームワークを理解する

Twitter Bootstrap に限らず、フレームワークを使って作業をショートカットをすることは、とても便利でなのでよく現場で使われています。

しかし某 F なんとか CC 社の某クリエイティブプロデューサー氏がご一緒させていただいた酒の席にて『フレームワークは便利だが、何が行われているか理解した上で使う』『フレームワークをちゃんと理解して愛してやるべき』『フレームワークには必ず副作用がある』とおっしゃっていたことを思い出しました。

顔が真っ赤で照れていたのかお酒のせいなのかは絶対後者だと思いますが、
Twitter Bootstrap もフレームワークです。

ちゃんと理解して愛した上でつかわせていただきます(しょう)。

Navigation

prev: スマホ向け HTML5 ウェブゲームを作るために必要な 5 つのこと
next: AltJS について独断と偏見によるオレオレ品評会

Recently Entries