酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

ひと味ちがうTwitter Bootstrapの18個の無料テンプレート&有料まとめサイト

Twitter Bootstrapはデザインが苦手なプログラマのための必須ツールです。今回は、一味違ったBootstrapサイトを作るときにきっと参考になるテンプレートをまとめてみました!

追加情報

最新のBootstrap3に対応したテーマの一覧です。最近はこちらのほうがオススメかも!
Bootstrap3 の無料テーマ・格安有料テーマまとめのまとめ

BootstrapをRails4.1に簡単に導入する手順です。RailsでBootstrapを使う場合はこちらもオススメです!
Bootstrap/BootswatchをRails 4.1に導入! - 酒と泪とRubyとRailsと


無料のテンプレート

無料のBootstrapテンプレートの紹介です。BootswachのようにCSSだけで適用できるものと、HTML/CSS/JSなどいろいろ追加しないと実現できないものがありますが、Bootstrapを使ったサイトを作るときには参考になると思います!

Bootswatch

このテンプレートネタを扱う上で、まず第一に語るべきなのが鉄板の「Bootwatch」です。

bootswatch

ちなみに、BootwatchをRailsで使う手順を「RailsにMetroライクなBootstrapテーマCosmoを速攻導入する」にまとめています。よかったら参考にして下さい!

Flat-UI

Twitter BootstrapベースでつくられているフラットなデザインのUIキットです。ベクター素材のカッコイイアイコンまで含まれています!

Flat-UI

Bootstrap Themes

管理画面に最適なBootstrapのテーマです。バランスもよくってカッコイイです。リンクを付けたかったり、自分のサーバ以外で使いたい場合には有料みたいです。

bootstrap themes

Flatstrap

Twitter Bootstrapをフラットなデザインにしたテーマです。カッコイイ!

Flatstrap

Andia

クオリティの高いレスポンシブ・デザインに、「Home, Portfolio, Services, About, Contact」までデザイン済という至れり尽くせりのテンプレートです。

Bootstrap Template Andia

TODC Bootstrap

Twitter Bootstrapからフォークして、GoogleっぽいUIにしているテンプレートみたいです。

TODC Bootstrap

GreenMind

クラスメソッドの山田さんが制作されたテーマです。シックな色合いが抜群に素敵ッス!

GreenMind

Respond 1.5

落ち着いた色使いで、シンプルなので使いやすいテーマです。

スクリーンショット 2013-01-27 22.27.46

BootMetro

Windows 8の MetroっぽいUIを作ることが出来るBootstrapのテンプレートです。

bootmetro

Bootbusiness

ビジネス、会社向けのWebデザインに最適なTwitter-Bootstrapテンプレートです。

Bootbusiness

KataKlimt

Bootstrapでここまでできるのか?って思えるほどすごい出来です。

bootstrap template

Stylish

これもクオリティ高いです。黒を貴重にして「スタイリッシュ」なデザインになってます。

スクリーンショット 2013-01-27 22.29.47

名前不明

シンプルですが、綺麗なデザインです。本のようなページ遷移があって面白いです。(ページ遷移はBootstrapとは直接の関係はないですがw)

スクリーンショット 2013-01-27 22.25.11

JessicaWhite

白を基調にしたデザインです。配置のバランスも抜群です!

free_bootstrap_template

Charisma

管理画面のテンプレートです。ところどころに小さな動きがある点と、Bootswatchベースのテーマが9種類ある点がポイントです!

Charisma

FBStraap

Facebook風のデザインを再現できるテンプレートです。Facebookアプリに最適かも。

Fbootstrapp

Geo for Bootstrap

ネタなテーマです。ほんの少し前まではこんなサイトが乱立してたよなぁww

Geo for Bootstrap

Coming soon page in Twitter Bootstrap

よくある告知系のページをBootstrapで作る場合に使えそうなツール。動きがあってデザインがきれいなページを簡単に作れそうです。

Coming soon page in Twitter Bootstrap

1pxdeep

デザイ系有名なブログコリスさんの記事『Bootstrap 3対応、高性能なカラースキームツールを備えたテーマファイル-1pxdeep』で紹介のあったツールです。自分の好みの色を指定すると、Bootstrap 3対応のテーマを生成してくれるツールです。個人でも商用でも無料で利用できます。

1pxdeep

Themestrap

Bootstrap 3に対応した無料のテーマを集めているサイトのようです。2013/08/30時点ではまだ2つですが、なかなかセンスの良いテーマが集まっています!

Themestrap

BootTheme Gallery

Bootstrapのテーマをユーザーが作成できるツールBootThemeを使って生成されたテーマのギャラリーです。玉石混交ですが、たまに面白い配色のデザインがあります!

BootTheme Gallery

有料テンプレートサイト

ここからは有料のテンプレートの紹介です。メインの価格帯は$20(1,800円)くらいなので、作業時間の節約や複数のサイトで使いまわせる点で有料テンプレートも選択肢としてありだと思います!

WrapBootstrap

Bootstrapのテーマを専門に扱っているサイトです。おそらくいちばん有名なサイトだと思います。テーマの数と質がどんどん上がってきているので、見るだけでもオススメです!

wrapbootstrap

Bootstrap | ThemeForest

Wordpressのテーマの販売で有名なThemeForestでもBootstrapのテーマが販売されています。こちらもなかなかの数です。

themeforest

Premium Twitter Bootstrap Themes

$5(500円弱)からBootstrapのテーマが販売されています。

Premium Twitter Bootstrap Themes

おまけ1: Bootstrap Expo

Bootstrapで作られているサイトの中でも、特にイケてるサイトが厳選されています。あの有名サービスもBootstrapベースなのか?って驚きました〜^^

Bootstrap Expo

このテーマに関連するオススメ本

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針』はデザイナさんだけでなく、プログラマーさんや一般のビジネスマンさん、管理職の方が見ても「学び」が大きい本です。「人の認知の仕方、感じ方、注意の向け方など」をビジネスに結びつけて書いているのでとても読みやすいです!


Special Thanks

50 Awesome Twitter Bootstrap Templates

変更来歴

(04/03) MagicSuggestを追加しました
(04/04) Bootstrapのリソースネタを別の記事にしました
(04/07) GreenMindを追加しました
(04/20) Google Bootstrapの名称をTODC Bootstrapに変更
(08/19 20:10) Andia、Bootbusiness、Charismaを追加
(08/30 20:55) 1pxdeep、Themestrapを追加

10秒でバイトが見つかるアプリ「Short.Works」作ってます!

iPhoneアプリ Short.Works 概要
短期のアルバイトを10秒で探して、応募ができるiPhone/Androidアプリ『Short.Works』を9月リリース目標に開発しています。

どんなアプリ?

* 「明日3時間暇だから、バイトしよう!」が簡単にやれるようになる
* 「近くで・時給の高い」、短期のアルバイトが2タップで見つかる
* 引っ越しやイベントのスタッフなど急に必要になったサポートをすぐに探せる
詳しくは『Short.Works Blog』にどんなアプリなのかを少しずつ紹介します。もし興味があればぜひ読んでみてください!

一緒にアプリを開発しませんか?

現在8人のチームで基本リモートで開発しながら、毎週日曜日に「Hackathon House」にあつまってアプリのアイデアを考えたり、モクモク開発したりしています。 もしアプリに興味を持って頂けるようなら、『メールアドレス contact@short.works』か『Twitter @shortworkus』にメッセージ下さい^^

1) iPhone / Android / Railsアプリ / インフラ構築の開発にご協力頂ける方
2) スマートフォンアプリやWebサイト、HTMLメールのデザインにご協力頂ける方
3) ブログ・ソーシャルメディアを活用したマーケティングにご協力頂ける方
半日〜1日だけとか週末プロジェクトとか、ガッツリやってみたいとか相談のります。 報酬もテンポラリー、レベニューシェア、その他もろもろ何でも相談に乗ります!何でも言ってください。

押さえておきたい書籍

いかがだったでしょうか?
もし説明がわかりにくかったり、間違っている場所があればぜひ一言!

Comments