2015/02/04

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

  様々な画面デザインの実例検討。


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


  【 1. 古典的なAVGの画面デザイン 】

『Piaキャロットへようこそ!!2』
(c)1997 カクテル・ソフト
90年代後半、win95/98時代の作品。当時の美少女ゲーム作品の多くは、現在のような読み物AVGではなく、比較的複雑なフラグ操作やパラメータ管理に伴われていた。会話イベントでも、日時や所持金のステータスが画面内に表示されている。なお、本作では、一枚絵シーンになると殊勝にもこれらの表示は消えて、シンプルな透過テキストボックスに形状変化する。
『こみっくパーティー』 (c)1999 Leaf
本作もSLG作品であるが、イベントパートはこのようになっている。興味深いことに、テキストボックスの枠(画像の「P」字のあたり)をクリックすると、枠の色を変えられる(――たしか7種類程度あったかと思う)。機能的には未整備であり、前後一行送りのバックログ(左右の矢印ボタン)と、枠消去ボタン(四角形ボタン)が設けられているのみである。
『夏神楽』 (c)2003 studio e.go!
00年代初頭の作品。テキストボックスの周囲には、クリック待ちアイコン(右下のスズメ)以外には何も無い、シンプルなレイアウトである。この時代には、セーブ/ロードやコンフィグ操作などの拡張機能は、ウィンドウ上部の灰色のメニューバーから直接実行するというスタイルの作品も少なくなかった。
『めぐり、ひとひら。』
(c)2003 キャラメルBOX
全画面テキスト表示形式(いわゆるヴィジュアルノヴェル)の作品も、テキスト以外のコマンドボタン類を置くことは少ない。ただし、クリック待ちアイコンは、「一行進める」と「ページ全体を更新する」の二種類を使い分けている場合がある。



  【 2. 作中世界に即した様々な意匠――洋風魔法世界から和風世界まで 】

『ウィズ アニバーサリィー』
(c)2006 CROSS NET / Favorite
(図1:)00年代半ばには、各ブランドはメニュー画面デザインにも意識を向けるようになっていたが、なかでもFavoriteのそれは群を抜いている。北欧神話を下敷きにした魔法学園の物語であり、それに合わせてメニュー画面でも魔法陣モティーフやルーン文字風フォントが用いられる。作中の日付や場所も表示されている。
(図2:)通常シーンの画面はこのようになっている。テキストボックス右上のコマンドメニュー群は、普段は隠されており、「System」という文字列画像がひっそり表示されているだけだが、そこをクリックするとこのようなコマンドメニューが起き上がってくる。テキストボックスはシンプル志向だが、左右両端に装飾が施されている点は、いささか時代を感じさせるかもしれない。
『とり×とり』 (c)2006 すみっこソフト
ハロウィンを控えた時期に、魔界の魔族たちが人間界に現れたというシチュエーションのスラップスティックコメディ作品。その趣向に合わせてか、テキストボックス上部のコマンドボタン群は、おどけた手書きフォントであり、しかも、他に類を見ないほどカラフルである。
『Chu×Chuアイドる』
(c)2007 UNiSONSHIFT Accent.
コマンドボタン群を設置するのが通常形態になり、それとともに、レイアウトの美観だけでなく、あるいは美観よりも、使いやすさを優先する画面設計も行われるようになった。吸血鬼をメインヒロインとする本作では、テキストボックスにも蝙蝠モティーフがあしらわれている。ボックス左のサークルは、顔窓欄として使われることがある。
『です☆めた』 (c)2004 Sincere
(図1:)Sincereが発売した二作品は、私見では、00年代前半のインターフェイス周りのグラフィックデザインとして最も洗練されたものの一つである。吸血鬼「ルネ」と、彼女に血を吸われた主人公「勝間尚」の物語であり、テキストボックスも蝙蝠の羽根の輪郭をベースにして、宵闇の色合いと血痕模様で彩られている。システム画面デザイン担当は馬淵岩男。
(図2:)バックログ画面。紫色基調のインターフェイスはたいへん珍しいが、陰鬱な心理的屈折ととぼけたユーモアを綯い交ぜにした本作のムードを際立たせるうえで、この背景色の暗さと羽根デザインの愛嬌の奇妙な取り合わせが、効果的に作用している。
『シンシア』 (c)2004 Sincere
(図1:)中価格作品『です☆めた』に先立つフルプライス作品。民間機を撃墜してしまった元軍人の主人公が、その奇跡的な生存者である狼少女のリハビリに励む物語であり、画面デザインも落ち着いたブラウン基調になっている。通常シーンでは、画面上下に、木材製品を思わせる装飾が掛けられている。
(図2:)コンフィグ画面。意匠化された蔓草デザインがしめやかにまとわりついている。狼に拾われたヒロイン「シンシア」が暮らしていた自然を表す「木」と、文明世界(人為)を表す「彫刻/意匠」、そして過去の罪に苦しむ主人公を表すセピア色が、このデザインの中で混然一体となっているかのようである。
『よつのは』 (c)2006 ハイクオソフト
「よつのは」、すなわち「四つの葉」であり、インターフェイス全体が瑞々しいスプリンググリーンを用いている(コンフィグ画面も、鮮やかな緑一色である)。この意欲作は、テキストボックスをフキダシ型に多重化し、またRPGのような移動パートをも設けている。セーブ/ロードメニューは、普段はコマンドボタンのみであるが、それを開くと画面左にサイドバー式に現れてくる。
『幼なじみとの暮らし方』
(c)2006 ハイクオソフト
(図1:)『よつのは』の後日談的ファンディスク。フキダシ型テキストボックスはさらに改良されており、フキダシの左側に話者顔窓が表示されるというたいへん珍しい形態を採用している。テキストボックス内の罫線も、素朴な親しみやすさを印象づけるのに与って力ある。
(図2:)フキダシ以外にも様々な形でのテキスト表示(情報表示)を行っており、携帯電話のメール画面が出てくる場面もある(実際にクリックで操作する)。上記のS/Lサイドバー仕様も、画面内の一部領域に現れるという形態を取ることで、単なる別画面扱いとして切り替えるのではなく、通常画面を保持しつつそこに新たな彩りをもたらすという積極的な効果が見出せる。類例として『RGHL』のコンフィグも参照。
『Garden』 (c)2008 CUFFS
これも、緑色を取り入れたインターフェイスデザインの珍しい実例であり、そして優れた実例である。明るいライムグリーンの色調と、柔らかな丸みのあるフォントと、愛らしい葉っぱ型のデザインによって、全体のイメージが統一されている。各項目が、四角四面の配置ではなく、大樹の輪郭に合わせて位置づけられているのも面白い。
『夏めろ』 (c)2007 AcasiaSoft
本作は、学生時代特有の刹那的な恋愛を美しく描いた物語として理解されている。テキストは濃いセピア色であり、テキストボックスも学生らしくルーズリーフを模した意匠(綴じ穴、罫線)である。コマンドボタンはごく基本的なもののみが表示されているが、それ以外のシステムメニューについては、マウスカーソルを画面上部に移動させると出てくる。
『こんそめ!』 (c)2010 Silver Bullet
レトロゲームの雰囲気を、目の粗いドットという形でインターフェイスデザインの中に取り込んだ、オタク-キッチュ志向の怪作。コンフィグ画面、セーブ/ロード画面、ダイアログ表示等もすべて8bit志向のドット風デザインである。テキストも、かなり古めの(80年代、あるいは70年代にまで遡る)パロディが頻出する。
『ファンタジカル』
(c)2008 UNiSONSHIFT CLEAR
(図1:)現代人大学生の主人公が、19世紀イギリスのような幻想的世界に迷い込んだ物語。テキストボックスやフェイスウィンドウ枠も、重々しい金属的装飾として造形されている。キャラクターやテキストの中にも、当時の英国文学に属する『不思議の国のアリス』や『ホームズ』シリーズなどが、様々なかたちで反映されている。
(図2:)セーブ/ロード画面も、テーブル上のトランプとコインを配したグラフィックデザインになっている。
『蝶ノ夢』 (c)2005 Tinkerbell
江戸時代の遊郭を舞台にした復讐劇。テキストボックスにも、この時代/場所の設定を示唆する小物が組み込まれている。コマンドボタンのテキストを縦書きにするのは勇み足のきらいが無くもないが、これと同じ舞台設定の『花魁艶紅』はSLGパートのパラメータ表示を漢数字(!)にしたし、戦国時代舞台の『忍流』はコンフィグメニューを縦書きにした。
『斬死刃留』 (c)2009 Amolphas
魑魅魍魎が出現するようになった架空日本を舞台にする作品。古神道や真言、陰陽五行などの東アジア的な宗教的諸力に規定された世界像であり、それと歩調を合わせるかのように画面デザインも掛軸や巴紋、赤紐、唐草模様などを前面に押し出している。なお、画面左上の巴紋のマークは、人物情報、地図情報、その他の用語集を開くボタンである。