モダンなWebサイトを実現するためにはモダンなデザインフレームワークを使うべきです。そうすることで全体の統一感が生まれ、使い勝手の良いWebサイトが生まれます。継ぎはぎでは統一感を出すのは困難です。 今回はMicrosoft公式のBootstrapテーマ、winstrapを紹介します。最近のMSらしい、モダンなWebデザインが実現します。

winstrapの使い方

スクリーンショット多めで紹介します。まずはカラーリング。確かにそれっぽいですね。

カラーリングも複数パターン用意されています。

グラデーションも細かく設計されています。

枠組みだけ。

黒バックの場合。

タイポグラフィ。

アイコン。

グリッド。かなり細かい印象です。

ボタン。

チェックボックス。ラベル全体をチェックします。

トグルスイッチ。

フォーム。

テキスト入力。

コンボボックス。

ツールチップ。

ダイアログ。

タブ。

ナビゲーションバー。

縦型メニュー。

パンくずリスト。

レーティング。

ラベル。

メディア。

メディアプレイヤー風のデザイン。

テーブル。

ページネーション。

ページャー。

ジャンボトロン。

全体としてはフラットデザインですが、枠線が強調されている分、よりシャープな印象を受けます。Windowsアプリで使ったり、Microsoft系のソフトウェアに関連したサービスではこのデザインが活きそうです。

winstrapはBootstrap用のオープンソース・ソフトウェア（MIT License）です。

winstrap winjs/winstrap: The official Bootstrap theme for Microsoft’s Modern design language