Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

安全で使いやすいCarPlayアプリの 魅せ方：HIGと実例から学ぶ

Avatar for NAVITIME JAPAN NAVITIME JAPAN PRO
August 26, 2024
Technology
310
1

安全で使いやすいCarPlayアプリの 魅せ方：HIGと実例から学ぶ

2024/08/22-24に開催された「iOSDC Japan 2024」で発表した資料です
https://iosdc.jp/2024/

Avatar for NAVITIME JAPAN

NAVITIME JAPAN PRO

August 26, 2024

More Decks by NAVITIME JAPAN

See All by NAVITIME JAPAN
株式会社ナビタイムジャパン　会社紹介資料2026
Avatar for NAVITIME JAPAN navitimejapan
PRO
1
4.3k
つよつよリーダーが 抜けたらどうする？ 〜ナビタイムのAgile⽀援組織の変遷〜
Avatar for NAVITIME JAPAN navitimejapan
PRO
23
16k
実践ジオフェンス 効率的に開発するために
Avatar for NAVITIME JAPAN navitimejapan
PRO
3
1.2k
見えないユーザの声はログに埋もれている！ ～ログから具体的なユーザの体験を数値化した事例紹介～
Avatar for NAVITIME JAPAN navitimejapan
PRO
6
3.5k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
Avatar for NAVITIME JAPAN navitimejapan
PRO
2
2k
フツーのIT女子が、 Engineering Managerになるまで
Avatar for NAVITIME JAPAN navitimejapan
PRO
3
500
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
Avatar for NAVITIME JAPAN navitimejapan
PRO
4
4.1k
アジャイルを小さいままで 組織に広める 二周目 / Agile Transformation in NAVITIME JAPAN iteration 2
Avatar for NAVITIME JAPAN navitimejapan
PRO
4
1.6k
変更障害率0%よりも「継続的な学習と実験」を価値とする 〜障害を「起こってはならないもの」としていた組織がDirtの実施に至るまで〜 / DevOps Transformation in NAVITIME JAPAN
Avatar for NAVITIME JAPAN navitimejapan
PRO
8
6.3k

Other Decks in Technology

See All in Technology
大阪オフィスに Unitree Go2 がやってきたので Physical AI やってみた
Avatar for dafujii dafujii
0
280
営業オントロジーの作り方と、エージェントからの辿り方 ── ナレッジワークの現場から
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
250
あなたの知らないAmazon VPC Route Server／Amazon VPC Route Server you don't know about
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
220
『GOエコノミー 』(相乗りサービス) におけるスペック駆動開発
Avatar for GO Inc. dev mot_techtalk
1
290
SREでアラート疲れを 解決しよう！
Avatar for KairiM kairim0
1
130
AI Made Us Faster at Solving the Wrong Problems
Avatar for Marcelo Ancelmo marceloancelmo
0
160
生成AIで高い生産性を求められて、 悩み、乗り越えた話
Avatar for GO Inc. dev mot_techtalk
2
120
Incremental HTTP
Avatar for kazuho kazuho
5
2k
オンラインゲームのシステム全体像 - コロプラ 2026年度 新卒研修
Avatar for COLOPL Inc. colopl
0
300
VS Code × GitHub Copilot での Fabric 開発
Avatar for Ryoma Nagata ryomaru0825
1
270
OpenSharing について熱く語る 〜AI アセットの共有について〜
Avatar for camay kameitomohiro
0
190
ログラスのマルチプロダクトを 支える認証基盤 〜テナントごとに異なる統制とどう向き合うか〜
Avatar for Daiki Murayama dada4386
3
370

Featured

See All Featured
It's Worth the Effort
Avatar for 3n 3n
188
29k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
860
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
590
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
350
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
3
4.3k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
450

Transcript

  1. IOSDC JAPAN 2024 #IOSDC #B @MARUNOMI_ TRACK B 17:30 安全で使いやすいCarPlayアプリの

    魅せ方：HIGと実例から学ぶ

  2. 自己紹介 MARU iOS / Android(最近) X：@marunomi_

  3. CarPlayで 押さえたいポイント紹介します！

  4. CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.

    シンプル... 🤔

  5. 目次 HIGで見るCarPlay 1. CarPlayでのレイアウト 2. 具体例 3. 分かったこと 4.

  6. Human Interface　 Guidelines（HIG） Appleのプラットフォームにおいて 優れた体験を設計するためのガイドと ベストプラクティス 引用：https://developer.apple.com/jp/design/human-interface-guidelines 2. HIGで見るCarPlay

  7. 2. HIGで見るCarPlay 2-1. 操作制限 2-2. 視覚要素 (デザイン) 2-3. エラーの表示 2-4.

    車による制限

  8. 2-1. 操作について 画面に集中させない 最小限で素早く完了できるタスク iPhoneで入力する状況は避ける

  9. レイアウト ユーザーに有益な情報を、運 転席から見やすくする 不要な情報や装飾を避ける 同じような機能を持つ要素の 見た目を揃える 2-2. 視覚要素（デザイン）

  10. 色 色を付けて、インタラクティブであることを表現 操作可能な要素と、そうでないものは同じ色にしない ダークモード・ライトモードの両方で見栄え良くする 2-2. 視覚要素（デザイン）

  11. 2-3. エラーの表示 エラーの表示はCarPlayする どうしても必要な場合のみ、ユーザーに 知らせる iPhoneで解決させる操作をさせない

  12. 2-4. 車種による制限 リストの項目や地点数の制限 リストは車種により12個まで 地図上のピン表示は12個まで 📍限られた数の中で、 ユーザーに関連性のある情報を表示

  13. テンプレートがある中で どのようにHIGが使えるだろうか... 🤔

  14. 4. 具体例 4-1. 一貫した見た目にする 4-2. リストの内容は重要度を考慮する 4-3. ダークモード・ライトモードで見栄えを良くする

  15. 4-1. 一貫した見た目にする 似たような操作には同じ色を使う タップ不可の要素には色を使わない など、 、 でも、各ボタンの色が水色で固定されている、 、 、 🤔

  16. 4-1. 一貫した見た目にする 同じ優先度のアクションに対しては同じボタンを使う HIGのCarPlayより

  17. 4-2. リストの内容は重要度を考慮する ユーザーが選択するときに重要度の高い情報に絞る！ 選択させやすくするため

  18. 4-2. リストの内容は重要度を考慮する CPListTemplate 車種によってはリストの項目数が12個 CPPointOfInterestTemplate 地点ピンが12個まで リストなど、表示できる数に制限がある

  19. CPSessionConfigurationのlimitedUserInterfaces 0 →制限なし 1→キーボードの制限あり 2→リストの表示数に制限あり 制限の確認方法 4-2. リストの内容は重要度を考慮する

  20. 何も考慮していないとき 修正前 見切れる住所 評価や金額が長い 4-2. リストの内容は重要度を考慮する

  21. 行きたい場所を選びやすく情報を並び替える 修正後 評価や値段は簡略 どのくらいの時間で 行けるか, 分表示 4-2. リストの内容は重要度を考慮する

  22. 4-3. ダーク・ライトモードで見栄えを良くする 車内のどんな照明でも 鮮明に表示したい

  23. 4-3. ダーク・ライトモードで見栄えを良くする Appleのシステムカラーを参考に ダーク用の色を用意 https://developer.apple.com/jp/design/human-interface-guidelines/dark-mode

  24. 4. 分かったこと テンプレートによるデザインの制限が厳しい CarPlayでアプリの特色を出すだけの色を使いにくい その中でも、ユーザーが直感的に選択しやすい表示に する工夫が大切

  25. CarPlayで 押さえたいポイント リストの内容は情報の優先度を考慮する 1. ダークモード用の色を設定して、車内ではっきり 見やすくする 2. ユーザーの判断が楽になるような、文章や色使い にする 3.

  26. 1 ご静聴ありがとうございました！