写真1●10月4日に開催された第3回勉強会。会場は、サイバーエージェント・ベンチャーズのインキュベーションオフィス「Startup Base Camp」
写真1●10月4日に開催された第3回勉強会。会場は、サイバーエージェント・ベンチャーズのインキュベーションオフィス「Startup Base Camp」
[画像のクリックで拡大表示]

 デザイナーがコード記述の要点を学習し、Androidアプリの表現の幅を広げていく――。そんなユニークな勉強会が2012年9月以降、数度にわたって開催されている(写真1)。デザイナーの秋葉ちひろ氏が講師を務め、山本麻美氏(asamieee7)と足立昌彦氏(@adamrocker)の協力により実現した勉強会「デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips」だ。

 この勉強会は、「XMLレイアウトをエンジニア任せにしたことで、デザインが残念な結果になることがあるが、XMLを理解すれば改善できる。実際に触って知ったノウハウを共有したい」(秋葉氏)という動機付けで始まった。アプリ開発の現場では、デザイナーとエンジニアの意見が対立することがある。例えば、「エンジニアがデザイン通りに実装してくれない」、あるいは「デザイナーは、実装の手間を考えずに、無理難題を言う」といったものだ。同勉強会は、デザイナーがコード記述を理解することで両者の溝を埋める、有意義な活動と言えそうである。

 2012年10月4日に開催された第3回勉強会のテーマは「カスタムUI」。スマートフォン向けアプリで標準デザインが用意されているチェックボックスやラジオボタン、スライダーなどをアプリの種類に応じてカスタマイズしようというものである(講演資料)。

 秋葉氏によると、カスタムUIが有効なケースにはいくつかの例がある。例えば、設定が多いアプリの場合。足立氏が開発した日本語入力アプリ「Simeji」が好例だ。「Simejiは、全体に柔らかいイメージを打ち出しているので、メーカー標準の堅い設定画面は適していない」(秋葉氏)。ほかには「独自の世界観を出したいアプリ」も適しているという。

 デザイン時に気をつけることとして秋葉氏が挙げるのが、「ユーザー自身が決められることが、すぐに分かること」「自分が、今どういう状態にあるのか簡単に分かるようにすること」「カスタムUIはあくまで脇役なので、華美にしないこと」などだ。実際の画面例を示しながら、画面のボタンの配色によって分かりやすさが全く違うことなどを示した。

 勉強会後半には、音量調整つまみなどで使われる「スライダー」のカスタムUIについて解説した。秋葉氏自身の体験として、つまみが両端まで届かない“気持ち悪さ”を解決するためのアプローチを、コードを見せながら説明した。

 勉強会では、単にテクニックを解説するだけでなく、デザイナーとしての考え方も教授する。例えば、「“カスタムUIはいつ使うのか”を考えると、何か決めてもらうとき、あるいは現在のステイタスを提示したいとき。奇をてらったデザインでは意図が伝わりにくくなる」「発注側のクライアントにも、カスタムUIの意義や狙いを考えてもらう必要がある」といった具合だ。

 クライアントとのコミュニケーションについては、山本氏も重要だと語る。「クライアントのアプリの特性と、“こんなデザインにしてほしい”として挙げるイメージが一致していない場合がある。両者が噛み合っていないときには、あえて“違う”というのもデザイナーの大事な仕事だ。ダメ出しするだけでなく、代替案も同時に示すことでクライアントの理解を得られる」(山本氏)。

 勉強会のブレイクタイムには、足立氏が従来の「Linear Layout」に対する「Relative Layout」の優位性について解説した。Twitterなどのタイムラインで使われるレイアウト表現を題材として取り上げた、実践的な内容である。足立氏は、レイアウトの洗練性やパフォーマンスの点で、Relative Layoutが優れているとする。デザイナー向けに企画した勉強会だが、実際にはエンジニアも多数参加していたため、足立氏の解説を熱心にメモに取るエンジニアの姿が見られた。