Photo by Dan Zen
こんにちは。谷口がお送りします。
ここ数年、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についてを学ぶことができます。
■エンジニアが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デザインプロセスが楽しく学べます。パド美ちゃんかわいい。
■デザイナーや企画の人達とスムーズに話ができるようになるためのブログ・記事
◆8.UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
uxxinspiration.com
世に出ている「デザイン原則」と呼ばれる項目を並べてくださって随時更新されているありがたい記事です。
◆9.こんなUI/UXはイヤだ
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エンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
