今さら聞けない！UI/UXを確実に学ぶオススメの良スライド10選

更新日: 2017年04月05日

2016年6月20日に博報堂DYメディアパートナーズのメディア環境研究所が発表した情報によると、スマートフォン/タブレット端末所有状況は2016年に70.7％となった模様です。2010年にはわずか9.8％だったことを考えると、急速に普及していることが窺えます。

参考：
[博報堂DYメディアパートナーズ「メディア環境研究所」]

Webサイト制作の際、これまではPCに特化したデザイン・構造だけを考えれば済む時代でした。
しかし、急激なスマートフォン・タブレットの普及により、現在はスマートフォンやタブレットを想定した内容が求められています。
その流れで近年注目されているのが*「UI/UX」*です。

操作性が悪いとユーザーはすぐに離脱してしまいます。
スマホやタブレットでより多くのユーザーに快適に利用していただくためにも「UI/UX」の設計は非常に重要です。

今回は、UI/UXについて基本から実践レベルまで学べる編集部オススメのスライドをご紹介します。
デザイナーの方はもちろんですが、ディレクターの方も、そのほか営業の方も、この知識を持ち合わせて今後のビジネスに活かしてみてはいかがでしょうか。

UI/UXの重要性を学ぶ！その前に、まずは基本をおさらい

UI（ユーザーインターフェース）とは？

UIはユーザーインターフェイス（User Interface）の略です。
インターフェイスとは「接点、接触面」という意味で、UIはユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」はすべてUIとみなすことができます。
ホームページの場合、パソコンやスマートフォンに表示されるデザイン、フォントなど、製品であれば製品そのものや外観など、ユーザーの視覚に触れる全ての情報が「UI」と呼ばれます。

UX（ユーザーエクスペリエンス）とは？

UXはユーザーエクスペリエンス（User Experience）の略です。エクスペリエンスとは「体験、経験」を意味し、UXとは「ユーザーが製品・サービスを通じて得られる体験」を指します。

例）ホームページの場合
・デザインがキレイ
・フォントが読みやすい
・お問い合せフォームや購入ページまでの導線がわかりやすい といった表層的な部分から、商品を注文したらすぐに届いた。
・対応が丁寧だった。
・商品のクオリティが高い。

参考：
UIとは？UXとは？違いを理解しよう！

今でこそ、当然のように耳にする「UI」「UX」ですが、意外とそれについて説明を求められるとたどたどしくなってしまう方も少なくないのではないでしょうか。
ぜひ、そういった方に読んでいただきたいのが下記でご紹介するスライドです。

UI/UXの重要性を知る！オススメの良スライド10選

1.「UX / UIデザインって何？」

[http://www.slideshare.net/JSUXDesign/ux-ui-45163428?] (http://www.slideshare.net/JSUXDesign/ux-ui-45163428?)

「UIデザイン」の基本を確認できるスライドです。シンプルにまとめられているので、UIの概念に短時間で触れられます。
UIとセットで説明されることの多いUXについても実例で解説されているのも一つ魅力といえます。

UI/UXに関して、初めて勉強したい方にとってオススメできるスライドです。

2.「UIデザインの基本」

[http://www.slideshare.net/ksc1213/ui-45852142?] (http://www.slideshare.net/ksc1213/ui-45852142?)

再びUIの基礎をベースとした内容ですが、近接や整列といったデザインの基本概念のほか、UIを設計する際、意識しなければならないポイントについて説明されています。
図表がユニークで、非常にわかりやすいスライドです。

3.「UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!」

[http://www.slideshare.net/ao_bascule/uiux-ui-ux](http://www.slideshare.net/ao_bascule/uiux-ui-ux)

スマートフォンのUIを「フォントサイズ」「遷移」「iPhoneとAndroidのデザインの互換性」「ユーザーエクスペリエンス」というポイントから解説されています。
資料後半では、実例を交えてUIのポイントを説明しています。
レスポンシブデザインが当たり前の今、スマートフォンのUIも避けては通れません。
ぜひ、このスライドで習得しましょう。

4.「心地よいUIの温度 - 言葉と気遣いで高めるUI -」

[http://www.slideshare.net/yutawariishi/ui-44424507](http://www.slideshare.net/yutawariishi/ui-44424507)

一見、全く関係のない「UI」と「温泉」をフックに「心地の良いデザイン」について考えていこう、というユニークな内容です。
ユニークさが目立ちますが、UIを考える上では基本的なことがしっかり抑えられています。

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

[http://www.slideshare.net/yhassy/ui-17299700](http://www.slideshare.net/yhassy/ui-17299700)

画像共有SNS「Pinterest」と、「Esty」などの海外のサービスを事例にUIデザインのポイントについて説明しています。
かなり詳細に説明されており、UIデザインのポイントをしっかり掴むことができます。
海外サービスのUIデザインの考え方を学べる機会はなかなかないので一読されることをオススメします。

6.「企画が考えるスマホUIデザイン」

[http://www.slideshare.net/onoremiz/ui-11779313](http://www.slideshare.net/onoremiz/ui-11779313)

ホームページだけでなく、ゲームアプリにおいても「UI」は最重要ポイントといえます。こちらのスライドでは、ゲームアプリの実例を通してスマートフォンのUIをデザインする上で考えておきたいポイントについて説明しています。

7.「UI設計の土台になる考え方-インテリジェントネット社内勉強会」

[http://www.slideshare.net/Intelligentnet/ui-38980110?] (http://www.slideshare.net/Intelligentnet/ui-38980110?)

全体で167ページもスライドが存在し、非常に読み応えがあるスライドです。
内容も充実しており、UIの基礎知識をイチから説明し、どのようにUI設計をするのか解説されています。
それぞれのプロセスを詳しく説明してくれているので、UI設計のイメージが湧きやすくなります。

8.「女子の心をつかむUIデザインポイント - MERY編 -」

[http://www.slideshare.net/ShokoTanaka1/ui-mery](http://www.slideshare.net/ShokoTanaka1/ui-mery)

女性に人気のキュレーションプラットフォーム「MERY」。
実際のユーザーをイメージし、どのような操作性を望むか、どのような色使い、どのような文言表現が最適かというのを落とし込んだデザインになっています。
このシンプルなUIデザインに秘められた制作側の思いがよく伝わるスライドです。

9.「ITエンジニアに易しいUI/UXデザイン」

[http://www.slideshare.net/ksc1213/ituiux-16732374](http://www.slideshare.net/ksc1213/ituiux-16732374)

質の高いUIデザインにするために基本要素を中心に説明しており、デザイナーでなくとも知っておきたい知識が詰まっています。
このスライドを読むことで、デザイナーの仕事を把握しやすくなり、仕事の質を上げるきっかけになるはずです。

10.「確実に良くするUI/UX設計」

[http://www.slideshare.net/takayukifukatsu/nikkei-renewal](http://www.slideshare.net/takayukifukatsu/nikkei-renewal)

日経新聞電子版リニューアルの際、設計提案と最終版の監修を担当したデザイナーとエンジニアが作成したスライドです。
リニューアルの際のコンセプトモデルの提案、分析、スケジュール、課題とひとつひとつのプロセスを詳しく解説しています。
身近なメディアなのでイメージが湧きやすく、丁寧に説明しているので勉強になります。