2014年10月15日（木）、渋谷ヒカリエにある株式会社 DeNA の Sakura Cafe という超絶シャレオツなカフェスペースで UI デザインをテーマにしたコミュニティイベントが開催されたので、僕 wakamsha がお邪魔してきました。

UI Crunch とは？

UI デザインに関わるすべての人の為のコミュニティ

http://ui-crunch.com/
UI Crunchは、UI デザインを追求していくコミュニティーです。デザイナーだけではなく、エンジニアからディレクターまで、UI 開発に関わるすべての人を対象とした勉強会やワークショップを渋谷周辺にて定期的に開催する予定です。第１回は UI に関するスピーチ＆パネルディスカッションを行います。

UI Crunch #1 - connpass

70人の参加枠も受付開始からあっという間に定員になってしまい、最終的には343人もの申し込みが入るなど開始前から非常に注目されていたイベントということもあり¹⁾たまたま Facebook のタイムラインで見つけて即申し込み、すかさず社内のデザイナー衆にも展開したのですが、時すでにお寿司。チャット上にリンクを貼った約10分後には定員オーバーになってしまいました。、期待に胸を踊らせながら潜入してきました。

開催のあいさつ

UI Crunch は主に DeNA とGoodpatchのデザイナー勢を中心に活動するコミュニティであり、UI に興味のあるエンジニア・デザイナー・ディレクター等が集まって開催するイベントとのことです。今回はその第一回目のイベントであり、今後も月一のペースを目標に開催していくと話していました。

Goodpatch のデザイナーが何人も DeNA に常駐しているなど両社はかなり親交があるようで、今回のコミュニティもそういった背景を元に登壇者である DeNA のデザイナーである坪田朋さんと Goodpatch の CEO である土屋尚史さんとが意気投合して立ち上がったものと話されおりました。

#1 開発現場に於けるデザイナーの生存戦略

坪田朋 DeNA　デザイン戦略室室長　UI デザイナー

マンガボックスを手がけられており、その他にも既存サービスと新規をおよそ半々の割合で進めているそうです。

Webデザイナー不要論

すこし前に IT 技術者界隈で話題になったデザイナー不要論と題したエントリーに対する見解を述べられておりました。

• ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略

• Web デザイナーの仕事がエンジニア達によって奪われている
• Bootstrap といったフレームワークがあればデザイナーは不要
• この業界はデザイナーよりもまずはエンジニアを先に採用する傾向にある
• デザインなんてアウトソーシングすればいいんじゃね？という雰囲気が根強い

開発現場の実態

• エンジニアはインハウスでの採用を強化している
• フルスタックエンジニアは増加傾向にある（肌感）
• 現場のリソースもデザイナーよりエンジニアを優先しがち²⁾ゲーム開発は例外
• 確かにクラウドソーシングは結構使っている

確かに上記の不要論とそこまで差異はありません。Bootstrap といった CSS Framework は完成度が高いし、ランサーズといったクラウドソーシングサービスも増加傾向にあります。しかしそういったテクノロジーや市場が伸びているからといってデザイナーが不要になるかというとそうでもありません。何故なら設計まで含めて総合的に出来る人間こそが生き残れるからです。

プロトタイピングのニーズ

UI は繰り返しながら作るからインハウス傾向で、グラフィックはそれが出来た後にアウトソーシングといった二極化が進む一方で、開発現場に置いてプロトタイピング型のニーズが高まっています。すなわち職種問わずプロトタイピングできるという希少価値のある人間が求められているのです³⁾プロトタイピング＆デザイン＆ディレクション。提供する UX とそれを実現したUIそのものがプロダクトとして評価されるべきであり、デザイナーの存在意義は UI を意識してプロトタイピングし続けることにあるのではないでしょうか。

おまけ

デザイナー達によるポートフォリオサイトも、従来の完成品だけを掲載するギャラリー形式のものから制作プロセスを掲載する方向に進んでいます。DeNA ではインハウスデザイナーに対して積極的にそういったところにアウトプットするように呼びかけているとのことでした。

• Dribble
• Behance

基準について知る

貫井伸隆 Goodpatch　Chief UI Designer

日本人で最初の Dribble プレイヤーだそうです。

Modulor

• 近代建築の三大巨匠の一人であるル・コルビジェが人体の構造について黄金比を使って定義したもの
• 身長183センチの人間を基準
• 天井の高さは身長183センチの人間が手を上げて丁度とどくくらいの高さが目安
• 手すりの高さは身長183センチの人間が自然と手を置ける高さが目安

世の中にあるプロダクトデザインの多くも人間の手の大きさを基準に作られています。iPhone の電源ボタンは 5S まで筐体の上の位置にありましたが、iPhone6 からは横に移動しました。これは筐体が大きくなりすぎてしまって上の位置では握った時に届かなくなってしまったからです。

人間工学に基づいた UI 設計

• ナビゲーションバーの高さは44px
• エレメント間のマージンは22pxだったり11pxだったりと、44pxを基準としている
• iPhone4S から iPhone5 になったとき、スクリーンサイズの高さが176px分だけ大きくなった（44 x 4）。

様々なモバイル端末が登場する度にスクリーン解像度の断片化が進んでいくため、解像度に依存しないデザインが求められるようになります。フラットデザインのようなシンプルに削ぎ落としたデザインが登場したのも、そうした背景があったからでしょう。

端末非依存なデザインをしていく必要があります。我々は UI（User Interface） デザイナーですが、これからは UI（Universal Interface）デザイナーとしてやっていかなくてはならないのでしょうか。

AfterEffect を使ったインタラクションデザイン

増田直生　DeNA　デザイナー　IPプラットフォーム事業本部

マンガボックスや新規立ち上げを担当されているそうです。また DeNA にジョインする前は Goodpatch でデザイナーをしていたそうです。

デザイナーはチームにインタラクションをどうやって伝えていますか？

何となくの雰囲気を口頭ベースで伝えることが多いのではないでしょうか。

• もっと滑らかになりませんか？
• 気持ちいモーションでお願いします。

そうしてエンジニアから上がってきたものを見せてもらっても何か違う……。

Adobe Affter Effect で統一感のある UI を

After Effect を使うことでデザインからインタラクションまで統一感のあるUIを作ることが出来ます。それによりインタラクションにおける認識の齟齬がなくなることでチーム間により良いコミュニケーションが生まれます。また手戻り等もなくなるので生産性が向上し、サービスの品質アップにつなげることが出来るのです。

（数秒程度のアニメーションであれば）AFは意外と簡単

たとえ２〜３秒程度のアニメーションであっても、言葉で説明するのは非常に難しいですが、実際にアニメーションを見せる事が出来れば一度ですぐに理解してもらうことが出来ます。

AF の使い方は Flash Pro と非常によく似ています。タイムラインやキーフレームによるアニメーションの制御など、UI面で共通するところが非常に多いです。

デザイナーまでアニメーションを担当すると確かに仕事は増えますが、チーム全体の効率向上が期待できます。自分でアニメーションといったインタラクションを作ることで、思わずデザインの矛盾点に気づくといったメリットが挙げられます。

このセッションに対し、スクーの視聴者からあえて Flash を使わず AF を使うことのメリットはあるのか？といった質問がありました。増田さん曰く、違いというのは両方のアプリを相当使い込まない限り表面化はしてこないため、基本的に馴染みのある方を使うのが良いとのことでした。どちらが良いといった話ではなく、あくまで選択肢の一つとして AF は映像作品だけじゃなくアプリデザインにも使えるということなんでしょうか。

誰のためのUI？

藤井幹大　Goodpatch チーフUIデザイナー

ものづくりには以下の4つのゴールというものがあります。

1. ユーザーの体験
2. ユーザーの行動
3. モノ
4. 存続可能性

そしてこれら4つは互いに関連し合っており、一つのサイクルを形成しています。

ユーザーの体験

価値、感覚、気持ち、出来事

ユーザーの行動

来店、購入、課金、登録、継続利用

モノ

サービス、機能、UI

存続可能性

収益目標、ユーザー数、問題解決 等その事業が続けていくための条件

これら４つのサイクルが、モノづくりのゴールを実現するフレームワークとなります。

現場での実践方法

UI デザインの場合

ユーザーの体験

体験を生む UI

ユーザーの行動

行動を生むUI

モノ

クオリティの高い UI

存続可能性

事業を存続させる UI

ぞれぞれはこのように定義することができます。が、メンバー皆がこれら全てを意識することはなかなか難しいでしょう。自分がメインとしていないカテゴリのゴールを意識するのはなかなか出来るものではありません。

ここで会場内で挙手による簡単なアンケートが行われました。「自分が最優先するゴールはこの4つのうちどれですか？」というものでしたが、　会場の多くが ユーザーの体験 で手をあげていました。ちなみに僕は モノ で手を挙げたのですが、他に挙げた人は誰もいませんでした。お前らそんなんでいいんか・・・？

スライドにもあるように、これらはお互いに向かって一つのサイクルを形成しています。つまり4つが揃って初めて良いモノが作れるのであり、どれが一番といった事ではないと話されていました。違うゴールを持つ人達と一緒に良い物をつくろう！

iPhone6/iOS8 デザイナーが知っておくと便利なTips

沖津 貴智 DeNA Engineer

今回のスピーカーで唯一のエンジニアでしたが、他の方々とは違ったエンジニアならではの視点からお話されていました。

iPhone6 / 6plus の解像度について

iPhone6 に対応していないアプリはScaling mode が発動して、アス比を維持したまま拡大表示されるという仕様があります。これによって従来のアプリでも一見問題なく表示されているように見えるらしいですが、実はよく見ると細かな違和感が各所にあるとのことです。

iPhone6plus のスクリーン解像度は 1920x1080px でピクセル密度は 401ppi ですが、内部ではスクリーン解像度が 2208x1242px あるものとして計算されます。そしてスクリーンに表示する際に縮小（0.87倍）して表示されています。当初は 2208x1242px のディスプレイを製造する予定だったのが後になって難しくなり、苦肉の策としてこのような対応をするに至ったのか、それ以外の理由があるのかは定かではありませんが、現状はこのような仕様になっています。

XCode6からベクターデータとして PDF が使えるようになった

端末の解像度ごとに複数サイズの画像を用意するのは非常に大変ですが、XCode6 からベクターデータとしてPDFが使えるようになりました⁴⁾どういう理由か SVG じゃないんですね。。これにより一つの画像データだけで複数のサイズに対応することが出来るようになります。但し、これには以下の制約があります。

• ビルド時に内部でラスタライズ（ビットマップ化）されるので、最終的にはベクターではなくなる
• 元となる PDF は @1x のサイズで作る必要である
• OS のバージョンは iOS8 だけじゃなく、iOS6,7 でも表示できる

LaunchScreen（スプラッシュ画面）

iPhone6 が登場したことで LaunchScreen も４種類用意しなくてはならないと思いがちですが、xib ファイル を作成すれば1ファイルで全てのサイズに対応出来るようになりました。但し、iOS8 以上のみが対応しており、７ 以下はこれまで通り個別に画像を用意する必要があります。なので実案件で使えるのはもう少し先になりそうですね。

便利サービスいろいろ

iOS.zip

iOS アプリ申請時に必要な画像セットを1クリックでまとめてダウンロードすることが出来る

AppPreviews

OSX Yosemite + QuickTime で実機画面の動画撮影ができるようになった（端末を Mac につないでデバッグ）。キャリア表示といった余計な情報は消してくれる。

Prott のデザインプロセス

小林幸弘 Goodpatch UI Designer

Prott のメインデザイナーを担当されているそうです。

かつての Goodpatch にはアプリエンジニアがおらず、実際に動くアプリを自分たちだけで作ることが出来ませんでした。そのため外部に委託して作ってもらっていたのですが、出来上がったものを触ってみると何か違う…。こういった問題を何とかデザイナーだけで解決することは出来ないだろうか？そうだ、FLINTO を使おう！

ベータ版リリース一ヶ月前にして全部作りなおし

ベータ版リリース一ヶ月前にして使い辛いという雰囲気になり、結局全部を作りなおすことになりました。

• 高速にプロトタイピング出来るようよりシンプルなものにした
• 6 タップで最小限のプロトタイプが作れるような UI を設計
• 活発なコラボを促すためにアバター（ユーザーの顔）を表示
• これにより誰がどんな作業をしているのかをわかりやすくする
• いつでもコメントを投稿、返信できるようにした
• UIエレメントをタップしてコメント表示。コメント箇所を見ながら投稿ができる

これからの Prott

• ワイヤーフレーム機能
• 遷移図機能
• 一つの要素にたいして複数のジェスチャーを設定できるようにする（現在はい）

パネルディスカッション

Goodpatch CEO の土屋さんをホストに登壇された方々によるパネルディスカッションが最後に行われました⁵⁾実際は座談会という感じでしたが。

土屋さん曰く、日本とシリコンバレーのベンチャー企業とでは事情が全く違うとのことです。日本は単民族の島国なので、ベンチャーに限らず中小や大手においても日本人の従業員が大半を占め、外国人の方が珍しい状態が未だに根強いですが、シリコンバレーはお国柄か多国籍な人種が当たり前のように集まっています。母国が違えば当然思考や目指すものも多種多様となり、自然と世界視野を持つようになります。これは DeNA のファウンダーである南場智子さんがとある講演会で話されていた内容で、これを聞いた土屋さんは即シリコンバレーに飛び、後に Goodpatch を作るに至ったと話されておりました。

事業会社のデザイナーと受託のデザイナー　どういう働き方の違いがるだろう？

• 受託の Goodpatch と事業会社の DeNA とでは、そこまで大きな違いがない
• 自社サービスを持つ事業会社は納品（ローンチ）後の運用の中でいかにサービスを最適化していくかが多くを占める
• 受託だとまだまだ作って終わりというケースが多い（※クライアントが運営予算に後ろ向きなのが主な要因なのではないか）

受託のいいところ

発注するクライアントとその先のクライアントの両方を満足させる必要があります。大変だけどそこがやりがいとして大きいです。

受託のよくないところ

作り手は最終的にそれを使うエンドユーザーのために作っているのに、クライアントから待ったが入ることがあって歯痒いことがあります。

DeNA のチーム構成について

ディレクター１人、エンジニア二人、デザイナー一人といった最小チームで作ることが多いです。はじめから大きなプロジェクトだったとしても、このメンバー構成にプロデューサーやコーダーなどが追加されて6人程度でスタートするのが普通です。

受託の現場ではクライアントとの合意形成に何かと時間がかかるが、DeNAでは権限の多くを現場に委譲してしまうので、とても早く意思決定をすることが出来るようになっています。

デザイナーと経営層

海外ではよくあるケースでも、日本でデザイナーが経営層まで進むというケースは殆ど例がありません。職人的なポジションであるデザイナーはどうしても絵かきとして自分の世界にのめり込んでしまいがちなのだと土屋さんは考察します。

DeNA の経営者はとにかく現場に口を出さないようにしているし、現場としても出してほしくないと考えています。最初のコンセンサスだけやって後はプロジェクト内で完結させる。デザイナーの数が足りないのではなく、現場でプレゼン力があって、ユーザーのことを考えられてプロトタイピングまでできるような人材が少ないのが現状の課題と DeNA の坪田さんは話しておられました。

質疑応答（※一部抜粋）

Q) インタラクションは誰が作るべき？

A) 最初に案を出すのはデザイナー、それに対してエンジニアがいろんなデモを返したりしてディスカッションを繰り返す、最終的にチーム全体で作るようになる。

Q) デザイナーは今後どういったキャリアパスを描いていけばよい？

A) 例えば Facebook 等に見られる「いいね！」といったユーザー体験を定着させるには、いいねを押したユーザーに対して明確なインタラクションを返してあげることが大事。なぜならそうしてあげることで、ユーザーは自分が行った操作に対して明確なフィードバックを受けたことで体験が身につき、それがやがてポチポチ押すという習慣に変わるからである。これがいわゆるロジカルな説明というものであり、こういった説明を自ら出来るようなデザイナーになるのが良いのではないか。

Q) 企画職の人たちとのやり取りで心がけていることは？

A) 最初に決めた仕様について後から横槍を入れないようにしてもらっている。あくまで純粋ないちユーザーとして忌憚のない意見は歓迎する。

Q) デザインやインタラクションに興味のないエンジニアとチームを組むことになったらどうする？

A) 普段から良いと思ったアプリ等を積極的に紹介して少しずつ興味を持ってもらうように努める。彼ら（エンジニア）の仕事に対してリスペクトの気持ちをきちんと表す。デザイナーの仕事に興味を持ってもらうには、自分も彼らの仕事に興味と感謝の気持ちを持つことが大切。

おわりに

イベント告知から一瞬で参加枠が埋まってしまうほど期待値の高いイベントでしたが、その期待通り実に素晴らしく充実した内容のイベントでした。僕はデザインに少しだけ寄ったマークアップエンジニアで、それこそプロトタイピングを主な生業としていますが、やはりプロトタイピングを高速で作れるような人がこれから求められるだろうという認識に間違いはなかったのだな、と思いました。また機会があれば参加してみたいですね。