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

paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

分かり易い!ITエンジニアがUI/UXを確実に学べるコンテンツ11選

f:id:paiza:20161207172643j:plain
Photo by Dan Zen

f:id:paiza:20140916135428p:plainこんにちは。谷口がお送りします。

ここ数年、Webサービスの開発において「UI」「UX」という言葉がよく聞かれるようになりました。

「UI」とはUser Interfaceの略で、簡単に言ってしまうと、パソコンやスマートフォン等を操作する際のの画面表示やメニューに表示される言葉など、情報の表示様式や操作感のことです。

対して「UX」は、User Experienceの略です。UXは、ある製品やサービスを利用したり、消費した時に得られる体験全般のことを指し、個別の機能や使いやすさだけでなく、ユーザーが製品やサービスを利用したときに得られる利用体験、満足感の向上を目指すのがUXデザインになります。
※UXとはISO 9241-210[2]において「製品、システム、サービスを使用した、および/または、使用を予期したことに起因する人の知覚(認知)や反応」と定義されています。

「そういうのはデザイナーが考えることでは?」と思われる方もいらっしゃるかもしれませんが、特にUXにおいては製品やサービスを利用した体験全般の向上を目指すため、表面のビジュアルデザインだけでなく、例えば表示待ち時間の軽減やデータの持ち方など、システム側で考えるべき事も多くあります。

特に最近は、エンジニアの方が企画から考えて起ち上げたサービスが増えていますし、スタートアップ企業が運営しているサービスなどはエンジニアが部分的にUI改善を行なう事も少なくありません。

よく言われるのが、よいUIが集まればよいUXが必ずしも約束されるというわけではありませんが、よいUXを生み出すためには、よいUIが必要であるという事です。

UIやUXに関する記事やスライドはかなり数が多くありますが、今回は、デザイナーや企画の人達とスムーズに話ができるようになるためによさそうなコンテンツと、ITエンジニアの方自身がUIまで考えて開発をする際に役立ちそうなコンテンツを、弊社エンジニアの独断と偏見でいくつかご紹介させていただきます。

■デザイナーや企画の人達とスムーズに話ができるようになるためのスライド

◆1.よくわかるダメUI/UX画像コレクション

http://www.slideshare.net/takayukifukatsu/uiux-48936541www.slideshare.net
このスライドはとにかく面白くて、楽しみながらすぐに見ることができますので、「UIとは何ぞや……」という方でもぜひご覧になってみてください!

「デザインとかインターフェースとか全然専門外ないんですけど……」という方でも、UIの重要性がタイトル通りよくわかると思います。

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

www.slideshare.net
ニコニコ動画のデザイナーの方が作られたスライドです。ニコニコ動画のデザイン実例を見ながらデザイナーの方のワークフローやUXについてを学ぶことができます。

◆3.企画が考えるスマホUIデザイン

www.slideshare.net
こちらは主にゲームUIについての解説があります。

■エンジニアがUIデザインに関わるときに役立ちそうなスライド

◆4.エンジニアのためのUIデザイン

speakerdeck.com
余白テクニックや配色など、エンジニアの方がUIを考える時にすぐに役立ちそうなテクニックが分かりやすくまとめられたスライドです。

◆5.ITエンジニアに易しいUI/UXデザイン

www.slideshare.net
もともとITエンジニアをされていた方がエンジニア向けに作られたスライドです。UI/UXデザインについて実践的な解説がされていますので、「UI/UXってデザイナーの人が考えることでしょ?」というエンジニアの方々にもぜひ見ていただきたいです。

◆6.ククパド美ちゃんと学ぶ!クックパッドのUI改善プロセス(前編・後編)

https://speakerdeck.com/monja415/kukupadomei-tiyantoxue-bu!kutukupatudofalseuigai-shan-purosesu:qian-bianspeakerdeck.com
https://speakerdeck.com/monja415/kukupadomei-tiyantoxue-bu!kutukupatudofalseuigai-shan-purosesu:hou-bianspeakerdeck.com
クックパッドのUIデザイナーの方が作られたスライドです。パド美ちゃんともんじゃ先輩の会話を通して、実例をもとにクックパッドのUIデザインプロセスが楽しく学べます。パド美ちゃんかわいい。

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

www.slideshare.net
特にスマートフォンアプリのUI/UXに関して分かりやすく解説されています。

■デザイナーや企画の人達とスムーズに話ができるようになるためのブログ・記事

◆8.UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

uxxinspiration.com
世に出ている「デザイン原則」と呼ばれる項目を並べてくださって随時更新されているありがたい記事です。

◆9.こんなUI/UXはイヤだ

http://masaki0720.tumblr.com/post/62991335463/こんなuiuxはイヤだ
masaki0720.tumblr.com
イヤなUI/UXのメモだそうですが、あるあるですごく面白いですし参考になります。「タブに見えるのにボタン」とか……「スクロールしているのにタップと判定される」とか……。

■エンジニアがUIを考えるときに役立ちそうなブログ・記事

◆10.ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」

html5experts.jp
3月にWeb Directors ForumとHTML5 Experts.jpの共催企画として開催されましたWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」でのセッションについての記事です。クックパッドのUI/UXについて、ユーザーファーストの開発手法が覗けます。

◆11.PCサイトのUIデザインにおける12のトレンド

baigie.me
UIデザインにもトレンドというものがあります。例えば、最近はアプリデザインとしてマテリアルデザインが注目されたりしています。流行っているからといってむやみに採用するのではなく、トレンドを理解した上で必要なデザインを採用していくことが重要ではありますが、デザイン重視でおしゃれに見えるサイトや今っぽいサイトを作りたいという場合などは、こういったトレンドを追いかけておく必要があると思います。

■まとめ

Webサービスをよりよくするためには、エンジニアの皆様もUI/UXについて学んでおいて損はありません。

また、一緒に仕事をするWebデザイナーの方々が何を悩み、何を考えてデザインしているのかを知っておくというのは非常に重要なことだと思います。

エンジニアの皆さんも、ぜひUI/UXに触れてみていただければと思います。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS・A・B・C・D・Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

また、paizaオンラインでプログラミング学習ができるパイザ・ラーニングに、この度動画で学習できるレッスンが追加されました。動画を見たり補足テキストを読んだりしながら、自由にコーディングをして実行結果まで確認することができます!レッスンは今後どんどん追加されていく予定ですので、ぜひプログラミング学習に、教育に、お気軽にご活用いただければと思います!


http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編