Slide 1
Slide 1 text
IOSDC JAPAN 2024
#IOSDC #B
@MARUNOMI_ TRACK B 17:30
安全で使いやすいCarPlayアプリの
魅せ方：HIGと実例から学ぶ
Slide 2
Slide 2 text
自己紹介
MARU
iOS / Android(最近)
X：@marunomi_
Slide 3
Slide 3 text
CarPlayで
押さえたいポイント紹介します！
Slide 4
Slide 4 text
CarPlayで
押さえたいポイント
リストの内容は情報の優先度を考慮する
1.
ダークモード用の色を設定して、車内ではっきり
見やすくする
2.
ユーザーの判断が楽になるような、文章や色使い
にする
3.
シンプル...
🤔
Slide 5
Slide 5 text
目次
HIGで見るCarPlay
1.
CarPlayでのレイアウト
2.
具体例
3.
分かったこと
4.
Slide 6
Slide 6 text
Human Interface
Guidelines（HIG）
Appleのプラットフォームにおいて
優れた体験を設計するためのガイドと
ベストプラクティス
引用：https://developer.apple.com/jp/design/human-interface-guidelines
2. HIGで見るCarPlay
Slide 7
Slide 7 text
2. HIGで見るCarPlay
2-1. 操作制限
2-2. 視覚要素 (デザイン)
2-3. エラーの表示
2-4. 車による制限
Slide 8
Slide 8 text
2-1. 操作について
画面に集中させない
最小限で素早く完了できるタスク
iPhoneで入力する状況は避ける
Slide 9
Slide 9 text
レイアウト
ユーザーに有益な情報を、運
転席から見やすくする
不要な情報や装飾を避ける
同じような機能を持つ要素の
見た目を揃える
2-2. 視覚要素（デザイン）
Slide 10
Slide 10 text
色
色を付けて、インタラクティブであることを表現
操作可能な要素と、そうでないものは同じ色にしない
ダークモード・ライトモードの両方で見栄え良くする
2-2. 視覚要素（デザイン）
Slide 11
Slide 11 text
2-3. エラーの表示
エラーの表示はCarPlayする
どうしても必要な場合のみ、ユーザーに
知らせる
iPhoneで解決させる操作をさせない
Slide 12
Slide 12 text
2-4. 車種による制限
リストの項目や地点数の制限
リストは車種により12個まで
地図上のピン表示は12個まで
📍限られた数の中で、
ユーザーに関連性のある情報を表示
Slide 13
Slide 13 text
テンプレートがある中で
どのようにHIGが使えるだろうか...
🤔
Slide 14
Slide 14 text
4. 具体例
4-1. 一貫した見た目にする
4-2. リストの内容は重要度を考慮する
4-3. ダークモード・ライトモードで見栄えを良くする
Slide 15
Slide 15 text
4-1. 一貫した見た目にする
似たような操作には同じ色を使う
タップ不可の要素には色を使わない
など、
、
でも、各ボタンの色が水色で固定されている、
、
、
🤔
Slide 16
Slide 16 text
4-1. 一貫した見た目にする
同じ優先度のアクションに対しては同じボタンを使う
HIGのCarPlayより
Slide 17
Slide 17 text
4-2. リストの内容は重要度を考慮する
ユーザーが選択するときに重要度の高い情報に絞る！
選択させやすくするため
Slide 18
Slide 18 text
4-2. リストの内容は重要度を考慮する
CPListTemplate
車種によってはリストの項目数が12個
CPPointOfInterestTemplate
地点ピンが12個まで
リストなど、表示できる数に制限がある
Slide 19
Slide 19 text
CPSessionConfigurationのlimitedUserInterfaces
0 →制限なし
1→キーボードの制限あり
2→リストの表示数に制限あり
制限の確認方法
4-2. リストの内容は重要度を考慮する
Slide 20
Slide 20 text
何も考慮していないとき
修正前
見切れる住所
評価や金額が長い
4-2. リストの内容は重要度を考慮する
Slide 21
Slide 21 text
行きたい場所を選びやすく情報を並び替える
修正後
評価や値段は簡略
どのくらいの時間で
行けるか, 分表示
4-2. リストの内容は重要度を考慮する
Slide 22
Slide 22 text
4-3. ダーク・ライトモードで見栄えを良くする
車内のどんな照明でも
鮮明に表示したい
Slide 23
Slide 23 text
4-3. ダーク・ライトモードで見栄えを良くする
Appleのシステムカラーを参考に
ダーク用の色を用意
https://developer.apple.com/jp/design/human-interface-guidelines/dark-mode
Slide 24
Slide 24 text
4. 分かったこと
テンプレートによるデザインの制限が厳しい
CarPlayでアプリの特色を出すだけの色を使いにくい
その中でも、ユーザーが直感的に選択しやすい表示に
する工夫が大切
Slide 25
Slide 25 text
CarPlayで
押さえたいポイント
リストの内容は情報の優先度を考慮する
1.
ダークモード用の色を設定して、車内ではっきり
見やすくする
2.
ユーザーの判断が楽になるような、文章や色使い
にする
3.
Slide 26
Slide 26 text
1
ご静聴ありがとうございました！