崩壊：スターレイルのUIをよく見てみる(1)

自分はあまり最近ゲームをしていませんし、ソシャゲもほとんどしていない人間なのですが、崩壊スターレイルをPCでやってみて、ストレスフリーで楽しいなと思いました。
特に、宇宙と銀河鉄道のモチーフとRPGの要素が、自分のようなおっさんにとっては受け入れやすい魅力でした。

この記事では、崩壊スターレイルのUIの動画を撮影し、その際のメモを共有します。

ランチャー

https://youtu.be/KrzbD88rGN8

導線

• SNSリンク

  • 公式ホームページhttps://hsr.hoyoverse.com/ja-jp/

  • discord https://discord.com/invite/honkaistarrail

  • hoyolab https://www.hoyolab.com/accountCenter/postList?id=172534910

  • instagram https://www.instagram.com/honkaistarrail/

  • twitter https://twitter.com/houkaistarrail

  • youtube https://www.youtube.com/@Houkaistarrail_jp

  • tiktok https://www.tiktok.com/@houkaistarrail_jp

• 通知画像 (スライド)

• イベント、お知らせ、インフォメーション (フィルタ)

• ゲーム開始ボタン

  • 設定

    • インストール位置

      • 設定、著作権、利用規約

    • ダウンロードリソースを削除

    • アップデートを確認

メモ

• デザインは黄色と黒色と白色で構成されています。

• イベントで背景が変わります。

• HoYoLAB(HoYoVERSEの公式フォーラム)とかあるんですね。ログインボーナスとか、ゲーム情報とかあってこれも興味深い。

起動、ログイン画面

https://youtu.be/3EIEVKaWwC0

起動するとログイン画面になります。

導線

• 未ログイン時にログイン画面

  • 新規登録

  • パスワードを忘れた

  • ログイン

  • facebook連携

  • twitter連携

• 初ログイン時に利用規約とプライバシーポリシー

  • 利用規約

  • プライバシーポリシー

  • 同意する

• お知らせ等

  • お知らせ

    • フォーラム一覧

    • 公正な運営に関する声明

  • 更新

    • リソースチュック

      • キャンセル　OK

    • 言語設定

      • テキスト言語　プルダウン

      • キャラボイス

        • 音声リソース管理

• ログアウト

  • 確認

• 終了

• ゲーム開始

  • クリックして進める

• サーバー変更

  • サーバー選択

メモ

• 利用規約とプライバシーポリシーはゲーム内で読める。

• キャンセルすると（次の画面があれば表示され）現在の画面は下にスライドしながら消える。

• 小さなポップアップは右上角丸、左下側に重なったような線、というデザインで一部統一されている。

序盤チュートリアル

（動画はネタバレを含みます）

https://youtu.be/HHOajxXw_Pg

序盤のチュートリアル部分。フィールドの移動と、戦闘の操作感がわかります。

チュートリアル部分の流れ

1. 戦闘

   1. 通常攻撃

   2. ターゲットの変更、戦闘スキルの選択

2. フィールド移動

   1. ダッシュ

   2. 調べる

   3. 敵が攻撃範囲に入る。殴る

3. 戦闘2回目

   1. 必殺技とEP

4. フィールド移動

   1. 本

5. 戦闘3回目

   1. 行動順

   2. 必殺技、順番

   3. 新機能　チュートリアル　開放

6. チュートリアル

7. 戦闘4回目

   1. SPと戦闘スキル

   2. スキルポイントの回復

8. キャラクター選択

9. 新機能　キャラクター確認

   1. 属性、運命、別キャラ

10. 戦闘5回目

    1. 弱点属性

    2. 靭性（シールド）、裂傷

11. フィールド移動

    1. 敵の弱点属性

12. 戦闘6回目

    1. ターゲッティングと、なのかの戦闘スキルの説明

    2. バリア

    3. 主人公の属性と必殺技説明

13. 丹恒加入、新機能 パーティ編成

    1. キャラ追加

14. キャラクター画面

    1. レベルアップ

15. フィールド移動　新機能　秘技

    1. 三月なのかの秘技、

    2. 凍結

16. 新機能　軌跡

    1. キャラクター画面

    2. 軌跡　覚醒

17. 新機能　光円錐

    1. キャラクター画面、主人公選択

    2. 装備

18. 中ボス戦闘

    1. ターゲッティング

    2. 敵、味方の状態確認画面説明

19. 新機能　跳躍

    1. 跳躍

20. 新機能　旅記録

    1. 報酬を受け取る

21. 姫子を交えての戦闘

    1. スキルの説明

22. フィールド移動　強敵の説明

23. ボス

24. キャラクター画面　星魂

    1. 星魂同調

25. 新機能　メッセージ

26. 姫子脱退、パーティ編成

メモ

• ヘルタの肖像画や本など、世界観の説明になるものも配置されている。

• 機能を最初すべてを見せないようにして、順番に開放することで、複雑さが緩和される。

• ターゲット、選択要素は回るエフェクトが多い。目立たせる。

• 機能の概要は上部に表示され、四角や丸で囲むことでチュートリアル説明を目立たせている。

• 必殺技も戦闘スキルも最初に打たせてから、次の戦闘でリソースの話している。わかりやすい。

• 戦闘パートは早送りできるようになる。RPGと親和性がある。

モバイル画面

https://youtu.be/aJaL4p7jXKs

フィールド移動時、左上、機能全体にアクセスできるセレクト画面。

導線

• uid コピー

• ユーザーアイコン

  • 選択画面

• 均衡レベル

• …

  • 巡星ビザ

  • シリアルコード

• ショップ

• フレンド

• 依頼

• 旅記録（イベント）

• 合成

• アチーブメント

• メッセージ（キャラクターとのメッセージ）

• ナナシの功勲（ミッション型報酬）

• 跳躍(ガチャ)

• キャラクター

• ガイド

• アーカイブ

• 本棚

• チュートリアル

• パーティ編成

• バッグ

• クエスト

• ナビゲーション

• 不具合報告

• 公式コミュニケーション

• スペシャルイベント

• メール

• お知らせ

• 設定

• カメラ

• 電源(ログイン画面に戻る)

  • 確認

メモ

• 意外と画面が切り替わったり、ポップアップが出たり、機能ごとに違う。

• パーティ編成とカメラは、モバイル画面に帰ってこない。フィールド移動時の機能だからだろうか。

• 右上にバツボタンで統一されている。

• スライドして出てきたら、消したときは逆方向に消える。上から出てきたら上に消える。そうならない画面もある。

• 不具合報告は、外部サイト（カスタマーページ）が開かれる。勝手にアカウントでログインしてあって、報告の進捗の確認ができる。手厚い。

• アイコン変更、ルール、シリアルコード、ガイド、電源はポップアップ

• 巡星ビザ、フレンド、依頼、合成、メッセージ、ガイド、本棚、バッグ、クエスト、お知らせ、設定、は背景が透過

• ショップ、旅記録、アチーブメント、ナナシの功勲、跳躍、キャラクター、アーカイブ、チュートリアル、パーティ、ナビゲーション、公式SNS、は別画面

• 画面のエフェクトなどの動きがどれも面白い。

時間が限られてしまったため、今回の記事はここまでとします。来週、それぞれの画面を見たいと思います。