【原神】「原神素材ヘルパー」公開!素材収集を手助けしてくれる便利なWebアプリ

公開 2021-10-13 12:38 / 最終更新 2022-08-03 17:06 プレビューモード
カテゴリー 作ったモノ

皆さん、こんにちは!

今回は、原神の素材収集が楽になるツール、「原神素材ヘルパー」 を作ったのでご紹介します。

とりあえず使ってみたい方はこちら

何ができるの?

原神素材ヘルパーは所謂 素材データベース です。キャラクターや武器に使用する素材、調度品セットの要素となっている調度品の一覧も確認できます。 もちろんそれだけではありません。

素材計算

それぞれの突破Lvで必要な素材だけでなく、複数段階を突破する際の合計数量の計算も可能です。スライダーを動かして範囲を設定できます。

image

収集素材のメモ & 周回回数の表示

素材の右にあるブックマークボタンをクリック/タップすると、その素材と使用先が保存され、「収集中の素材」画面から一覧で確認できます。

さらに、秘境やフィールドボスなど周回が必要な素材については周回回数の目安を表示することも可能です。

image

使用する素材、使用されるキャラや武器、自由自在

本Webアプリ内のほとんどのキャラ・武器・素材アイコンはクリックできるようになっており、クリックすることで直接詳細ページに飛ぶことができます。まるでWikipediaのように。

また、地域特産素材に関しては、その素材とワープポイントだけを表示するテイワットマップへのリンクも表示しています。

調度品セットはもはや暗記ゲーではない

調度品セットに含まれる調度品の一覧と、入手先が確認できます。一部の人にはありがたい機能でしょうか(というかギフトセットについては原石が結構貰えるのでやったほうが良い)。

また、製作済みの調度品にはチェックを付けて記録できます。今後のアップデートで製作数も記録できるようにする予定。

日替わり素材の表も

日替わり素材の表ももちろんあります。ページを見た日にどの素材が獲得できるか、背景色で一目瞭然。先程言ったように、アイコンをクリックすれば素材の詳細ページに飛び、どのキャラで使えるか分かります。天賦素材については、今後のアップデートでページを移動しなくても小さめのキャラアイコンで確認できるようにする予定。まだまだ改善が必要。

image

流れるようにページ移動

このサイトと同じNuxt.jsをフレームワークに採用しているため、ページ移動時にロードが入らず、高速にページを移動できます。かなり快適。

英語にも対応

一応英語にも対応しています。海外勢にも広めたいという魂胆でしたが、肝心の広め方がよくわかりません。

Google Playでも配信

Android端末向けにGoogle Playストアでも配信しています。実体はWeb版と全く変わりませんが、アドレスバーが表示されないなど多少使いやすくなっていると思います。

アプリが増えるのが嫌な場合はPWAをご利用ください。Chromeなどのブラウザーの下部に表示されるバナーから直接このページをインストールできます。

iOS版 (App Store) については現状公開予定はありませんが、審査が通るかどうか試す予定です。

開発の上でこだわった点

UIの配置

UI部品の配置やデザインにはかなり気を配っています。素材計算のスライダーとか、それぞれの素材の表示とか、使いやすさにはかなりこだわっています。

UIを使いやすくするには、とにかく自分で使ってみる、使いまくる。このメソッドでやっています。APEXとかいう、運営が自分のゲームをプレイしたことがないケースもあるみたいですけど

ダークテーマ

こだわったというよりも、デフォルトでダークテーマです。

目に優しく、一部端末では電池消費を抑えられるという都市伝説もあるダークテーマです。昼間はライトテーマの方が見やすいと思いますので、それも今後実装しようかなと。

スピード感

新キャラ・アイテムの追加や、提案いただいた改善点の実装はスピーディーに行っています。

この記事のコメント欄にも改善点を書いていただければ、返信対応いたします。

まとめ

というわけで、所々改善が必要とはいえ個人的にもかなり便利なものに仕上がったと思います。半月前にこのWebアプリについてHoYoLABに初投稿しましたが、その際には予想を大きく上回る反響があって驚きました。どう役に立つのかよくわからずに作り始めましたが、結果的に多くの人に受け入れられて嬉しい限りです。

それでは、少しでも興味を持ってくれたら、使ってみてね↓

コメントする

※コメントシステムの詳細は こちら を御覧ください。

コメント本文

確認

コメントを削除しますか?

確認

ログアウトしますか?

arrow_upward