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

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

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

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

maru

Other Decks in Technology

Featured

Transcript

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

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