架空の定期ゲーデザインを組んだ話（前編）
この記事は定期ゲ・甲 Advent Calendar 2021 18日目の記事です。
17日目：立ち絵が一枚しかない人のための切り抜きアイコン作成術 - 濃厚戦艦さん
19日目：定期ゲー完全無視カレーも食っとけ - ⛩水城待紘⛩さん
また、18日目の記事はテーマが実は関連しているらしいです。
他の18日目の記事はこちら↓ あとでリンク化しときます。
定期ゲ・乙：最強の定期も構想だけならいくらでも妄想できるはずなんだ - 25氏さん
定期ゲ・丙：【保存版】カバの汗の色一覧 - ちゃうねんさん
- イントロダクション
- 架空の定期ゲーの設定
- 完成した戦闘ログサンプル
- 定期ゲーUIデザイン論考 ～戦闘ログ編～
- ゲームのUIであるということ WebのUIであるということ
- 世界設定に合わせたデザインをする
- 「ちょっとだけ外れた」レイアウトデザイン
- アイコンを取り入れる
- 結び
イントロダクション
はじめましての方ははじめまして。
一週間ぶりの方はありがとうございます。
( 'ω' )＜)です。巷の噂によるとコレでさかなと読むらしいです。
さて。この記事は架空の定期ゲーのデザインを組もうぜ！という趣旨のものらしいです。18日の記事は全部このテーマかそれっぽいものとなっている……と思うので（カバの汗……？）そちらも覗いてみてくださいね。
ところで。聡明な読者の皆様であれば何故かこの記事のタイトルに前編がついていることにお気づきでしょう。何故前編かと言うと、間に合わなかったからです。（土下座）
こいつまた未完成で記事上げてんな
何が前編かというと、作っていたものは戦闘ログとそれ以外の部分（の一部）があり、戦闘ログについては完成しているので戦闘ログの部分を公開して前半とします。後編は土日中に上げられる……はず……。
架空の定期ゲーの設定
架空の定期ゲーを作るにあたっての設定はこんな感じです。↓
かためのファンタジー寄りの設定で作ってみました。
Prologue
いつの間にか眠っていたのだろうか。柔らかな光と共に、あなたは目を覚ます。
見回すとそこはあなたの見知った世界ではなく、薄明けの光の指す白磁の塔だった。
あなたは塔から周囲の風景を見渡すが、不自然な霧に包まれ周囲を見渡すことができない。覚束ない足取りで螺旋階段を下る。
まるで世界に取り残されたかのように、広大な空間にあなたの足音だけが響く。どれだけ階段を下っただろうか。広く、白い空間に繋がる。
そこには、同じようにこの「檻」に囚われた人々がいた。
その他設定
- ファンタジー世界観のAPゲーです。
- 「檻」と呼ばれる世界に囚われた参加者たちが世界からの脱出を目指すのを主目的とします。
- 「檻」の中心には「塔」がそびえ立っており、ここが初期地点となります。
- 世界は不明な霧に覆われており、初期地点では世界の詳細は全く不明です。探索を進めていくことで世界の詳細が明かされていきます。
完成した戦闘ログサンプル
というわけでこちらが戦闘ログサンプルのURLです。
最近ソラニワにも実装された、スクロールで現在のステータスがアニメーション表示されるやつになっています。ぐりぐり動かして楽しんでみて下さい。なかなか面白い仕上がりになっているんじゃないかな……と思います。右上のやつは操作できるらしいです。
なお、なんでこんなに同じような機能が出てくるタイミングが似ているかというと実は私もニワのGMさんも同じ人と話しながらアイデアを詰めたりしたという経緯があるらしい（裏話）
なお、サンプル用のデータ作るのはフォロワーに手伝ってもらいました。ありがとうフォロワー……！
いろいろな解像度に対応したかったんですが、ちょっと工期が厳しい＆サンプルだしまあいいかということでディスプレイサイズ1920×1080推奨です。1360幅ぐらいまでならなんとかなります。あと最新のChrome/Firefox推奨。たぶんこの2つなら動くはずですがそれ以外はテストしてないのでちょっと動くかわかりません。
定期ゲーUIデザイン論考 ～戦闘ログ編～
ここからはいつもどおり理屈の世界です。
上のようなデザインが、どのような考えで作られているかについて触れていきます。
もしかしたらUIを組む上で参考になる……かも？
なお、触れていく上で上記サンプルを見ている前提で話していくのでまだ見てない方は見ていただけると嬉しいです。
さて。まず具体的な考え方に触れる前に大前提として考えておきたいことがあります。それは「優れたUIとは何か？」ということです。
これは私なりの持論ですが、ユーザーが見たいことが見やすく、やりたいことがやりやすいUIが優れたUIだと思っています。
なので、優れたUIを考えるなら、まずはユーザーがこの画面でどうしたいのか？から考え始めましょう。
例えば定期ゲーのログのデザインを考えるなら、定期ゲーのログというのは主に見るためのUIになりますから、「ユーザーはログを見る時何を見たいのか？」から考え始めるとよいでしょう。
リストアップすると以下のようになるでしょうか。
- HP、MP、状態異常等現在のステータス
- 現在のラウンド
- 現在の行動回数
- 行動順番
- 現在の行動者、現在の行動
リストアップしたら、これがユーザーにとってどれぐらい確認したいものであるかについて考えます。見たいときにチラッと見られるだけでいいのか、それとも常時目に入るぐらいの方がいいのかによって画面上への出し方は変わるはずです。
また、見せ方も考えるとよいでしょう。「現在の行動者：ギガリザードA」と出すだけが表示ではありません。例えば行動者の表示がちょっとせり出すだとか、アイコンを表示してあげるだとか、文字以外の視覚情報で示すのは有力な手です。
文字は情報を得るまでに目でその位置を見て、象形から書いてある文字を認識し、文字を読み解いて情報を得るというプロセスを必要とします。パッと全体を見たときに文字部分の情報は基本的に得られませんし、他の表現方法と比べ認識負荷も高いです。
文字以外の表現方法を考え、文字以外で表現できる方法があるのなら積極的に試してみるとよいと思います。（とはいえ文字も文字でいいところはあるので全部が全部文字を撤廃しろということではないです。あくまでガンガン試してみよう程度。）
少し暴言の域に入りますが……基本的に人間は物を読めませんし覚えられません。そこまで言わなくとも、そうするのに努力が必要です。より視覚的に表現し、見たいものをすぐ確認できるようにしてあげることで見やすいUIに一歩近づくはずです。
ゲームのUIであるということ WebのUIであるということ
ここから先はもっと持論全開になりますが、よりゲームらしくあるために、もっとこうすればいいんじゃないか？とかこういうのが参考になるんじゃないか？みたいな話をしていこうと思います。
個人的な考えとして、定期ゲーのデザインはもっとゲームらしくなっていいと思っています。
ただ、ゲームらしくといってもコンシューマーゲームのUIをそのままポンと持ってくるだけではうまくいきません。コンシューマーゲームのUIはコントローラーetcでの入力を前提とした構造になっていて、Web上で遊ぶ定期ゲームとは作りが合わないからです。
そのため、定期ゲーのUIをゲームらしくする場合、レイアウトの基本はWebのUIのままにデザインをゲームらしくという方向になるでしょう。
ではゲームらしいUIとは何かというと、それは「楽しさのあるデザイン」だと思います。ゲームを提供する以上、ゲームを通じて楽しさを味わってほしいというのが前提としてあるはずです。そのためにUIという手段も活かすと考えると分かりやすいでしょう。
以降はそのために講じられる具体的な方法について書いていこうと思います。
世界設定に合わせたデザインをする
こちらについては大なり小なりやっている定期ゲームが多い印象。
ここでは世界設定に合わせたデザインをする上で、知っていると便利かもしれない知識等を紹介します。
配色
配色が印象に与える影響は強いので、全体としてどういう雰囲気としたいのか？等を考えて色を選んでいくといいでしょう。こうして考えるときは「色相」と「トーン」で要素を分けてあげると考えやすいです。
「色相」と「トーン」にはそれぞれ持つイメージがあります。どんな世界を表現するのかに合わせてそれぞれ選んであげると世界設定に合った配色としやすいでしょう。
▼色の持つ印象について解説しているサイト
kimoto-sbd.co.jp
▼トーンの持つ印象について解説しているサイト
色の調子【トーン】を利用した色選び | カラー・リテラシー.com
例えば今回作ったデザインサンプルでは表現したい世界は「品格の漂うファンタジー世界」でした。なので高貴なイメージの「紫」、伝統的なイメージの「dpトーン」をメインカラーとし、それに近い色を印象付けるようにデザインしています。
また、色をただ1色選んでハイ終わり、ではありません。
実際のところは全体の色のバランスも同じか、それ以上に重要です。
幸いなことに、配色については理論としてある程度体系立てられています。
この分野のことを色彩調和論といい、以下のページによくまとまっています。
デザインサンプルでは先程選んだ色に対して若干黄色みを帯びた白背景をベースカラーに据えています。高貴で落ち着いた印象を出したかったので、まとまりをよくするため、紫に対してオポーネント配色となる色を選択しました。
以上を考えながら色を扱うことで、色に関してはそうミスすることはないでしょう。
あとは色のバランスを考えながらレイアウトに色を置いていくだけです。
上記サイトでも触れられていますが、一般には色のバランスが70:25:5だとキレイに見えやすいと言われています。（なお、これについては調べましたが根拠になるような論文等は見つかりませんでした。ただよく言われていることではあるので、経験則的なものなんでしょうか？）
もしデザインサンプルにもっと手を加えるのであれば、アクセントカラーをもう少し差し込んであげるとよりおしゃれなデザインになるかもしれませんね。
なお、自分で配色を考えなくとも世の中には配色サイトというものがあり、世界の人々が考えた配色のプリセットが公開されていたり、理論に基づいた配色を提案してくれたりします。その中から直感的にビビッと来たものを採用するのも手でしょう。
▼配色サイトの例
colordrop.io
モチーフの配置
定期ゲーはほぼ間違いなく世界設定があり、それに合わせてモチーフもあります。
そのモチーフをサイトのデザインに取り入れることで世界観への没入感が上げられます。
それそのものを置くだけではなくて、世界設定に合わせた要素を散りばめることでそれっぽくなるかと思います。
UIの装飾
コンシューマーゲームを見てみると、例えばファンタジーであればボタンUIの端っこなどに金色のツタみたいな装飾がよく施されています。
あのような感じで装飾を取り入れていくことで、より楽しいデザインになるかと思います。
フォント
フォントは思ったより印象に与える影響が大きいです。
世界設定をより表現する方法として、フォントを取り入れるのは一つの手でしょう。
環境ごとに入っているフォントは違うので、ロゴやメニュー部分など、共通化されるような部分におしゃれなフォントを使った画像を設定するなどが現実的な解になるでしょうか。
通信量が気になるかもしれませんが、定期ゲーでは基本的には同じユーザーが何度も同じサイトにアクセスするので、適切にキャッシュさせるようにすればさほど問題ありません。
また、もう一つの方法としてWebフォントという方法があります。日本語フォントは文字数が多く、Webフォントでの表示にはあまり向きませんがここは定期ゲー。こちらもキャッシュが働くと思います。
ここでは2つほどWebフォントサービスを紹介しようと思います。
まず1つはお馴染みGoogle Fonts。Noto Sansの可読性は非常に有用。
ここ数年の間に元は有償だったフォントもいくつかGoogle Fontsで提供されるようになっており、もし作りたい世界設定が合致するのであればコレ以上なく表現の助けになってくれるでしょう。
以下はそのうちの例の一つ、フォントワークスのロックンロール Oneです。ポップで楽しげな表現をするのに非常に合うフォントです。これが無料ってマジ……？
フォントに多少お金をかけてもいいと考えている、あるいはなんらかのAdobe製品をサブスクリプション契約しているなら、Adobe Fontsも候補に入ります。Adobe FontsはAdobe製品をサブスクリプションしている人が利用可能なフォントサービスで、なんとそこで提供されているフォントはWebフォントとしても使用可能。
企業の作った超高品質なフォントが簡単に使用できるのでおすすめです。デザインサンプルではAdobe Fontsを利用しています。具体的には以下の3つを利用しました。
なお、さくらレンタルサーバーであれば指定のWebフォントが追加料金無料で利用できるそうです。さくらレンタルサーバーを利用する場合はこれらのフォントも候補に入りうるでしょう。
「ちょっとだけ外れた」レイアウトデザイン
ファッションでよく聞くワードに「ヌケ感」というものがあります。これはほどよく着崩すことでおしゃれな印象を与えるものですが、これをレイアウトデザインでもしてみようということです。
HTMLの要素は基本的に全部タテヨコに平行な四角なので、HTMLを普通に組むとかなりタテヨコにかっちりしたデザインになります。これをあえて崩すことで、面白いデザインになるのではないでしょうか。
デザインサンプルでは上部のヘッダー部分をあえてナナメにし、また、アイコンをひし形の形状に切り抜いています。これがWebの表現としてはかなり斬新で、面白い印象に繋げられたんじゃないかなと思っています。
ここまで行かなくても、ちょっとナナメを取り入れるだけでだいぶ印象は変わります。以下はその例です。HPバーをナナメに傾けただけで垢抜けたデザインになったのではないでしょうか？
おしゃれのヌケ感が難しいのと同じように、レイアウトをあえて崩すというのはちょっと難しいものになりますが、挑戦してみるのはありかもしれません。これは個人的な印象ですが、操作するためのUIはレイアウトを崩しすぎると使いにくいですが、見た目だけのUIならガンガン崩してもけっこう崩壊しないイメージです。
このような若干崩したUIについてはやはりコンシューマーゲームが強いので、もしUIが高品質なコンシューマーゲームをプレイすることがあれば、UIをどのように崩しているのか？を気にしながらプレイしてみるのも悪くないでしょう。
他にも、ゲームUI向けの情報などを探ってみるのも手です。Web表現だけで考えていると思いつかないようなアイデアがゲームUI向け情報には転がっているイメージです。
ゲームUIで使えそうな「ボタン形状」をまとめました📝
— はなさくの｜ゲームUIデザイナー🎮 (@HanaSakuno) 2021年5月13日
名称は、勝手につけました😇
ベースの形状を決め、その後、デザインの「あしらい」を考えて、多様なバリエーションを作ることができます✨#ゲーム素材の作り方 pic.twitter.com/Cb3kUSiivO
ゲームでよく見かける「バーゲージ（棒ゲージ）」についてまとめました😆
— はなさくの｜ゲームUIデザイナー🎮 (@HanaSakuno) 2021年1月10日
ゲージ名については、
それっぽいものを勝手につけてます💦
他にもまだあるので、第2弾もありそう・・・👀#ゲーム素材の作り方 pic.twitter.com/ldW9aoMUJH
アイコンを取り入れる
前述の視覚化という面にも繋がる部分ですが、アイコンを取り入れることでより分かりやすく、そして楽しく表現ができます。
ただ定期ゲーというのはおおよそ個人や少人数サークルにより開発されており、アイコンを自作するまでのリソースは多くの場合ありません。なので、ガンガン素材を使っていくのがいいんじゃないかなと思っています。
そのため、ここでは有用な素材たちを紹介していきます。
まず1つ目はGoogle Material Icons。Webやアプリ用のアイコンになるのでゲーム向けのアイコンはありませんが、基本的なUIの要素はここでほぼ取り揃えられると思います。
もう一つオススメしたいのがRPG-Awesome。デザインサンプルの各種バフ/デバフアイコンはこちらを利用して作られています。これは逆にゲーム向けのアイコンをまとめたフォントになっており、前述のGoogle Material Iconsと合わせて定期ゲーに求められるアイコンのうち大概のものに対応できます。
これを利用するだけでもだいぶいいアイコンではありますが、ここに少し手を加えることでよりゲームらしく、より幅広く利用できます。
デザインサンプルではRPG-Awesomeのアイコンに平行四辺形の枠を加え、色を置いてあげることでバフ/デバフを表現しています（一部例外あり）。
以上のアイコンを作るのには合計1時間もかかりませんでしたが、そこそこ品質よく見えたのではないでしょうか？このように素材を利用しつつ、省力化してアイコンを生産するという手もあるのではないかな、と思います。
結び
ここまで読んでいただきありがとうございました。デザインはいろいろな要素が絡み合って出来ているのでとても奥が深い……。後編は頑張って作りますのでよろしくおねがいします……（血反吐）
それではまた。
