UI Crunch #1

スクーの講義、【現役クリエイターから学ぶUIデザイン講座】UI Crunch #1 渋谷ヒカリエから生放送！を受講してみました。実際のイベントは渋谷ヒカリエで行われていて、その実況が生中継されるという形でした。DeNAとGoodpatchといった、IT業界のUIデザインを牽引しているといっても過言ではない両会社のコラボということで、みんなの反応もとても熱く、70人の定員があっという間に埋まる盛況っぷりです。

内容としては、プロダクトのゴールとは何か？といったモノづくりの本質を問うような発表から、iOS8対応のTipsといった具体的で実務に役立つものまで幅広く、様々なトピックスについて考えられる機会になって良かったと思います。これからもUICrunchは月一度行われるらしいので、今後の話題の広がりも楽しみです。それぞれの発表内容を簡単に整理してみました。

開発現場におけるデザイナーの生存戦略 - 坪田 朋 UI Designer（DeNA）

デザイナー不要論が浮上し、みんながざわついている。確かにBootStrapのようなプロトタイプが簡単に作れるフレームワークや、クラウドソーシングの活用が明らかに増えていて、デザイナーの既存の仕事が奪われている。しかし、プロダクト全体のことを考えられるデザイナーの希少価値は依然として高い。代替可能なCSSを書くとかグラフィックを作成するデザイナーから、Sketch3, AfterEffects, Prottのようなツールを使いこなしてプロトタイプまで作成できる代替不可能な人材にシフトしていくことが今後のデザイナーの生存戦略ではないか。

発表資料

基準について知る - 貫井 伸隆 Chief UI Designer（Goodpatch）

ル・コルビュジエという建築家が考案した人体の寸法に基づいた数例であるモデュロール(Modulor)というものがある。例えば国立西洋美術館がモデュロールに基づいて設計されていて、身長183cmの人が腕を伸ばすと天井に手が届く。建築物だけではなく、全てのプロダクトが人体のサイズにあわせて作られている。アップルが提示している最小の「押せるサイズ」の44pxというのはあらゆるアップルプロダクトのサイズの基準になっている。@x1, @x2, @x3と解像度が増えて、デザイナーの仕事が大変になってきているが、個別に対応するというよりは全てのデバイスに適用できる「Universal Interface Design」が大事となってくるだろう。

AfterEffectsを使ったインタラクションデザイン - 増田 直生 UI Designer（DeNA）

実装して欲しいアニメーションを「かっこよく」「気持ちよく」などのニュアンスで伝えてもなかなか上手くモノがあがってこない。AfterEffectsを使ってデザイナーがインタラクションまで作ることで、動くプロトタイプを見ながら具体的なディスカッションを行うことができる。デザイナーがモーションのプロトを作ることで、デザイナーの仕事は増えるが、プロジェクト全体の効率はあがる。使い方はFlashと良く似ている。

誰のためのUI？ - 藤井 幹大 UX Designer（Goodpatch）

モノづくりのゴールを実現するフレームワークとして「ユーザーの体験」「ユーザーの行動」「存続可能性」「モノ」のサイクルがあると考えている。この四つの要素に紐付けて、色んな指標も決められるし、UIもこのフレームワークベースで考えることができる。例えば、ユーザーの体験を高められるUIとは？存続可能性を高められるUIとは？といった追求ができるようになる。何を重要視するかは個人の価値観が現れるところでもあり、モノづくりにおいて職種ではなく責任でこの四つをカバーすべきである。いかにこのサイクルが機能するチームになっているかが重要。

発表資料

iPhone6/iOS8 デザイナーが知っておくと便利なTips - 沖津 貴智 Engineer（DeNA）

- iPhone6に対応してるかどうかはステータスバーのサイズを見るとわかる。対応済みの場合は高さがその他のiPhoneのサイズと同じ。
- iPhone6 plusは1920×1080の401ppiとなっているが、実際は2208×1242のサイズを0.87倍にしているので、モック作業の際は2208×1242でやっておくと良い。
- 解像度が増えたがpdfファイルを使ってVectorイメージを使うことができる。生産性が上がるのでできるだけpdf対応を検討すべき。
- LaunchScreenも解像度別に分けず、Xcode6から一つのファイルにすることができる。
- iPhoneの動画が今後App Previewsという名前で録画できるようになる(OS X Yosemite + QuickTime)。
Xcode6, iPhone6, iOS8対応、大変だがやり方は工夫できる。頑張りましょう。

発表資料

Prottのデザインプロセス - 小林 幸弘 UI Designer（Goodpatch）

Flintoを使うことでGoodpatchのデザインプロセスが圧倒的に変わった。Flintoのようにスケッチから素早くプロトタイプを作成できて、チーム内に共有してコメントをもらって開発の早いフェーズからフィードバックをもらったり、背景画像を設定してアプリの世界観を伝えたりすることができるプロトタイピングツール、Prottを作ってみた。今後はワイヤーフレーム、遷移図、複数ジェスチャー、自由配置などにも対応し、プロトタイピングに役立つツールとしていきたい。まだスタートラインに立っただけという認識。

私は業務としてワイヤーフレームを作成することが多く、それに最も適しているUXPinを愛用しています。これからは個々の画面を設計することも大事ですが、画面から画面への遷移、また画面内のUIコンポーネントの操作を行うときのモーションを考えることが重要になってくると思います。Prottはトランジション機能も提供しているとのことなので、使ってみて使い勝手が良ければ乗り換えることもあるかもしれません。

今後のUICrunchはDeNAやGoodpatchに限らず、色んな会社の人にも参加してもらいLightning Talkなどやっていくらしいです。今回のようなかしこまった感じではなく、もっとゆるくやりたいとのこと。UIデザインに関わる全ての人にとって有意義で楽しい場と成長することを期待しています。