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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for NAVITIME JAPAN NAVITIME JAPAN PRO
August 26, 2024
Technology
320
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
6.1k
つよつよリーダーが 抜けたらどうする？ 〜ナビタイムの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
530
不確実性に打ち勝つOKR戦略/How to manage uncertainty with OKR strategy
Avatar for NAVITIME JAPAN navitimejapan
PRO
4
4.2k
アジャイルを小さいままで 組織に広める 二周目 / 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
演劇と私とスクラム
Avatar for Tomonori Fukuta chinmo
0
160
reInvent2026stby LT00 "Change your life!"
Avatar for Shinichiro Kawano shinichirokawano
1
300
AI駆動開発における開発環境のセキュリティの考え方
Avatar for Hiroki YAMAMOTO yamahiro
2
620
クラウドエージェントの先駆け Devin。今も最先端を走る、他との違い
Avatar for kinopee kinopeee
0
400
AI秘書と毎日働くのはもう当たり前。開発以外の業務に足りない機能をどう埋める？
Avatar for みのるん minorun365
PRO
2
1.7k
フィンテック養成勉強会#68
Avatar for フィンテック養成コミュニティ finengine
0
240
国際カードブランドルール変更に伴うクレジットカード決済取引仕様変更について
Avatar for Keiichi Nomura k1style
0
240
トークン化預金DCJPYの取り組みと活用ユースケース
Avatar for フィンテック養成コミュニティ finengine
0
250
シンプルな設定ファイルで実現する AWS IAM Identity Center の ユーザー管理Terraformフレームワークを公開しました / Simplifying AWS IAM Identity Center User Management: An Open-Source Terraform Framework
Avatar for Takashi Yamaguchi yamaguchitk333
0
320
撮るだけでは終わらない。ソニーが挑むB2Bカメラソリューション開発
Avatar for ソニー株式会社 sony
0
110
Codex を使った障害対応机上演習の実際
Avatar for Kuniwak orgachem
PRO
0
360
野良MCPサーバーを排除せよ！MCPサーバーのガバナンス
Avatar for YukiOgawa yukiogawa
1
240

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
450
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
440
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
620
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
720
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
730

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