サイトやアプリのデザインのアイデアに使えるUXを生み出すリッチなUIデザインの参考をまとめました

スマートフォンの復旧により、手でタッチできるという操作性とそのコンパクトさから、一目見ただけで操作方法がわかり使いやすさが伝わるようなUX(User Experience)は今後重要なものになっていきます。

もちろん速さや機能性など技術的な部分でもUXを満たす課題はたくさんありますが、ユーザーの目にする部分で重要となるのがUI(User Interface)のデザインです。

Webデザインにもここ数年でユーザビリティに重点をおいたサイトをよく見かける様になってきました。

アプリ程UXを意識する必要がなくとも、同じデバイスでられるWebサイトも分かりやすい構成やデザインの要素を取り入れれば、ユーザーにとってよりよいサイトになります。

今回はそんなサイトやアプリのデザインのアイデアに使えるようなUXを生み出すリッチなUIデザインの参考をまとめました。

UIデザインの参考

今回は、以前「Webデザインのアウトプットに役立つインスピレーションを得られるサイトを集めました」でも紹介したデザイナーによる作品を共有できる海外のSNSサイトのDribbbleからサイトやアプリのデザインのアイデアになるUIデザインの参考を紹介します。

Dribbble


http://dribbble.com/

紙の要素を取り入れたUIデザイン

紙がめくれていたり、折り曲げられているような効果を使って効果的にデザインされた参考になるUIがたくさんあります。


UX/iOS/UI iPhone idea with video process


Qiwy IOS app curl test


Photofold


First iPhone app


Mailer Unfold


(WIP) Journyy Green


Showing cool effects in photoalbum app

ボタンのUIデザイン

様々なボタンパーツ一式からちょっとしたアクセントに使えるボタンまで、参考になるかっこいいボタンデザインがたくさんあります。


Orange Ui Pack


White UI – Final


Photoalbum’s controls for UI iPad


Broken Ui Bits


Abatron Calculator Buttons


Detail screen

ダイアルのUIデザイン

ダイアル式のナビゲーションからメーターまで、ダイアルモチーフを使ったUIデザインの参考になるアイデアが見つかります。


Camera Remote App


Iso500 Menu


Dribbble Preview


Retrodio

その他のUIデザイン

他にもデザインから機能面や動きのヒントになりそうなものまで、様々なかっこいいUIデザインの参考があります。


Mobile App Concept


GABI – UI


Music App UI (iPhone)

パターン別UIデザイン一覧

「UI」というキーワードにプラスして一覧を見つけたい時に参考になるパターン別UIデザイン一覧を紹介します。

紙の要素を取り入れたUIデザイン一覧


http://dribbble.com/search?q=fold+ui

ボタンのUIデザイン一覧


http://dribbble.com/search?q=button+ui

ダイアルのUIデザイン一覧


http://dribbble.com/search?q=dial+ui

円形のUIデザイン一覧


http://dribbble.com/search?q=circular+ui

直線形のUIデザイン一覧


http://dribbble.com/search?q=horizontal+ui

地図のUIデザイン一覧


http://dribbble.com/search?q=map+ui

表グラフのUIデザイン一覧


http://dribbble.com/search?q=graphs+ui

その他UIデザインの参考になるギャラリーサイト

Ui Parade


http://www.uiparade.com/

TappGala


http://www.tappgala.com/

Patterns


http://www.patternsofdesign.co.uk/

PatternTap


http://patterntap.com/

参考サイト

Creative UI Design Examples for Great UX

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事