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

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

「ドラゴンクエストけしケシ!」アイコンやタップエフェクトにスライムが採用されていて、世界観の表現と没入感を高める工夫だと感じました

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

 

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

 

今回はドラゴンクエストけしケシ!」通称「DQけしケシ」のアイコン類でスライムのモチーフが取り入れられていました。世界観を取り入れるデザインの参考までにご紹介します。

 

見つけたのは以下の4つの箇所です。

  1. タイトルに戻るボタンのアイコン
  2. キャラクターコードをコピーするボタンのアイコン
  3. パーティ切り替えボタンのアイコン
  4. タップエフェクト

 

早速それぞれ紹介していきます。
まずは1つめ「タイトルに戻る」のアイコンです。

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

 

画面下部に「タイトルへ」のボタンがあります。
ボタンのアイコンがスライムがドアの外に飛び出していくデザインになっているのが分かるかと思います。

通常はドアだけであったり、スライムの代わりに矢印が採用されていることがありますが、ここではスライムが添えられていました。

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

 

 

2つめは「プロフィール画面」です。

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

 

画面上部にある、キャラクターコードのコピーをするボタンのアイコンにて、白黒の2体のスライムがアイコンに採用されています。

コピー&ペースト感が表現されていると感じます。

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

 

 

3つ目は「ステージ選択画面」です。

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

 

画面下部に表示されている、パーティ変更機能のボタンに注目します。

このようにスライムの横に循環を示すような矢印が表示されています。
パーティに編成するキャラクターの多くは人型ではなく、モンスターの形をしています。なので、モンスターの代表格であるスライムがアイコンに採用されたのかもしれません。

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

 

4つ目は「タップエフェクト」です。

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

 

分かりやすいようにタップエフェクト部分を拡大します!

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

 

このようにスライムの輪郭が光っており、スライムの周囲にはまるで花火のように小さな星型のエフェクトが散っていくようなデザインになっています。

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

 

このように「ドラゴンクエストけしケシ!」ではアイコンやタップエフェクトなどちょっとしたビジュアルにスライムが取り入れられていました。

スライムはドラクエシリーズの中では認知度が高く、使い勝手も良いデザインです。
また、IP独自のモチーフをデザインに取り入れることで、ユーザーに対する世界観への没入感を高めているのかもしれません。

 

以上です。

ゲーム内に使用するアイコンをデザインする際のアイディアの参考になれば幸いです。



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

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

 

このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
©ARMOR PROJECT/BIRD STUDIO/NHN PlayArt/SQUARE ENIX All Rights Reserved.

 


権利者さまへ

 

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

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

 

『ドラゴンクエストけしケシ!』 動画・生配信・画像投稿に関するガイドライン

 

主な参照箇所を抜粋します。

【画像などの取り扱いについて 】

  • ドラゴンクエストけしケシ!』におけるゲーム内容、画像、映像、キャラクター、音楽など、すべての表現物は、弊社を含む共同著作者もしくは、弊社が『ドラゴンクエストけしケシ!』での利用に必要な権利の許諾を受けている権利者による著作物であり、事前の許可なく複製や頒布をすることはできません。ただし、以下の場合については、インターネット上での掲載にご利用いただくことができます。その際には、【利用条件】に従って利用してください。また、下記以外の著作物(『ドラゴンクエストけしケシ!』内の動画、音声、楽曲等)の掲載、転用は行わないでください。
  • ドラゴンクエストけしケシ!』のプレイ画像を個人使用の目的で個人のブログやツイッターなどのミニブログで利用すること。

【 利用条件 】

  • 掲載・配信に際して、著作権者を表示してください。
    掲載例)

画像利用の場合:
このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
©ARMOR PROJECT/BIRD STUDIO/NHN PlayArt/SQUARE ENIX All Rights Reserved.

 

以下は確認したガイドラインページのキャプチャです。

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

 

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

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

 

お問い合わせ