ベースデザインをフル活用した他ページへの展開
ベースづくりが終われば、UI作成のうち、80％の仕事は終わったのも同然です。
ここからはコーダーと相談し、先ほどのルールに従ってHTML上で素材を組み立てる作業に入ります。TOPページとMYページが完成した時点で、大抵のページは組めると思います。そのページにしか存在しないオリジナルのボタンやヘッダー等は、これから随時詰めていけば問題ありません。
想像できるデザイン
他ページを展開する上で、おそらく追加が必要になる“操作ボタン”のデザインについて触れたいと思います。ボタンは、ゲーム操作に関わる重要な部分です。これを押してもらえるかどうかで、継続率、課金率を大きく左右するからです。
下の図は、私がデザインしたボタンの一例です。 これらを見て、ゲームの中身を知らなくても、押すと何が起こるのか、ある程度想像できるのではないでしょうか。
ここでのポイントは、「女性が見て興味を惹くデザイン」「女性でも何となくどういうボタンか想像できるデザイン」になっているかという点です。
女性は「ムズカシそう」を嫌うため、「操作を予測させる」デザインである必要があります。例え一度見ただけでは分かりづらくても、2回目以降は覚えられる、つまり「学習させられる」デザインにはしてください。
他も見たくなるデザイン
他ページを展開する際、他に必要になってくるのは、ヘッダーとアイコン関連です。
「もっとサンシャイン牧場」では、ヘッダーをページごとに作成しました。ゲームによっては、文言だけを変えるという手早い方法もありますが、今回は女性向けゲームなので、ページ遷移するたびにイラストを楽しませたいという理由から、スピードよりもクオリティを優先しました。
下図は私が実際に作成したヘッダーの一部にすぎません。今回ヘッダーは全てゲーム内のキャラクター、陽子ちゃんと虫をメインに四コマ漫画風なイラストに仕上げました。理由は、他の絵ももっと見たいと思わせる、そして、そのページで何かできるのか女性に分かりやすいヒントを与えるためです。
ソーシャルゲームは、ユーザーがアクティブに行動してもらうことで成り立ちます。そのため、ユーザーの動きを止めてしまわないよう、下の方までスクロールさせ、ページ遷移させることが重要です。
各所において最後まで見てみたくなる工夫、次へ遷移したくなる工夫を実践してみてください。これらは、クエストアイコン、ショップアイコン等の、アイコンデザインについても言えます。
アイコンは、1ページにズラっと並べて表示するだけでもカワイさを全面に出すことができる部分ですので、下までスクロールしたくなるようなデザインを心掛けてみてください。
実際の運営やイベントで変わる！ UIは生き物
UIが全ページ完成したとしましょう。これでUIの仕事は完結したかのように思いますが、いざゲームを運営すると、新しいイベントが次々に立ち上がり、効果的でないと判断された部分には修正が入ります。 つまり、UIは生き物なのです。
イベントを走らせるたびに、そのイベントのテーマカラーを設定し、デフォルトのUIと見分けがつくような工夫も大切になってきます。ただ、やりすぎて、同じゲームのUIに見えないようなデザインは避けるべきです。
イベントUIについてもどのように展開すべきか参考画像を掲載したいのですが、ネタバレのため今回は残念ながら省きます。ぜひ、「もっとサンシャイン牧場」を実際にプレイして、ご自身の目で確認してみてください！ 何よりも制作側が楽しんで作っていることが、伝わるのではないでしょうか。
