この記事について

CSS nite in Kyoto参加レポートその４です。

セッション中にとったメモに、URLや個別に質問して頂いた情報などを付け加えた内容となっています。

公開されているスライドについても見つかり次第記事内に追加予定です。

その他のまとめ

セッション２：コンテンツマーケティングは恋のライセンス
GoogleAnalytics&KH coderを活用してSEOに使える「共起語」を見つけよう
セッション４：Evernoteでも採用されたMaterial Desginの概要と導入方法

goodpatch 土屋さん

３行ハイライト

UIデザインとWebデザインは別物
プロトタイプを作って「動くもの」を見ながらコミュニケーションしよう
実装までの段階で「どれだけテストできるか」が決め手となる

そもそもUIとは？

PCと人間の関係を円滑にするためのインターフェイス。
世界初のGUIはMac。

UIデザインとWebデザインの違い

• UIーデバイスのソフトウェアデザイン
• Webーブラウザ上のデザイン

なぜUI？

UIに注目が集まったのはスマートフォン登場以降。
それまでは「Web＝広告媒体」という扱いをされていた。

スマートフォンの登場でWebを操作する端末がデスクトップからスマートデバイスに変化した。
さらに場所を問わずに操作できるようになったことで、デバイスに触れるシチュエーションが多様化した。

「使わせる」から「選ばれる」へ

「ユーザーに使わせる」という発想では使われない。

「差別化要素」として注目されるUI

UIデザインの重要度は上がり続けており、金融会社がデザイン会社を買収するような状況になっている。

アメリカと日本で異なるUI意識

サンフランシスコのスタートアップは、β版なのにクオリティが高いプロダクトが多かった。
しかし日本に帰ると、「動けばいい」「機能重視」「デザイン二の次」なプロダクトばかり。

どのようにUIを作るのか？

UIは一人で作るものではない。そして企画フェーズから関わることが重要。

考えるべきポイント＝「誰に、どの様に、どんな価値を、どんな立ち位置で提供するのか」

アクティングアウトという手法。

実際に利用することで「ユーザー体験」を体験する。
社内ではなく、必ず「想定された環境下」で行う！

仮説そしてプロトタイピング

企画フェーズで「仮説」を立てる。そして仮説を基にプロトタイプを制作する。
プロトタイプ制作には時間をかけ過ぎない。

プロトタイピングすべき５つの理由

• 「ニーズがあるか否か」を確かめることができる。
• 動くものを見ることで、実装時の問題点を発見できる
• 技術的な要件を固めることができる。
• 動作面も含めたフィードバックを得ることができる
• クライアントとメンバーで共通の認識を得ることができる。

ツールを使って「プロトタイピング」を効率化

• 作って壊しを繰り返しやすく
• パターン化することで効率よく
• より頻繁にコミュニケーションを取れるように

ツールを用いてプロトタイピングを行う。

Prottというサービス

ペーパープロトタイプを動かすアプリ。

ディレクターなど、「非エンジニア」が簡単にプロトタイプを作ることができるようになる。

• ディレクターが紙でワイヤーを書く
• ディレクターがProttでプロトタイプを作る
• デザイナーがデザインを作る
• ディレクターがProttに入れて動作確認する

更に

• 復元も可能で、トライ・アンド・エラーが非常に簡単。
• プレゼンテーションモードでクライアントとのやり取りも可能。
  手や背景画像を付けてよりわかりやすいプレゼンテーションが作れる。

プロトタイプの本質はコミュニケーション

「動くものが観れる」ことはクライアントにとってもコミュニケーションしやすくなるメリットが有る。

デザイナーが実装・改善にもコミットする

実装後、改善フェーズに入った時もデザイナーをコミットさせるべき。

改善内容がUIデザインの観点から適正かを判断・フィードバックすることができる。

まとめ：UIデザイナーに求める力とは？

• 長い時間作りこむよりも、動かしながら考えてデザインする力、
• ユーザーの感情を理解してコントロールする力、
• 体験やストーリーをパターン化して優先順位をつける力、
• あらゆるUIパターンの引き出しを持つ力、
• 前例を過信せずに常に塗り替える力、
• デバイスが変わればユーザー体験も変わる
• サービスのブランド、世界観をUIに落とし込む力

直感的に良いとハートに感じさせるデザインが必要。

検索がされない世界は遠からず訪れる。

将来需要が高まる職業:データサイエンティストとUIデザイナー