2012年11月9日金曜日

デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips #aadesigns

昨晩は「デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips」というイベントを GDG Tokyo の主催ということで開催しました。 今までやってきた第一回〜第四回の総集編という形になります。

スピーカーはデザイナーの秋葉ちひろさん、スライドはこちら。



動画はこちら。

 

Android 端末を使う人も、Android アプリを作る人も増えた今、重要なのはアプリのクオリティ。クオリティの定義は色々あるけれども、重要なことの一つは間違いなくデザインや UI であると言えましょう。

Android アプリのデザインの向上の参考にして頂くためのサイトとして、Google の公式サイト "Android Design" があります。Android アプリの開発に関わる人で、まだ見たことがないという方がおられたらぜひ見てみてください。


さて、イベントの話に戻りましょう。現状はデザイナーが頑張ってこだわって作ったデザインがエンジニアに渡り、実装されて戻ってきたらデザイナーが ∑(゚Д゚)ガーン ということも。原因はデザイナー自身が Android のデザインについて理解していない場合も、エンジニアがデザインについて理解していない場合もある。デザイナーがどんな思考で、どんなところにこだわってデザインを行なっており、エンジニアにはどこをないがしろにしてほしくないのか理解してもらう必要がある。また、デザイナーも xml について少し勉強するだけで、双方の仕事の効率が非常に上がる、ということもある。そこのギャップを埋めていきたいと考え、始められたのがこのイベントです。

なぜ xml について勉強する必要があるかというと、ウェブサイトの場合は、デザイナーがビジュアルデザインと HTML と CSS を扱えるのは当たり前で、その先のシステム開発の部分をエンジニアが受け持っていました。Android アプリの場合は、デザインはデザイナー。システム開発はエンジニア。XML は。。。どっちがやるの?ということに。ここをデザイナーが覚えてしまえば、デザイナーとエンジニアがお互いに楽になれる。実際 xml を覚えて書き始めたちひろさんと今一緒に仕事をしているエンジニアの @adamrocker さんは「ちひろさんと仕事するとちょー楽」と仰っており、デザイナーのちひろさんも「自分の作った大事なデザインを思い通りに実装するところまでもっていけるので、気持よく仕事ができる」と仰っています。



また、従来だと設計とワイヤーフレームができたらデザイナーがデザインして、デザインが終わったらエンジニアが実装して、出戻り出戻りしているうちにどんどん時間がたっていくということも。


これに対して、ワイヤーフレームが決まったらお互い認識を共有し、エンジニアとデザイナーが同時進行で作業を進めていくようにワークフローを変更することで、時間も短縮でき、お互いの満足度も上がった。。。。という事例の紹介も。


ワイヤーフレームを決めて、これでいくぞ!と同意し、お互いが作業。

 

一週間後、作業の結果を見せ合う。左側がエンジニアが作った葬式UIの実装版。右側がデザイナーが作ったUI。ばっちりです!


その他、デザインを行う上でのtips and tricksがさまざま紹介されました。上が明るくて下が暗いと盛り上がって押せるように見える。中が暗くなっていてへこんでいるように見えると押せないように見える。




●Togetterまとめはこちら。



●既にたくさんの方がブログを書いているので詳細は下記へ:
安藤幸央さんのブログ
Tandeさんのブログ:Androidアプリのデザインの幅を広げるコツとTips 総集編 #aadesigns at GDG2012 に参加してきた

●せっかくなので過去の物も紹介しておきましょう。

第 1 回 "導入・9patch"

安藤幸央さんのブログTandeさんのブログ





第 2 回"より凝ったグラフィック"

安藤幸央さんのブログTandeさんのブログ





●第 3 回"全力でカスタムUI"

安藤幸央さんのブログTandeさんのブログ





●第 4 回"レイアウト編"
安藤幸央さんのブログTandeさんのブログ




 Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。