デザインいらず!CSSフレームワークまとめ 8件

システムエンジニアのみなさんにお届けしたい(というか自分向けに)、CSSフレームワークをまとめてみました。
システム開発をするとき、「社内システムだからデザイン料はねぇ…」というお客様に対応すべく、なんとなくclass設定するだけで見た目が素敵になるCSSフレームワークは本当に助かってます。
弊社でもTwitter Bootstrapをはじめとして、jQuery UIなどいくつかを利用して、実際に運用しております。
さっくり簡単にかっこいいサイトを、デザインセンスが無くても作れる素晴らしい素材をありがとうございます< (_ _)>

以下、紹介していきます。

jQuery UI

jQuery UI

[URL] http://jqueryui.com/
[デモ] http://jqueryui.com/demos/

jQuery先輩の正式UI。いつもお世話になっております。ドラッグ&ドロップ作りたいときは、だいたいこれ使ってる気がします。

Twitter Bootstrap

Bootstrap

[URL] http://getbootstrap.com/2.3.2/index.html
[デモ] http://getbootstrap.com/2.3.2/getting-started.html#examples

Twitter先輩が提供している「人類皆Twitter大好きだろ?」的なフロントエンドツール。
これを使うと、あんなことやこんなことがいろいろできます。
レスポンシブWebデザインに対応していますが、tableタグが好きな私はいつもどうしようか悩むところ。

Bootmetro

Index

[URL] http://aozora.github.io/bootmetro/
[デモ] http://aozora.github.io/bootmetro/demo/hub.html

ここから使ったことないです。
Windows8のタイルっぽいデザインです。

MARKUP

Markup Framework

[URL] http://www.markupframework.org/
[デモ] http://www.markupframework.org/demos/

かわいい!なんといってもかわいいです。
誰かFC2ブログでこれのテンプレート作ってください(´∀`)

HTML KickStart

HTML KickStart HTML Elements   Documentation

[URL] http://www.99lime.com/elements/

どなたかがブログで「パーツが完璧に揃いすぎている!」とご指摘ありましたが、私もTwitter Bootstrapは揃いすぎてるなーって思ってました。
3つほどシステム開発した結果、次は違うのを使おうと思っていましたが、こいつが有力候補っぽいです。

Cool Kitten

Cool Kitten  A parallax scrolling responsive framework

[URL] http://jalxob.com/cool-kitten/

爽やかな色合いもさることながら、レスポンシブデザイン+パララックスなサイトを作りたい人向け。
他のもののようにボタンとか準備されていないので、何かと組み合わせる必要があるかも?
個人的には「ボタンなんていらない!画像で遷移させるんだ!」というサイト向けな気がします。

Kraken

Kraken   A lightweight front end boilerplate

[URL] http://cferdinandi.github.io/kraken/index.html

モバイルファーストなやつ。近年、モバイルファーストとか言われていますが、ターゲットユーザの年齢層によっては、ほぼスマートフォンからアクセスということもありますよね。
シンプルなデザイン向け。Krakenで構築されたサイトを見てみると(下のほうにあるBuilt with Kraken)、なんかこじんまりしててGood!ただし、私の脳内がこのセンスについていけるか不明の模様です。

クラーケン(Wikipedia)
http://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%83%BC%E3%82%B1%E3%83%B3
クラーケン(ノルウェー語等:Kraken)は、その多くが巨大なタコやイカのような頭足類の姿で描かれる、北欧伝承の海の怪物。中世から近世にかけて、ノルウェー近海やアイスランド沖に出現したとされている。19世紀のアフリカ南部はアンゴラ沖に現れた海の怪物もクラーケンでなかったかと言われている。

あっれ?クラゲだなー。クラゲじゃないかなこれ?

Cascade Framework

Cascade Framework

[URL] http://jslegers.github.io/cascadeframework/index.html
[デモ] http://jslegers.github.io/cascadeframework/template-centered-content.html

きっちりしたデザインながらも、全体的に丸みを帯びていて優しい印象。社内システムで使ったら、毎日優しい気持ちになれそう。
標準装備でグラフがあったりするので、グループウェアに向いていると思いました。

topcoat

Topcoat

[URL] http://topcoat.io/
[デモ] http://topcoat.io/topcoat/

これもモバイルファーストな感じのデザイン。
暗めと明るめの2パターンが、モバイル用とPC用に適した感じでデモが用意されています。
モバイル用の時は、やっぱりちょっとボタン大き目のほうがいいですよね。気がきいていると思います。
次にWebサービスを作るときは、これをアレンジするのがいいかも!

という感じでCSSフレームワークをお届けしました。
一昔前までは、なんとなくデザインやっていましたが、今はこういう参考があるっていうのもいいな!って思います。

(∩´∀`)∩<かっこよくて素敵なUIでたくさんシステム作るぞー!


投稿者:

1yaan

1yaan

株式会社パラファミリー社長。 前職は証券系のシステム開発をやっていたため、独立して今に至る。 お休みーと言ってから寝るのが早い。 画像はうさぎドロップのりんちゃん。公式HPで配布しているにも関わらずかわいすぎて愛用。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です