はじめまして。
Ameba事業本部ソーシャルゲームディビジョンでデザイナーをしております大森です。
前職では、女性向けソーシャルアプリ制作会社でアートディレクション・UIデザインをしており、2011年6月に中途入社しました。
現在、携帯向けソーシャルゲーム｢ブーシュカ｣のデザインを担当しています。
今回は、このサイトをスーマートフォン対応した際の、UIデザインについて考慮した点と制作過程についてお話したいと思います。
スマートフォン対応するにあたり
最初に、｢ブーシュカ｣を簡単に説明させてもらうと、2009年9月リリースされた携帯向けソーシャルサービスで、手乗りサイズのブタのペットを育成するというゲームです。
フィーチャーフォン用のゲームとしてスタートしましたが、増え続けるスマートフォンユーザーにも楽しんでもらうべく、｢ブーシュカ｣も昨年よりスマートフォン対応を進め、昨年12月にAndroid版を、今年の1月にiPhone版をリリースしました。
2年もの間サービスを提供してきたこともあり、コンテンツや導線も増えてきていたため、これを機に一度ページ全体の情報の精査と整理を行いました。
次に、整理した情報を基に、スマートフォンならではの表現や操作方法について調査し、ブーシュカではどのような見せ方が良いのかチームで会議を重ね、会議で出されたアイデアが実装可能かどうかをディベロッパーに相談しつつ、大枠の方向性を決めた上でUIデザインに取り掛かりました。
求められたデザイン
先ほどお話したようにフィーチャーフォン用のゲームとしてすでに運用しているサービスですので、スマートフォンへ機種変更されるユーザーがストレスなく操作できる事が必要とされました。また、市場調査での遊び慣れた画面構成を望むと言う結果を踏まえて大幅な改修はせずスマートフォンならではの画面遷移を生かすデザインが求められました。
フィーチャーフォンでは情報量が多いと非常に縦長になるか、ページを分けて表示させる必要があるのですが、スマートフォンは、画面が大きい場合が多く、また、JavaScriptを使用できるため、見せ方やUIのデザインの自由度が高いと言う利点があります。
デザイン作業
スマートフォン向けにUIデザインを制作する上で特に気を使ったのが、
【１】スマートフォンとしてのデザイン
【２】ブーシュカらしいデザイン
【３】こだわりデザイン
の3点になります。
【１】スマートフォンとしてのデザイン
フィーチャーフォンのUIデザインは数多く制作してきましたがスマートフォンは初めての経験でした。
フィーチャーフォンと大きく異なる点は操作がタッチパネルのために、指先で直接触って操作する点です。テンキーがないことにより当たり前のように出来ていた、ボタンを押し続けての一連のゲーム操作や、ショートカットキーを利用してのフォーカスの移動はできなくなります。
そこで出てくる問題として、
①指先で操作する際、自分の手で画面の一部が隠れる
②指先は大きいため、リンクやボタンのサイズが小さいと、押しにくかったり押し間違いが生じる
③ショートカットキーで素早く移動や操作ができない
それらを回避するために、
①指先で操作する際、自分の手で画面の一部が隠れる
―目視しやすい画面構成にする―
■操作をする上で重要なボタンを手で隠れないように配置
■ポップアップでメニューを表示
■視認性を高めるため用途別のわかりやすいイラストを制作
②指先は大きいため、リンクやボタンのサイズが小さいと、押しにくかったり押し間違いが生じる
―ボタンのサイズ感と距離感を調整する―
■テキストリンクはなるべく使用せず隣接しない配列にする
■ボタンを大きく押しやすいデザインにしボタン同士の間隔を開ける
③ショートカットキーで素早く移動や操作ができない
―ナビゲーションは集約する―
■情報をスクロールでの切替えを使用し表示
■画面遷移をさせないためにタブを使用
【２】ブーシュカらしいデザイン
スマートフォンでは、押しやすくボタンだと分かりやすいデザインにすることが重要なポイントとなってくるので、女性ユーザーが多い｢ブーシュカ｣の世界観を表現するためにはどのようなボタンが最適なのか摸索しました。
ボタンの処理として、グラデーションやエンボスを多用したデザインを見かけることも多いのですが効果は使わず、サイト独自のやわらかい印象を表現するためシンプルにし、やわらかい印象を出すためと、大きなボタンでもすっきりとした印象になるように角丸を使用する事に決めました。
しかしシンプルであっても"押しやすいビジュアル"も同時に必要とされます、とはいえ高解像度のスマートフォンでは美しい画像を求められますが、フィーチャーフォンと通信速度が変わらないため画像の使用はなるべく控えなければなりません。
そこで、基本的なボタンの形状やドロップシャドウの表現など、可能な限りスタイルシートでボタンを表現し、画像の使用はボタンの内容を簡潔に伝えるためにイラストを使用する場合や光沢感を表現する場合にとどめるようにしました。
イラストを最小限に抑えた分、ブーシュカのかわいいきせかえアイテムなどは、よりキレイに見えるように画像も高解像度のものに作り直しています。
画像サイズは大きくはなりますが、軽量化やHTTPリクエストの削減などの最適化を行なっています。詳しくは原の記事をご覧ください。
http://ameblo.jp/ca-1pixel/entry-11132080213.html
【３】こだわりデザイン
ブーシュカらしいデザインに通ずるのですがこだわったデザインをまとめました。
■アイコン
フィーチャーフォンで使用されている絵文字で主要な物を、スマートフォン用にブーシュカらしいアイコンを制作
■ローディング画面(iPhone)
ローディング中のストレスの軽減と癒されて欲しいとの思いからローディング画像をブーシュカを用い制作
■スムーススクロール
フッター付近のページの上部へ戻るためのアンカーリンクのところですが、よくあるような「ページ上部へ戻る」といったラベルのついたボタンではなく、ブーシュカのイラストを用いた遊び心を取り入れたデザインを制作
ブーシュカに遊びにきて、ぜひこだわりをタッチしてみたください！
【まだまだ進化中！】
♪無料で遊べる携帯ペットゲーム♪
■スマートフォンの登録はこちらから
上のQRコードを読み取るか、
http://s.boo.ameba.jp/smartphone/loginTop.do
に直接アクセスしてください。
スマートフォン版では、以下の機種に対応しております。
・Flashに対応したAndroid端末（Android2.2以上）・iPhone 4、4S（iOS4以上）・iPhone 3GS（iOS5以上）
■フィーチャーフォンの登録はこちらから
上のQRコードを読み取るか、
http://boo.ameba.jp/pc/landing.do
にアクセスしてください。
最後まで読んで頂き、ありがとうございました。