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
BtoBプロダクト開発の深層
16bitidol
0
150
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
820
BirdCLEF+2025 Noir 5位解法紹介
myso
0
180
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.1k
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
850
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
470
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
880
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
320
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Language of Interfaces
destraynor
162
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Bash Introduction
62gerente
615
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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 ご静聴ありがとうございました!