Android UIにおけるエンジニアリングとデザインの関係 #yjbonfire
Bonfire Androidというイベントの第4回目に参加してきたのでレポートします。今回はUIをテーマにして、5人のデザイナー、エンジニアがトークをする形式でした。各トークについてまとめてみます。
■Yahoo!乗換案内アプリでのデザイナーの役割について / 山浦優樹
乗り換えアプリはデザイナーとエンジニア2人ずつの少人数でやっている。それゆえいかに効率的に実装していくかが課題だった。そこでフローを見直すことにした。
以前は効率などの理由によりiOSとAndroidが同じデザインだった。しかし現在はオリジナルなUIはできるだけ避けて、「Androidはこうだよね」という標準UIを使うようにしている。その他にもデザイナーが画像アセットを管理していつでも修正できるようにしたり、画面のレイアウト修正を行ったりと工夫をしている。
とはいえデザイナーにここまでやってもらうのは難しい。アプリデザインは未知なことが多く、お互いにコミュニケーションを取らなければいけない。WebDevのような、「この人に相談すれば」というメンバーを立てるといい。
■Material Designの変化の中でアプリエンジニアができること / 中村恵太
マテリアルデザインガイドラインは2014年に公開された。ラクマの前身のフリルでは、その4ヶ月後にガイドラインに準拠した。準拠することで少ない工数でリッチなユーザ体験を提供できたり、エンジニア、デザイナー間の共通言語ができたりと開発効率が上がった。デメリットとしては、ブランドを表現できる幅が少なからず狭まってしまい、Googleっぽいデザインになってしまうこと。
マテリアルデザインのコンポーネントの拡充は度々繰り返され、去年大幅にリニューアルされた。Material Themingにより、柔軟なブランド表現が可能になった。
ラクマではガイドラインの変化だけでなく、組織やプロダクトの統合があった。エンジニアは変化に強いので、それをUI領域でも応用できるようにした。社内に情報発信をしたり、プロダクトにおいてどのような変更が可能か、何をやるべきかを提案、改善していった。
Material Theme Editorはデザイナーの補助ツールというイメージが強いが、エンジニアの提案ツールとしても活用できるのではないかと思っている。改定によって使えるようになった部品を、実際のプロダクトに組み込んだ場合のイメージ図を見せつつ共有できる。
■自由度の高いアプリ内UIを実現するためのKARTE SDKの仕組み / 中間亮彬
KARTEとは、サイト、アプリに訪れたユーザの行動のトラッキング、分析ができるSDK。好きな条件でプッシュ通知、ダイアログを出したり、アプリのリリースをせずにポップアップを出したりできる。
アクションを設定する上で重視しているのは、簡単さとカスタマイズ性。UIを横に見つつHTMLを編集できたり、そもそもテンプレートが使えたり、WebViewを自由にカスタマイズできるようにした（WebViewへアクションを配信する手法を取っている）。
SDKはIn-app messaging, Push Notification, Variables, Trackerの4つで構成されている。
■UI改善に繋がるエンジニアの立ち回り / 瀬戸優之
エンジニアはデザインのことを考えなくていいのだろうか？UI改善に必要な知識は、エンジニアとデザイナーで完全に別々ではなく、被っている部分があるはず。エンジニアはその中でどのような立ち回りができるかを考えるべき。
例えばデザイナーがアンテナを張っていても情報が得にくい話（Deprecatedになる、AndroidX対応したからMDCが使えるなど）を提供する。実装に関しても、工数やダイアログを二重に出せないという情報などを提供する。
ノハナではガイドラインの輪読会をやっている。それによって共通の認識ができたり、実装の話がしやすくなっている。
エンジニアはエッジケースがカバーできているかチェックしたり、コードから仕様漏れ/複雑化について提言したりする。
■エクストリーム・プログラミング開発におけるUIテスト〜ライブコーディングを添えて / 飯島彩輝・松田悠吾
ヤフオクチームではリーンスタートアップXP（エクストリーム・プログラミング）を取り入れている。ユーザに価値があるものだけをどうやって作るかに主眼を置いている。
XPはより安いコスト、より高い生産性で開発を進める。ペアプロ、テスト駆動開発もこの一部。
進め方としては、まずPivotal Trackerを使ってプロダクトオーナーが価値があると思った項目を、ストーリー仕立てでリストアップする。それぞれの項目にはどこで何をできるのか、何ができたらクリアなのかなどが書かれている。
[ここよりペアプロ実演。左側にテストコード、右側に実装コードを配置して実行]
導入したらシナリオテストの失敗率が下がったり、手戻りが減ったなどのメリットがあった。
※懇親会で聞いたところ、ペアプロは基本毎日フルで行っているそうです。たまにメンバーの休みやリモート等でペアプロができない場合は、デザインを当てるだけのような軽いissueをどんどん消化していくらしいです。あとペアプロメンバーは日交代だとか。
■懇親会
インスタ映えする光景でした。写真を貼っておきます。飯テロです。
■宣伝
このイベントと親和性の高いイベントを3/15(金)に実施します。エンジニア、デザイナーが普段どのようなことを考えて実装 / 生活しているのかを理解し合えるようなテーマになっています。ぜひお知り合いをお誘いの上、お越しください。デザイナーLT枠も絶賛募集中ですよ！！！
この記事が参加している募集
共感した、他の人にも知ってもらいたい等々思ったら、ぜひTwitterなどでシェアしてください。