特典情報

開発者コラム

第11回 エロゲデザインの現場 in ニューリン Web・UI篇【担当:上都河希】

公開日:2017/05/18


こんにちは。上都です。
今回は『エロゲデザインの現場』第3回、
Web・UI篇ということで上都担当最後のコラムをお送り致します。

UIという言葉は割りと多くの人が聞き覚えがあるのではないでしょうか。
PCにしろスマートフォンにしろ、画面に表示されている文章や画像など、
機械と我々使用者との情報のやり取りを行うための合間を指す言葉ですね。
最近はUIと共にUXという言葉もあったりしますが、詳しく知りたい方は例の如く
Google先生にお問い合わせください。詳しくわかると思います。

今回全然茶目っ気を入れられず、堅苦しい文章がかなり多くなってしまいましたので、
予めお伝えしておきます。ご覧の方はご留意の程お願い致します。ガチガチンコですみません。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.兎にも角にもまず設計
2.みんなに優しいCatSystem2
3.Webデザインの速さは伝達の速さ
4.ブランドのデザイン
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今回は以上の内容でお送り致します。





1.兎にも角にもまず設計

前々から書いている三大フレンズのうちの最後のひとつ、
WebやUIが得意なフレンズについてです。

まず、グラフィックデザインや印刷物と完全に異なるところは、
UIデザインは伝える相手にアクションを起こしてもらい、フィードバックを返すのが前提。
というのが圧倒的な違いだと思います。

第2回でお話した印刷物やロゴなどに関しては、受け取る相手とデザインが
相互にコミュニケーションを取るものではありませんが、
Webやゲームを構築するデザインは全く違って、
人と機械とのコミュニュケーションを促すためのデザインをしなければなりません。
印刷物の良さは手で触れられるところと書きましたが、
実はUIデザインの方が圧倒的にユーザーとの接触について密に考えなければいけないのです。

なので、UIにおいては画面に収まる情報をキレイ素敵に仕上げることも重要ですが、
それ以前に、どういうWebやゲームを作るかで、
どのような情報が必要でどのような機能がありどのようなフローになるか、
しっかりと情報設計を描かないと、うまく機能しないものになってしまいます。
そういう表面的には見えないところを考えて形に落とし込んでいくのも
デザイナーの大事なお仕事だったりします。



なのでゲームの画面を構築する際はまず、他社様のゲーム画面構成の調査から始まりました。
幸い、特別なことをしない限りは、美少女ゲームの基本的な機能は似たものが多いので
抜粋したゲームから欲しい機能を拾い上げながら画面の構成を行うことが出来ます。
今作は一作目のキミトユメミシの時から使用エンジンの変更もあり、
UIの調整に関してあまりリソースが裂けなかったので大きな機能の変更はないのですが、
ユーザーの方からこういう機能が欲しいという声もWebから見受けてはおりますので、
毎作見直しながら機能改善を行っていく必要があると考えております。

Webサイトの制作に関しても、まずは他社様の調査から始めます。
同業のサイトはもちろんですが、その他参考にしているところですとコンシューマゲームやアニメのサイトなど、
やはりキャラククターを大きく扱う分野のものが多いです。
また、予算が潤沢なプロジェクトですとWebサイトの力の入り具合も全然違うので、
新しい技術面の部分含め、とても参考になります。
予算面で言いますと、飲料や車、化粧品などなど、もっと市場が大きい分野の、
プロダクトを取り扱うメーカーの商品ページなんかも最新技術を得る上ではとても参考になります。


UI制作の流れについてザックリまとめると
 調査 → 設計 → 実装 → 試用 → 公開 → 検証 → 調整 → 以下無限ループ → 
が基本的な流れになるかと思いますが、
Webとゲーム画面での違いについていうと、検証・調整期間がポイントになると思います。
Webに関しては実装の後、公開した上でリアルタイムで検証をしながら調整を行っていけますが、
ゲーム画面についてはリリース後の検証は出来ますが調整は基本的に出来ません。
如何せん、Laplacianに於いては人員が多いわけではないので検証が疎かになりがちで、
ユーザーの方達に不便を強いてしまうことがあるかと思います。大変申し訳ないです。
ノウハウを溜めながら次回作でより良いものにどんどん改善していけるよう、ナレッジを蓄えていきますので、
今後共何卒、ご贔屓頂けますと幸いでございます。

……。
堅苦しい話が続いていますので、本作おまけ画面の音楽鑑賞画面をちょい見せしたいと思います。
音楽鑑賞画面
音楽鑑賞画面ですが、曲目ごとにジャケットが存在します。
おまけが開放された時は「そういえば」という気持ちで見て頂けるとうれしいです。
それと楽曲リストに関しても前作通りタイトルの仕掛けがありますので、
こちらもほくそ笑みながらご確認頂ければと思います。





2.みんなにやさしいCatSystem2


UIの部分に絡んできますので、システム周りについてもこちらで書きたいと思います。

今作のエンジンにつきましては前作の不安点を解消することを念頭に置き、
ういんどみる様より公開されておりますCatSystem2というプログラムエンジンを使用しております。
前回のウリでもありましたMacでの起動は見送ることになりましたが、
動作の安定感、ゲーム画面の拡張性、スクリプトの理解のしやすさ、手厚いサポート体制などなど、
前作と比べると妙なところに無駄な時間をかけることなく、ゲームの開発を進めることが出来ました。


特に、ゲーム画面を作る上でとても便利だと感じたところが、
画像・デザインデータのベースをPSDデータ(Photoshopという画像専用のデータ形式)のまま活用できるので、
数多くのパーツが存在する画面において、パーツ素材の管理・組み込みがとてもやりやすかったです。
ベースのPSDを変更していけばその通りに簡単に画面を組み変えていけます。
WebデザインでもPSDデータより画面のデザインを行っていくのですが、
パーツをゴリゴリ吐き出しながら組み込みながらの追加での更新などは後半ワチャワチャしてくるので、
この仕組でWebサイトを組み込めたら便利だろうなぁと思いながら制作をしていました。

また、PSDデータがベースなので同じデータ形式を扱うグラフィック担当者も理解しやすく、
少し説明を行えば、システムに適したデータを準備することが可能です。
美少女ゲームという2D絵素材がとても多いゲームに最適化されていて、
デザイナーやイラストレーターにとても優しい作りになっています。

そして、シナリオのスクリプトの書き方が明快でわかりやすくありながらも、
多機能で細かい演出も行えるので、表現の幅が前作より広がりました。
体験版部分の初日に関しましては自分がスクリプトを担当しておりまして、
手探りではありましたが前作よりリッチな演出をスムーズに行うことが出来ました。
また、実装の検証・確認が簡単に行えるのもポイントです。
社内の未経験のスクリプターに対しても、ソースを元に組み込みを重ね、
最終的には体験版部分以上のことをサクサクとやってのけていたので、
組み込みのとっつきやすさはかなり高いのだと実感しました。

極めつけはシナリオを台本化する際のツールが扱いやすく、
とても見やすい台本に出力してくれるので声優さんからの評判もとても良いです。


そんなアドベンチャーゲームにもってこいなCatSystem2ですが、
まだ今作でしか使用していないので、まだまだ学ぶべきところがたくさんあります。
今後もっとうまく、効率的に使っていけるように試行錯誤していきたいと思います。
新たにアドベンチャーゲームの制作を考えている方は是非候補の一つとして検討してみて下さい。





3.Webデザインの速さは伝達の速さ

LaplacianのWeb周りは自分と緒乃の二人で制作を行っていますが、
中の人が情報公開までの作業を一気通貫で行える点も、
Laplacianの特徴のひとつになっていると思います。

前回も書きましたが、ナマモノを扱うLaplacianにとって、
意思決定から公開の速度が早いのは武器のひとつです。
間に別途Webの制作の担当が入ってしまうと鮮度が高い情報の質はどんどん落ちてしまいます。
加えて、業界屈指を謳っているエゴサ力も合わさり、よりリアルタイムな情報更新がなされています。

反面、制作がデスマってくるとガクッと更新の頻度も下がって見えてしまうため、
綿密な情報公開のスケジュール化も合わせて持っておく必要があるのもまた事実ではあります。

ともかく、現在の情報の取得・発信のメインはWebです。
Webでの情報は鮮度もピカイチですし届ける先も無限大です。
そしてアクセス数などのデータについても綿密にわかるので、
現状を数値としてリアルタイムに得ることが出来ます。
とはいいましても、雑誌や屋外広告やイベント等、
そこでしかない数値と言うのももちろん存在します。
なので何かに偏りすぎず、Webにおける現状分析を元に、何をしたいかに合わせて、
いろいろな媒体や手法を併用していくことが、
より多くのお客様に作品を届けるために必要な要素になるのだと思います。





4.ブランドのデザイン

ここまで長々と書いて来ましたが、
改めて、メーカーにデザイナーがいるということはどういう意味があるのか。

メーカーにデザイナーがいるということは、
印刷物やWeb、UIなどデザインの関わる限定した項目に関すること以上に、
ブランド全体としてのカラーをより明確にユーザーの方達に伝えることができる。
その必要性や可能性があるのだと、そう信じています。

幸運なことに、Laplacianは現在作ったゲームを購入頂いた皆様にプレイして頂ける立場にあります。
プレイしてくださる皆様やプレイをご検討頂いている皆様に対して、
「Laplacianのゲームはこういうものだ!!」
とちゃんと伝えられるよう、今後も精進していきたいと思います。





以上、全3回に渡り『エロゲデザインの現場』をお送り致しました。
1作品作る上で、デザインについてどんなことが行われているのか、
少しでも伝えられたなら幸いです。

デザインについて自分なりに色々書き連ねて来ましたが、
これだけの分量をまとめて書き起こして公開する機会は初めてでしたので
見苦しい点もあったかと思いますが、ご容赦下さいませ。


さて、気付けばニューリンの発売まで残すところあと1週間。
1ヶ月の延期もありおまたせしてしまっている状況で大変申し訳ないですが、
もうすぐ皆様の元にお届けできます。

そろそろ、カウントダウンムービーの公開も始まるので、
そちらもお楽しみに!


では本編を是非お楽しみ下さい。
またどこかで!

この記事をツイートする