Bootstrapライクに使えるWebデザインテンプレート「Zurb Foundation」 // MOONGIFT Archived

Zurb FoundationはWebデザインテンプレートです。記法に則ってデザインすることで様々なデバイスに対応したWebサイトが作成できます。

一定の記法に則って書くだけで様々なデバイスに対応したWebデザインを行ってくれるのがZurb Foundationです。Zurb Foundationを使って格好いいWebサイトを量産しましょう！

ボタンです。ただ普通に書くだけでこんなデザインに。

フォームです。エラー時も含めて格好いいです。

ブロックです。細かく制御できます。

メッセージ系もちゃんとカバーされています。

タブ表示も可能です。

上にラインを引いたNice Tabも。

もちろんページネーションもあります。

スライドで画像を差し替えるコンポーネントも用意されています。

上からスライドで下りてくるダイアログ。ログインやメッセージに使えます。

Rails3.1向けにRubygemsも用意されています。

でも生成するのはJavaScript/Stylesheetなのでこれをそのままコピーしてもいいかもしれません。

後はFoundationを読み込めばRailsアプリがかっこうよくなります。

Zurb Foundationの記法に則ってWebデザインを行う必要がありますが、そのルールさえ覚えてしまえば手軽に見栄えのいいデザインが実現できるようになるのではないでしょうか。一つのデザインでデスクトップ、スマートフォン、タブレットなどもこなせるのが利点のライブラリとなっています。

Zurb FoundationはMIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

最近この手のデザインフレームワークが増えてきました。有名なところではTwitterのBootstrapがあります。昔、Web2.0という単語が出始めた頃、Flickr風やTwitter風のロゴを生成するサービスがはやりました。感覚としてはあの延長線上に近いのかもしれません。

とにかくWebプログラマーではデザインを苦手とする人が多く（私もそうですが）、デザインがうまくいかないためにサービス開発を取りやめてしまうケースさえあるほどです。そうした機会損失を考えると、デザイナーもまたオープンソースとしてデザインを公開していくニーズが大きいと思われます。