---
# System prepended metadata

title: 'Interop Tokyo セミナー: モバイルアプリデザイン最前線 聴講メモ'

---

# Interop Tokyo セミナー: モバイルアプリデザイン最前線 聴講メモ


## 登壇者

![](https://i.imgur.com/oZu26AU.jpg)

## 題目
![](https://i.imgur.com/Jwf4eeu.jpg)

## モバイルアプリのデザイントレンド
### Bottom Navigationがデファクトに

今まではAndroidは上にナビゲーション
iOSは下にナビゲーションがあるUIが主流
![](https://i.imgur.com/fAwhmBR.jpg)


Material designでも下にナビゲーションを配置するのが推奨になったらしい
**（要出典）**
![](https://i.imgur.com/StmpoH4.jpg)

### 操作

![](https://i.imgur.com/SfvA0A4.jpg)

### VRじゃなくてARが今流行ってるよね
左の例は、地図アプリと現実を結びつけたもの
（カメラで進行方向を写すと、行き先の矢印が表示されるもの）
右の例は、商品をARで確認できるもの
AppleのWWDCのmacでもあったやつ
![](https://i.imgur.com/id0KIJ8.jpg)

### ダークモード （ナイトモードではない）
Android Qのやつ
先日のWWDCでiOSもダークモード対応が発表された（撮り損ね）
![](https://i.imgur.com/h5hQ0Ls.jpg)

![](https://i.imgur.com/O3HK1zv.jpg)

ダークモードでは、前面にあるものほど明るくする。
![](https://i.imgur.com/rLzRErJ.jpg)

ただ単に背景色を変えるだけではダメだよって話
イラストなどの色・コントラストを変える必要がある（場合によるのかもしれないけど）
![](https://i.imgur.com/lcEHRyw.jpg)

黒を使う場合、#000は使うべきじゃない
真っ黒以上に濃い色を表現・利用することができないため。

細かなダークモードの内容はMaterial Designの公式サイトをチェックしよう。

画面を暗くすることで、電力の使用率を抑えることができる。

色は、グレーに寄せるようにトーンを落とさないと、目立ち過ぎてしまう。
ただ、トーンの落とし過ぎは、色弱向きにはOUT。

線は、通常のモードの場合よりも太めにしないと見えない。

AndroidのQ？かどこかでダークモードが設定されていた場合に強制でダークモード化されるという話も（聞き間違いかもしれないので**要確認**）
強制的に色が変更された場合、ダークモード対応が済んでいなかったらあまりアップデートがされないアプリと思われるかも。


### 画面が広い端末が多くなってきたよねって話
折りたたみスマホが出てきたりして、大きな画面の端末が増えつつある。
取り損ねたけど、過去にもSONYやZTEなどが2画面折りたたみ（DSみたいな）を販売してたよね。
![](https://i.imgur.com/IWi1cvE.jpg)

AndroidはOSレベルで折りたたみに対応したよね
![](https://i.imgur.com/jqkd5Mr.jpg)

### 海外に目を向けた場合に
地域によっては、回線速度・料金がよろしくないところもあるので
海外向けにアプリを展開する時には、少ないトラフィック量で済むようにする。
ジェンダーについても配慮が必要だよね。
![](https://i.imgur.com/QkTLCNp.jpg)

## デザイン開発環境について
![](https://i.imgur.com/0H1H4Ts.jpg)

Sketchをつかうのか。
XDを使うのかで以前は論争があった。
![](https://i.imgur.com/KuVlcgb.jpg)

最近はFigma。
海外では、Figma以外を使う場合はあまり反応はよろしくないらしい
（遅れている、とか話にならないと捉えられると言ってたような...細かなニュアンスは聞きそびれた）
ただ、まだ動作が不安定なところがあるとも。
![](https://i.imgur.com/rcXgMRT.jpg)

### PWA
みなさんご存知PWA
![](https://i.imgur.com/uL1Ga4V.jpg)

### Android Jetpack
UI/コンポーネントをまとめたものらしい
![](https://i.imgur.com/UUlMsL8.jpg)


### Flutter
日本では、メンテナンスがきついということで敬遠される傾向にあるらしい。
海外では、採用されていってる。（この差は開発のスタイルの違いからきているとか。）
![](https://i.imgur.com/CPblBEB.jpg)

### Swift UI
Flutter Jetpackに近いものらしい
![](https://i.imgur.com/z2aoxkO.jpg)

### デザインシステム
![](https://i.imgur.com/tQuA1ml.jpg)

![](https://i.imgur.com/EZPf9iD.jpg)

世界で初めてのデザインシステム
「ワーム」の紹介。
![](https://i.imgur.com/0Q3J7pD.jpg)
![](https://i.imgur.com/xgQUzDM.jpg)


![](https://i.imgur.com/nqkcWSA.jpg)

システムの導入は大きく4つの段階に分けられるらしい。
大体は一番下の **効果測定** から始めてしまうとのこと。
一番最初は、デザイン原則。
![](https://i.imgur.com/N7AqmMd.jpg)


## まとめ
![](https://i.imgur.com/CVl4WXk.jpg)
