デザインできる人ってかっこいいじゃないですかー

７年前にほぼデフォルト設定で作成した Android アプリのデザインを Material Design 3 にしたら、かっこよくなれるんじゃないかという素人的な発想でデザインの変更に取り組んでみたら、まぁ時間が溶けていきました。

最初は、Google 検索と ChartGPT とか使えばさくっと終わると思って検索ワードやプロンプトを入力しまくってましたが、なんかうまく動かず、色が変わらん！？という状況でイライラモードになりました。

結局、Material Design の公式サイトを読むところから始めるのが一番良かったというおちになりますが、作業を進めていく間にブックマークした Web サイトをまとめておきます。

Web サイト集

1. Material Design の前に

そもそも Android アプリの Style や theme について知識ゼロの自分が、Material Design の公式サイトを読んだところで、チンプンカンプンになりました。知識ゼロの人は、まず基礎知識を以下の Web サイトで学ぶ必要がありそうです。

AndroidのTheme/Styleを理解する #android開発 - Qiita
https://qiita.com/ushi3_jp/items/c7f597a8cf3b35cce426

2. Material Design の色

７年前に作成したアプリの styles.xml には、colorPrimary、colorPrimaryDark、colorAccent が定義されていました。

styles.xml (抜粋)

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

当時は、この３色をテキトーに決めればいいのね！と思っていた記憶があります。

この化石知識では歯が立たなかったので、公式サイトの Color を眺めて、何となく色がたくさんあるのねっというレベルになりましょう。

Color – Material Design 3
https://m3.material.io/styles/color/system/overview

ただ、色の役割が書いてありますが、全部の種類を把握するのは厳しいです。Dynamic color とかはイマイチよくわかっていません。

3. UI コンポーネントのカスタマイズ

UI コンポーネントの style は、Primary、Secondary、Surface等を設定すれば、それっぽいかんじになりますが、ところどころ色を調整したいときがあります。

各 UI コンポーネントがどの色と対応しているのか確認するには、まず公式 Web サイトの Components ページからかなと思っています。

Components — Material Design 3
https://m3.material.io/components

Components ページを読んで style を変更しても色が変わらんぞってなったら、Material Design の GitHub ページにある Docs や実装を確認しましょう。

例として、Checkbox について知りたい場合には、Docs で、スタイルの情報や実装例を Checkbox.md で、確認しつつ、Checkbox に定義されている style.xml の実装を見ると理解が深まると思います。

material-components-android/docs/components/Checkbox.md
https://github.com/material-components/material-components-android/blob/release-1.12/docs/components/Checkbox.md

material-components-android/lib/java/com/google/android/material/checkbox/res/values
/styles.xml
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/checkbox/res/values/styles.xml

4. 公式サイトでわからなかったら

Material Design 3 の公式サイトをみてもよくわからなかったら、ここでようやく Web 検索や ChatGPT に頼るのがいいと思っています。ピンポイントで色を変更したい場所があれば、それを検索ワードやプロンプトにして調べるかんじです。

以下の Web サイトのように実装例が細かく書いてあると理解が深まりとても参考になりました。

ToolbarのDrawer（ハンバーガー）とオプションメニュー（三点リーダー）などの文字色を変更する方法について
https://knowledge.moshimore.jp/entry/android_toolbar_drawer_hamburger_option_menu_text_color/

5. 配色に迷ったら

色ってどうやって決めればいいのってなると思います。センスのない私もそうです。なんとなく決めるとダサい色になりました。

アプリデザイン参考 や Webデザイン参考 で検索すると色々出てくるので、よいデザインの感覚を得られると思います。

また、Material Theme を生成できる Web サイトがあるので、これを参考に色を組み立てていくと外さない気はしています。

Material Theme Builder
https://material-foundation.github.io/material-theme-builder/

さいごに

まだまだ、公式サイトも読み切れていないので、引き続き調査する予定です。Figma を使ってデザインする方法もあるんだな～というレベルですが、ちょっと使ってみようかなと思っています。