読者です 読者をやめる 読者になる 読者になる

ツテなしフリーランス日誌

ツテが全く無いまま会社を辞め、我が道を行くフリーランスエンジニアのブログです



UI/UXデザイン集 〜このサイトを押さえとけば大丈夫〜

プロダクトを新しく作る時に悩むのが、UI/UXです。
オリジナルな良いデザインを作るには、まずデザインのパターンを大量に仕入れましょう!
 
ちょうど新しいプロダクトを作ることになり、UI/UXデザインに関して調べいて、
おススメとして紹介したいサイトを見つけたので、それらをまとめました!
 

海外デザインテンプレート、素材ブログ

デザインや素材に関する情報を発信するブログ。様々なサイトのおススメのテンプレートや素材を色々な視点で紹介してくれます。
RSSで登録して更新を追いかけることをおすすめします!
Fusionplate.com
 

ユーザーインターフェースキット

サイトを制作する上で重要なパーツの統一性をキープするための便利なUI(ユーザーインターフェース)キット。
全体的なデザインが統一されるだけでなく、企画書のクオリティも高められる便利なアイテムです。
様々なキットを各サイトが紹介しているので、それをまとめた日本のサイトを載せました。
 
 

UI/UXデザインテクニック

どのようにUI/UXを考えていけばいいかわからない。。という人向けのサイトです。
これを読めばどんな点を抑えておけば良いのかがわかると思うので、
まずはこれらを読むことをお勧めします。
UI/UXデザイン能力がアップする、押さえておきたい10個のデザインテクニック
 
UIを考える時に気をつけたほうが良い原則4つ

qiita.com

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
スマートフォン用のUIデザインパターンがカテゴリに分けて集められています。データ量もとても多いです。
 
lovely ui
スマートフォン用のlovelyな様々なUIを紹介しています。見ているだけで楽しく、参考になりそう。
 
Inspired UI
シンプルなUIをカテゴリごとに紹介してくれます。
 
UX Archive
各アクションからのUIの流れをカテゴライズして紹介してくれます。
 
sps collection
スマホサイト専用のデザインリンク集。カテゴリと年代毎にわかれている日本onlyのサイトです。
 

スマホのインタラクション参考

各インタラクション毎に、様々なサイトでの動作を載せています。スマホのUI動作を考える時に参考になりそう。
User Flow Patterns
 
マテリアルデザインの参考
 
Material Designのインスピレーションが貰えるサイト。Web、アプリなど各媒体に合わせたテーマでユーザーが投稿しており、デモも見られます!
Material up
 
 

アイコンの参考

簡単なようで難しい、世に出ているアイコンをカテゴライズして見れるサイトです。
iconDrop
 

UI Tipsの参考

UIのちょっとした、だけどとても大切な動作について色々なサイトのものをまとめているので、是非見てください!
Little Big Details

http://littlebigdetails.com/

 

 

UI/UXは日々日々変わっていきます!

常に情報を追って、ユーザーに良い体験を与えられるものにしていきたいですね!