雨ブロ【yusukixsのブログ】

アドテク関連の業界で働くエンジニアです。最近はKubernetesでコンテナクラスタを構築してサービス開発することに力を入れてます。

スマートフォンアプリ時代のデザインワークフローに参加してきました

勉強会参加報告

2015.7.21にLINE株式会社で開催されたスマートフォンアプリ時代のデザインワークフローという勉強会に参加してきました。

ウチの会社の開発はSI主体なのでデザイナーがおらず、エンジニアがデザインも兼務するので、ぶっちゃけデザインがショボいとよく言われます。

Web系サービスはデザイナーとどうやって開発をやっているのかが知りたくて参加しました。

The Way of the (Co-)Prototyping 株式会社グッドパッチ 藤井幹大氏

今日話したいこと

GoodpatchのスマートフォンアプリのUser Interfaceデザインワーク

User Interfaceって何だろう？

Interface＝接触面

Interfaceは、それを挟む両側を深く理解し、どちらにも合うようにデザインされる必要がある。

iPhone3Gが登場した2010年頃にUXが注目されてきた。

Interfaceの向こう側に何（システム、社会など）を想定するかによって、デザインの範囲や捉え方が変わる。

モノづくりの敵は自分だ。

「内なる敵」：人は迷わずに行動するための仕組みを持っている。影響範囲の大きさが個人の領域を大きく越えるとき、自分が自分の敵になる。

  • 確証バイアス：間違いない
  • IKEA効果：がんばったからいいモノができた
  • サンクコスト効果：投資は無駄にしたくない

自分に打ち勝つ方法はあるのか（グッドパッチ社の事例）

prott：プロトタイプをチームにインストールするためのツール

https://prottapp.com/ja/

プロジェクトチーム

各チームは独立してプロジェクトを進める。メンバーはRole別に責任と権限を持つ。

メンバーの統計 - エンジニア：39％ - デザイナー：35％ - PM：26％

平均年齢は28歳。一人ひとりはスペシャリストではなく、集団でUIスペシャリストとなっている。

なぜやるのかという価値観を共有している

  • プロトタイピングによって検証をしている
  • アイディアをリアルな評価ができる状態にして、チームで試しながらモノを作っていく

デザインプロセス

  • チーム×プロトタイピング前提
  • チームも前提のチューニングをしながら改善を続ける
  • 発見→仮設→アウトプットを繰り返しながら常にレビューを入れていく
    • 制限時間を作って未完成でもレビューするのがコツ

三段階レビュー

  • チーム内レビュー
    • チーム内では常にオープンなSlackチャンネルとProttプロジェクトで共有して、職種関係なく意見を出し合う。
  • 全社レビュー
    • 毎週1回全プロジェクトを対象にしている
    • Qita:Teamで情報共有を事前に実施して、他プロジェクトの人がプロジェクト内容を理解できるようにする。
  • Role別レビュー
    • Roleごとの意見を出しあう。プロジェクト外のメンバーも参加可能

Sketchで変わるスマートフォンアプリのデザインワークフロー　山本麻美氏

Sketch3のすごいところ

  • Style
  • Symbol
    • パーツごとにまとめて色を変えたりできる。画面ごとに反映させる必要がない
  • Sketch Mirror
    • PCで作成中の画面をリアルタイムでiPhoneの画面に表示できる
  • Export
  • Plugin（便利なプラグインがたくさんある）
    • Androidアプリ用の解像度別の画像書き出しが一瞬でできる
    • ダミーテキストや写真を自動作成してくれる
      • 人名や電話番号などもある。日本語化プラグインもある

BizReachの事例

Sketchでワイヤーを300枚〜400枚作成し、Prottで配布

Sketchだから実現できた

Sketchを元にレイアウト指示書を作成

初心者であっても、企画→実装のブレがなく早くアプリを作成でき、学習により改善が高速化。　＋　メンバーの満足度も高まる

Prottによる体験の共有 Sketchによる圧倒的スピードで実現できた

UIのモジュール化と役割分担（コンポーネント化）

デザインをモジュール化することでUIの修正が1箇所で済む

Zeplinというツールを使うと、レイアウト指示書を作らなくて済む

Android向けのXML、iOS向けのSwift・Objective-C用のファイルを生成できる

インタラクションをデザインするツール

まとめ

  • 作業ではなく、UI設計に集中しよう
  • 全体を俯瞰してUIを設計しよう
    • Sketch + Prottでアプリを立体的に俯瞰できる
    • Excelはダメ！
  • 最低限の技術的知識を持とう

感想

グッドパッチ社のUIレビューは全社員で実施しているとのことだが、レビュー参加人数が多すぎて、かえって意見がまとまらないのではと思った。

結局は偉い人が気に入るデザインに偏りがちになるのではという懸念がある。

その辺の落とし所をどうしているのかを質問したかったのだが、時間の都合上質問ができず…

個人的考えとしては、意見が発散してまとまらないため、大人数のレビューはするべきではないと思っています。マネージャーなどへのレビューは、少人数レビューで充分に議論を仕切った後に段階を踏んでやります。

ただし、「俺の意見が絶対正しいんだ」系のマネージャーの場合はちゃぶ台返しをされて大幅な手戻りが発生するリスクがあるので、先にレビューをやったほうがいいですね。

後半の山本さんの話は、エンジニア目線で見ても非常に便利なツールの紹介でした。ぜひSketchとProttは使ってみたいと思います。

おまけ

勉強会の最後に「ダイアログ」というその日の振り返りを行うクロージングがあったのですが、そこで同席した方がこれからネイティブアプリの開発をやろうとしているとのことだったので、

「ネイティブの開発はiOSとAndroidを個別にやると、学習コストがかかってツラいっすよー」

「今ならWebの技術使ってハイブリッドがオススメですよー」

「Cordova使えばスマホアプリ作れるし、NW.jsとかElectronならデスクトップアプリもつくれますよー」

というハイブリッド伝道師ぶりを発揮してしまいました。

ハイブリッドアプリの開発はまだまだ認知度も低いようなので、これからは個人的にハイブリッドアプリの普及活動をしていこうと思います。