UI Crunch#1行ってきた

UI Crunchとは

DeNAさんとGoodpatchさん共同による「UIデザインに関わるすべての人の為のコミュニティ」だそうです。

運良く会場に潜り込めたのでメモ。

 

会場はこんな感じ

DeNAさんのサクラカフェなる会場。とてもシャレオッティです。

24Fなので夜景もきれい。東京タワーまで見えちゃいます。

ビールも出て、美味しそうなケータリングも無料でいただけるなんて、DeNAさん太っ腹ですね。

f:id:yunko3:20141018235136p:plain

プレゼン内容のメモ

開発現場におけるデザイナー生存戦略　下村圭太さん

最近話題になった「デザイナー不要論」に対する彼なりの見解。

  • 確かに採用する場合は「エンジニア＞デザイナー」。
  • 実際、グラフィックは外注できるし。
  • フルスタックエンジニアも増えてるし、Bootstrapとかもあるし、ますますデザイナー不要？
  • しかし、実際は「プロトタイプをがんがん回せるデザイナー」の需要が高まっている。
  • プロトタイプ三種の神器：prott、AfterEffect、sketch3

個人的見解

多分、職種関係なく一緒にプロトタイプを作って、回して、数字見て、施策考えられるようなデザイナーが欲しいという意味かなと。

あくまで予測ですが、さらに数年経つと凄腕グラフィッカーとか、神レベルのコーダーとかに再びスポットライトが当たる気がする。時代は繰り返す的な感じですね。

プロトタイプは回せるようになった→今度はプロダクトの質を底上げしようってなった時に、スペシャリストや専門家の力が必要になってくるのではないかと勝手に思いました。ええ、勝手に思っただけです。

グッドパッチ　貫井伸隆さん（すみません、タイトルをメモれなかった）

コルビュジェしかり、Appleしかり、人間のサイズをもとにデザインはされてますよーという話。

  • iPhoneとかも手のサイズをもとにプロダクトアウトされている
  • 最低タップ領域：44px。iOS。44pxを基準に画面が作られている（22px、11px・・・）
  • 今後もいろんな解像度が出てくるので「解像度非依存」が重要。

個人的見解

解像度非依存は、Androidの「端末サイズが多すぎてフレキシブルにやらないと設計できないお／(^o^)＼」にも通じるところがあるなあと思いました。

AfterEffectを使ったインタラクティブデザイン　DeNA増田直生さん

AfterEffectで、エンジニアさんに実装してほしいアニメーションを伝えよう的な。
（Flashをディスってるわけではないようです。）

  • 「動き」を伝えるのって難しい
  • イメージしているアニメーションを実機で見せられればいいのですが・・・
  • そんな時はAfterEffectでアニメーションを作ろう
  • AfterEffectの操作はFlashに似てて簡単です
  • AfterEffectに限らず、自分の使いやすいツールを使えればOK

個人的見解

元々DeNAさんはソシャゲでアニメーションを多用しているので、アニメーションのホウハウは豊富だと思われ。

最近はアプリ開発でアニメーションを制作する機会が増え、「動きをどう伝えればいいか？」というのはどこも同じ悩みを抱えているのだなと思いました。

誰のためのUI？　グッドパッチ藤井さん

ものづくりのゴールとは？ 

  1. モノ（プロダクト）：モノのクオリティが大事
  2. ユーザーの体験：ユーザーが満足する体験を提供できるかが大事
  3. ユーザーの行動（来店、ログイン、購入など）：KPIの数字も大事
  4. 持続可能性：事業として持続させることも大事

全部大事！どうすればいいか？

  • １〜４のサイクルをちゃんと回せることが重要
  • 自分が１が重要でも、他の人は４が大事、といった別のゴールを持っている人とも、上手にやっていく必要がある

個人的見解

個人的には一番興味深いテーマでした。確かに数字を持ってる人と、プロダクトのクオリティを追求する人では、目指すゴールが異なるから不和が生じやすい。

でも大きなサイクルというか全体像？みたいなものが見えてると、全くゴールの異なるメンバーとも共存できるなあと。

大企業は全体像が見えにくいから、全体像を把握するのは大変だけど、比例して重要だなーと思いました。

デザイナーが知ってると便利なiPhone6/iPhone6+/iOS8のTips　DeNA沖津さん

本当にiPhone6/6+/iOS8のtips集でした。

  • scaling mode：画面を引き伸ばすモード。iOS8未対応アプリは引き伸ばされちゃう。
  • PSDは2208px*1242pxで作るのが正解。
  • @1x、@2x、@3x用意するより、ベクターの方がよくね？
    →実際は裏側でラスタライズされ、@1x、@2x、@3x画像が作られている！
  • 今まではスプラッシュ画面が4種類必要だったが、これからは1種類でOK（LaunchScreen）
  • 便利サービス「iOS.zip」。申請に必要な画像一式であれあれしてくれる
  • iPhoneの画面の動画撮影：Yosemite(10.10)＋QuickTimeで簡単に撮れるようになる！

個人的見解

Yosemite(10.10)＋QuickTimeで簡単に動画キャプチャーが撮れるのは胸熱。reflector買わなくてよかった。

エンジニアさんがこのように分かりやすいtipsをシェアしていただけるのも有難いですね。デザイナーにとって、技術的な情報を常にキャッチアップするのは大変なことなので。（用語わかんない、英語読めない、日本語なのに通訳必要な文章とか、何かと技術系ニュースはハードルが高い印象）

「prottのデザインプロセス」グッドパッチ小林幸弘さん

何故Goodpatchさんがprottを作ったのか？

  • 2年前、Flintoに衝撃を受ける
  • でも意外と使いづらいところが。よし、自分たちで作っちゃおう！
  • 最小タップ数でプロトタイプを作成できるようにした。
  • コメントを付けたり、メンバーの顔を表示したり、いろいろ工夫している。

個人的見解

「UIを作るためのツール」のUIUXって、本当に難易度が高いしプレッシャーだと思うんですよ。自分自身が見本にならないといけないというか。

（ツール系サービスはユーザーが操作するモノなので、難易度は高い気がする）

prottはGoodpatchさんにとってもすごく大きい意味があるのかと。

プロトタイピングツールは戦国時代に突入している（気がする）ので、prottの今後の動向が楽しみです。

まずはアプリをDLせねば(´・ω・｀)

パネルディスカッション

「自社サービスと受託開発の違いは？」「DeNAさんの少人数チーム体制」「企画職との関わり方」「エンジニアさんにやる気を出してもらうには？」「デザイナーのキャリアパス」など。興味深いアジェンダでしたが、まとめる気力が無くなってきたので割愛。

 

参考URL集

当日のスライド 

グッドパッチ　貫井伸隆さんのスライドだけ見つからず。。。

 

 


XCode6 / iPhone6 / iOS8 デザイナーが知ってると 便利なTips // Speaker Deck

UI Crunch1のサイト

スクーの動画