デザイナーがandroidのXMLコーディングをやる利点について発表しました

先日の土曜日に、はてな主催で行われたイベントで現在のチームで行っているフローを紹介しながらデザイナーがXMLを書くと良いことについて発表してきました。
ちなみにXMLというのはAndroidのレイアウトを制御するための言語です。

なぜデザイナーがコーディングまでやるといいと思っているのか、感じていることを少し書きます。

カンプは実装と違う

カンプと実際に動くものとは全然違います。例えばタイトルと本文が動的に入るようなアプリを制作しているとします。とすると、自分が想定しないくらい長いタイトルをつける人がいれば、めちゃくちゃ短い本文を連続して書く人もいるかもしれません。どんな文章が入ってもいい感じに見せたいのですが、PhotoshopやIllustrator上だと想像がしずらいです。
また、カンプでボタンのon/offのパターンを作った場合も同様です。実際使ってみると色の変化が大げさだなとか、逆に差がなさすぎるとか、触ってみて初めてわかるところもあると思います。
だから、実際に動くものをたくさん触って、試して、修正して、また触って、っていうのを繰り返すのに時間を掛けるのが大事だと考えています。実際にユーザーに届けるものは動く状態のものであって、美しいカンプではないのだから。

コミュニケーションが大事

XMLやってみようと思い立っていきなりコード書き始められたかと言われると、そうではありません。
環境設定は全てやってもらったし、わからないところは片っ端から全て聞いて教えてもらいます。聞きやすい環境がなければ、なかなかこうはいかなかったと思います。
それから、わたしはコード書くのが好きだからエンジニアとのやり取りに画像ではなくてコードを使うことにしました。けれど全ての人たちにとってこれが一番いいとは思っていません。デザイナーでコードが好きな人そこまでいないと思うし、そのチームにとっていちばんいい方法を話し合ったり試行錯誤しながら探すのが大切だと思います。

FAQ

会場でいくつか質問されたので、覚えている範囲で書いておく。

Q, XML書くのとCSS書くのは似てる？

A, 似てると思うけど、変数をたくさん扱うのからどちらかというとSCSS(SASS)とかLESSに近い感じがします。あとHTMLの要素に直接スタイル書くのに似てる。

Q, style.xml書いてる？スタイルのまとめ方とか自分で覚えた？

A, 書いています。効率の悪い書き方をしていたとしてもコードレビューのときにエンジニアにもっと良い書き方を教えてもらえるから、それを頭に入れながら覚えています。

Q,プロトタイプツール使うのではダメなの？

A, モックに動きをつけるためにflintoを使っていたけれど、それはあくまで実装前のテストとか前提をすりあわせるために使っていました。

Q, デザイナーさんにコード覚えてもらうにはどうしたらいい？

A, これは一番難しい質問で、急に「コード書いているデザイナーも世の中にはいるから書いてくれないか」って言ってもなかなか難しいのではないかと思います。まずはデザイナーが書ける環境を完璧に整えてあげるとか、ちょっとコマンドライン教えてあげるとか、何ならエンジニアのPCの前に呼んでmarginã‚„paddingだけ設定してもらうところから始めるのがいいのではと個人的には思っています。今ではターミナルいろいろ設定してみたりしてるけど、わたしがコードとかCLI好きになったのも教えられるがまま見よう見まねでターミナル触り始めて、文字で命令して何かを制御する面白さを知ったからだと思っています。

そんなわけで初めてのプレゼンで緊張したけど、全然知らない人の前で発表できて良かったし楽しかったです。またこんなふうに話せる機会があれば積極的に参加していきたい。何か良い会があれば誘ってください。
次はもっとうまくやれるようにしたいな。

ちなみにちょっと前にandorid用の素材の書き出しについても書いたので、よければこちらも併せてお読みください。

イラレで作ったandroidアプリの素材をsketch3で書き出す - yulily100's blog