【Android】テキスト選択色の問題修正で心がけたこと

AndroidアプリのAIチャット画面でテキスト選択が見づらかった問題を、Material Design 3のColor Rolesの原則に従って解決した事例を紹介します。

「選択色を変える」という表面的な対処ではなく、「カードの背景色を正しいコンテナーカラーに変える」という根本的な修正を行いました。

デザインシステムの意図を理解した適切な修正の重要性について解説します。

Shibuya.apk #54での発表資料

Transcript

1. テキスト選択色の問題修正で心がけたこと トニオ テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 1
2. 登壇者情報 トニオ（@tonionagauzzi） サイボウズ所属 Androidエンジニア 趣味はブログ テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 2
3. 発表の概要 AIのチャット画面において、テキスト選択状態が見づらい問題に対応したこと 最小限の対応に留めず、配色の見直しを行ったこと 対象者 AndroidアプリのUIを書いている人 （とくにデザイナーの指示どおりにUIを書いている人） テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 3
4. kintone 検索AI https://jp.cybozu.help/k/ja/ai/mobile_ai/android_overview/mobileapp_search_android.html https://jp.cybozu.help/k/ja/update/main/2025-10.html テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 4
5. 問題 チャット画面のふきだしカードでテキストを選択しても、選択状態が分かりづらい テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 5
6. 問題の原因 背景色が primary （青） テキスト選択色: デフォルトの primary （青） AdaptiveRoundedCard( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.primary // 背景色 ) ) { SelectionContainer { MarkdownText( text = message.text, color = MaterialTheme.colorScheme.onPrimary // テキスト色 ) } } 同じ色のため選択状態が見えない テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 6
7. 最初の解決アプローチ テキスト選択色を onPrimary に変える val customTextSelectionColors = TextSelectionColors( handleColor = MaterialTheme.colorScheme.onPrimary, // テキスト選択つまみの色 backgroundColor = MaterialTheme.colorScheme.onPrimary.copy(alpha = 0.5f), // テキスト選択領域の色 ) CompositionLocalProvider( LocalTextSelectionColors provides customTextSelectionColors ) { // AdaptiveRoundedCard の実装 … } この対応はよくない テキスト選択には primary を使うのが Material Design の一般的なパターン テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 7
8. 根本的な解決アプローチ Material Design 3のColor Rolesによると、 https://m3.material.io/styles/color/roles カード、シート、ダイアログなどのコンポーネントにはコンテナーカラーを使用 したがって、カードの背景（ primary ）の方を別の色に変えるべき カードの背景には primaryContainer や secondaryContainer を使う テキスト選択色は primary がデフォルトで適切 テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 8
9. 検討した4つの案 案 背景色 テキスト色 選択色 評価 primary onPrimary primary onPrimary 最初の解決アプロー チ。問題は解消する が、Material Design 3 の思想に反する secondaryContainer secondaryContainer onSecondaryContainer primary 問題は解消するが、 テキストの読みやす さが低下 primaryContainer primaryContainer onPrimaryContainer primary 問題は解消するが、 選択色の視認性が低 下 surfaceContainerHighest surfaceContainerHighest onSurface primary 問題が解消し、背景 からの距離が近い場 合の色なので最も見 やすい テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 9
10. 比較表を作成し、全員意見一致で④に決定 テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 10
11. 最終的な実装 AdaptiveRoundedCard( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceContainerHighest // カード色にはコンテナカラーを指定 ) ) { SelectionContainer { MarkdownText( text = message.text, color = MaterialTheme.colorScheme.onSurface // テキスト色にはサーフェスを指定 ) } } テキスト選択色はMaterial Design 3のデフォルト（ primary ）のまま 当初検討していた TextSelectionColors の設定は不要 テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 11
12. 大事なポイント カードやダイアログには適切なコンテナーカラーを割り当てよう！ primary はアクション、重要な要素向け カード背景には適さない surfaceContainer はカード、ダイアログ、シート向け surfaceContainerLowest や surfaceContainerHighest は、 背景からの距離（elevation）に応じて使い分け テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 12
13. 伝えたいこと デザインの修正時はデザインシステムの意図を理解し、既存の実装に囚われない修正 をしよう 今回はMaterial Design 3のColor Rolesを確認 テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 13
14. まとめ 問題: テキスト選択状態が見えない 原因: 背景色と選択色が同じ primary 解決案: Material Design 3のガイドラインに従い、 surfaceContainerHighest を使用 学び: 「選択色が見えない」という問題なので、つい選択色を直しがちだが、 デザインの原則を確認し、適切な修正をすることが重要 テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 14
15. ご清聴ありがとうございました！ テキスト選択色の問題修正で心がけたこと Shibuya.apk #54 15