More than 5 years have passed since last update.

職種の枠を超えて劇的な効率化をはかる！デザイナーさんむけAndroid のUI作成の簡単まとめ

Last updated at 2014-12-23Posted at 2014-12-18

この記事はあくまで直接いじってもらったほうがお互いの工数減るよねという部分だけ、扱えるようになるといいよね！いう観点のため、実装をデザイナーさんにまかせたいわけではありません！

ただ構造を知ってるだけでもコミュニケーションが円滑になるかと思うので一読していただけると幸いです

皆さん最終的にUIを実装した後のチェックはどうしてますか？
デザイナーさんに色々チェックしてもらうと細かいpixelのずれやフォントサイズのずれなど、細かい点ですが、アプリの完成度に大きく影響をあたえるものなので、きちんと修正したいところです。

ただ、これをお互いに

エンジニア修正
↓
デザイナー確認
↓
エンジニア修正
↓
...

とやると膨大な時間がかかってしまいます。

そこで弊社のAndroidスーパーエンジニアの方がデザイナーさんに直接xmlを触ってもらっている話に,非常に感銘を受けたので自分のプロジェクトでもやってみることにしました。

このドキュメントは、それを行うためにデザイナーさんがUIをちょっといじるために最低限の説明を書いてみました。対象としてはデザイナーさん向けになります
（内容についてはAndroidエンジニアの方々に色々ご意見をいただきました。正直自分も勉強になりました！！！)

上手くいけばお互いにコミュニケーションコストを上げることなく、劇的に効率UPでWin Winです!

前提

Android Studioを必ずつかいましょう！

すでに1.0がでてるので普通にAndroid Studioで始めると思いますが。
修正時にPreviewがきちんと反映してくれるのでUIの調整はこちらを使わない理由はありません。
また実機があれば良いですが、おしゃれなiPhoneが好きなデザイナーさんのために,Intel HAXLでのエミュレータやGenyMotionも入れるよう伝えましょう！

Androidのレイアウトについて

Androidのレイアウトはxmlで書かれたlayout fileによって表されます。

それぞれの部品はxmlのタグで表現されていて部品の種別はタグ名,マージンがどーのこーのとかはxmlの属性により表現されます。

大きく分けるとViewの部品は

テキストとかボタンとか,Viewに実際に表示される部品
それらを配置するためにレイアウトする部品

に分けられます。

HTMLで言うと

前者はinputタグ
後者はdivとか

になります。

組み方も近い感じになっていてdivとかを使ってレイアウトをくみながら、UI部品を配置していきます。

Androidだと

前者はTextView、Button
後者はLinearLayout , RelativeLayout

と言った物があります。

後ろにLayoutとかついてればレイアウト用のViewだと思ってください。

さらに話すとリスト表示するためのListViewやGrid表示するためのViewがありますが、これもある種のレイアウト用のViewです。

リソース

もう一つViewを構成する概念があって、例えばViewに配置する画像とかの指定はすべてResourceという概念を通して扱います。

リソースの概念は、画像だけではなく、文字列、marginやwidthとかのサイズの表現、色、さらにはアニメーションなどもリソースとして扱うことができ、基本的にはリソースとして扱うことにより管理がしやすくなります。

前述のレイアウトも実際にはこのリソースの一つとなります。

サイズ、色の調整してもらう時は、共通化できそうであれば layout xmlにベタで指定するのではなく、サイズ、色などもいったんリソース化してそれを指定するようにしてもらえると後々メンテがしやすいです。

Webでいうとこの辺の扱いはCSSの用な物と思ってもらえるとわかりやすいかと思います。

リソースの場所

以下の配下にUIに関するリソースがおいてあります。
必要そうなとこだけ説明しておきます。

app/src/main/res/
├── anim             # アニメーションxml
├── drawable         # drawable-xxxは各dpiごとに画像リソースを配置します。dpiごとのディレクトリにない場合は drawableを見ます。
├── drawable-hdpi　　　
├── drawable-nodpi　
├── drawable-ldpi
├── drawable-mdpi
├── drawable-xhdpi
├── drawable-xxhdpi
├── layout           # レイアウトxml置き場です
├── menu             # メニューもリソース化されてます。
├── values           # valuesには,色、サイズ、文字列、styleをまとめたstyleリソースなどなどおいてあります。
│   ├── colors.xml   # 色の指定
│   ├── dimens.xml   # マージンなどサイズに関する物
│   ├── strings.xml  # 文字列リソース
│   └── styles.xml   # スタイル設定

サイズの指定

dpi,dp,spの説明は、事前にエンジニア、デザイナー間で認識は合っていると思いますので省きますが
レイアウトはdp,テキストはspで指定します。

命名規則

Androidでは、Activityという物がひとつの画面、さらにはそれをさらに部品かしてるFragmentというもので構成されています。
それら自体の詳細は割愛しますが

activity_xxxxx
fragment_xxxxx

と名前を付けているものがページ単位であったり、ページのヘッダ、フッタなど、比較的大きめの単位のレイアウトになっていたりするでしょう。

それ以外はさらに細かい単位のUI部品になっていて、まず上記のページ単位で、ファイルを探してもらって、そこからさらに細かい部品などをチェックしてみてください。

見当たらない場合はjavaのソース側で指定されているのでエンジニア側に聞きましょう。

レイアウトの仕方

今回はレイアウトまではあまり触らないと思いますが、
基本的に

水平か垂直にViewを配置していくLinearLayout
Viewを相対的に配置できるRelativeLayout

の組み合わせでレイアウトをくんでいきます。もっとあるのですが、とりあえずこの２つ。

ListViewやGrid表示はプログラムで主に扱うので割愛。

ただし、リスト表示やグリッドの一つ、一つのViewは,上記のレイアウトでくんであり、こちらは触ってもらう事があるかと思います。

どれが対応するかはエンジニア側で教えてあげましょう。

調整の仕方

xmlのプロパティをいじると、細かいマージンとか色については調整が可能です。いじる値は直接指定されているか,xmlで共通化、さらにstyleとしてまとめられています。

AndroidStudioだとプレビューで確認できるのでざっくりそちらで調整した後,実機かGenymotionで確認してください。

layoutにテキストが入ってなかったり、画像が指定されてなかったりしますがその場合は仮でテキストを埋めてみたり、ダミー画像リソースを調整してみるなどしてみてください。

注意ですが、確認したあとはダミーの入力は元に戻しておいてください。

マージン調整

layout:marginとかをいじればokです
個別の値はxml直に直書きしてもらって、共通化してる物はdimens.xmlの値またはstyleの設定をいじってください。

色

色は背景ならbackground属性だったり,TextカラーはtextColorなどをいじってください。
これも個別の値はxml直に直書きしてもらって、共通化してる物はcolors.xmlの値またはstyleの設定をいじってください。

画像

画像は入れ替えたい場合は、各dpiサイズに書き出してもらって

drawable-hdpi　　　
drawable-mdpi
drawable-xhdpi
drawable-xxhdpi

のディレクトリに突っ込んでください。ldpiもありますが、とりあえずこれは無視してオッケーです。
各dpiごとに書き出して、例えばImageOptimとかで画像の最適化もかけてください。

解像度に依存しない物は

drawable-nodpi

に入れます。

9patch

Androidでは9patchという形式のデータを用いることで、わざわざ色々なサイズの画像を用意しなくても、角丸のボタンを作ったりすることが可能です。

これについては特に気にならないレベルであれば
1xで9patch形式の画像を書き出して

drawable

に入れてください。

実際確認してみて気になるようでしたら、通常の画像と同じように各dpiごとに画像を作成してください。

細かい作成時の注意点

xmlも画像も使っては行けない文字がありますので気をつけましょう。よくやる例として「-」を使ってしまう奴です。(_にしましょう)
今回は新規レイアウトを組んでもらったりまではしませんが、できるだけ入れ子にせずに組むとなお良いです。（動きが軽くなる)
レイアウトが深すぎると一部端末で動かなくなるので注意です。
リネームはAndroidStudioのリネーム機能を使いましょう。
画像は使い過ぎに注意（解像度毎に必要でapkの容量が大きくなる)

Appendix

Androidは部品やアニメーションまでxmlで色々な物が作れます。さらにAndroid Studioだとプレビューで見ることができます。
http://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-button
デザイナーさんに確認してもらう前に、CustomViewを私用していてExecptionが出ている場合は下記を参照して事前にちゃんとプレビューできるように調整しておきましょう!
http://tech.admax.ninja/2014/10/06/how-to-avoid-the-exception-of-preview-when-customview/

おわりに所感

Androidはこの辺のリソース化が上手くやりやすく、こういった分業が大きくやりやすいと非常に感じています。

あとはAndroid Studioが登場したことによる進化も大きく実感しています。

iOSの方がぱっと見デザイナーさんも触りやすそうですが、AndroidのHTMLに近い概念や,リソースで扱うことによるメンテナンス性は遥かにこちらの方が上手く進めやすいです。

さらにはwebフロントエンジニアの人もAndroidのレイアウトは理解しやすそうかなとも思っています。

職種の枠を超えてお互いに歩み寄り上手く連携することで、上手く効率化をはかっていきましょう！

他にも効率化を図っている事例があれば是非是非教えてください！

こちらの記事からもう少し突っ込んだ話を下記に書いています。

[そろそろアプリエンジニアへ華麗に転身を決めたいwebフロントエンジニア、両刀使いを目指すiOSエンジニア向け！Android UI開発の基本まとめその１]
(http://qiita.com/appwatcher/items/486966f4fe9d3c5e9f74)