Archive | デザイン RSS feed for this section

Twitter Bootstrap vs Google Bootstrapまとめ このエントリーをはてなブックマークに追加

25 1月

Twitter Bootstrapには常日頃からとてもとてもお世話になっています。最近、Twitter bootstrapからフォークして誕生したGoogle Bootstrap。両者の違いをまとめました。気分によって使いわけよう。

リンク

Overview

  • 基本的なところはだいたい同じ。
  • Google Bootstrapが拡張した部分について、特に本記事にまとめています。
  • Twitter Bootstrapのほうが、色味が薄く、padding や line-heightをとっており、余裕があるデザイン。ボタンやフォームは角丸。
  • Google Bootstrapは、文字が少し小さく、コンパクトな印象。ボタンやフォームは四角くて、ペタッとしている。

では、細かい部分の説明です。

テーブルダグ

クラス名は.success, .error, .warning, .info と同じですが、若干色味が違います。Googleのほうが少し濃い色になっています。

検索フォーム

Twitter Bootstrapの検索フォームが丸いのに対し、Google Bootstrapは四角いです。フォームにフォーカスすると、Twitter Bootstrapのほうがボワーっと光るエフェクトが大きいです。

セレクトボックス

Google Bootstrapでは、セレクトボックスが基本灰色で、開くと選択部分が灰色になる。

ファイルアップロード

ファイルアップロードフォームはGoogle Bootstrapのみ。でも…あんまり…なんかふつう。

その他、フォームは全体的に、Twitter Bootstrapが灰色グラデーション・角丸・立体的なのに対し、Google Bootstrapが灰色・四角・ペタっとしている。

フォーカス

Twitter Bootstrapは、フォーカス次のボワーがちょっと豪華。Googleは、Invalidなフォームの外枠が青なんですね。なんで?

ボタン

Twitter Bootstrapのボタンはおなじみ、同色グラデーション・角丸。若干大きいかんじがします。リンクの色は明るめの青です。

対してGoogle Bootstraoは、ボタンの色は一色で、四角です。結構前にGoogleのデザインが一新したとき、「うわっ!ださっ!」とWeb界隈が一瞬引きましたが、今は慣れましたよね。あのボタンです。リンクの色はちょっと濃い青。

ボタンサイズ

ボタンのサイズも、Twitter Bootstrapのほうが若干大きいです。

コンポーネント/タブ、ナビリスト

Google Bootstrapの上のコンポーネントは、ulタグに.nav-tabs .nab-tabs-google とつけたときに表示される、Google Tabsというものです。Googleのサービスでよく見ますね。Android4系も、こんなかんじのインタフェースがある場合があります。

下のコンポーネントはNav listsコンポーネント。Googleのコンポーネントは、Googleのサービスをよく使うようなユーザでないと、このリンクは押せるか押せないか?ということがわかりにくいかもしれませんね。

黒いナビバー・Inverted variation

Google Bootstrapは、Twitter Bootstrap風のバーを各種揃えていますが、「.navbar-googlebar」というクラスをつけることで、Google Bootstrapが提供しているバーを利用することができます。中でもパッと見て違うのが、Googleの黒バー。黒というよりは灰色で、アクティブになっている部分がカッコイイ!(Google bootstrapで、Homeの部分がactiveになっています。)

その他のGoogleバー

バーについてはGoogle Bootstrapが独自に拡張したものが多々あります。この上のバーは、アクティブになっている部分の下が、切符切りされたみたいに三角でカワイイ。

ページャ

ページャーは、Twitter Bootstrapが白ベース、Google Bootstrapが灰色ベースです。

ラベル、バッヂ

ラベルとバッヂ。バッヂは、スマートフォンの通知がまとめられているときなどによく見る、あの「通知何件」の表示法。色味はGoogleのほうがはっきりしている。Googleのラベルは四角い。

アラート

アラートは、全体的にGoogle Bootstrapのほうが濃くなっている。特に、通常のalert(黄色)の文字色が黒になったのは嬉しい。Twitter Bootstrapの黄色背景に黄色文字だと、ちょっと見辛かった(いや、CSSで上書きすればいいのですが…)。

おわりに

以上が、主なTwitter BootstrapとGoogle Bootstrapの違いです。

全体的にTwitter Bootstrapはポップで可愛いかんじ、Google Bootstrapはビジネス向きなかんじがしますね。

いずれにせよ自分たちで多少CSSを編集する必要がありますが、イメージに近い方のBootstrapを使うといいのかなーと思いました。