Help us understand the problem. What is going on with this article?

UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく

More than 1 year has passed since last update.

仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。

で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう!と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。

css自分で一切書かなくても、このぐらいのUIまではいけそうです。

スクリーンショット 2016-02-17 10.16.06.png

スクリーンショット 2016-02-17 10.16.50.png

フレームワーク

Bootstrap

http://getbootstrap.com/

ベースはtwitter bootstrapの恩恵に授かります。
GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。

jQuery

https://jquery.com/

今更書くまでもないですが、jQuery入ってないと動かないライブラリも結構あるので要りますね。

UIKit

Bootswatch

https://bootswatch.com/

bootstrapベースのUIキットとしては王道な感じですが、bootstrap感を消すのには最適です。
個人的に角丸なUIがう〜んという感じなので、yetiを使うと今っぽくて好きです。

http://bootswatch.com/yeti/

ライブラリ

viewerjs

https://github.com/fengyuanchen/viewerjs

画像投稿系のサイト作るにはもってこいです。
これひとつあればなんとなくそれっぽくなります。

Bootcards

今流行りのカード型UIのBootstrap版。
FlatUIでyetiにしてると、Bootstrap感もなくていい感じ。

http://bootcards.org/

Remodal

https://github.com/VodkaBears/Remodal

モーダル表示用のライブラリです。
UIが比較的かっこよくて、かつ、シンプルで扱いやすいので重宝します。

Bootbox.js

http://bootboxjs.com/

アラートをかっこよく見せるためのライブラリ。
jsデフォのアラートとか興ざめなので大事です。

Dropzone.js

http://www.dropzonejs.com/

"input type=file"をかっこよく、かつ、ドラッグ・ドロップで保存させられるライブラリ。
UIを自分で好きに変更できるのがいいですね(センスないんでそのまま使いますが)
デフォルトだと、プレビュー画像が勝手に切り取られて表示されてしまうのが難点。

Chart.js

http://www.chartjs.org/docs/

グラフを書くのに使います。
サイトによってはまったく利用しない可能性ありますが、今回は使っていたので書いておきます。
グラフ書く系のライブラリの中では使いやすいかな〜と思ってます。

infinite-scroll

https://github.com/infinite-scroll/infinite-scroll

無限スクロールさせるライブラリですね。
画像の一覧ページとかで結構重宝します。
至るところで使われてる感ありますが、大事なので追加!


という感じで、もっと他にもいいUIツールとかライブラリあったら教えてください!

h-tko
eversense
家族を幸せにすることで、笑顔溢れる社会をつくる。
https://eversense.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした