カラバリ&デザインで印象を変える! 無料で使える美しいUI Kit16選

10548241_10152606040222768_7116222220012814933_o

数あるCSSフレームワークの中でも特に人気の高いのがBootstrapですが、これを超える完成度の高さで評判になっているのがUI Kit。リッチなインターフェースを手軽に実現できることもさることながら、Webには数多くのUI Kitが無料で公開されています。今回、アプリ開発のデザイン面、あるいはモックアップ作成などに役立ちそうなUI Kit16個を、デザイン面の特徴で4つのタイプ別に分けご紹介します。

■白背景でカラフルな色使いのUI Kit

SIMPLE UI Kit

SIMPLE_UI_KIT_580

定番の白背景はシーンを選ばない優等生。こちらのUI Kitは高彩度のエレメントがそろっており、明るくポップな印象を与えます。

Eerste UI Kit

Eerste_UI_Kit_580

こちらも白背景。原色系だけでなくパステルカラーも使用していて朗らかな雰囲気ですね。

Free Flat UI dashboard

Flat_UI_dashboard_580

フォントも含めて淡い色彩でまとめたUI Kit。優しい上品な明るさを印象付けます。

■ダーク系の背景で色数豊富なUI Kit

Flat Design UI Components

Flat_Design_UI_Components_580

低明度の背景はクールな印象を与えます。こちらのUI Kitは中間色のエレメントで落ち着いた雰囲気にまとめてますね。

Moon UI Set

Moon-Ui-Set_580

月の名前にふさわしい格好良さ。エレメントは各色のパターンがそろっているので色数を抑えることも可能です。

Bleya UI

Bleya_UI_580

渋い中間色を多用したUI Kit。和風テイストのアプリにもそのまま使えそうですね。

■背景透過タイプのUI Kit

Transparent UI Kit

Transparent_UI_kit_580

使い方がはまれば、クールな背景透過タイプ。こちらは彩度を押さえたシックな色使いが良いですね。

Free Transparent UI Elements

Free-Transparent-UI-Elements_580

これも背景透過タイプ。エレメントはどれも渋い色使いで、高級感に満ちた雰囲気を醸しています。

■色数を抑えたデザインのUI Kit

Metro Style Free Flat UI Kit

Metro_Style_Free_Flat_User_Interface_UI_Kit_580

白背景+ディープ・スカイブルーの組み合わせ。シンプルで力強い明るさですね。MSのMetro Styleに対応しているようです。

FOLIA UI Kit

folia_ui_ki2t_580

ライトシーグリーンを基調としたデザインのUI Kitです。機械的、未来的なクールさを感じます。

Scrtpxls Flat UI kit

scrtpxls_ui_kit_580

白ベースにコーラルレッドのアクセント。きっちりメリハリがついてます。テキスト主体のコンテンツサービスに向いていそうです。

Zan UI Free UI Kit

Zan_UI_Free_UI_Kit_580

ミッドナイトブルーとスカーレットで構成されたデザイン。洗練された都会的なイメージですね。

Oak Grain UI Kit

Oak-Grain-UI-Kit_580

名前の通りオーク材を思い出すウッディな色使い。明るい背景パターンも同梱されているので使い勝手も良さそうです。

■立体的デザイン

最近ではFlatデザインが流行ですが、立体的なインターフェースも根強い人気があります。

Blue Milk UI Kit

Blue_Milk_UI_Kit_580

乳白色をベースにライトスカイブルーをアクセントで使用したUI Kit。シンプルで分かりやすいUIですね。

BALIO UI Kit

Balio-UI-kit_580

白とスカイブルーの組み合わせ。輪郭線でくっきり描かれたエレメントでユーザビリティも向上しそうです。

Heavenly Assorted UI Kit

Heavenly_Assorted_UI_Kit_580

極々シンプルな色使いのUI Kitです。アプリによっては、こういうインターフェースも大いにありですね。

Dark UI Kit

Dark_UI_Kit_580

一方こちらは黒ベース。落ち着いたモノトーンのUIはやっぱりクールで格好良いですね。シンプル・イズ・ベストかも知れません。

ここまで、デザイン性で分けてご紹介しましたが、基本的にはCSSフレームワークというよりもモバイルアプリのフレームワークに近い機能が搭載されています。単にWebサイトのUI設計が簡単になるというだけでなく、アプリを作るのに向いていると言えそうなのがこのUI Kitでしょう。これからのアプリ開発時にはぜひ、ご使用の検討をしてはいかがでしょうか。

なお、ご紹介したUI Kitのライセンス・使用方法などについては、それぞれのリンク先で各自ご確認くださいますようお願い致します。

(塩崎省吾)