Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for NAVITIME JAPAN

NAVITIME JAPAN PRO

August 26, 2024
Tweet

More Decks by NAVITIME JAPAN

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

Other Decks in Technology

See All in Technology
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
Avatar for Eiji Hachiya hachi_eiji
1
280
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
0
130
datadog-distribution-of-opentelemetry-collector-intro
Avatar for tetsuya28 tetsuya28
0
190
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
Avatar for Shin'ya Ueoka ueokande
0
130
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
Avatar for Kenji Saito ks91
PRO
0
150
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
Avatar for Kiminori Yokoi nasuvitz
6
340
意志の力が9割。アニメから学ぶAI時代のこれから。
Avatar for Endo_Hizumi endohizumi
1
110
サイボウズフロントエンドの横断活動から考える AI時代にできること
Avatar for mugi / Hajime Mugishima mugi_uno
3
1.3k
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
Avatar for Yuki Anzai yanzm
0
160
AI時代の大規模データ活用とセキュリティ戦略
Avatar for Kengo Suzuki ken5scal
1
270
[kickflow]20250319_少人数チームでのAutify活用
Avatar for shin otouhujej
0
180
広島発！スタートアップ開発の裏側
Avatar for Sankyo Toshio tsankyo
0
130

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.6k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k

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 ご静聴ありがとうございました！