Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
Search
NAVITIME JAPAN
PRO
August 26, 2024
Technology
1
240
安全で使いやすいCarPlayアプリの 魅せ方:HIGと実例から学ぶ
2024/08/22-24に開催された「iOSDC Japan 2024」で発表した資料です
https://iosdc.jp/2024/
NAVITIME JAPAN
PRO
August 26, 2024
Tweet
Share
More Decks by NAVITIME JAPAN
See All by NAVITIME JAPAN
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
23
15k
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
3
750
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
3k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.6k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
360
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
navitimejapan
PRO
4
3.6k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
navitimejapan
PRO
4
1.3k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
navitimejapan
PRO
7
5.7k
こうしてふりかえりは終わってしまった / A Demise of a retrospective
navitimejapan
PRO
47
31k
Other Decks in Technology
See All in Technology
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
10k
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
170
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
130
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
340
GopherCon Tour 概略
logica0419
2
160
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.1k
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
210
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
870
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
250
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
0
410
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing Experiences People Love
moore
142
24k
Git: the NoSQL Database
bkeepers
PRO
431
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Balancing Empowerment & Direction
lara
4
670
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Transcript
IOSDC JAPAN 2024 #IOSDC #B @MARUNOMI_ TRACK B 17:30 安全で使いやすいCarPlayアプリの
魅せ方:HIGと実例から学ぶ
自己紹介 MARU iOS / Android(最近) X:@marunomi_
CarPlayで 押さえたいポイント紹介します!
CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.
シンプル... 🤔
目次 HIGで見るCarPlay 1. CarPlayでのレイアウト 2. 具体例 3. 分かったこと 4.
Human Interface Guidelines(HIG) Appleのプラットフォームにおいて 優れた体験を設計するためのガイドと ベストプラクティス 引用:https://developer.apple.com/jp/design/human-interface-guidelines 2. HIGで見るCarPlay
2. HIGで見るCarPlay 2-1. 操作制限 2-2. 視覚要素 (デザイン) 2-3. エラーの表示 2-4.
車による制限
2-1. 操作について 画面に集中させない 最小限で素早く完了できるタスク iPhoneで入力する状況は避ける
レイアウト ユーザーに有益な情報を、運 転席から見やすくする 不要な情報や装飾を避ける 同じような機能を持つ要素の 見た目を揃える 2-2. 視覚要素(デザイン)
色 色を付けて、インタラクティブであることを表現 操作可能な要素と、そうでないものは同じ色にしない ダークモード・ライトモードの両方で見栄え良くする 2-2. 視覚要素(デザイン)
2-3. エラーの表示 エラーの表示はCarPlayする どうしても必要な場合のみ、ユーザーに 知らせる iPhoneで解決させる操作をさせない
2-4. 車種による制限 リストの項目や地点数の制限 リストは車種により12個まで 地図上のピン表示は12個まで 📍限られた数の中で、 ユーザーに関連性のある情報を表示
テンプレートがある中で どのようにHIGが使えるだろうか... 🤔
4. 具体例 4-1. 一貫した見た目にする 4-2. リストの内容は重要度を考慮する 4-3. ダークモード・ライトモードで見栄えを良くする
4-1. 一貫した見た目にする 似たような操作には同じ色を使う タップ不可の要素には色を使わない など、 、 でも、各ボタンの色が水色で固定されている、 、 、 🤔
4-1. 一貫した見た目にする 同じ優先度のアクションに対しては同じボタンを使う HIGのCarPlayより
4-2. リストの内容は重要度を考慮する ユーザーが選択するときに重要度の高い情報に絞る! 選択させやすくするため
4-2. リストの内容は重要度を考慮する CPListTemplate 車種によってはリストの項目数が12個 CPPointOfInterestTemplate 地点ピンが12個まで リストなど、表示できる数に制限がある
CPSessionConfigurationのlimitedUserInterfaces 0 →制限なし 1→キーボードの制限あり 2→リストの表示数に制限あり 制限の確認方法 4-2. リストの内容は重要度を考慮する
何も考慮していないとき 修正前 見切れる住所 評価や金額が長い 4-2. リストの内容は重要度を考慮する
行きたい場所を選びやすく情報を並び替える 修正後 評価や値段は簡略 どのくらいの時間で 行けるか, 分表示 4-2. リストの内容は重要度を考慮する
4-3. ダーク・ライトモードで見栄えを良くする 車内のどんな照明でも 鮮明に表示したい
4-3. ダーク・ライトモードで見栄えを良くする Appleのシステムカラーを参考に ダーク用の色を用意 https://developer.apple.com/jp/design/human-interface-guidelines/dark-mode
4. 分かったこと テンプレートによるデザインの制限が厳しい CarPlayでアプリの特色を出すだけの色を使いにくい その中でも、ユーザーが直感的に選択しやすい表示に する工夫が大切
CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.
1 ご静聴ありがとうございました!