流行りのあのゲーム、もう始めてる？UIから考える「ポケポケ」の魅力

はじめに

※ このノートは「DHU Kuriyaゼミ Advent Calendar 2024」12日目の記事です。

おはようございます。こんにちは。こんばんは。おやすみなさい。
栗谷ゼミ24年組の愛梨です！


今回は、最近流行っているポケモンのアプリ
「Pokémon Trading Card Game Pocket（ポケポケ）」のUIについて
調べていこうと思う。

今までは図鑑や実際の紙のカードで楽しんでいたポケモンカードが、ついにスマホで遊べるなんて、嬉しい！最近の若者はもちろん、ポケモン世代のみなさんは特に嬉しいのではないだろうか？担当していた塾の生徒も楽しんでいることに違いない！

実は私は、この記事を書き始めた、ある1日の夕方である今は、まだ「Pokémon Trading Card Game Pocket（ポケポケ）」のゲームを始めてはいるわけではないが、インターンとして働いている企業のうちの一社で、社員の方のスマホを通じて、気になっていたゲームだったため、お願いしてｼｭｯて引かせていただいたことがある〜スライドしてポケモンカードを出すのが楽しかった！クセになる、何枚も引きたい！

（あまり良いカードが出なかったみたいで、ごめんなさい。気にしなくていいよって言ってくれました。優しい ( ´▽｀)♪）

ポケポケとは？〄

簡潔にいうと
Pokémon Trading Card Game Pocket（ポケポケ）のことである。
「ポケモンカード」を手軽にコレクションできるスマホアプリ。
拡張パックを毎日決められた枚数、無料で開封できるゲームとなっている。

UIとは？

今回の課題では、UIで分析することがテーマとなっている。
まってまって、そもそもUIって？
UI(User Interface)のことである。
ユーザーインターフェイスって、どんなこと？

Webサービスやアプリケーションなどにおいてユーザーの目にふれるすべてのものを指すらしい。 

Interfaceには、本来「接点、接触面」という意味があるそう。コンピューター関係でUIと言うときは、ユーザーとコンピューター間で情報を伝達する時に関わっている、数々の機器や入力装置を指すらしい。
（マウスやキーボード、マイクやスピーカーなどの音声入力装置、ディスプレイなどの画面表示装置などを含め、多岐にわたる。）

さらに、UIは装置にとどまらず製品そのものの外観も含まれる。
（webサービスにおいて、webページのデザインやフォントなどもUIに含まれるのです。）洗練されたUIは、ユーザーとコンピューター間の情報のやり取りをスムーズにし、快適な操作を可能らしい。

快適なUIになっているWebサイト、作ってみたい！

UI視点で考えてみよう(※ゲームのネタバレを含みます)

ここからはポケポケをUI視点で考えてみようと思う。
というわけで、上記で、
実は私は、まだ「Pokémon Trading Card Game Pocket（ポケポケ）」
のゲームを始めてはいるわけではないが、
と述べたが、ある1日の夜である今、ただいま、ダウンロードしてみた…
実際、使ってみてから、ここでUIの観点からレビューしたいためだ。

※就活中なため、はまりすぎないようにするぞ！あくまでも1日頑張ったご褒美に！

まずは、生年月日やニックネームを決める。
※以下、操作方法についての大まかな流れの写真を添付している。

利用後の分析(UI視点で考えてみた)

ここからは、実際に一度、利用した後からの分析や気づき、感想などを含めて述べていこうと思う。

ゼミでの授業を受けていて、文字を読むときは、スマホやパソコンでも、縦スクロールが多いような印象を受けた。そんな中、この動作は「袋を開ける」ために横スクロールだ。

ユーザーの日常の行動から考えてみよう。

これは、英語や日本語の横読みの場合を考えて、左から右に読む。
また、私たちは、ジップロックなど、袋を閉める時、食べ物の袋を開ける時なども、キッカケを利用しながら横に手をスライドして開けている。
そのため、これもカードを開ける動作なのもあって、このアプリでも横にスライドしてカードを開封することは、私たちの日常に馴染んでいる動作なので、自然と受け入れやすいのではないか。

また、画面下のアイコンについても、カード、人との繋がりコミュニティ、衝突バトルなどと、内容がイメージしやすいアイコンとなっている。

ニューモフィズムデザインについて

語源について：
ニューモーフィズム（Neumorphism）とは、
ベース（背景）から要素が押し出されていたり、
窪んでいたりするようなスタイルのデザイン手法らしい。
Neumorphism = New（新しい） + Skeuomorphism（スキューモーフィズム）

色合いについて：
基本の色
明るいシャドウのための明るいカラー
背景と要素のための中間色
暗いシャドウのための暗いカラー

を使うようだ。
このPOKEPOKEにも、使われている。

スタイルについて：
また、ニューモーフィズムは、少し前の流行りである「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイルのよう。

そのため、ポケポケでも、ボタンに関して、どこを押すべきなのか分かりやすい、見た目も色が白など、シンプルにしていてもユーザーに操作方法が伝わる。

Pokémon Trading Card Game Pocketについての詳細

Q: いつリリースされた？
A: ポケモンカードを手軽にコレクションできるiOS／Android向けアプリ『Pokémon Trading Card Game Pocket』の配信日が2024年10月30日（水）に決定。App StoreとGoogle Playにて事前登録も開始！

Q: どこの会社が販売？
A: 株式会社ポケモン

Q:
どこの会社が開発？
A:
株式会社ポケモン
（本社：東京都港区、代表取締役社長：石原恒和）が
株式会社クリーチャーズ
（本社：東京都千代田区、代表取締役社長：北野祐司）や
株式会社ディー・エヌ・エー
（本社：東京都渋谷区、代表取締役社長兼CEO：岡村 信悟）と
共同開発し、新作アプリとして制作。

Q: 対応OSは？
A: iOS／Android

Q: ジャンルは？
A: カード

画像について

【AI生成】
※以下、AI生成してみた。
ポケモンっぽさ出ているかな？AIに指定する文章も上手になっていきたい。
ポケットモンスター、赤と白のボールなどと入力。

【参考記事】

『ポケモンカード』がもっと身近に！スマートフォン向けポケモンカードゲーム 『Pokémon Trading Card Game Pocket』を発表
https://dena.com/jp/news/5088/

ポケポケリリースについて
https://dena.com/jp/news/5137/

『ポケモンカード』がもっと身近に！
https://www.pokemontcgpocket.com/ja/

ポケポケが本家ポケカと別物だった件【Pokémon Trading Card Game Pocket】
https://adymj.com/?p=2500

ポケモンずかんシェイミ
https://zukan.pokemon.co.jp/detail/0492

スマホで遊べる無料のポケモンゲームアプリまとめ｜2024年最新
https://gamewith.jp/gamedb/article/show/297300?from=ios

ポケモンを調査_ゲーマーの約？割がポケモン関連ゲームのプレイ経験
https://prtimes.jp/main/html/rd/p/000000115.000039514.html

UIとは何？UXとの違いやUIデザインのポイントを徹底解説
https://jp.ext.hp.com/techdevice/technologysc/creator_002/

今さら聞けない！ UI（ユーザーインターフェース）とは？
https://www.m-hand.co.jp/blog/design/7161/

オンラインAIイラスト・画像生成
https://www.artguru.ai/jp/

ニューモフィズムデザインとは？デザイン方法やルールのまとめ
https://webdesign-trends.net/entry/11155#google_vignette

ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
https://coliss.com/articles/build-websites/operation/design/neumorphism-in-user-interface-tutorial.html

UI観察『Pokémon Trading Card Game Pocket（ポケポケ）』②画面作り編
https://note.com/mitsuru_h_cc/n/n87fca9f0f989

新UIトレンド「ニューモーフィズム」に見るデザインの過去と今後
https://note.com/mitsuru_h_cc/n/nd121675b7cb0

ニューモーフィズムについてまとめてみた
https://note.com/rirumaru/n/n72c697d7492a

さいごに

以上！この記事を楽しんでいただけたら嬉しいです。
毎日、POKEPOKEをする習慣にするぞ〜
その勢いで、英語やWebなど興味あることも習慣にして日々学べたらいい！
これからもWebに関するUIについて、学んでいくぞ〜！

見てくれてありがとうございます♡
またね〜！