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

Tortoise Shell

デザイナーによる、デザインやライフハックブログです。

【 おすすめサイト紹介 】UIデザインを鍛えるならやっぱり模写でしょ!

Web周りの技術は日々進化を遂げていますよね。

ここ数年、UI・UXという言葉がWeb業界でも頻繁にやりとりされるようになりました。 

そんな中で注目を浴びつつあるのが「UIデザイナー」の存在です。

UIデザイナーは、従来の広告としての静的なWebデザインではなく、Webサービスやスマートフォンアプリなどの動的なデザインを行います。

UIデザインの上達方法

さて、そんなUIデザインですが、うまくなるためにはやはり「模写」だと言われています。

良いUI・UXを実現していると言われるWebサービスやアプリをたくさん見て模写することで、自分の血肉にすることができます。

ですが、UIデザインって模写するネタが探しづらいと思ったことがありませんか?

Webサイトやバナーのまとめサイトはたくさんありますが、UIだけをまとめていて、なおかつ更新頻度が高いサイトというものはあまりありません。

おすすめサイト

f:id:tamusan100:20150623231714p:plain

DB Freebies Design Resources from Behance and Dribbble

そこでおすすめなのがこのサイト。

このサイトは、世界中のデザイナーが自身の作品を投稿しているWebサービスである「Dribbble」と「Behance」からフリーでPSDファイル等がダウンロードできるものをピックアップして表示してくれるサイトなんです。

いわばデザイナー版GitHubのような使い方ができちゃいます。

特にDribbbleは招待制のサービスで、招待を受けたデザイナーしか作品を投稿できないんです。

なので、流れてくる作品たちも全てがハイレベルなものばかりです。

使い方は簡単で、UIだけを見たいのなら左メニューから「UI KIT」をクリックするだけです。

f:id:tamusan100:20150623232410p:plain

するとこのように、UIデザインの作例がたくさん見つかるというわけです。

しかも、多くのデータがPSDファイルのダウンロードに対応していますので、気に入ったUIデザインのモックアップを見つけたら速攻でダウンロードしましょう!

模写することで得られる力

ハイレベルなデザイナーのPSDファイルを見ることで、あなたのデザインレベルは飛躍的にアップします。

がんがん模写していくことで、

  • 配色のパターン
  • レイアウト
  • フォントの選び方
  • レイヤースタイルのかけ方
  • フォルダの構造など美しいファイルの作り方

など、手っ取り早く身につけることができます。

あとは理論も身につけよう!

模写することも大事ですが、UIデザインはビジュアルの設計方法だけ勉強しても上達しません。

UIデザインは、認知心理学や人間工学等、様々な領域の知識が組み合わさった高度なものです。

手先を動かすだけでなく、体系的な理論も身につけることで、自身のデザインに対して論理的に相手に説明することができるようになります。

おすすめはこのあたり。

どこかで見たことがある人は多いと思いますが、まず買っておいて損はないです。

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

  • 作者: Susan Weinschenk,武舎広幸,武舎るみ,阿部和也
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2012/07/14
  • メディア: 大型本
  • 購入: 36人 クリック: 751回
  • この商品を含むブログ (27件) を見る
 
誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

 

まとめ

いかがでしたか?

Web業界におけるUIデザインの需要は年々高まっています。

しかし、UIデザイナーとして体系的に勉強する方法はまだそれほど確立されていないので、勉強方法を模索している人は多いのではないでしょうか。

そんな方は、ぜひ「模写」と「読書」を実践してみてくださいね。

おすすめ記事セレクション