Droid Kaigi2023に参加してきたよ🤖

こんにちは！freeeのプロダクトデザイナーのyucchan, tomominです。

DroidKaigiとはAndroid技術情報の共有とコミュニケーションを目的としたカンファレンスで、今年は9/14〜9/16開催されました。

DroidKaigi 2023

受付で撮影したデザイナー二人の写真

様々な企業がブースを出していて、参加者は自由に回ることができます！技術寄りのイベントですが、Android開発の雰囲気や空気感を体感しにいく目的でデザイナー2人でday2に参加してきました！

このブログでは、

・DroidKaigiの会場レポート

・私たちが参加したセッションについて

・デザイナーとして参加してみての感想

についてゆる〜く書いていきます〜

会場レポート

3箇所の大型ステージと企業のブースがたくさん並んでいて、居るだけでワクワクするようなお祭り空間でした！

freeeのブースでは、会計と請求書アプリの紹介、アクセシビリティ対応のアンケート、弊社デザイナーのsonakoさんがツバメネイルをサービスするコンテンツなどを提供していました💅

freeeのブース

freeeのアプリを体験できるモバイル端末がブースに置かれている

ブースに置かれたアクセシビリティのアンケート用紙

アクセシビリティのアンケート、noが結構多いですね…

このアンケートをきっかけに来場者の方のアクセシビリティについての相談に乗ったり、freeeではどんな取り組みをしているのか紹介したり、有意義な会話が色々生まれていました。

sonako-sanのネイルブース

ネイル、私たちも指一本ずつつけてもらいました！

ネイルをしたfreee社員の手

DroidKaigiのネイルとfreeeのつばめネイルを両方つけているfreee社員もいました。大小カラフルなつばめネイルシールがかわいい！かなり良い素材のシールを用意したみたいです、流石の質感…！

LINE、メルカリ、楽天、Sansan、ZOZOなどなど他の企業のブースもそれぞれ工夫があって面白かったです！全てのブースでAndroid端末でアプリを触れるようになっていたり、間違ったコードを探すクイズやコーディングチャレンジなど、技術者カンファレンスらしい取り組みが印象的でした。

LINEブースはグッズがかわいい！

LINEさんのブース

コードのクイズが書かれた用紙 — 間違っていると思うコードを付箋で訂正していくクイズ

LINEさんのブースでもらえるステッカー可愛くてパシャリ

LINEさんのブースでもらえる開発者向けのステッカー

ZOZOさんのブースでは、freeeのエンジニアがコーディングクイズにチャレンジ中でした

クイズが掲載されているボード

freeeのエンジニアがクイズに挑戦している図

参加したセッションについてのまとめ

『Jetpack Composeを活用した強力なUI表現の実装実例』

内容サマリ
- Androidでは「Jetpack Compose」というUIを実現するための新しいフレームワークがあり、旧仕組みの「Android View」ではできなかったことができるようになっている
- Jetpack Composeを使うと少ないコード量でアニメーションを含む様々なUI表現ができる。セッションでは実際にどんなUI表現ができるのかと実装事例について紹介していた
- できることの例
  - オブジェクトの角度の調整やスケールの調整ができる。写真を任意の形に切り抜いたり、文字の間にアイコンを挟んだり複雑なグラデを反映するなど高度なデザイン作成も可能
  - スムーズなアニメーションも作れる
  - （セッションでは事例とともに紹介されていたのですが、アーカイブがまだ出ていなくて実際に紹介されてたアニメーションを紹介できないのが残念）
freeeだと
- freee請求書アプリでも新しい取り組みとしてこの仕組みをフルで使っている
- Jetpack Composeの概要とか作り方を一定理解しておくと、デザインの幅が広がるしエンジニアと円滑なコミュニケーションとれそう
  - アニメーションをデザイナー側で作って渡すだけじゃなく、実際に一緒に作ってみることもできそう

『Material 3 やめました』

内容サマリ
- Material3とは
  - oogleのデザインシステム、2021年発表
  - 一番の特徴はデザイントークン(デザインの値を保持する変数)
    - カラーとかタイポグラフィをハードコードせず名前をつけて定義し、プラットフォーム全体で使える
    - プラットフォームに寄らずiOSやwebでも使えるのでデザインシステム全体で整合性を維持できる
  - カラースキーム
    - 5つのキーカラーがあり一つの色からtonal paletteを作れる
    - 全部で29個のカラーロールがある
- Material3はデザインシステムがある会社にはつらい
- 徹底的に辛かったのが色
  - tonal palletから色を当てる必要があるので、ブランドカラーを指定してパレットを作っても、パレットにある色はブランドとは微妙に別の色になってしまう。自動で作ってるから
  - 実装上は任意の色を指定できるが、全部で29個ある色それぞれに手動で調整する必要がある
  - ブランドカラーではなくm3の色をそのまま使って、足りない色を追加するという方法もあるが、追加色部分はダイナミックカラーで色が変わらない。＝ダイナミックカラー対応が結局難しい。
  - ダークモード対応も中途半端になる。isLightというプロパティがm2まであったが、m3ではなくなった
freeeだと
- freeeも同様の理由でMaterial3は利用していないので、どの企業も悩んでいるんだな…ということが分かりました…

『ビジネス向けアプリを開発するときに知っておくべきAndroid Enterpriseの世界』

内容サマリ
- Android Enterpriseとは、Androidプラットフォームのビジネス利用を支えるために、Googleが取り組んでいる仕組み
- ビジネス向けアプリの開発者がAndroid Enterpriseに対して可能なアプローチについての紹介をしていた
  - 社内で検証端末としてAndroid端末を利用する場合に、管理者が設定しておきたい項目をコーディングして設定できる
    - 例えば、Google Chromeアプリにブックマークをあらかじめ設定しておくとか
  - 社内で従業員の私用のAndroid端末をBYODする場合に、管理者が作った仕事用プロファイルをインストールしてもらうことで制御が可能になる
freeeだと
- 自分たちデザイナーが何かを設定できるわけではないですが、社内での検証端末やBYODとして利用するときの知識として知っておくと良さそう

デザイナーとして参加してみて

よかった

Androidで使われている技術とその概要を知れたこと。普段の業務にすぐに活きないかもしれないが、前提知識として頭に入ってることで選択肢を増やしたり、コミュニケーションがスムーズに進む場面があったら良いなと思う
各ブースに自由に触れる端末が置いてあって、他社サービスのアプリを体験することができた。課金制のサービスも触れるので貴重な機会。普段使っているサービスでもこんな機能あったんだ！こんなUIで表現してるんだ！を実際に触って知ることができた
特にデザインアニメーションを作る機能についてはこんな関数があってこんなことができるよ、の概要を知れたので今後デザインするときに意識したい
- アニメーションはデザイナーが使って渡すというイメージを持っていたけど、コード上でもこんなスムーズなアニメーションが作れるという発見があった
- 実装でできることを知っておくとデザイン作成に役立ちそう。こんなのできるのかな？も少ないコード数でいける可能性がある

大変だった

コードベースで説明する場合が多いので詳細の理解が難しい
- 技術者向けカンファレンスなので当たり前ではあるw
- セッションの概要はなんとなく分かるが、紹介された以外の活用方法や、その方法を使うとこれまでと比べてなにがよいのか？などが分からない場面も多かった
- こんな技術あるんだな、こんなことできるんだな〜をふんわり理解して、今後の開発でエンジニアとのコミュニケーションに活かせるとよさそう
- チームのエンジニアも参加してるので分からなかったところは色々質問して理解深めようと思います