Webサイト開発にパワーを与えるデザインテンプレート「Semantic」
SemanticはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Bootstrapはとても人気がありますが、より実践的に使われるであろうUIコンポーネントを多数提供してくれるデザインフレームワークがSemanticです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.19.27.1379167909.png)
ID、パスワード入力フォーム。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.19.35.1379167916.png)
チェックボックス。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.19.43.1379167926.png)
ローティング。これは良くある処理だけに便利ですね。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.19.50.1379167931.png)
入力エラーも項目毎の表示がサポートされています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.20.06.1379167935.png)
ボタン。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.20.14.1379167940.png)
押せる/押している/押せないといった各ステータスごとの表示ができます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.20.27.1379167944.png)
Bootstrap並に様々なカラー設定が用意されています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.20.47.1379167952.png)
こんなフィード表示も。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.20.55.1379167957.png)
日付を表示したり、下に追加の画像を表示したり。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.21.08.1379167962.png)
コメント。カード型で格好いいです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.21.14.1379167966.png)
多段のコメント。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.21.35.1379167972.png)
アイテム。こういう表示も良くありますよね。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.21.43.1379167978.png)
さらに複数並べた形。左右はつながっています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.22.47.1379167987.png)
最近多い背景を隠して表示するデザインです。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.22.57.1379167991.png)
さらにそれを特定のDOMに対してのみ適用するデザイン。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.23.20.1379167996.png)
パン屑だけでも数種類用意されています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.23.36.1379168001.png)
テーブル。チェックやバツボタンもサポートされています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.24.04.1379168006.png)
右側から出てくるメニュー。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.24.36.1379168011.png)
回転するボックス。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-14 15.25.02.1379168017.png)
フローティングのツールチップ。
SemanticではBootstrap以上にアニメーションやウィジェットの表示パターンが多く登録されています。どれを見てもああ、これは使いたくなるといったデザインのものばかりです。デザイナー不在のプロジェクトでもSemanticを使うと格好いいデザインに仕上がりそうです。
MOONGIFTはこう見る
Bootstrapを使ってサイトを作っていると、もっとカスタマイズしたウィジェットが欲しいと感じることが多々あります。そういったウィジェットはない訳ではないのですが、Bootstrap自体の進化が早いために古いライブラリは既に使えなくなっていたりします。
Semanticではそういった良くある表現を予め内包してくれていますので、デザインで困ることが少なくなるのではないでしょうか。もちろんそれでも足りないと感じることはあるでしょうが、Boostrapよりは少ないのではないかと思います。