見出し画像

Figmaでポケモンのタイプ相性確認ツールを作った

こにゃ

半年ほど前に、ポケモンのタイプ相性確認ツール を自作してTwitterで公開しました。

※ツイート内の添付画像は、現状のデザインとは若干差異があります。

あくまでも「自分のためのもの」という名目でしたが、思ったよりもリツイート数が伸び、「わかりやすい！」の声も沢山いただけました。半年経っていて今更ですが、せっかくなのでnoteにもアーカイブとして残しておきます。


作成の動機

ポケモンの世界には「タイプ相性」という概念が存在します。

ポケモンや技は、全18種のタイプに分かれている。
それぞれのタイプには相性があり、効果があったり、なかったりするぞ！
ポケモンバトルで一番大事なのが、このポケモンの技とタイプの相性だ。

引用元 -  バトルに役立つ！ タイプ相性表を公開！
公式のタイプ相性表

言わずと知れた概念ですが、すべての組み合わせにおける相性を記憶するのはかなり難しい。上記のようなマトリクス表を都度確認すれば良いとは言え、目的のマスを探すだけでも一苦労……。

そんな経験があったので、「さっとタイプ相性を確認できる何か」が作れないかと考えたのが、最初の動機です。



デザイン検討

色々検討しましたが、一枚の画像ですべてを表現しようとするならば、どうしてもマトリクス表が最適解になります。とにかく省スペースで全情報がまとまっている、というのが大きなメリットなんですよね。じゃあそんなマトリクス表の何がネックになっているのかと考えると、マス目が多すぎることと、視線移動が多いことかなと思います。

自分がタイプ相性を確認する時って、例えば「ほのおタイプは誰に強くて誰に弱いの？」という見方をします。マトリクス表でいうと、「縦一列」もしくは「横一行」を辿って目当てのマスを探す感じですね。

これ、端から端まで視線を動かさないといけないこともありますし、やってる間に（あれ、今どの列見てたっけ……？）ってなることもあります。マス目が多すぎてたまに迷子になるんですよ。

迷子になるくらいなら極端な話、今見ている列以外は非表示でも良いんじゃないか、とも思うわけです。


以上のことから、
・一枚の図で表現するのは諦めて、タイプごとに図を作る
・それぞれの図を簡単かつ直感的に切り替えられる仕組みにする
という方針に決定。

あとは「攻撃／防御は矢印で表現する方がわかりやすいな」とか、「18個も並べないといけないなら円形かな」とか、色々細かいことを考えながらFigmaでポチポチやりました。やっぱ良いツールだなぁ、Figma。


まとめ

そんな感じで、タイプ相性の確認ツールができました。

「従来のマトリクス表の方が慣れてて見やすいぜ！」という方もいるかとは思いますが、私みたいに「いつまで経ってもタイプ相性の確認に時間がかかってしまう……」という方は、一度試していただけたらなと思います。お役に立てると嬉しいです！

いいなと思ったら応援しよう！