PR
写真1●「はてなブックマーク」用公式iPhoneアプリケーションの画面例
写真1●「はてなブックマーク」用公式iPhoneアプリケーションの画面例
[画像のクリックで拡大表示]
写真2●はてなの浅野慧氏
写真2●はてなの浅野慧氏
[画像のクリックで拡大表示]
写真3●はてなブックマークAndroidアプリの開発中に作成した、UIのペーパープロトタイプの例
写真3●はてなブックマークAndroidアプリの開発中に作成した、UIのペーパープロトタイプの例
[画像のクリックで拡大表示]

 2011年4月26日から28日にかけて、スマートフォン分野のカンファレンス「スマートフォン2011春」が開催されている。最終日の4月28日は、はてなの開発者が講演し、スマートフォン用アプリ開発のポイントを解説した。題材は、ソーシャルブックマーク「はてなブックマーク」用に開発した、公式iPhone/Androidアプリケーションだ(写真1)。

 登壇したのは、同アプリの開発を担当した、はてなの浅野慧氏(写真2)。仕様決めからユーザーインタフェース(UI)の設計、実装に至るまでの各プロセスや、iPhoneアプリとAndroidアプリ開発の違いなどを解説した。

 浅野氏が協調したのは、UI設計の重要性。「iPhone、Androidそれぞれのプラットフォームで、『iPhoneらしいUI、AndroidらしいUI』を実装することが大切」と語る。また、はてな社内では、今流行しているiPhone/AndroidアプリのUIをカタログ化して回覧できるようにし、アプリ開発に携わる社員に“染みこませる”ことをしているという。

 以下、講演で語られたUI設計についてのポイントを、ピックアップして紹介する。

大切なのは、デザイナーとエンジニアが共同で進めること

 スマートフォン用アプリの開発では、デザイナーとエンジニアの分業が難しいという。「パソコン用Webアプリだと比較的切り分けやすいが、そこが大きく違う」(浅野氏)。スマートフォン用アプリでは、デザインの要素とアプリケーションの動作が密接に絡むからだ。「見栄えを担当するデザイナーと、コードを書くエンジニアとで、垣根を設けず一緒にやる、という感じで開発すると、良い結果が出る」(浅野氏)。

 今回のはてなブックマーク用アプリの開発は、エンジニアである浅野氏と、もうひとりのデザイナーとの「一対一」による開発だった。浅野氏は「もっと大きなアプリケーションを手がける際には人数が必要。そのときにどのような体制で進めればいいか、そこがこれからの課題」と話す。

ペーパープロトタイピングを活用する

 操作感で評価が大きく決まるスマートフォン用アプリの開発では、UIに特に時間をかけ、念入りに検討する必要があるという。はてなブックマーク用アプリのUI設計時には、ペーパープロトタイピングを活用した(写真3)。ペーパープロトタイピングとは、UIを検討するための手書きのスケッチ。紙の上にボタンなどの要素を描き、ユーザビリティーを評価・検証する。

 「紙に書くだけなので、(動作まで作り込む)モックアップを作るより手軽。スマートフォンはパソコンよりも画面が小さく、書き込む要素が少なくて済むので、特に向いている。また、開発者以外の人も議論に参加して『突っ込める』ので、いいアイデアが取り込みやすくなる」(浅野氏)。

 iPhoneアプリの開発では、エンジニア以外の社員にもペーパープロトタイプを見てもらい、「紙を押してもらうなどして、使い勝手についての意見をもらった」(浅野氏)という。ペーパープロトタイピングの検証は3回ほど繰り返し、「結構時間をかけた」(浅野氏)。

iPhoneとAndroidのUIは別に設計

 UIの設計においては、iPhoneとAndroidではだいぶ異なるという。iPhoneはすでに開発者向けのパーツがそろっているが、iPhoneと比較するとAndroidはそれほどそろっていないからだ。「同じアプリを開発するとしても、AndroidのほうがiPhoneよりもUIに工数がかかる」(浅野氏)という。

 また、AndroidとiPhoneとではUIの作法が異なる。浅野氏らは、iPhone版のアプリを先に開発したが、Android版の開発に着手した際、「UIをあらためて書き起こした」(浅野氏)という。