読者です 読者をやめる 読者になる 読者になる

TANSANFABLOG

TANSANのブログです。

ボードゲームのグラフィックデザインが果たすべき3つ役割とその効果的な利用法について 後編

この記事は、Board Game Design Advent Calendar 2014 の16日目の記事の後編として書かれました。前編はコチラ→http://tansan.hatenablog.jp/entries/2014/12/16

 

f:id:tansanfabrik:20141216203836p:plain

 

皆様、こんにちは、TANSANFABRIKのあさとです。

 

前回のあらすじ

オッス!みんな。これはボードゲームのグラフィックを利用して、目的を達成させるためのアプローチについて色々と考えてみる記事だ!

前編ではルールデザイナーが設定したゴーストルール(ルールに記載されないがルールを構成している要素)に気を配っておかないといけない。もしルールデザイナーとグラフィックデザイナーの目指す方向が違うと、思ってたんとなんか違うゲームになってしまう!ルールの内容は一緒なのに!

がしかし、それは良かったり悪かったりと時と場合による。良い方に転がったらそのままそっちに転がっていくのも悪くない!けどそれをある程度コントロール出来るのがいいに決っている!運命は自分で切り開くのだ!

 

 

4章、プレイアビリティを向上させる役割について

さて、それでは具体的な話になる前に、3章で起きたゴーストルールの変化をふせぐにはどうすればいいか、やることは簡単です。

ルールデザイナーの用意したゲームを注意深く遊んでみることです。もしかして、ここはゴーストなのか…と思ったらルールデザイナーに聞くのです。ここはゴーストルールですよね?と。
もしくは、言われたままに作るというのも有りですね。

 

さて、コミュニケーションを取るなどして、ゴーストルールの存在を確認できたとします。ルールデザイナーが無意識にゴーストルールを作っている場合もあります。

そして、そのゴーストルールがテストプレイ用に反映されている場合もあるでしょうし、ルールデザイナーの意図が上手に反映できていない場合もあるでしょう。

そこをなんとかする、これがグラフィックデザインの醍醐味ですね。

 

この章はゴーストルールに触れる前に、プレイアビリティという言葉を通して、普遍的なプレイアビリティ(遊びやすさ)についてと、ルールを再現する際のプレイアビリティ(再現しやすさ)についてを具体例を交えつつ考察して行きたいと思います。

 

物理、心理、擬態を使用したプレイアビリティについて

まず、ルールデザイナーの書いたルールテキストに記載されている情報を分かりやすく伝えるためのグラフィックデザインについてです。

ゴーストルールのアプローチに心血を注ぐばかりにそもそもルールテキストに書いてあり、誰しもに明白なルールの再現をなおざりにしてしまっていては意味がありません。

普遍的なプレイアビリティ(遊びやすさ)について具体例をだしつつ進めましょう。

ここでは3つのプレイアビリティを向上させる効果をみてみましょう。

  • 物理
  • 心理
  • 擬態

 

ひとまず、とある別々の意味を持ったAというカードとBというカードが登場しました。

f:id:tansanfabrik:20141216213020p:plain

シンプルですね。

ですが、一体なんなのかわかりません。

ルールテキストにはこのカードが何なのか書いてると思いますが、ルールテキストを確認するまではなんだか分からないカードよりも、ルールテキストを確認する前になんだか分かるカードのほうがプレイアビリティは良いと言えますね。

 

 

 

 ではこのようにしてみましょう。

f:id:tansanfabrik:20141218191942p:plain

これはカードの裏面なのかな…?と思った方もいると思います。

その通りです。

 

ここでのアプローチは2つあります。

裏面に見えるように)目的

よくある裏面っぽい連続パターンを真似てみる)アプローチ

このアプローチは擬態の効果を使用しています。

同じ目的を持ったものに似せるだけなので手軽に実行できるアプローチだと思います。

 

 

もう一つは

文字の注目度を薄める)目的

文字をパターンとして並べひとつの文字の注目度を減らす)アプローチ

カードは両面あるうちの注目度の高いほうの面を裏面と呼ぶことが一般的かと思います。

ですので、注目度を下げるようなアプローチをすれば裏面と認識してもらいやすくなるでしょう。

 

このアプローチでは

AやBという文字がポツンとあり目立ちすぎている、何かしら意味を持ったカードではないか?と考えてしまわないようにしています。

人は要素からなる一連のリズム感のある情報をひとつのパターンとして認識する傾向が強いです。

 

これは心理の効果を利用したアプローチになります。

なにかしらの人間の心理を利用するので簡単ではないですが、ボードゲームにおいては最も多用するべきでしょう。

 

Aを並べることによってAという文字そのものへの注目度は下がるでしょう。

また、Aの文字に対する注目度を下げる為に、文字として機能する場合の正位置ではない斜め位置にするというアプローチもしています。

さて、アプローチとして擬態を使用したつもりでしたが、実は擬態先であるところのよくある裏面もどうやら注目度をさげるアプローチを利用しているのではないかと気がつくひとは気がつきます。

このように何かの真似するという行為は、すでに効果的なアプローチを簡単に取り入れることが出来て良いですね。

 

パクることの有効性に関しては17日の記事パクってゲームを作る方法と実践 - ペンとサイコロ -pen and dice- BLOGにルールデザインの形で紹介されています。(16日の記事が17日の記事を引用するのはおかしな話ですが…)

 

さて、注目度を下げるアプローチが有効であるとわかりました。

まだまだ裏面感を感じない人もいると思いますので、さらにアプローチをつかって注目度を下げていきましょう。

まだ現在のものだと、背景と文字の色の差が激しいので文字が目立って見えますね。

そこで色の差を減らします。

f:id:tansanfabrik:20141218200926p:plain

文字の注目度を薄める)目的

背景と文字の色の差を減らして注目度を減らす)アプローチ

 

ぐっと裏面感がましたかと思います。

 

 

うーんまだまだ目立ってる!

いっそこうしましょう。

f:id:tansanfabrik:20141218201108p:plain

裏面感がましたでしょうか?

今度は文字の注目度が下がりすぎて、文字がそもそも何か意味を持っているのかすらわからなくなってしまいました。

薄すぎてブランクカードのようにも見えます。

文字の注目度を薄める)目的

背景と文字の色の差を減らして注目度を減らす)アプローチ

なのですが、そもそも本来AとBと文字によって区別されていたカードのはずですが

いつの間にか文字情報が減りすぎてそれぞれの区別が難しくなってしまいました。 

AとBはわかるようにする)目的

が抜け落ちています。

これでは困ります。

 

 ということは、いますべきグラフィックデザインでは

裏なのか表なのかを分かりやすくするアプローチと同時に

AとBは区別出来るようなアプローチをしれなけばいけないのです。

文字の注目度を薄める)しかしAとBはわかるようにする目的

2つの目的が、お互いにジレンマっぽい!

なので、とりあえず、ひとつもどりましょう。command+zです。

f:id:tansanfabrik:20141218200926p:plain

さて、2つの目的を同時に解決するためにはどうすべきでしょうか?

任天堂の宮本さんは言いました。アイデアとは複数の問題を一気に解決するものであると。いいアイデアが必要ですね。

 

 

そこでいいことを考えました。

AやBの前にもっと目立つものを配置して相対的にAとBの存在感薄めるのはどうでしょう。

f:id:tansanfabrik:20141218202802p:plain

文字の注目度を薄めるしかしAとBはわかるようにする目的

文字より目立つものを前において相対的に文字の注目度を減らす)アプローチ

 

 

前編に出てきたハリネズミくんの再登場です。

ただ、こうなるとハリネズミくんが目立ちすぎているために、ハリネズミくんが意味ありげに見え過ぎますね。(名前が分からないから気になるかもしれません)

 

そこで、ボードゲーム中に存在する普遍的なものを利用するという解決法がよいでしょう。(ハリネズミくんがボードゲーム中では普遍的なのであれば問題ないですケド)

 

 

ボードゲーム中に存在する普遍的なものとは何でしょう。

簡単なのはロゴです。ロゴを配置しましょう。

f:id:tansanfabrik:20141218204152p:plain

みなさんはこのゲームのタイトルが「FUNNY GAMES」であることを知らないためにこれでも目立っている気がするのはしかたありません。

このゲームに含まれるものはすべて「FUNNY GAMES」であるはずなので、「FUNNY GAMES」とは何か?と疑問に持つことは少ないと言えます。

 

ですがここでも注意が必要です。

ボードゲーム複数の人と遊ぶので、その中にはなんとなく一緒に遊んでいるけど、ゲームのタイトル知らないよ……という人がいる場合も少ないくないです。

なので、そんな人にも、あ、このFUNNY GAMES」ってゲームのタイトルかな…と思っていただけるようにロゴはロゴっぽいと思わせるような見た目であることが重要だと言えます。(ロゴの話はまた今度…)

 

 

 

 

ロゴが乗るといっきに裏面っぽくなりますね。

それもそのはず、カードの裏面の擬態として一般的でオーソドックスな手法がロゴを乗せるというアプローチだと思います。幅広い人が裏面だと思っていただけるでしょう。

FUNNY GAMES」ではロゴが無い状態のほうが好きでしたけどね…)

 

さて、これで、ほどほどな裏面が出来たので完成としましょうか。

f:id:tansanfabrik:20141218204152p:plain

 

いえ、待ってください。

 

 

 

実はこのFUNNY GAMESAとBのカードは別々の使い道があるので、混ぜて使うことはありません。

そして、AもBもそれぞれ何枚か用意されていたのです。

f:id:tansanfabrik:20141218211604p:plain

 

親切な人が別々のカードと気が付かずに混ぜてしまったら、もしくは箱のなかで混ざってしまっていたら……どうでしょう。

 

f:id:tansanfabrik:20141218211928p:plain

困りますね。

 

 

カードの区別を促すグラフィックデザイン

 

ゲームが始まる前に、カードを分ける必要がある場合はその手間を減らす工夫が必要です。それがプレイアビリティ(遊びやすさ)につながります。

まだ、注意しなければいけないことがあったとは!

 

考えなければいけないことが多いですね。

混ざることへの対策としては2つの目的でアプローチが出来るかもしれません。

  • 誰かが意図的に混ぜようと思わないようにする。
  • たとえ混ざってしまっても、分けるのが簡単

 

まず、親切な人が間違って混ぜてしまわないようにしましょう。

このような時にもっとも効果的な手段は物理的制限を利用することです 。

 デザインの分野ではアフォーダンスと呼んだりもしますね。

たとえばAとBの形がお互いに混ざりにくい形をしていれば良いでしょう。

 

カードの次元を変えてみる

f:id:tansanfabrik:20141218213947p:plain

 Aのカードの厚みがほどんど無視できるものと考え、2次元に近いとすれば、Bのカードをより3次元的にすることで強力な混ざり防止機能を持ちます。

次元の隔たりが大変に大きいことは、皆様も心当たりがあるかもしれません。

ただそんなことを言っても、3次元のBのカードは混ぜるのは面倒です(カードとすら言えないでしょう)

 

カードのサイズを変える

ボードゲームで効果的なのがサイズや平面的な形状を変更するアプローチです。

f:id:tansanfabrik:20141218221909p:plain

混ぜやすさと分けやすさを考えるとこのようにサイズや平面的な形状を変更するのが最も望ましいと考えられます。

上のカードを混ぜようとはおそらく思わないでしょう。

このアプローチは制作コスト、カードによって載せられる情報量の違い、スリーブなどのボードゲームサプライの不足など、デメリットも多くなかなか実行は難しいでしょう。

そんな場合、見かけ上の形状を変化させる、単に縦で使うか横で使うか分けることでも、プレイアビリティがよくなります。

 

グラフィックデザインにより違いを生む

先ほどまでの区別はコンポーネントデザインの範疇となります。

今回はグラフィックデザインの果たすべき役割ですので、グラフィックデザインを利用する方法を考えましょう。

グラフィックデザインを効果的に使うことで普遍的なプレイアビリティ(遊びやすさ)についてと、ルールを再現する際のプレイアビリティ(再現しやすさ)を同時に果たすことが可能です。

 

 

まず最初に、2つのカードの差を大きくする方法を考えましょう。

f:id:tansanfabrik:20141218204152p:plain

ロゴを固定させた上で要素を追加せずに

変更できる部分がいくつかありますね。

 

だいたい4つほど

  • 文字の色
  • 背景の色
  • 文字の傾き具合
  • 文字の個数

 

上2つが色の変更

下2つがパターンの変更です。

 

 

裏面モノクロで作ってコストを下げる予定だったこのFUNNY GAMESですが、皆様のプレイアビリティを高めて、少しでも快適に遊んでもらう為に、無い袖を振りつつ裏面もカラーにするとしましょう。

 

 

 

 

ためしに色とパターンそれぞれ1つだけ変更したものを用意してみました。

 

文字色を変更する

f:id:tansanfabrik:20141218224642p:plain

 

 

文字の傾き具合を変更する

f:id:tansanfabrik:20141218224627p:plain

 

なにか、気が付きますね。

どちらもそれぞれの要素を1つしか変更してないのにもかかわらず、変化の差は大きく違うと。

それぞれ変化の差に開きがあります。

 

文字の色 > 文字の傾き具合

 

他のパターンも含めて4種類すべてを見てみましょう。

 

文字の個数を変更する
f:id:tansanfabrik:20141218230531p:plain
背景の色を変更する

f:id:tansanfabrik:20141218231048p:plain

文字色を変更する

f:id:tansanfabrik:20141218224642p:plain

文字の傾き具合を変更する

f:id:tansanfabrik:20141218224627p:plain

 

要素を1つしか変更してないのにもかかわらず、変化の差は大きく違いますね。

 

ちなみにですが、文字色を変更したものカードは背景も若干色が違うんじゃないか…

f:id:tansanfabrik:20141218224642p:plain

 

 

と思ったりする人もいると思うのですが、これを見て下さい。

f:id:tansanfabrik:20141218231402p:plain

 

まぁ、この手の色の錯覚はインターネットにはゴロゴロ転がっているので、驚くようなことではないですね。

 

 

ということで、それぞれの変化の差を並べるとこうなるでしょう。

 

背景>文字色>個数>傾き

f:id:tansanfabrik:20141218231048p:plainf:id:tansanfabrik:20141218224642p:plainf:id:tansanfabrik:20141218230531p:plainf:id:tansanfabrik:20141218224627p:plain

 

それぞれの差が何故開くのかについてはここでは語らないとして(ゲシュタルト心理学などを参考にするのが良いかもしれません)

 

実際に変化させてみてその差を見るのがお手軽です。

 

さて、この章の最初に戻るような、大きな共通点が場を支配していることを見過ごしてはいけません。

それは文字ひとつの注目度を減らすためにおこなった最初のグラフィックアプローチです。

 

 

文字の注目度を薄める)目的

文字をパターンとして並べひとつの文字の注目度を減らす)アプローチ

 

いま、僕達のいる世界は文字の注目度が減った世界だったのです。

 

 

さてこれを踏まえて文字の個数を変更して、文字の注目度を高めたものを見てみましょう

f:id:tansanfabrik:20141218231513p:plain

見かけ上は文字の個数を変更するしかしていないにもかかわらず、カードの差はかなり大きく見えると思います。

 

 

上の状態は要するにこう言うことだったのです。

f:id:tansanfabrik:20141218234411p:plain

ここに登場したのが文字を並べるというお釈迦様。

文字を並べるというお釈迦様の手のひらで背景や個数を比べていたということに気が付かなければ行けません。

 


グラフィックデザインの根本ルールを司る様々なお釈迦様がいるのが目をつぶると見えてくるでしょう。

すると、京都の三十三間堂のように沢山並んでいるような状態となります。(三十三間堂に並んでいるのは釈迦如来ではなく、千手菩薩ですが…)

f:id:tansanfabrik:20141218235027p:plain

 

 

先ほどのはこのような状況です。

f:id:tansanfabrik:20141218234411p:plainf:id:tansanfabrik:20141219003821p:plain

 

このようにグラフィックデザインの根本ルールを司るお釈迦様のことを

この記事中では「如来ルール」と呼びましょう。この記事だけの特別な言葉です。

108回唱えましょう。以後出てきませんので。

 

 

 さて、文字を並べない場合

 

BよりもAのほうが意味があるように見えます。

それは最初に考察した通りですね。

もしかするとこんなカードがあるように感じるのが自然でしょう。

f:id:tansanfabrik:20141219002735p:plain

これはAという文字の注目度が高くなったために、アルファベットの性質そのものが高まり他のアルファベットのパターンもあるかも知れないと思うのが自然だからです。

 

 

 

たとえばこれらカードがこのようなルールにもとづいて構成された裏面であれば自然だと思いませんか?

f:id:tansanfabrik:20141219003053p:plain

A、B、Cとそれぞれラウンドがあり、その時に使用するカードが

A、Bを並べたカードであると。

 

仮に単体Aを強いA、パターンのAを弱いAをします。

するとAという意味での結びつきでは

強いA>弱いA

となり、強いAに付随する弱いAという構造が作り出せると思います。

 

 

このように要素の性質を利用することでルールを分かりやすくすることが可能なのではないでしょうか。

 

また、弱いAのほうが強く見える、という方もいると思います。

その場合は簡単に弱いAをを弱くすれば良いでしょう。

再びこのアプローチです。

文字の注目度を薄める)目的

背景と文字の色の差を減らして注目度を減らす)アプローチ

 

f:id:tansanfabrik:20141219010227p:plain

先ほどよりも、強いAへの弱いAの従属性が高まったのではないでしょうか。

このようにすることで、ルールブックに記載されるべき情報を先にコンポーネントに反映させておくことで、よりプレイアビリティの高いゲームが作れるはずです。

 

 

 

 

 

 

 

 

 

 

 

(あっさー) 

 

 

©TANSANFABRIK