BootstrapとMaterial Design Liteの違いを徹底検証！各ポイント10個まとめ

海外デザインブログTutorialzineで公開された「Comparing Bootstrap with Google’s New Material Design Lite」より許可をもらい、日本語抄訳しています。

Googleが、Android 5.0の登場と一緒に公開した、マテリアル・デザイン（英: Material Design）は多くのウェブサイトやアプリデザイン用フレームワークとして活用されています。すでに、ウェブコンポーネントをまとめたMUIやMaterial UI、Polymerなどのライブラリも公開されています。

2015年7月はじめに、Googleはより手軽にマテリアルデザインを活用できる、新しいフレームワーク「マテリアル・デザイン・ライト（英: Material Design Lite）」を発表しました。人気フレームワークBootstrapに標準を合わせており、今回は異なる違いを、徹底的に比較してみました。

詳細は以下から。

基本的な違いについて

具体的な違いを見ていく前に、BootstrapとMaterial Design Liteの主要な違いを確認しましょう。

理念（英: Philosophy）

Bootstrapは、もともとレスポンシブデザインをより手軽に作成できるように、Twitter社が開発しました。豊富なコンポーネントとカスタマイズ設定が可能で、ウェブデザイン、アプリ作成に向いています。
Material Design Liteは、Google社がマテリアル・デザインのコンセプトを広げるために開発しました。基本的なベースとなるブロック要素を作成でき、残りはデベロッパーのアイデア次第です。

開発のしやすさ（英: Development Experience）

Bootstrapは、とても詳しい説明書、ドキュメントが公開されています。デベロッパーは、サンプルコードよりコピー&ペーストできるので、より素早い制作が可能になります。
MDLに収録されているコンポーネントは、Bootstrapに比べ少ないですが、マテリアル・デザインのコンセプトを反映したモダンデザインの作成に着目しています。美しいアニメーションやハイクオリティな初期スタイル設定も魅力です。

レイアウト（英: Layout）

Bootstrapは、offsettレイアウトや、端末ごとにレイアウトを非表示にしたりと、カスタマイズ自由なグリッドシステムを採用しています。
MDLは、これまでを使われているレイアウトを採用しており、特にアドバンス機能などは含まれていません。

デザイン（英: Design）

Bootstrapでは、さまざまなコンテンツに対応する初期レイアウトに加え、さまざまなテーマも公開されています。
MDLは、より鮮やかな色使いに、ユニークなアニメーションなどを加えた見た目が特長です。また限定的な色使いで、カスタマイズも選択することができます。

では実践の現場でフレームワークを利用するときは、違いが分かりにくいかもしれません。今回は、両方のフレームワークを一度に確認できるデモページを用意しています。各サムネイルページをクリックし、確認してみましょう。

01. グリッド（英: Grid）

グリッドシステムは、現在のモダンウェブページの制作において、もっとも重要なツールのひとつです。スマートフォン端末からデスクトップまで対応した、レスポンシブデザインを実現します。

Bootstrapはサイズの等しい12個のカラムに区切られています。画面サイズに応じて、異なる4種類のスタイル（xs: 0-768px, sm: 768-992px, md: 992-1200px, lg: 1200px+）を適用することができます。

MDLも似たグリッドシステムを採用していますが、3サイズ（phone: 0-480px, tablet: 480-840px, desktop: 840+）のみの展開となります。デスクトップ端末では12カラム、タブレット端末では8カラム、モバイル端末では4カラムとなります。

Bootstrapのグリッドシステムは、グリッドの順序を入れ替えたり、オフセット機能に対応していたりと、よりレスポンシブ・フレンドリーです。MDLでも空カラムを加えることで、オフセットを実現できますが、次期バージョンで修正されるでしょう。

説明書・ドキュメンテーション: Bootstrapグリッド | MDLグリッド

02. ヘッダー・ナビゲーション（英: Header Navigation）

Bootstrapでナビゲーションメニューは、Navbarsと表示され、十分なスペースが確保できるまで、アコーディオン式に展開します。ナビゲーションの内部は、自由にレイアウトを分割することができ、自由なスタイリングを手助けしてくれます。

MDLも似ていて、モバイル用のハンバーガー型ナビゲーションメニューにはじまり、ウィンドウ幅に応じて展開され、あらゆるスタイリングが可能です。

説明書・ドキュメンテーション: Bootstrapナビゲーション・メニュー | MDLナビゲーション

03. フッター（英: Footer）

Bootstrapには、フッター用に独立したコンポーネントは用意されていません。MDLには、ミニとメガメニューの2種類のオプション設定が可能です。こちらのサンプルでは、BootstrapフレームワークにMDLフレームワークを移植し、グリッドスタイルとほんの少しのCSSスタイルを追加しています。

説明書・ドキュメンテーション: MDLフッター

04. タブ（英: Tabs）

両方のフレームワークとも、異なるコンテンツを表示できる、タブ機能に対応しています。ID名によって区別されたコンテンツは、いくつでも追加することができ、Javascriptを使って実現しています。（Bootstrapでは同様にjQueruも一緒に利用しています。）

説明書・ドキュメンテーション: Bootstrapタブ | MDLタブ

05. ボタン（英: Tabs）

Bootstrapでは、長方形ボタンに豊富なサイズ設定が可能です。あらかじめ用意されたCSSスタイル（Danger、Warning、Success、Infoなど）によって、自由に色を変更可能です。また、BootstrapにはSplitボタンと呼ばれる機能もあり、半分ボタンで半分ドロップダウンで表示できます。

MDLでは、長方形とサークルがたボタンの2種類を提供しています。Googleは、シチュエーションごとに利用するボタンを、明確なコンセプトで分けており、同時にアニメーションエフェクトも追加されます。

説明書・ドキュメンテーション: Bootstrapボタン | MDLボタン

06. テーブル（英: Table）

レスポンシブ・デザインに対応しづらい対応しづらいテーブル表現ですが、Bootstrapではスクロールバーを設置することで、この問題を解決しています。MDLではまだテーブル機能は、レスポンシブに対応していませんが、とても美しいインターフェースを実現しています。

Bootstrapでは、テーブル列を交互に色付けすることができ、MDLでは、初期スタイリングをベースに、お好みの列にデザインを追加することができます。

またMDLのもうひとつの素敵な機能とし、文字テキストや数字によって左右揃いを実現できます。Excelのように、文字テキストは中央に、数字は右揃えで表示されます。

説明書・ドキュメンテーション: Bootstrapテーブル | MDLテーブル

07. フォーム（英: Forms）

Bootstrapのフォームはインプット要素に加え、ラベルや入力ボックを揃える、スタイリングが用意されています。Validation機能は含まれていないので、Parsleyなどのライブラリを導入する必要があります。

MDLでは、限定的なインプット要素のみに対応していますが、マテリアル・デザインの美しいアニメーションを実装した初期スタイルも収録しています。入力したデータが無効の場合、エラーメッセージの表示にも対応します。

説明書・ドキュメンテーション: Bootstrapフォーム | MDLテキスト入力

08. ドロップダウン・メニュー（英: Dropdown Menu）

どちらもフレームワークとも同じアプローチ方法を採用した、ドロップダウンメニュー。ボタンをクリックすることで、トグルでコンテンツが表示されます。

Bootstrapの追加機能として、クリック範囲とドロップダウンメニューを分割（英: Split）することができます。

MDLでは、滑らかなアニメーションエフェクトが実装されていて、display: none/block; で実現されたBootstrapに比べて印象的な仕上がり。どちらもJavascriptをつかい、実装されています。

説明書・ドキュメンテーション: Bootstrapドロップダウン | MDLメニュー

09. ツールチップ（英: Tooltips）

Bootstrapでは、マウスホバー/クリックで展開するツールチップを、data-attributeで実現しています。また、シンプルなツールチップと、見出しタイトルに活用できるポップオーバーの、2種類のコンポーネントを収録しています。

MDLでは、タグを使って、ツールチップコンテンツを区別し、大小2サイズが用意されています。ただし、下方向へのポップアップ表示のみに対応。

説明書・ドキュメンテーション: Bootstrapツールチップ | Bootstrapポップオーバー | MDLツールチップ

10. アイコン（英: Icons）

Boostrapでは、Glyphiconsアイコンフォントが採用されており、250種類のデザインから選択することができ、あらかじめCSSでスタイリングされているので、特別な設定は必要ありません。

MDLは、Google社がすこし前に発表したMaterial Iconsを採用しており、800種類を超えるデザインが収録されています。初期設定には含まれてないので、に以下のコードを追加する必要があります。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

さいごに、、。

全体的にMaterial Design Liteは、フロントエンド向けフレームワークとして最適です。マテリアル・デザインのガイドラインを用いたウェブ・アプリケーションを開発したいけど、Polymerなどはややこしすぎるというときなどにも、ぜひ活用してみましょう。まだ初期段階のコンセプトですが、十分にマテリアル・デザインのコンセプトを取り入れることができるでしょう。

マテリアルデザインを手軽に！CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ

より詳しいマテリアル・デザインについては触れています、こちらも参考にいかがでしょう。