こんにちは、ユティです。ロケタッチを担当しています。

スマートフォンで展開するサービスの開発では、1つ大事なことがあります。それは、4インチ前後の画面にすべてを詰め込まなくてはいけないということです。これ以上、画面のサイズが大きくなると片手で持てなくなるので、この4インチ前後というサイズのトレンドはしばらく続くでしょう。アプリが複雑になればなるほど、この狭い画面に展開する UI で悩むことになり、その度に私たちはいろいろな方法でその壁を乗り越えていくことになります。

ロケタッチも、リリース以降機能がどんどんと増え、その度にアプリ内の UI、特にメニューのところをどうしようかという話になりました。今回は、そのメニュー周りのUIを中心に、近頃のロケタッチのUI事情についてご紹介したいと思います。

代表的なメニューUIと、トレンドのスライドメニュー

まず、過去のロケタッチを例に、多くのスマートフォンアプリで使われている代表的なUIをご紹介しましょう。

▼『タブ』(Tab Bar: iOS Human Interface Guidelines)

画面下部に4つないし5つの機能（コンテンツ）へのショートカットを固定で設置するもの（うち1つが「その他」として、疑似的に5つ以上となっている場合もあります）。

▼「ダッシュボード」（dashboard: Android UI Design Patterns）

6つ程度のショートカットのパネルをトップ画面に設置するもの。


他に独自 UI を採用しているアプリももちろんありますが、多くのアプリのメニューがこれらふたつの形でした。

▼スライドメニュー

そこへ昨年、Facebookをはじめとして、Path、Gmailなどのアプリで採用されだしたのが、スライドメニュー（と呼んでいるもの）でした。ヘッダーに「メニューボタン」を置き、タップすることで、横からリストメニューがスライドしてくる UI です。


このスライドメニューの利点は

• メニュー項目を増やしやすい。
• ヘッダにメニューボタンを置くだけなので、メインコンテンツの画面が広くなる。
• 技術的に新しいトレンドに乗ることができる。

というところでしょうか。

ロケタッチの「増えた項目を収めたい」という課題が、これで解決されるのではということで、ロケタッチiOS アプリ のメジャーバージョンアップ（ver3.0.0）は、スライドメニューを採用することにしました。

採用に当たって苦労した点

スライドメニューを採用するにあたって、2つほど壁がありました。

まずは技術的なこと。スライドメニューは（まだ） iOS や Android の標準的な UI ではないため、エンジニアは独自にこの機能を実装することになります。アプリはまずこの動作だけをモックとして作成するところから始めました。その後あれやこれや紆余曲折ありましたが、無事実装できました。技術的なことはまたそのうち livedoor Tech Blog で。
ちなみに今は UI 共有サイト（例：Cocoa Controls）などもあり、比較的実装しやすいのではないでしょうか。

もう1つの壁は、コンテンツとの整合性です。
スライドメニューは一見、利点ばかりのようですが、問題点もあります。アプリを開いた直後の画面（ホーム）以外に目が行きづらくなるのです。「メニューボタン」はヘッダに小さくあるだけで、「メニュー」という文字もありません。まずメニューに気づかず、奥にある機能にも気づかない。また、わかっていても、タブに比べその機能にたどり着くまでのタップ数が増えるので、単純に使われなくなる可能性もあります。つまり、いくつかのコンテンツを平行に並べる（使ってほしい）アプリにはあまり向いていないメニューだということです。幸いロケタッチはスライドメニューに比較的向いているアプリでした。

今回、ロケタッチでは上手くいきましたが、コンテンツを拡充していこうとすれば、メニュー項目が増えるのは避けられません。その中でも何を一番に見せるか、どう使ってほしいか、サービスの方向性なども踏まえて、メニューの最適な UI を採用していくことが大事になってくると思います。

メニューが全てではない

項目が多いメニューをなんとかすることも重要ですが、「より使いやすく、よりタッチしやすい」アプリにすることも実現しなければいけません。メニューだけを変えて満足し、ユーザーに使われなくなれば本末転倒です。ロケタッチアプリのコアは「タイムライン」（コンテンツ）と、「タッチ」（アクション）。最小限ですがロケタッチのコアと言えます。アップデートの際には、この2つをアプリを開いた直後の画面にまとめることにしました。


「タイムラインにタッチボタンを置く」こう書くとシンプルですが、ボタンの配置はしばらく検討しました。見た目にキレイでおさまりがいいのは「右上ボタン」でしたが、メニューボタンと同じく気づかれない、小さいため押しづらい、現状のタブメニューと場所が変わることで戸惑うなどの理由から、最終的に、大きなボタンをタブメニューのときと同じ最下部の真ん中に置くことになりました。これにより無理なく、アプリ起動→タイムライン→タッチボタン→タッチ→タイムラインという流れができました。

このデザインが奏功し、2012/2/17にリリースされたロケタッチiOSアプリv3.0.0について、iPhone からのタッチをリリース前後で比較したところ、約10%タッチが増えていました。これはひとまず成功と言えるかと思います。

Androidアプリについて

その後、Android アプリも同様にスライドメニューを採用しましたが、こちらはいくつかの理由でリリース時、ユーザーより厳しいご意見をいただきました。


画面サイズがデバイスごと可変する Android アプリでは、タッチボタンを iOS アプリと同じにできず、小さく押しづらかったこと（対応済）や、タイムラインの描画が終わるまでタッチボタンがタップできなかったこと（対応済）、タッチ完了からタイムラインへのスムーズな流れがまだできていない、また Android アプリは一度ダッシュボードのメニューをホームとして採用していたので、そこからホームをタイムラインへ変えたことへの違和感などが主な理由でした。

対応を続けている状況ですが、単純に同じメニューを使えばいいわけではないことを痛感しました。そちらはまた機会があれば、書きたいと思います。

NHN Japanでは、最適なUIを常に追い求めることのできるディレクターを募集しています。