こんにちは、ココナラでAndroidアプリを担当している中田です。

現在、ココナラAndroidアプリではアーキテクチャの見直しも含めた大規模なリファクタリングを実施しています。今回はその中で実施したレイアウトの共通化の話をしようと思います。

Androidアプリの画面レイアウトを作成する上でどのように統一感を担保するのかという話は、どのアプリでもあることだと思います。ココナラ Androidアプリでも画面レイアウトの統一感をどのように担保するかという話はデザイナーと議論しています。

まだ試行錯誤している状況ですが、現在ココナラでは res/values 配下のリソースファイルをこんなことを考えて、こんな感じで使っているよということが紹介出来たらと思います。

カラーパレット

まずカラーパレットの統一からです。ココナラAndroidアプリ内で使用するカラーは全て colors_palette.xml にまとめて定義しています。カラーパレット導入前は同一のカラーがネーミング違いで複数定義されていることが多々あり、使う時にどのカラーを使用していいのか分からなかったり、同一コンポーネントでも画面が異なると微妙にカラーが異なる等の課題がありました。

そのためカラーパレットを導入することでアプリ内で使用するカラーを限定し、画面レイアウトで使用するカラーの統一化をしています。またカラーパレットに定義されていないカラーは使ってはいけないというルールも設定しています。

<!-- =====  Basic Color  ===== -->
<color name="primary500">#8EC31F</color>
<color name="primary700">#729D18</color>
<color name="secondary500">#28A7E1</color>
<color name="secondary700">#1F85B3</color>
<color name="accent500">#E61874</color>
<color name="badge500">#F12626</color>

<!-- =====  Gray scale  ===== -->
<color name="white">#FFFFFF</color>
<color name="black">#000000</color>
<color name="grey50">#F3F3F3</color>
<color name="grey93">#EDEDED</color>
<color name="grey100">#EEEEEE</color>
<color name="grey200">#DDDDDD</color>
<color name="grey300">#CCCCCC</color>
<color name="grey400">#BBBBBB</color>
<color name="grey500">#999999</color>
<color name="grey600">#777777</color>
<color name="grey700">#555555</color>
<color name="grey800">#333333</color>
<color name="grey900">#212121</color>

<color name="white_alpha_30">#4DFFFFFF</color>
<color name="black_alpha_20">#33000000</color>
<color name="black_alpha_30">#4D000000</color>
<color name="black_alpha_40">#66000000</color>
<color name="black_alpha_70">#B3000000</color>
<color name="grey93_alpha_20">#33EDEDED</color>
<color name="grey200_alpha_50">#80DDDDDD</color>
<color name="grey400_alpha_50">#80BBBBBB</color>
<color name="grey800_alpha_75">#C0333333</color>

フォント、マージンのベースサイズ

次にフォントやマージンのベースサイズの統一についてです。どのアプリでもやっていることかと思いますが、 dimens_base.xml にまとめています。

ベースサイズはネーミングルールを設定して定義するようにしています。例えば以下のような感じです。

<!-- =====  Space  ===== -->
<dimen name="space_2dp">2dp</dimen>
<dimen name="space_4dp">4dp</dimen>
<dimen name="space_6dp">6dp</dimen>
<dimen name="space_8dp">8dp</dimen>

<!-- =====  Text  ===== -->
<dimen name="text_12sp">12sp</dimen>
<dimen name="text_14sp">14sp</dimen>
<dimen name="text_18sp">18sp</dimen>
<dimen name="text_24sp">24sp</dimen>

<!-- =====  Icon  ===== -->
<dimen name="icon_16dp">16dp</dimen>
<dimen name="icon_24dp">24dp</dimen>
<dimen name="icon_32dp">32dp</dimen>

<!-- =====  Radius  ===== -->
<dimen name="radius_2dp">2dp</dimen>
<dimen name="radius_4dp">4dp</dimen>

ネーミングに具体的なサイズを入れているのは、使用する時になんだかんだで使いやすかったからです。他にもアプリ内で使用するButtonやToolbar、リストのカード等の共通コンポーネントに関するものも定義しています。

また各機能固有でベースサイズの定義が必要な場合は、 dimens_base.xml とは別に dimens.xml にまとめるようにしています。

スタイルの統一

アプリ共通、各機能固有に関係なく、スタイルで共通化が可能なものはスタイルに定義するようにしています。アプリ共通で使用するスタイルについては、 styles_base.xml にまとめるようにしています。

例えば、 TextAppearance は以下のようにしています。

<!--===== TextAppearance =====-->
<style name="TextSubheading">
  <item name="android:textSize">@dimen/text_16sp</item>
</style>

<style name="TextBody">
  <item name="android:textSize">@dimen/text_14sp</item>
</style>

<style name="TextCaption">
  <item name="android:textSize">@dimen/text_12sp</item>
</style>

また各機能固有で使用するコンポーネントのスタイルについては、 styles_(機能名).xml にまとめるようにしています。スタイルをまとめることで、以前よりデザイナーから「この画面のここと同じにしたい」というようなリクエストに気軽に対応していけるようになったと思います。

まとめ

ここまでレイアウトの統一化に関する指針の一部を紹介してきましたが、カラーパレットやスタイルを定義することにより、画面レイアウトの作成の効率が上がったりと開発効率に対する影響もありますが、１番恩恵を得られたのはデザイナーとのコミュニケーションコストの低下やより質の高いコミュニケーションを取れるようになったことではないかと感じています。例えばスタイルに定義されていないサイズのデザインが上がってきた場合も「これは指定されたサイズがいいのか？」、「それとも近いサイズに合わせた方がいいのか」等の確認が簡単に出来るようになりました。

レイアウトの共通化に限らずココナラではこんな感じで日々改善しながらプロダクトを成長させています。まだまだ大規模なリファクタリングで実施したことがあるので、またこのブログで紹介出来たらと思います。