正直、Webデザインは苦手だ。システムは構築できても、その後のデザインで行き詰まって頓挫したサービスは数知れない。最近ではWebデザインテンプレートを使うようになったが、汎用性の低いものが多くカスタマイズも困難な場合が多い。

ピクチャ 61.png

Basecampにも似たWebアプリケーションテンプレート

 

例えばWebシステムの管理画面を考えた場合、ユーザ向けの画面は気合いが入っているのに管理画面は酷いものが多い。そこで使ってみたいのがWeb App Themeだ。

今回紹介するオープンソース・ソフトウェアはWeb App Theme、テーマにも対応した汎用的テンプレートだ。

Web App ThemeはLighthouse、Basecamp、RadiantCMSにインスパイアされたWebアプリケーション向けテンプレートだ。右上のユーザ情報、タブを使った機能の振り分け、個別のタブの中にさらにセカンダリーのタブを設けられるようになっている。

ピクチャ 62.png

テーマを切り替えればデザインもがらりと変わる

 

デザインは2カラムで、左側にコンテンツ、右側にメニューを配置している。テーブルのリストは行ごとに色が変わり、フォームも見やすい。さらにエラーメッセージの色表示についても考慮されていたり、ログインやユーザ登録画面向けにカラムを一つにしていたりと開発者にとってとても使いやすい作りになっている。

リスト表示は左側にアイコンを並べて右側にコンテンツを配置したり、タブが角丸であったりと細かな使い勝手も考慮されている。さらにテーマを切り替えることによってがらりとイメージを変えることも可能だ。

Rails向けにはジェネレータが用意されているが、HTMLファイルとJavaScript、CSSがメインなので他のWebアプリケーションでも応用できる。開発者の苦労を感じ取ってくれている、優れたテーマと言えそうだ。

 

pilu’s web-app-theme at master - GitHub

 http://github.com/pilu/web-app-theme/tree/master