SSブログ

デザインする時に気をつけていること [・フリップフロップエージェンツ]

スパイものの世界観をモチーフに
デザインすることになった「フリップフロップ・エージェンツ」。

キャラクターデザインを進めるのと同時期に、
タイトルロゴとUIの検討もしています。


UIというのはユーザーインターフェースの略ですが、
ひらたくいうとゲームの中で使われる、
アイコンなどのデザインや文字書体、
レイアウトのことだと思ってください。

これらがきちんと機能しないと、
ゲームのルールが理解しにくかったり、
プレイミスが多発することになります。



image3_1.jpg

初期段階で提案したタイトルロゴ案が
作者の斎藤さんに気に入ってもらえたので、
「フリップフロップ・エージェンツ」では、
ゲーム内で使われているアイコン類を
タイトルロゴに盛り込めないかと検討しています。

タイトルロゴは英語をメインに、
カタカナを小さめにレイアウトする方向で
初めから検討しています。

ただ注意したいのは、英語ロゴは文字として認識されるのではなく、
図案の一部として認識されるということです。
これについてはまた後日。


アルファベットの大文字小文字の使い方や、
アイコンを加えたバランスでいくつかバリエーションを用意しました。


ゲーム中に登場するふたつの陣営のマークは、
数字の「0」と「1」をモチーフにスパイっぽさを加えています。

「家族で遊べる」というコンセプトもあったので、
少しキッズ向けの雰囲気も残しています。





IMG_6742.jpeg

IMG_6750.jpeg

長崎と東京。
それぞれテストプレイでの反応を報告しながら、
ルールとデザインをブラシュアップ。

ゲームの内容物もいただいた意見を参考に、
少しずつ変化していきました。



image3_3.jpg

ゲームで一番重要な人物カード。
表面には、キャラクターのイラストに加え、
プレイに必要な情報が記載されています。

裏面は共通でそれぞれの陣営のロゴが大きく描かれています。

「フリップフロップ・エージェンツ」は
2つの陣営のどちらに属しているかが重要な要素なので、
強く印象づけたいところです。

UIは「目で追う順番」を考えながら、
「わかりやすさ」と「カッコよさ」を両立できるように心がけています。

プレイしやすいよう見せたい順番を意識して、
デザインで自然に演出できるとベストですね。


image3_4.jpg

要素としては、
・所属している陣営
・名前
・スパイナンバー
・性別
・特殊効果で影響を与える方向

最初期のものには、特殊効果の内容がテキストで記載されたものもありました。
性別に関しては、男性は青、女性は赤で色分けすることで解決しています。

ラフの段階でもかまわないので、カードの情報量をみるためにも、
イラストは組み込んだ方がいいですね。


image3_5.jpg

矢印をどれくらい強調するか、何度かバリエーション出しをしています。

「目で追う順番」を考える際に、
イラストと矢印のどちらを優先させるか悩ましいところです。

この頃になると、イラストに色が加わっていますね。



image3_6.jpg

特殊効果の内容はサマリーをつけるため、
カードでは確認しないということになりましたが、
英語だけでも入れてみないかという提案で調整したものです。

背景やアイコン位置など、一部のカードに差をつけて比較しています。


CARD&STAND+.jpg

最終的にはこんな感じに仕上がりました。





つづいてはサマリーとチップです。

カードの特殊効果がどう影響するか整理しやすいように、
情報を簡潔にまとめる必要があります。


image3_7.jpg

同じ情報量でも、並び方や順番で理解度は大きく変わります。

時にはわかりやすさを優先して、キャラクターの並びや、
ルール調整することもありますね。

作者である齋藤様さんと、なにが重要なのかを確認しながら、
レイアウト調整していきます。



image3_8.jpg

だいぶスッキリしてきましたね。
ところがここで大きな課題が出てきました・・・


色弱対応です。


image3_2.jpg

プレイヤーごとに色分けされたチップを使うのですが、
アプリを使ったテストでは、
チョイスしていたカラーリングでは色弱対応が難しいことがわかります。


斎藤さんから、なんとかしたいというオーダーが入りますw



image3_9.jpg

なんとかしましたw

プレイヤーはエージェントを操るスパイマスターだという設定にして、
それぞれMr.REDなどのコードネームをつけちゃおうという苦肉の策ですが、
個人的にはとても気に入っています^^

チップも表裏で絵柄を変え、アルファベットをレイアウトすることで、
色弱対応できるようになっています。

以前に制作した「幻影探偵団」での経験が活かせましたね。




ENG2+.jpg

最終的には裏面に英語対応されています。
いい感じにまとまったんじゃないでしょうか。






もうひとつプレイにかかせないのが回答用紙です。

image3_10.jpg

テストプレイの最初期から、一番改良を繰り返した部材じゃないでしょうか。

どうすればルールがわかりやすく、プレイしやすいかも重要ですが、
枠だけだとなんか寂しいですね。ワクワク感もありません。

なかなか悩ましいところです。


image3_11.jpg

メモ欄の他に、ルールの補足が加わっていますね。

ゲームが3ラウンド行うことから、それぞれのラウンドに都市名をつけて、
スパイたちが世界を飛び回っているように演出するアイデアを盛り込んだのもこの頃。


image3_12.jpg

最終版の一歩手前でしょうか。
回答用紙のサイズを含め、フレーバーを含む要素などを比較。
書き込み欄にダーゲットをイメージした地紋がレイアウトされています。
遊びやすさだけではなく、面白さが伝わってきます。

UIは見やすさだけではなく、世界観とのリンクも重要ですね。



ENG+.jpg

シンプルにみえるものでも、実は検討の積み重ねだったります^^



さて、だいぶ完成がみえてきましたね。


次回はパッケージについて書いてみようと思います。



もうすこしお付き合いくださいませ^^






つづく
nice!(0)  コメント(0) 
共通テーマ:ゲーム