こんにちは。ピグエデンデザイナーの永吉です。
今回はピグエデンのパズルイラストについてご紹介したいと思います。
お庭作りを楽しむパズルゲーム『ピグエデン』
ピグエデンはパズルをクリアしてデコアイテを集め、自分だけのお庭をつくって楽しむスマホゲームです。
開発体制
ピグエデンは最初からピグライフモチーフが決定していて、素材を全て1から作る企画ではなかったためスピード重視の開発でスタートしました。
開発デザイナーは3人体制で、イラストとUIを分けて担当。自分はメインでイラストを担当しています。
デザインの方向性・ピグの既視感からの脱却
ピグエデンの様々なアイテムやアバターなどは、一部を除いて基本的にピグライフと同じものになっています。素材があるとは言ったものの、パズルに関しては皆無。全てイチから作っていかなければいけません。
そこでまずはゲームのメインであるパズル画面から、デザインの方向性決めに着手をしました。ピグライフのアイテムを使うということががっつりと自分の頭にあったので、初期の案ではパズルピースやパズル背景のほとんどをピグテイストで作っていました。(このとき「世界観を合わせよう」と変に思い込んでしまってます。)
開発初期イラストあれこれ
初期ピースイラスト
ピースのモチーフや背景をどんなものにするか探りながら検証した一部。
ほとんどピグテイストになっている。
出来上がったラフ案をチームで見ていた時に、「少し全体がもっさりしている」「ちょっと古く感じるよね」というのがちらほらと課題として出てきました。
これについて話し合った結果、運用開始から丸9年という長期運用サービスのクリエイティブルールに縛られて作ってしまった【デザインの既視感】という結論に。変わらない良さはありつつ、新しいものとして出すからこそ今までのクリエイティブの縛りから脱却しなくては!と「ピグ」でありながらも「新鮮さ」をもつ表現に変えるチャレンジをすることになりました。
ピグイラストの進化
そんな課題があり、パズルに関してはイラストを変えることになったのですが、今度はそれをどう進化させればいいかで悩みました。進化と一言でいっても、あまりに表現を変えすぎると他のアバターやお庭などといったパズル以外の部分で、全体のテイストがちぐはぐになってしまいます。
いろんな資料を見たり競合アプリを触れながら他のデザイナーとも相談して、ピグのテイストを残しつつ今よりも少しだけリッチで大人っぽい表現を目指すことに。
大人っぽくがキーワード。初期デザインと、修正後の比較
細かい検証と調整を重ね下のように進化。
beforeは縁取った線やフォルムが全体的に太く丸みを帯びていて、おもちゃのようなデフォルメ表現になっています。少し子供っぽい可愛さになっているこの表現がピグテイストになります。
afterは線が細く、全体的なシルエットや印象も少しシャープになり、色もグラデーションを丁寧に使ってライティングや立体感の表現がより綺麗になっています。単にリアリティを追求したものではなく、モチーフがデフォルメされbeforeのような可愛らしいさを残しています。そこから細部を作り込むことで見た目がよりリッチになり「大人っぽい」デザインへ進化したというわけです。
見やすさと分かりやすさが最重要
パズルゲームで一番大事なのは、(ゲーム性は除いて)パズルピースの見やすさと分かりやすさの2点になります。これは見づらかったり分かりにくかったりすると、パズルのゲームにすんなり入っていけずやめてしまう要因になりかねないからです。
ですので方向性が決まりイラストがだいたい揃ってきた段階で、見やすさに注意しながらさらに細かく調整していきます。パズルにはメインでマッチさせる6色のピース以外にも、障害物であったりミッション対象物など多くの色や形で狭い盤面を埋め尽くします。
そのため全てのピースが様々な形で干渉しあい、ピース単体の視認性を良くも悪くも変化させてしまいます。
これをおおよそ起こりうるパターンで配置をしながら検証。
ピース同士の重なりや配置による見づらさの解消
配置の一例
Aの盤面とBの盤面ではピース背面にある緑の草タイルに違いがあります。Aの方は黒い盤面の色味を結構黒目に。Bの方は盤面の全体に緑のタイルが敷き詰められていて、その下からさらにもう一つ大きなピースが見えています。
どちらにしても、かなりごちゃついていて色も認識しづらいところがあったり、何がどういう役割のものかわからなくなってしまっています。
この2つの盤面以外にも色々とサンプルの配置状態を作って見比べながら、ひとつひとつカラーやデザインなどを変更して調整していきました。(地味だが大事な作業・・コツコツと・・
背景イラストの変化による見づらさの解消
次にぶつかる問題は、30ステージ進むごとに変化するパズル画面の背景です。
(1~30は黄緑ベースの平原、31~60は青ベースの森など)
これもまた異常に気を使うところでもあり、調整を難しくもしてくれたなぁという感じでした。ギミックの変更や追加などでピースのデザイン変更があると、改めてそれぞれに合わせてチェックしながら調整するというループ。。
そんな感じで微調整と実機のテストプレイ検証を繰り返し重ねて・・・
ようやく完成。(長かった・・
パズルアプリの中ではそれほどピースの種類は多くない方なのですが、それでもこれだけの検証と微調整をリリース直前まで行っていました。この結果パズルピースへの見辛さなどはかなり解消されたと思っています。(今の所プレイ中の見やすさなどに不満の声は聞かないので・・)
これからもギミックと共に新しいピースは追加されていく予定です。いかに見やすくユーザーがスムーズにゲームプレイできるかを考えながら、今後もパズルイラスト制作をしていこうと思っています。
自由度の高さがユーザーにはストレスに。お庭作りを楽しめるようこだわった家具の初期配置
お庭のデザインについて
お庭のもようがえに関することも少しだけご紹介させてください。
ピグエデンではプランターから、パズルをクリアするごとに家具をもらえます。手に入れた家具をもようがえ機能で好きに配置して、自分だけの庭作りを楽しむことがもう一つの大きなゲーム要素になっています。
このもようがえが実はかなり自由度が高く、苦手な人や初めての人にとっては「まず何をどう置いたらいいかわからない」という初動のハードルの高さが課題にありました。
そこで、少しでもそのハードルを緩和できるよう機能追加以外での解決策として、お庭家具の初期配置にこだわりました。
ポイントは3点。
1. 短い時間でも楽しめる 1回のもようがえでの操作時間を短くし負担を減らす。かつそれなりの見栄えになることで、何度も意欲的に遊んでもらえるようにする。 2. ちょうどいい荒廃感 ゲーム開始のストーリーとの関連性と、何もないしょぼい庭が、ゲームを進めるとだんだんとお庭らしくなっていく快感を与える。 3. お庭作りのガイドになっている 全くお庭の完成形のイメージがないユーザーが、もようがえ序盤であきらめて離脱してしまわないよう「なんとなくこの辺にこういうのものを置けばいいのかな」と誘導。徐々にお庭のイメージが出来上がっていき、楽しく遊ぶことができるようにする。
この3点を家具の初期配置で成立させるという目標で、検証に取りかかりました。
まずは手書きでラフを作成
ちょっと分かりづらいですが、この時からすでに、道や草で四角いエリアを作っています。こうして広い庭をいくつかのエリアに分割してあげることで、段階的にお庭を作り上げていく指針になるのではと考えました。
方向性を決め、実際のテスト環境で家具を配置しながら検証
庭の配置と合わせて、初期付与の家具の数や種類も検討しています。この検証ではポイントであげた、しょぼさとガイドの役割の両立で特に悩みました。
(Aのように家具アイテムを使いすぎると、初めから完成しすぎているし、Dのようにほとんど使わないようにするとガイドとして全く機能しない。)
Cをベースに調整し、初期庭の完成
一見した感じでは、ほとんどが雑草や普通の木などのみで作られていてしょぼめに。
ですが、空いているスペースに花や家具を少しずつ置いていくだけで、お庭としての見た目が簡単に良くなります。
ー以下配置例ー
B-3の[ざきみやのお庭]の完成形は、色々とテクニックを駆使しているのでかなりすごいレベル。本人曰く「本気だしすぎた」だそうです。
この初期配置のみで、課題に挙げたもようがえのハードルを100%解決できたと思っていません。ですが、初めてお庭作りをするユーザーにとっては、少しだけ遊びやすくなったかなと思っています。
ピグエデンは、改善するべきところがまだたくさんありますが、ゲームがもっと楽しめるよう日々調整と開発を行っています。チーム一丸となって箱庭パズルの筆頭アプリとなれるよう、更に良いものにしていきますのでぜひ一度遊んでいただければと思います。