ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選

    
2013/06/13
    

God slides 01
競合に負けないWebサービスをつくるため、UIUser Interface、UXUserExperience、ユーザー体験)にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。

エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです!

目次

基礎知識
 1.UXのためのUIデザイン
 2.UX is not UI
 3.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編

応用編(Webサイト)
 4.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編
 5.コンテンツで改善する UI デザインの極意

応用編(スマホアプリ)
 6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX!

応用編(タブレットアプリ)
 7.ニコニコ超デザイン-Metro考察編-

1.UXのためのUIデザイン

UIとUXの関係性について解説したスライドです。どんなに素晴らしいUXを提供しても、UIがUXのためのデザインになっていないとダメなんですね。

このスライドの要約

・UIが素晴らしくてもUXがダメな場合もある
・ユーザーがどんなアクションをするか優先順位を付けよう

UXのためのUIデザイン


2.UX is not UI!

「そもそもUI/UXとは何か?」がわかるスライドです。英語のスライドですが、短いですし簡単な単語が使われていますので、がんばって読んでみましょう。UXとUIの定義と関係性が説明されています。

スライドによると、UIはUXの一部でしかないそうです。
スクリーンショット 2013 06 11 16 43 54

このスライドの要約

・UI……サービスに触れるときに役立つもの(理性、規則性)
・UX……サービスを使うときにユーザがどう感じるか(感性)
・UIはUXの一部

UX is not UI!


3.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編


クックパッドでUIを担当されている@monja415さんのスライドです。UIデザインの基本的な考え方が学べます。

このスライドの要約

・良いUIとは、ユーザの目的を達成できるUIのこと
・2秒でわかるUIを意識し、Topページのテキストは「8〜13文字」に収める
ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:前編


4.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編


後編もぜひ見ておきたいところ。後編ではより実践的な内容を解説しています。プロトタイピングの作成、デバッグなど一連の流れが学べます。

このスライドの要約

・UIにもパターンがある。UI-patterns.comや、Collection: Design Patternsを参考にしよう
・自分でUIの評価をする時には、どの要素が目立っているか認識するために薄目で眺めてみる

ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス:後編


5.コンテンツで改善する UI デザインの極意

@yahassyさんのスライドです。Etsyなどの著名デザイナーの言葉を引用しながら、コンテンツの中身が伝わるUIを解説しています。

このスライドの要約

・無限スクロールを使わないほうが良い場合もある(ターゲットが重要)
・コンテンツのないデザインはただの装飾
絵よりも言葉のほうが明確(ユーザーが迷わない)な場合もある

コンテンツで改善する UI デザインの極意


6.UI&UX / 重要なのは、毎日さわって嬉しいUI UX!


こちらのスライドではスマホアプリのUIについて解説しています。

このスライドの要約

・可読性(フォントサイズなど)はGmailを参考にすると良い
・iPhoneとAndroidのUIは根本的に違う
・アプリが利用されるTPOを考えよう

UI&UX / 重要なのは、毎日さわって嬉しい UI UX!


7.ニコニコ超デザイン-Metro考察編-

元ドワンゴのデザイナー、@VoQnさんのスライドです。Windows8など、タブレットアプリのUI/UXを考える参考になります。

このスライドの要約

・WindowsストアアプリはMicrosoft公式ガイドラインを参考に
・タブレットは人の指がデバイス。分解能も低くサイズを意識すべきだし、持ちながら使う配慮が必要。

ニコニコ超デザイン-Metro考察編-


まとめ

いかがでしたか? このスライドを押さえておけば、Webサイト・スマホアプリを使う際、UI/UXのことに意識が向きそうですね。UI/UXはもはやデザイナーだけのものではありません。今回のエントリで最高のユーザ体験を提供できるような方が一人でも増えるとうれしいです!

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.