@マークぐるりん

外資系ITコンサルタントをしつつ武蔵野美術大学通信課程に通う記録

2018-Po-04.美大生(ムサビ通信)になったけれど、経営シミュレーションゲームのUI/UXデザインをSAP導入PJのごとくガシガシと進める Part.1

UI/UXデザインはユーザーの使いやすさや使い心地の良さをイメージして作るという話をよく聞きますね。

 

画面デザインについては今年武蔵野美術大学、通称ムサビ通信の「デザイン入門」や「グラフィックデザイン基礎」の講義を学びながら改善していこうと考えているけれど、今はSAPコンサルタント/エンジニアとしてそれなりの年月を積み重ねてきたMicrosoftのPower Pointで泥臭くSAPのDynproで遷移するような画面フロー図を作っておきます。

 

画面フロー図はスタート画面とそこからボタンをクリックしたり、押下したりすると切り替わる先の画面の関係を示したものです。

 

百聞は一見にしかずということで、今作っているものをご覧ください。

 ※作りかけです。

 

f:id:kusuharyou:20180411233325p:plain

 

メイン画面から遷移できるのは主に四つの画面になっています。

  1. 散策画面 ・・・ノベルゲームパートです。
  2. 執務画面 ・・・SLGとしてのメイン画面1であり、内政系の画面となります。
  3. 研究画面 ・・・SLGとしての補助画面であり、内政や外交に役立つ機能が詰まったバフ用メニューです。
  4. 外交画面 ・・・SLGとしてのメイン画面2であり、戦闘系の画面となります。
 

この作品のメイン目標は「塔の頂上に至って、荒廃した世界を脱出する

目標は比較的シンプルなものなので、ゲーム自体の進め方は3ステップになります。

 

①執務(内政)で塔の中の勢力を伸ばして伸ばして、経済を成長させたり人口を増やしたり、研究して便利な社会を目指したりします。

 

②勢力を伸ばした後は外交という名の下に塔の中に相当数が存在するガードロボットを突破していき、人類側のエリアを開放していきます。

 

③外交によりエリア開放が進むとノベルゲームパートが進みます。

 

システム畑の人らしい手法で、ゲームを作るけど、その前にSAPについて説明させて

 

SAPとDynproについては少しだけお話させていただこうと思います。

 

参考までにSAPにおける画面イメージを載せておきます。

 

SAPはウィキペディア先生の言葉を借りるなら、ドイツのヴァルドルフに本社を置くヨーロッパ最大級のソフトウェア会社です。

 

ソフトウェア会社といっても、ゲームなどのコンテンツやMicrosoft Officeなどの汎用的な事務ツールを売っている会社ではありません。

 

以下の説明はざっくりベースの説明なので、SAP関係者の方やERPパッケージの導入に関わっている方は何卒スルーしていただけますと幸いです。

 

SAP社が売っているものの半分は、人事給与会計購買販売といった企業でそれぞれの部署が使っているシステムをひとつのソフトで動かせるようにパッケージ化したERPです。

 

残りの半分はアナリティクス、オートメーション、深層学習、IoTといった今後来るデジタルエコノミーに対応する為の各種ソフトウェアを用いた仕組みを売っています。

 

社会人の方は自社、あるいは自部署でSAPという言葉を使ったことがあったり、青みが買った特徴的なUIを触ったことがある場合、高い確率でSAPユーザということになります。

フォーブスが毎年発表している「世界の最も価値あるブランド」全100社ランキング | Forbes JAPAN(フォーブス ジャパン)では、27位/100位中になっています。

 

ランキングの前後ではクレジットカードで著名なアメックスやビールのバドワイザーが名を連ねています。

f:id:kusuharyou:20180411235426p:plain

 

具体的な画面レイアウトについて

 

現在進めているのは2018-Po-02. 【SLG】「箱庭と鈍色の塔で」システムデザイン ~Part.1 パラメータ構成~ - @マークぐるりんの延長です。

 

画面遷移図を作成し、メイン画面やサブ画面についてのUI/UXデザインを進めています。

 

下記はメイン画面となっていて、このゲームの顔になる部分ですがだいぶシンプルな構成にしようとしています。

f:id:kusuharyou:20180412000032p:plain

 

散策画面はひとまず2案作成しています。

 

四角形の中から選ぶ方式か、あるいはコマンドのような形式にするか検討課題です。

 

f:id:kusuharyou:20180412000215p:plain

 

下記の画像の左側の塔オブジェクトはPower Point芸です。オブジェクトを組み合わせて、機械仕掛けの塔のイメージをなんとか作れないかなと試行錯誤して作っています。

f:id:kusuharyou:20180412000254p:plain

f:id:kusuharyou:20180412000310p:plain

 

残りの画面についてはPart.2で紹介できたらなと思います。

 

ちなみに上記に張った画面イメージはいまのところはまだ、パワーポイントベースドなので、一通り決まったら実装していくことになります。

 

kusuharyou.hateblo.jp