UI/UXデザイン集 〜このサイトを押さえとけば大丈夫〜
プロダクトを新しく作る時に悩むのが、UI/UXです。
オリジナルな良いデザインを作るには、まずデザインのパターンを大量に仕入れましょう!
ちょうど新しいプロダクトを作ることになり、UI/UXデザインに関して調べいて、
おススメとして紹介したいサイトを見つけたので、それらをまとめました!
海外デザインテンプレート、素材ブログ
デザインや素材に関する情報を発信するブログ。様々なサイトのおススメのテンプレートや素材を色々な視点で紹介してくれます。
RSSで登録して更新を追いかけることをおすすめします!
Fusionplate.com
ユーザーインターフェースキット
サイトを制作する上で重要なパーツの統一性をキープするための便利なUI(ユーザーインターフェース)キット。
全体的なデザインが統一されるだけでなく、企画書のクオリティも高められる便利なアイテムです。
様々なキットを各サイトが紹介しているので、それをまとめた日本のサイトを載せました。
UI/UXデザインテクニック
どのようにUI/UXを考えていけばいいかわからない。。という人向けのサイトです。
これを読めばどんな点を抑えておけば良いのかがわかると思うので、
まずはこれらを読むことをお勧めします。
UI/UXデザイン能力がアップする、押さえておきたい10個のデザインテクニック
UIを考える時に気をつけたほうが良い原則4つ
PCサイトUIデザインにおける12のトレンド
ワイヤーフレーム
ペーパープロトを作成する時に、基本のワイヤーフレームがどんなパターンがあるのか参考として活用できます。
UI TILES
Simple Shapes Wireframe Sketch Resource
HTML&CSSテンプレート
HTMLとCSSがもともと揃っていて、後は画像やテキストを当てはめていくだけ。そんなテンプレートをまとめてくれたサイトです。
LiveDemoを見て、自分が気に入ったテンプレートをダウンロードするのも時間と効率とクオリティの面でとても良いと思います。
HTML5 UP
W3
【永久保存版】デザイン初心者でも美しいサイトが作れる!無料で使えるHTML&CSSテンプレート20選
コンポーネント
デザインの一部のコンポーネントの様々なパターンを紹介しています。
また、HTML,CSS,Javascriptも同時に載っていて、試しながら扱うことができるのでとても便利です!
CodePen
カテゴリ毎のテンプレート集
About, Contacts, Galleriesなどカテゴリ毎で様々なデザインを紹介しています。
caltoidea
スマートフォン用のUI
Design Pttrns
lovely ui
スマートフォン用のlovelyな様々なUIを紹介しています。見ているだけで楽しく、参考になりそう。
Inspired UI
シンプルなUIをカテゴリごとに紹介してくれます。
UX Archive
各アクションからのUIの流れをカテゴライズして紹介してくれます。
sps collection
スマホのインタラクション参考
各インタラクション毎に、様々なサイトでの動作を載せています。スマホのUI動作を考える時に参考になりそう。
User Flow Patterns
マテリアルデザインの参考
Material Designのインスピレーションが貰えるサイト。Web、アプリなど各媒体に合わせたテーマでユーザーが投稿しており、デモも見られます!
Material up
アイコンの参考
簡単なようで難しい、世に出ているアイコンをカテゴライズして見れるサイトです。
iconDrop
UI Tipsの参考
UIのちょっとした、だけどとても大切な動作について色々なサイトのものをまとめているので、是非見てください!