ITエンジニア/デザイナ向けにオープンソースを毎日紹介

モダンな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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2