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

エンジニアをリングする

プログラをミングしたり。

my web site twitter

各LTちょびっとメモ:Yahoo! JAPAN DeNA iOSエンジニア UI/UXデザイナー勉強会

勉強会

Yahoo! JAPAN DeNA iOSエンジニア UI/UXデザイナー勉強会」に参加してきました!
ちょこっとずつですが、各発表で心に残った部分をメモしたのをのせますー
(メモだけじゃ全然内容わかんないのでスライド公開されたらリンクさせていただきたい・・・。)

ちなみに発表内容はイラストレーターさんにより会場でリアルタイムでイラスト化されていました!すごい!
描かれたあと会場に掲載されていたのでその写真も一緒に載せます!ブレ気味ですみません。。

f:id:yoshiko_pg:20140716234617j:plain

マンガボックスのアプリができるまで (坪田 朋さん@DeNA)

f:id:yoshiko_pg:20140716234619j:plain

(最初だったのであんまりメモできなかった。。。)

タブレット版「Yahoo!ニュースアプリ」のこだわり (田中 淳子さん@Yahoo!)

f:id:yoshiko_pg:20140716234624j:plain

当たり前を上質に〜とにかく読みやすく〜

  • デバイスを知る
  • ユーザーを知る
  • 競合を知る
  • プロダクトを知る

スマホサービスに最適なUXを考えるアプローチ方法 (瀧 知惠美さん@Yahoo!)

f:id:yoshiko_pg:20140716235454j:plain

UXデザインとは「ユーザーにとって最高の体験が何かを考える」こと
そのために有効な手法のひとつが「アクティングアウト」
"そのサービスが利用される状況で、自分(たち)が実際に使ってみて考えること"
ex.) 開発したおでかけアプリを実際に外出した先で皆で使ってみる
ニーズの検証のためだけでなく、新たなニーズを発見することが大切

必要な3つの視点

  • 自分がユーザーとして体験する
  • ユーザーから聞き出す
  • ユーザーを観察する

現場でのデザイナーとエンジニアの連携の実際 (吉田 正史さん@DeNA)

f:id:yoshiko_pg:20140716234610j:plain

Quiznowを開発されているエンジニアさん

アプリの出現によって増えたデザイン要素

  • 写真、動画処理
  • アニメーション
  • サウンド

デザイン要素が増えたので連携が難しくなっている

解決案1・エンジニア頑張る編
デザイナーさんが触ってデザインを調整・確認できる別アプリをエンジニアがサクッと作った
そのアプリでデザインの数値的な細かい調整をデザイナーがやってくれたので逆に楽だった

解決案2・デザイナー頑張る編
アプリの動き(起動時〜主な動き)をデザイナーに動画で作ってもらった
サウンドも込み
動画をそのままプロトタイプに使用できるので効率が上がる

インタラクティブデザイナーがサービスデザイナーになって感じる阿鼻叫喚 (高橋 伸弥さん@DeNA)

f:id:yoshiko_pg:20140716235621j:plain

インタラクティブデザイナーとしてFlashでごはんたべてたけどリーマン・ショックスマホショックで仕事が激減していった
Flasherはさまざまな道へ

インタラクティブデザイン = 人の「操作」に新しい価値を提供し増幅させる、瞬間のデザイン

サービスデザイン = 人の「生活」に新しい価値を提供し増幅させる、期間のデザイン

スマデバリッチ広告をプロトタイプで作り上げる (小林 大介さん@Yahoo!)

f:id:yoshiko_pg:20140716235731j:plain

スマデバリッチ広告とは
たとえば

  • コンテンツの裏に大きな広告を置いて通常バナーサイズの要素から覗き窓のように見せたり
  • ジャイロスコープと連動して動かして奥行きを表現したり

などなど見ていて面白い(でもじゃまにならない)リッチな演出をした広告

イデアの段階からプロトタイプを作ることが大切。
通常のプロトタイプ制作は、効率を重視したもの(手戻りをなくすなど)
広告で言うプロトタイプは、動くものを作って見てみないと感触がわからないために作ってみる。

提案時のファーストインプレッションが全然違う
イデアの時点から面白さがわかるプロトタイプを持って話すことが重要

チラシの裏のエンジニアリング〜おっさんだらけの主婦向けアプリ開発の舞台裏 (黒沼 慎太郎さん@DeNA)

f:id:yoshiko_pg:20140716234642j:plain

Android Firstでの開発 → 日本の主婦のスマホAndroid端末が多いから。
スピード感重視で2週に1度のリリース間隔

開発者5人が全員オッサン(一人イケメン)で主婦の気持ちが全くわからないためユーザーにインタビュー調査

User Operation Log
主婦のタッチ操作を具体性のある形でロギングする

JSON-RPC 2.0
バッチリクエストで複数のリクエストを一束にまとめられる

レビューについて
レビューのお願いに「気に入った」ボタンと「不満がある」ボタンを置く
「気に入った」ボタンはApp Storeのレビュー記入欄へ、「不満がある」ボタンは直接自社の問い合わせフォームへ飛ばしてクレームや不明瞭なバグ報告がストアのレビューに流れないようにする

プロトタイピングと定性調査のすすめ (堀 哲也さん@Yahoo!)

f:id:yoshiko_pg:20140716234635j:plain

デザイナーがプロトタイプを作るときに、手描きだとテキスト等がつぶれて大変
そんなときはKeynoteを使っている
サイズをiOSにあわせる → PDFに吐き出すときに要素にリンクを設定する → PDFで書きだしてスマホでビューワーアプリで見るとリンクも辿れる状態で確認できる

画像の透過は「インスタントアルファ」が便利、ぽちぽちで色を透過できる
サムネイルの切り抜きは「マスク」
サイズを揃えて配置するのも簡単

便利で多機能なツールがどんどんでてきているが、そのせいでプロトタイプ作成のハードルも上がってしまっているのでは?
作り込み過ぎずにもっと活発にプロトタイプをつくろう

プロトタイプを作ったらちゃんとユーザビリティテストを行う
ex.) 引っ越しをしたので天気の地域を変更してください。等
ポピュラーなメニューアイコンでも実はなかなか存在に気付かれなかったりする

Sketch3を使った、デザインからプロトタイピング (増田 直生さん@DeNA)

f:id:yoshiko_pg:20140716234631j:plain

Sketch3の利点

  • デザイン全体を俯瞰して確認できる
  • 素材の書き出しが楽(デバイス別の異なるサイズを自動で書き出せる)
  • オブジェクト間のpaddingやmarginを自動で表示できる
  • 共通のUIをシンボル化して使いまわせる
  • iOSのUIコンポーネントが標準で用意されているので作らなくてもいい
  • iOSでよくあるブラー効果も画像そのものではなく上のレイヤーでかけられる

実演があったのもよかったです!

デザイナーとエンジニアのコミュニケーション (天野 裕介さん@Yahoo!)

f:id:yoshiko_pg:20140717000211j:plain

  • 仕様策定から関わってエンジニアの「自分事」にする(関心をもつ)
  • UI設計段階もエンジニアも関わる(技術的に無理、などの意見もほしい)
  • 必要な資料を明確に提示することで開発がスムーズに進む
  • 仲良くなる
  • 壁を取り除いて互いに遠慮しなくなれると、迅速なコミュニケーションがとれる

結論:仲良くなろう

よしこの雑感

  • Sketch 3すごいんだな、便利そう(デザイナさんに使ってほしい)
  • Prottよさそう!(公式TOPの動画みた)
  • プロトタイプは手戻りを抑えるという効率面だけでなくもっとたくさんの意味で重要
  • やっぱりUI/UXは「ユーザー目線」をどれだけ持てるのかに行き着くのかな
  • 聞き取りとかユーザビリティテストとか、わかっちゃいるけどなかなかできない、がやっぱり重要
  • 一人称・二人称・三人称の目線が大事(ユーザー自身になりきる、インタビューする、観察する)
  • デザイナーとエンジニアの連携力の高さはプロダクトの質に結びつく

デザイナーの意を汲んでエンジニアがデザイン部分頑張って実装するより、デザイナーが調整できるツールを作るという技術力の使い方はいいなと思った。互いに納得できそう。
デザイナーに動画でアプリの動きイメージを出してもらうのも、インタラクティブなプロダクトだととても有効だと思った。

UI/UXはデザイナーさんとの(あと居ればディレクターさんとも?)二人三脚なんだなーっていうのが全体的に伝わってきて、言われてみれば確かにそうだなって思いました。
私も二人三脚したい!