• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

PC/スマホサイトやiPhone/Androidアプリのデザイントレンドを定期的に追う際に、オススメなUIデザイン,UXデザインのための情報源を紹介します。

 

UI,UXデザイン全般

スクリーンショット 2014-03-16 23.11.02

WDL

・海外のWEBデザインの事例。(日本のPhotoshopVIPに近い)

 

スクリーンショット 2014-03-16 23.11.15

PhotoshopVIP

・日本の季節に合わせたデザイン記事。

・海外の記事が翌日にはだいたいローカライズ。

 

スクリーンショット 2014-03-16 23.11.33

SMASHING MAGAZINE

・デザインストラテジー記事もある。

・UX How toやワークフロー紹介は必見。

 

スクリーンショット 2014-03-16 23.18.31

Pencil Scoop | Design & Creative Blog | Design & Creative Blog

・HTML/CSS/JSのテクニカルコラムが参考になる。

 

スクリーンショット 2014-03-16 23.30.05

MEMOPATCH

・UI系コラム、海外サービスのまとめ記事は必見。

 

UIデザイン

スクリーンショット 2014-03-16 23.12.38

Dribbble

・シリコンバレーの著名なデザイナーが多い。

・特にポピュラー、リバウンド作品は必見。

 

スクリーンショット 2014-03-16 23.12.55

Pixeden

・Apple製品のUIKIT公開がとにかく早い。

・モックアップ表現の参考に。

 

スクリーンショット 2014-03-16 23.22.14

Land-book – best landing pages gallery

・ランディングページに特化したデザインをストック。

 

スクリーンショット 2014-03-16 23.24.51

CAPPTIVATE.co | iOS UI Animations

・スマホアプリのインタラクションを動画でアーカイブ。

 

スクリーンショット 2014-03-16 23.26.00

Inspired UI – Mobile Apps Design Patterns [iPhone]

・スマホ、タブレットのUI集。

 

 

スクリーンショット 2014-03-16 23.26.50

Pttrns – Mobile User Interface Patterns

・機能別でみるスマホUIのトレンドチェック(Inspired UIと同様)

 

スクリーンショット 2014-03-16 23.32.40

Hover States / The best new & interesting interaction design

・インタラクションに着目したデザイン集(主にPC)

 

スクリーンショット 2014-03-16 23.13.09

deviantART

・世界視点でのキャラクター/イラストへの知見はここで(日本でいうところのPixiv)

 

UXデザイン・サイトパフォーマンス

スクリーンショット 2014-03-16 23.23.12

UX Magazine | Defining and Informing the Complex Field of User Experience (UX)

・UXの観点を得るに良いサイト。(主観的なアプローチ)

 

スクリーンショット 2014-03-16 23.14.57

steavesouders.com

・ハイパフォーマンスウェブサイト(オライリー)の著者ブログ。

・サイト高速化のための検証データが貴重。(こちらは理論的アプローチ)

 

スクリーンショット 2014-03-16 23.15.13

ヤコブ・ニールセン博士のブログの和訳(alertBox)

・ユーザービリティの権威、ニールセン博士のブログ。

・ユーザビリティに関する仮説と結果がまとめられてる。

 

UIフレームワーク

スクリーンショット 2014-03-16 23.15.39

Custom Controls for iOS and OS X – Cocoa Controls

・スマホで「あ、これ見たことある!」表現と開発のためのライブラリをつなげるサイト集。

 

テクスチャ/パターン

スクリーンショット 2014-03-16 23.13.49

SubtlePatterns

・ウェブデザインに必要なテクスチャ集(Photoshopプラグインも提供)

 

色彩・配色

スクリーンショット 2014-03-16 23.14.11

PANTONE

・トレンドカラーの情報源(日本でいうところのJAFCA)

・半期に1回くらいの頻度でまとめ読み。

 

スクリーンショット 2014-03-16 23.26.39

Color Trends + Palettes :: COLOURlovers

 

マークアップ・フロントエンド

スクリーンショット 2014-03-16 23.14.32

コリス

・ウェブ制作のマークアップテクニック系記事多め

 

スクリーンショット 2014-03-16 23.14.25

Stoker.jp

・時流にあったソフトウェア周りの記事や、デザインの基礎知識など多め。

 

スクリーンショット 2014-03-16 23.25.28

CodePen – Front End Developer Playground & Code Editor in the Browser

・CSS/JSでの高度な表現の参考に。

 

スクリーンショット 2014-03-16 23.27.38

Unheap – A tidy repository of jQuery plugins

・新作のJSライブラリを中心にストック。

 

スクリーンショット 2014-03-16 23.31.51

CSS-Tricks

・CSS利用を中心とした、変わったテクニカルアプローチ集。

 

番外編(3DCG/Video)

スクリーンショット 2014-03-17 0.06.23

The social network for professionals in entertainment – Animation, Movies, Visual Effects, Games, Illustration, Concept Artists, and more. If you make cool stuff, join us!

・海外のCGポートフォリオサイト

・ソーシャルゲームのイラスト等の参考に。

 

スクリーンショット 2014-03-16 23.20.22

News & Jobs | Computer Graphics & Digital Art Community for Artist: Job, Tutorial, Art, Concept Art, Portfolio

・3DCGのワークフローやTIPSサイト集。

・最近の映画などのアート表現の解説など。

 

スクリーンショット 2014-03-16 23.21.30

Startup Videos | Showcasing The Best Startup Videos

・シリコンバレースタートアップが主な、サービス紹介ビデオ集。

 

ソフトウェア動向

スクリーンショット 2014-03-16 23.15.26

AdobeLabs

・ソフトウェアのベータテストや新機能のアナウンス

 

 

いかがでしたか?

WEBデザインといってもUIやUXデザインのみならず、ゲームのCGイラストレーションや流行りのスタートアップ動画まで複合的に見ていくことで、デザインインスピレーションを高めることができるのではと思っています。みなさんのウェブデザインがより素敵なものになることを祈っています。

(執筆:石山、編集:向山)