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
790
見えないユーザの声はログに埋もれている! ~ログから具体的なユーザの体験を数値化した事例紹介~
navitimejapan
PRO
6
3k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
1.6k
フツーのIT女子が、 Engineering Managerになるまで
navitimejapan
PRO
3
370
不確実性に打ち勝つ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
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
200
Wasmの気になる最新情報
askua
0
180
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
290
OCIjp_Oracle AI World_Recap
shinpy
1
160
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
840
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
250
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
400
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
280
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
130
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Code Reviewing Like a Champion
maltzj
526
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Faster Mobile Websites
deanohume
310
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Fireside Chat
paigeccino
40
3.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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 ご静聴ありがとうございました!