2016年7月4日 デザイン

デザイナーだけじゃない!エンジニアが基礎から学べるUX/UI系ノウハウ10のアレコレ

スマートフォンとタブレットの普及により、1人が複数端末を持ちWebやアプリにアクセスするのが当たり前になった今、UX/UI(UI/UXと呼ばれることも多いですが、アイスリーデザインではUX/UIを使用しています。)という概念はその重要性をさらに増してきています。今やデザイナーの専売特許ではなくなり、プロジェクトに関わるみんなが考えるようになったUX/UI。

そこで今回は、普段この分野と縁の無いエンジニアの方や非デザイナーが無理なく基礎から学ぶためのコンテンツをシーン別にして厳選!ユーザー配慮がしっかりなされた、ワンランク上の開発を実現しましょう!
 
 

まずはコレ。超基礎を学びましょう

 

 

 
◆こんな人におすすめ
・そもそもUX/UIの違いが分からない
・UX/UIを勉強したいけど、どこから手をつけていいか分からない etc
 
◆ポイント
・「UX/UI」 それぞれの役割と違いを学ぶ時、まず確認したいスライド
・タイトル通り、エンジニアにも分かりやすい内容になっている
 
 
 
 

ボリュームはあるけど、基本的なことはこれでOK

 

 

 
◆こんな人におすすめ
・UIデザインとUXの超基礎を読んでさらに勉強したい人

◆ポイント
・筆者の技術職経験の長さを活かしたエンジニア向け実践的UX/UI活用法
・「優れたデザインとは?」、「UXデザインとは?」といった問題を探く掘り下げ
・「業種別に考慮すべきUI」の指摘もあり、UX/UIを大局的に捉えたい方にもぴったり
 
 
 
 

SFこそUX?大学生が専門家に聞いたUI/UX考

 
UXって結局何なんですか? 大学生が専門家に聞いてみた
 
UX-MILK
 
◆こんな人におすすめ
・UXって何だ?何のためにあるんだ?から考えたい人

◆ポイント
・「伝えたつもり」で終わらず、「伝わる仕組み」を考えることがUXデザイン
・定期的にユーザーと直接接触することで、ユーザーと常に向き合うことを意識
 
 
 
 

モバイルユーザーが求めるクオリティに応える術を紹介

 
モバイル向けUI/UXデザイン10のポイント
 
btrax_UIUX
 
◆こんな人におすすめ
・日々ユーザーが求めるクオリティが上がっていると実感している人
・UX/UIデザインに妥協したくない人

◆ポイント
・様々なケースを想定し、より実践的な手法を紹介している
・モバイルUIにおける色数から特定エフェクトの活用など紹介する手法のバリエーションに富んでいる
 
 
 
 

社内共有にも便利。「とりあえずこれ読んどいて!」的に使える

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

 
◆こんな人におすすめ
・UIデザインに関心があって具体的にそれを学びたいエンジニア

◆ポイント
・「エンジニアでも使えるデザインの理論とテクニック」として作られたスライド
・ごく基本的な内容ながら、これを身に付ければエンジニアだけでもワイヤーフレームやプロトタイプ制作ができるようになるはず
・ページ数も少ないため、後輩のエンジニアなどに「これだけとりあえず読んで」と渡すのにも便利
 
 
 
 

アプリ事例を具体的にUI/UX考察する

 

 

 
◆こんな人におすすめ
・何のためにUX/UIという考えがあるのか?その本質に迫りたい人

◆ポイント
・「コンテンツ>UI」の考え方。ユーザーはUIを見たいのではなくコンテンツを見たい
・スマートフォンアプリでの実例をもとに深く考察
・「シーケンス単位でのUIパターン出し」など、アプリのみならずサイトに応用できる実務的な手法も紹介されている
 
 
 
 

プロジェクトのチェックリストにも使えるUIパターン集

 
UX思考を学ぶ。UIデザインパターン全28選
 
ohako_ui
 
◆こんな人におすすめ
・知りたいテーマが明確にあり、その解決策を具体的に把握したい人

◆ポイント
・UIデザインパターンを確認しながら、UXを意識した思考法を学ぶことができる
・「入力画面」「ナビゲーション」などの見出しの下に「レポーティング」「タグ付け」といった項目を設け、それぞれのユーザーニーズと解法が整理されている
・チェックリストとして活用することで、新たな開発だけでなく既存サービスの改修やリニューアルにも役立ちそう
 
 
 
 

失敗から成功を学ぶ。ダメUI/UX集

 
こんなUI/UXはイヤだ

http://masaki0720.tumblr.com/post/62991335463/こんなuiuxはイヤだ

◆こんな人におすすめ
・自分のデザインが良いか悪いかを客観的に振り返りたい人
・ダメな例をもとに良いUX/UIの参考にしたい人

◆ポイント
・ 人気メディア「Spotlight」を立ち上げたプロデューサーによる、イヤなUX/UIのリスト
・「思ってたのと違う」「今何してるか分からない」「触感が悪い」など不満別にダメなUX/UIが紹介されている
・開発中のチェックリストとしても活用でき、ダメなUX/UIから「良いUX/UIとは?」を探るためアプローチとしても参考になる
 
 
 
 

機能ゴール達成を目的に考えるUI設計の仕方

 
もう迷わない!優れたUIを生み出す7つのステップ

dna_UI

◆こんな人におすすめ
・まずはUIだけに特化して知りたい人
・今関わっているUI設計をきちんと振り返りしたい人

◆ポイント
・「機能ゴール」を軸にUI設計が時系列で解説されている
・「アラーム付き世界時計」のアプリ開発を例に、具体的な進め方を紹介
・ワイヤーフレームを作成しプリントアウト、実機上で操作シミュレーションするなど面白い手法が
 
 
 
 

一流UIデザイナーの仕事法が無料で見られます

 

 

 
◆こんな人におすすめ
・一流デザイナーによるUX/UIでの解決視点を学びたい人
・プロトタイピングでの進め方を具体的に知りたい人
・顧客への提案、説得力を高めるプレゼン方法を学びたい人

◆ポイント
・著名なUIデザイナーであり“インターフェース&インタラクティブ職人”を標榜する深津貴之/fladdictさんによるスライド
・日経電子版リニューアル時のコンセプトモデル設計とプロダクト監修時の実例を紹介
・ヘッダーや画像配置、文字サイズなどを総当たりでパターン網羅しデザイン検証されている
・一流UIデザイナーがどのようにプロジェクトを進めるのか、その貴重なドキュメントでもある
 
 
 
 
最後に…「What is UX?」
 
英語ですが、簡単な単語と写真を使っているので、とても分かりやすいスライドになっています。
 


 
 
 
いかがだったでしょうか?概念的ではっきりと定義しづらい、UX/UIが少し具体的にイメージついたのではないでしょうか。漠然と「UIとは?」「UXとは?」と考えるのではなく、ケース別に考えてみることで”自分事”として、身につけていけるはず!今後も様々な場面で「あれ、UX/UIってなんだっけ!?」と思った時に、ここで紹介したスライドやブログを見て基礎的なことを思い出してみてくださいね!
 
 
____________

in-Pocket is presented by i3DESIGN

アイスリーデザインは渋谷を本社、ウクライナを開発拠点に据えるIT企業です。

以下のサービスを提供しています。

  • – デザイン思考を取り入れたUX/UIサービス
  • – 最新動向のMFI、AMP/PWAへ迅速に対応できるクラウドサービスの提供
  • – スマホ・ウェブアプリ開発/運用サービス

ITサービスの道先案内人として、お客様のビジネスにおけるデジタルトランスフォーメーションを支援します。

お問い合わせはこちらから

in-Pocket編集部

i3DESIGN

Techベンチャーのi3DESIGNが本メディアのために結成した編集チーム。広告代理店出身の元ライターはじめデザイナーやエンジニア、リサーチャーなど個性的なメンバーが、今一番ポケットにしのばせたいトピックをお届けします。

この記事をシェアする