デザイン - Bootstrapの記事一覧
Bootlint - Bootstrapサイトの検証に！
BootstrapをベースにWebサイトを組む例が増えていますが、Bootstrapの流儀をちゃんと踏まえて作っている人がどれだけいるでしょうか。ちゃんと把握していないとウィンドウサイズが変化した時に思った表示にならない事態につながります。そこで使ってみたいのがBootlint、Bootstrap専用の検証ツールです。...
Summernote - シンプルなUIのBootstrap用WYSIWYGエディタ
ユーザにコンテンツを作ってもらう上で欠かせないのがWYSIWYGエディタです。HTMLでの記述に慣れた人にとっては邪魔くさいかも知れませんが、そうでない人のがたくさんいます。そうした人が自由に思い通りにコンテンツが作れるWYSIWYGエディタはとても大事です。今回紹介するSummernoteもそんなWYSIWYGエディ...
Gentallela – 多くのデザインパターンに対応したBootstrap製の管理画面テンプレート
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallela
Honoka - 日本語も綺麗に表示できるBootstrapテーマ
当たり前ですが、英語圏のソフトウェアは英語が綺麗に表示されるように調整されています。そのため日本語にした時に幅が足りなかったり、そもそもフォントが当たっていなくて汚い表示になったりします。Webのモックアップなどで多く使われているBootstrapについてもそうです。日本語を綺麗に表示するならBootstrapを日本向...
bootstrap-google-plus – Google+風のBootstrapテーマ
Bootstrapの良いところは構造が標準化されたことで、多くのテーマが作られていると言うことです。もし使っているデザインが時代遅れになってきたと思ったら、テーマを差し替えることで一気に新鮮みを出すことができます。今回はBootstrapをGoogle+風にしてくれるテーマ、bootstrap-google-plus
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するで...
Cluckles – Bootstrapテーマエディタ
Bootstrapを使ってWebサイトを手早く作っている人は多いと思います。しかしデフォルトのままではBootstrapの味が強く残ってしまいます。しかし色や線の太さを変えるだけでも印象はずいぶん変わるものです。そこで使ってみたいのがClucklesです。Clucklesはリアルタイムプレビュー付きのBoostrapテ...
Diversity - Bootstrapで作られたシングルページアプリケーションテンプレート
SPA（シングルページアプリケーション）が流行っています。通常のWebサイトと異なり、ランディングページやプロジェクトのトップページで使われることが多く、様々な情報を見やすく並べて表示する必要があります。Diversityはそんなシングルページアプリケーションに最適なテンプレートです。しかもBootstrapベースとあ...
Dashboards by Keen IO – グラフを多用したBootstrap管理画面テンプレート
Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化...
ClockPicker - 時間入力を簡単にするBootstrapライブラリ
Bootstrapの良いところとして、十分に普及したこともあって色々な人たちがUIコンポーネントを作成しているというのがあります。標準で提供されるHTMLコンポーネントだけでなく、よりリッチな入力インタフェースが実現できます。ということで今回はClockPickerの紹介です。カレンダー指定によって日付入力は分かりやす...
markdown2bootstrap - MarkdownをBootstrapと組み合わせてHTML化
MarkdownでHTMLが出力できるのは良く知られていますが、生成されるのは素のHTMLタグとなっています。このまま表示に使いたいと思うことは殆どないでしょう。必要なのは多少なりともデザインです。そこで使ってみたいのがmarkdown2bootstrapです。MarkdownからHTMLを生成し、それに合わせたBoo...
Responsive Dashboard - Bootstrapベース、レスポンシブな管理画面テンプレート
Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。今回紹介するResponsive Dashboardもその応用例と言えます。いわ...
Maverix Bootstrap Theme - BootstrapをベースにしたMac OSX風UIテーマ
ああ、これは面白い！Bootstrapで様々なテーマが作られていますが、基本的にWebアプリケーション向けです。Webでの利用については既に多数のコンテンツが存在しますし、おそらく今後も増えていくでしょう。そこで次に注目したいのがnode-WebKitとの組み合わせです。ネイティブアプリ風に動くWebアプリケーションの...
2014/05/16
2014/05/16Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今...
Hierapolis – フラットUIを活かしたBootstrap管理画面テーマ
管理画面であれば社内の人くらいしか使いませんので、あまりデザインにこだわる必要がないのでベタなBootstrapを使ってもそんなに嫌がられることはないでしょう。とは言えちょっとは格好よく見せたい場合もありますよね。そんな時に使ってみたいBootstrapテーマがHierapolisです。フラットなデザインで格好いい管理...
editableTableWidget – Bootstrapでその場で編集できる表計算を実現
これは使い勝手良さそう！Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがe...
Bootflat - フラットUIで格好いいBootstrapテーマ！
創造意欲がかき立てられますよ！Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してく...
AdminLTE – ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート
これで十分でしょ！Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されて...
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBoo...
Bootstrapの善し悪し
Twitterが開発したHTML5テンプレートBootstrapをMOONGIFTで紹介したのは2011年9月1日