ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「ラストピリオド」サービス終了間際、チャット欄は思い出の共有に溢れる

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「ラストピリオド」、(以下、ラスピリ)のサービス終了間際のチャット機能を紹介します。

 

 

f:id:appgameui:20221230121732p:image

 

チャットはホーム画面で確認できる

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

チャットは専用画面だけではなく、ホーム画面下部からも確認可能です。

 

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

文章は一行だけ表示されるデザインです。
簡易的な表示ですが、新規投稿の有無や投稿内容の概要を把握するだけであれば、チャット画面に遷移せずとも確認可能なので、手数は抑えられています。

 

 

チャットは最後にみんな集まってくる場所に

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

さて、そのチャット欄ですが。

サービス最終日は平日の日中にも関わらず大変賑わっていました。
久々にログインした方もいたようで、チャットはサービス終了を惜しむ人、思い出を共有する人であふれ、いつものチャット欄とは違った雰囲気でした。

 

チャット欄を眺めつつ感じたのは、2013年に小学館のビルが取り壊しになる際、縁のある漫画家さんたちが訪れ、壁にイラストを描きニュースになった件です。

www.shogakukan.co.jp

 

感覚的にはこれと似ている空気が作られていたと感じました。
似ていると感じた要素は主に以下です。

  • 時間が来ると二度と見れなくなる
  • その場に居ることで臨場感、空気感、一体感、熱量が感じられる
  • ユーザー主導でコンテンツが作られていく
  • 思い出の共有という側面が加わり、デザインにストーリーが加わる
  • 感情に訴えかけるデザイン

 

アクティブユーザーが集まりやすい

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ゲーム内にチャット機能があることで、アクティブユーザーが集まりやすい環境だったのも良かった点だと感じました。

リアルタイムなやりとりが活発に行われていたため、ユーザー同士がゲーム内に居る感覚を強く認識し、共有し合い、ある種の熱量が感じられました。

ユーザー同士で情報交換やコミュニケーションを取るだけであればTwitterなどの外部サービスを使う、という手段も考えられますが、「ラスピリ」をプレイしている全てのユーザーがそこでやり取りできるわけではありません。

サービス終了間際にチャット機能がゲームを大いに盛り上げていたと感じました。

 

 

以上です。

サービス終了時にアプリを盛り上げる施策の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 

当ページは、Happy Elements株式会社「ラストピリオド」の画像を利用しております。
該当画像の転載・配布等は禁止しております。
©Happy Elements K.K

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

ラストピリオド」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

コンテンツ利用ガイドライン | Happy Elements株式会社

② インターネット上での利用について
非営利目的の場合においては、当社ゲームを題材としたWebサイト等を自由に制作していただいて問題ありません。 Webサイト及びSNSや画像・動画共有サイトへの投稿での利用に限り、ゲーム内で使用されている画像を含んだスクリーンショット画像やストーリーシナリオ等をご利用いただいて構いません。また、趣味の範囲で利用し、原材料費程度の対価・利益を得る場合においても非営利目的の範囲内とします。

ただし、以下の場合においては利用を禁止させていただきます。

  • 当社ゲームのイメージを著しく逸脱する、または損なう内容を含むもの
  • 当社ゲーム内で使用されている画像の過度なリサイズ、編集加工
  • スクリーンショット画像・プレイ動画を除く、直接的に各コンテンツの素材(イラスト、動画、音声、楽曲等)をコピー、スキャン、サンプリング、トレース等を行い使用すること
  • 当社ゲーム内で使用されている画像またはシナリオの閲覧、楽曲の視聴のみを主目的としたWebサイトやブログ記事での利用
  • 当社、もしくは当社ゲーム公式や公認と詐称しての活動、またはそのように誤認するおそれのある表示、外観、状況を利用しての活動
  • その他当社の各ゲームで個別に禁止されている利用方法
  • 当社ゲームを題材としてWebサイトを公開される場合は、必ず以下のように著作権者の表示と再利用の禁止を明記してください。
    (○○○○○はゲームタイトル)

    当ページは、Happy Elements株式会社「○○○○○」の画像を利用しております。
    該当画像の転載・配布等は禁止しております。
    ©Happy Elements K.K

 

ラストピリオドのコンテンツ利用ガイドラインです。2021年11月22日改定版です

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

日常のピクトのデザインを見直すキッカケに「世界ピクト図鑑 サインデザイナーが集めた世界のピクトグラム」

こんにちは、ちょこです!

今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです!

 

「世界ピクト図鑑 サインデザイナーが集めた世界のピクトグラム

amazonの商品ページのキャプチャです。2022/7/16にこの書籍を購入しています

アイコンデザインする時のヒントになりそう!

 

 

幅広くピクトが紹介されている

書籍の中では幅広いジャンルのピクトなどが紹介されています。
紹介されているのは主に以下の範囲です。

 

本のタイトルの中に「図鑑」と書かれていますが、街角で見かけたピクトを撮影し、紹介する作りになっています。
分類はされているが、アカデミックな図鑑のように網羅されているわけではありません。

デザインや著者の感想を通して、日常の中に紛れているピクトの存在を改めて認識し、ピクトの入門書のような感じで楽しむことができました。

 

「i」のピクトは海外でも使われていた

ソシャゲでは「お知らせ」や「詳細情報」を示すときに「i」を使うことがあります。
海外でも同様の文脈で共通認識されているようなので、日本のローカルデザインになっていないようなのは少し安心しました。

文字を強調する系のピクトと捉えることでデザインのバリエーションも増えそうです。
例えば日本の銭湯の「ゆ」もその一種と考えられるのかも、と思いました。

 

トイレのピクトは立ち姿

トイレのピクトも紹介されていました。

文脈から得られる情報もあると思いますが、情報を極力省いた結果の形がシンプルな立ち姿に落ち着いてるのがとても興味深く感じました。
ここから迂闊に情報は足せない…。

そう考えると、トイレのピクトを考えた人たちはどういう議論やデザインパターンを試したのか気になりました。

 

機能が多様化するとピクトにするのは難しくなる

ATMのピクトを紹介しつつ、ATMはピクトに向いていないという話も紹介されていました。理由は機能が多様化しているため。

確かにATMはポストのようにある程度外観が統一されていることもないため、ATMと書いてしまうのが一番伝わりやすい気はします。

ゲームでも機能が多様化しているコンテンツは珍しくないため、ピクト化することに向き不向きがある、という話が聞けたのは少し安心しました。

難航するものは難航しますよね…。

 

これまで考えてもみなかった視点で説明されている

AEDのピクトの紹介も興味深く読めました。

AEDのピクトはハートとイナズマを表すデザインで構成されていますが、考えてみると手とイナズマの組み合わせだと「感電」を示しますし、赤い色のデザインは「危険」という文脈にも読み取れます。赤は誘目性が高いので、目に入りやすいとも思いますが今後どのような変化を見せていくのか気になりました。

 

その他、中国の爆竹禁止のピクトの多様性、横断歩道のピクトが中折れ帽を被ってるなど、文化的な側面が見れるのも面白いです。

今までそこまで注目してピクトを見ることがなかったため、普段何気なくあるピクトをもう一度よく見直してみると、新しい発見があるかもしれないと感じました。

 

 

以上です。

他の書籍も以下にまとめています。良かったらこちらもご覧ください。

appgameui.hatenablog.com

ゲームUIと組み合わせれば新しい表現ができるかも「データ視覚化のデザイン」

こんにちは、ちょこです!

今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです!

 

「データ視覚化のデザイン」

amazonの商品ページのキャプチャです。2021/10/2にこの書籍を購入しています

情報を魅力的なビジュアルにした事例が数多く紹介されていました。

 

 

見た目かっこ良いデザインを作るならデザインの知識が必要

取り扱うデータとグラフの結び付けは紹介されています。
いわゆる情報整理の段階ですね。

そこからフォント選びや配色、ちょっとしたレイアウトなどを整えて魅力的な見た目にしていくのですが、非デザイナーだと少し大変かもしれません。

少なくともこの書籍の中ではデザインに対してそこまで細かく説明されていません。元々デザインの知識がある人に対して、データの視覚化をする際にはこのデザインの知識が優先的に使われるよ、と紹介されている感じです。

 

なので、見た目にこだわりたい人はグラフィックデザインの知識を別で仕入れてくる必要があると思います。個人的にグラフィックデザインに関してオススメの本も置いときます。

 

 

ゲームUIとデータビジュアライゼーションの組み合わせは未開拓だったかも

ゲームUIではデータビジュアライゼーションを用いるケースは稀かもしれません。

キャラ一覧画面であれば、サムネイル表示かリスト表示が選べることがありますし、キャラクターのパラメーターであれば以下のように取り扱われるケースが思い浮かびました。

  • 数字の羅列
  • 棒グラフ
  • レーダーチャート

 

実装コストや使い勝手も考慮した上で、ある程度最適化されているようにも見えますが、動的に情報が変化するゲーム画面と、既存のデータビジュアライゼーションの知見を組み合わせることで、今までにない新しい表現が生まれる可能性もあるように感じました。

少し気になったので今後、注意深く見るようにしてみたいと思います。

 

 

チャートやグラフの名前が知れて便利

「データ視覚化のデザイン」では、様々なデータを魅力的なビジュアルに落とし込んで表現された事例が豊富に紹介されています。

その一つ一つの事例に名前とデザインの特徴が簡潔に述べられています。

 

例えば、ゲームではキャラクターや武器の能力を表すとき見かけるこの図は「レーダーチャート」という名前で紹介されていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

このように「見たことはあるけど名前は知らなかったグラフ」がたくさん紹介されています。

棒グラフや折れ線グラフくらいの超メジャーなものしか知らなかったため、どれも新鮮で大変興味深く読むことが出来ました。

 

SFチックなUIを作る時にも良さそう

想定されていない使い方だとは思いますが、その他役立ちそうな場面としてSFっぽい画面や演出を作る時「なんだか分からないグラフがたくさん並んでいる画面」を作ることが求められると推測されます。

「データ視覚化のデザイン」では様々なグラフが見本帳のように並んでいるため、デザイン制作のヒントになると思います。

 

 

 

 

以上です。

他の書籍も以下にまとめています。良かったらこちらもご覧ください。

appgameui.hatenablog.com

ゲーム画面を分かりやすく伝えるためのヒントが隠されてそう「たのしいインフォグラフィック入門」

こんにちは、ちょこです!

今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです!

 

「たのしいインフォグラフィック入門」

amazonの商品ページのキャプチャです。2021/9/18にこの書籍を購入しています

インフォグラフィックとUIデザインって似てるところが多い気がしています。

 

 

非デザイナーでも楽しく読めそう

本書「たのしいインフォグラフィック入門」は主に以下の3つのジャンルに分けられています。

それぞれのジャンルの中身については、制作工程の詳細とクオリティの高い実例が紹介されています。

 

入門と書かれている通り、専門書の中でも比較的優しい切り口で書かれているように見えます。

非デザイナーでも難なく読めると思いますし、ある程度理詰めで進められるため、エンジニアさんのような職種の方でも楽しく読めると思います。

実際、著者のプロフィールを見ると、プログラマー、エンジニア、ウェブデザイナーを経ています。そのような経験を持った方が著したと捉えると、非デザイナーを含めていると見る方が自然かと考えます。

 

インフォグラフィックから学びたい画面デザイン

インフォグラフィックって何?というところから、どのような活用方法が注目されているのか、などが紹介されており、分かりやすく、興味を引く内容が書かれています。

特に興味深かったのはアメリカ大統領の選挙戦といった、専門的で情報量が多いコンテンツを、事前知識も多様化している国民に伝えるために用いた例です。

 

ゲームUIも同様に情報量が多くなりがちな場面があり、ゲーム慣れしているユーザーから慣れていないユーザーまで、正確に伝えることが求められます。
アクションゲームなどは短時間での処理も重要になってきます。

インフォグラフィックを通じて、複雑なゲーム画面を分かりやすく伝えるためのヒントが隠されているのではないかと考えています。

 

 

ピクトとアイコン作りは似てる?

ピクトの作り方は以下のステップで紹介されていました。

  1. 利用目的の確認
  2. 対象の理解
  3. ラフスケッチ
  4. 清書
  5. 調整

ゲームではアプリアイコン、スキルアイコン、属性アイコン、メニューアイコンなど、様々あり、場面や目的によってデザインのアプローチも変わることがほとんどです。

それら全てのアイコンと一律同じとは思いませんが、参考にできる部分も多いのではないかと考えます。

 

例えばゲームで使用するアイコンの場合、おおよそ以下のようなことを考えると思います。

  • 目的は何か
  • どこでどのように使われるか
  • 何をアイコン化したいか
  • どのような見た目にするとユーザーが直感的に理解しやすいか、ゲーム側と共通認識を得やすいか
  • 他のアイコンと比較しても誤解を招かないか(例えば、同じ虫眼鏡アイコンでもある場面では「拡大」を表し、別の場面では「詳細」を表していると誤解を招く恐れがあるなど)

ゲームのアイコンの場合、そのゲーム独自の文脈でデザインされることもあるため、体系的、基礎的な学びは省略されることもあるかもしれません。

ピクトは歴史的にはゲームアイコンより若干先輩なので、上手く知見を取り入れることでゲームのアイコンをデザインする際に、役立てられるのではないかなと思っています。

 

インフォグラフィックは情報設計に似ている?

アイコンの次は情報設計とも似ていると感じた話です。

インフォグラフィックはざっくり言えば、グラフや図といった情報にビジュアルの情報を加え、より視覚的に訴えかけるデザイン、という解釈をしています。

 

そのインフォグラフィックの作り方のステップは以下のように紹介されていました。

  1. 利用目的の確認
  2. 題材の選定
  3. リサーチ
  4. 内容・コンセプト決定
  5. デザイン
  6. 検証

先ほど紹介したピクトと共通する部分も多いですね。

ゲームUIはグラフィックデザインの要素に加え操作性も考慮され、より複雑になる印象はありますが、断片的に言語化された要件を端的にまとめ、世界観を加味したビジュアルに落とし込むという作業はインフォグラフィックと似ていると感じました。

 

自分が見る限り、情報設計系の入門書は比較的ハードルが高めなので、こういう入口があっても良いのではなかろうかという提案をさせていただければと思います。

 

 

 
 

以上です。

他の書籍も以下にまとめています。良かったらこちらもご覧ください。

appgameui.hatenablog.com