2015/02/04

インターフェイスデザイン(実例検討その二)

  インターフェイスデザインの実例検討(続き)。


  ・導入的な語り(1ページ目)。
  ・実例検討。
    - 1. 古典的なAVGの画面デザイン
    - 2. 作中世界に即した様々な意匠(以上、2ページ目
    - 3. 独自のグラフィックデザイン
    - 4. 様々な個性(以上、このページ
    - 5. SLG系ブランドによるインターフェイスデザイン(以上、4ページ目


  【 3. 独自のグラフィックデザイン 】

『coμ』 (c)2009 暁WORKS
直接的にロシア・アヴァンギャルドを連想させる『リヴォルバーガール☆ハンマーレディ』ほどではないにせよ、この黒白赤の硬質でクリアカットなデザインは、金属的な質感の召喚モンスターたちを現代日本の夜の都会で戦わせるバトルものに相応しい美意識であり、また同時に、熱っぽいロマンティシズムをも匂わせている。
『はるのあしおと』 (c)2004 minori
学園教師になった主人公が、教え子たち(18歳以上である筈だが、外見や言動は小学生のようにも見える)と交流するAVG作品。コンフィグ画面も、黒板の落書きのような、遊び心溢れるデザインである。
『R.U.R.U.R』 (c)2007 light
超遠未来の宇宙船内を舞台とする物語。きわめて珍しいことに、本作のテキストボックスやダイアログボックスは緩やかな楕円形を採用している。捉えどころのないセルリアンブルーに、絵本のように恬淡とテキストボックス内に散らばる星々、そして背景に繁茂する奇妙な木々の取り合わせは、いささか倒錯的でもある。
『あるぺじお』 (c)2007 SIESTA
(図1:)物語は、学生たちが四重奏を組んで発表会への参加を目指すところから始まる。セーブ/ロードのスロットがレコードの形状になっていたり(図2)、場面転換エフェクトが音楽記号のシルエットになっていたりと、音楽関係のデザインが利用されているが、それに限定されず、非常に洗練された明晰なヴィジュアルデザインが実現されている。
(図2:)背景画像は、水彩的なにじみを持たせて手書きの質感を強調しており、画面上部のノスタルジックな白帯に置かれた見出し及び日付も、手書き風フォントである。それとは対照的に、テキストボックスや確認ダイアログなどのインターフェイス要素は、ポップな水色とメカニカルな凹凸パターンで構成されている。
 (図3:)セーブ画面。個々のスロットにマウスカーソルを当てると回転し、またセーブを実行するとくるりと縦回転(Z軸回転)する。2007年当時の、プログラムレベルとPC環境のレベルの双方での演出的技術力の高まりを示す見本の一つである。
(図4a:)アイキャッチも、美少女ゲームとしてはきわめて大胆なセンスで作られており、しかも、PCゲーム媒体の強みを活かして動的変化を伴っている。たとえば、このアイキャッチでは、白い背景の上に中央のARPEGGIOの文字が順次現れていき、それに続いて四角形群が彩度を増して現れてくるといった具合である。
(図4b:)このアイキャッチは、緑地に薄い白円群が置かれているところから、濃い緑円が順次現れてくる。リズミカルな運動を表しており、それは本編ストーリーの音楽的リズムとも響き合っている。
 (図4c:)このアイキャッチでは、右下と左上の円が順次現れていき、それとともに右上の文字列が濃さを増して現れつつ、その下のラインが左へと伸びていく。
『ピリオド』 (c)2007 Littlewitch
(図1:)FFD演出の展開、グラフィックデザイン、音楽上の趣向、そして製品パッケージ(箱)の装幀に至るまで、視覚表現上の様々な趣味を美少女ゲームの中で披露したブランドである。本作では、鮮やかな紅色の円がインターフェイス全体のデザインを方向づけている。話者表示までもが、キャラクター毎に独自のレタリングで専用画像として用意されている。
(図2:)右クリックを押すと、シャッター音のようなSEとともに、メニュー画面に移行する。メニュー画面は、左記引用画像のとおり、元の画面をはっきり残しつつ四方を縁取りする形になっているという点でも、カメラのようなレスポンスを感じさせるものになっている。ただし、メニュー画面下部のグラフィックアイコン群は必ずしも直感的に分かりやすいものではない。
『夏の終わりのニルヴァーナ』
(c)2013 pajamas soft
筆者の知るかぎり最も特異なテキストボックス。もはやボックス(箱型)ではなく、毛筆で描いたような、あるいは川の流れを暗示するかのような、この雄渾な白いうねりが、テキスト表示領域を示している。クリック待ちアイコンは曼珠沙華。



  【 4. 様々な個性 】

『ままらぶ』 (c)2004 HERMIT
ホームコメディやトレンディドラマを模したような作りの作品。ストーリーもそうだが、ゲーム画面の四方にはTVディスプレイ(ブラウン管)を連想させる黒枠(コンフィグでは「TVフレーム」と呼ばれている)が置かれており、また、観客の「笑い声」SEが時折入ってくる。なお、TVフレームも笑い声SEも、コンフィグで消去することができる。
『らぐな☆彡サイエンス』 (c)2006 アイル
「らぐな博士」の珍妙な発明品によって引き起こされるドタバタコメディ。インターフェイスも、平行四辺形のテキストボックスに、猫顔のボタン、そして自爆スイッチ型のボタンといった具合に、いかがわしさとハンドメイド感を横溢させている。左記画像に見られるとおり、多重テキストボックスを使用している作品でもある。
『FESTA!!』 (c)2005 Lass
発話者の位置に合わせて(比較的小さな)テキストボックスを表示するフキダシ型テキストボックスは、「画面をうるさくしすぎない」「コマンドボタンまで追従表示する必要は無い」「枠サイズ変化の必要」「多重表示の可能性がある」などの事情から、簡素なデザインになるのが通例であるが、本作は楕円と星型を伴ったオレンジ色の派手なフキダシ枠を使用している。
『淫妖蟲』 (c)2005 Tinkerbell
テキストボックス右側の猫マークをクリックすると「ニャー」というSEが返ってくる。また、校医「桃野桃」の立ち絵が画面内に出ている時にテキストボックスを消去すると、ミカン(彼女の好物)が上からバラバラと降ってくる。これらは物語進行とは一切関係のない(しかも奇天烈な)リアクションであるが、インターフェイスに込められた遊び心として受け止めればよいだろう。
『はぴねす!』 (c)2005 ういんどみる
インターフェイスの造形及びレイアウトは基本的に固定形態だが、コンフィグで変更できる場合もある。コマンドボタン群を非表示にできるのはその一例である。本作のエンジンcatsystem2では、テキストボックスをドラッグして任意の位置に移動できる。さらにageのエンジンでは、テキストボックスのサイズを手動変更することすらできる(たしか『化石の歌』がそう)。
『愛cute! キミに恋してる』
(c)2004 ぱれっと
妖精「チョコ」は、テキストボックス上に腰掛けたり、画面上のパラメータ表示に言及したりする。ゲームの画面が何であるのか、インターフェイスがプレイヤーとキャラクターの双方にとって何であるのかに関してきわめて意識的なAVG系ブランドであり、後に『えむぴぃ』(2007)ではテキストボックスやテキストの破砕すら敢行した。
『てとてトライオン!』 (c)2008 PULLTOP
00年代末頃から、美少女ゲーム(なかんずく学園恋愛系)は、シンプルなテキストボックスを強く志向している。主な特徴としては、「ボックス内部は透過(※コンフィグで濃度変更できる場合も)」「枠の縁取りは無い」「ボタン群は小さく目立たないように」など。さらに、『マブラヴ』シリーズのような字幕志向の設計では、テキストボックスそのものが事実上消滅する。