※アフィリエイト広告が含まれます

デザイン考察

ディズニーツムツム デザイン考察

今回はリリースから11周年を迎えた老舗パズルゲームの「ディズニーツムツム」(以下、ツムツムについて考察していきます。

このゲームの特徴は以下。

ジャンル パズルゲーム
対応OS iOS/Android/
開発 NHN PlayArt
価格 基本無料(一部ゲーム内課金あり)
リリース日(日本) 2014年1月29日
キャラ表現 3D
UIのテイスト 質感を表現した、スキューモーフィズム
キャラ獲得方法 ガチャ

LINEアカウントを用いて登録し、LINEの友達とスコアを競うパズルゲーム

ゲーム内に広告で得られるリワードも多数用意されているのが特徴。

ガチャは基本、パズルプレイで得たコインで回す形で、長年のユーザーであればもはや課金が必要ないくらいの資産があるかも?

ツムツムのデザインの特徴

フォントサイズ

1080px ×2340px基準でフォントサイズを探ってみました。

実際のフォント通りではないですが、下記のサイズ感になっています。

縦持ちのアプリのため、画面が広がるタイプでも無いため全体的にフォントサイズは大きめな印象があります。

ユーザー名 40〜42px 本文 34〜36px
ヘッダー数値 34〜36px 本文(小) 32〜34px
プレイボタン 78〜80px 本文(最小) 28〜30px

使用されているフォントは「ハミングStdB」で間違い無いでしょう。

 

使用カラー

全体の色味として青系の色味をベースに使用し、黄色やピンクなどの華やかな色ではっきりとしたアクセントカラーが使われています。

この色味の組み合わせと配分で、ツムツム感がだいぶ定着しているように思います。

フェルト調の温かみのあるUI

UIのテイストはフェルト調の温かみのあるデザイン

テクスチャや立体的な影や光源の表現、ステッチや膨らみなど、質感を表現するための工夫がいくつも重なっています。

全ての要素をフェルト調で仕上げるのではなく、ハートをぷっくりとした光沢のある質感にしたり、バッジっぽいデザインに仕上げたイベント報酬、コインやルビーなどもそれぞれの質感を感じさせる表現になっています。

これにより、フェルトのみの単調な表現を回避し、物質的な表現をUI全体で意識。逆にいろんな質感を取り入れることでフェルト調のUIも強調しているように感じます。

ディズニーの青

ディズニーのYouTubeチャンネルやWalt Disney Picturesのロゴ、各アニメーションのお城のオープニングなど、青が印象的に使われているディズニー

ツムツムもベースカラーの選定はそういった要素から用いられているのかもしれません。

パズル操作の簡単さと、爽快なスキル演出

可愛らしいホーム画面とは裏腹に、パズルゲーム中のUIは爽快感、気持ちよさを刺激する工夫が多数!

フィーバー中は電飾が出現して虹色に輝いたり、プレイ中はほとんど視認できないですが1消去で獲得したスコアや画面上部に吸い込まれるコイン。

スキル発動に必要な消去されたマイツムがスキルボタンに吸い込まれる、などさまざまな要素が画面に現れては消えていく。

ツムが消去されていくエフェクトも表示されて画面は情報の洪水です。

視認性や可読性、情報の優先度で要素を削りがちですが、こういった爽快感や派手さを演出するためにあえて全ての要素を出し切るクリエイティビティはぜひ参考にしたいです。

 

ツムツムの各画面を見てみる

ホーム画面

まずホーム画面から。

画面下部に大きく、そして一番目立つアクセントカラーで「プレイ」するボタンが配置されています。

ツムツムはパズルのインゲーム自体が一番のウリなので、そこへのアクセスや誘導が最優先されるため、最も有効なデザインといえます。

また、ハートの数がプレイできる数なので、ここだけピンクが使われている点が良い。

あえて数値だけでなく、5個ハートを並べる表現も分かりやすさと可愛らしさが両立されている点が素晴らしいです。

黄色いフェルトが主に押せるボタンとして表現されていますが、左側の画面切替タブとして機能しているボタンの非アクティブ状態、青も形状やアイコンでボタンとして認識できるような配慮がされています。

ツムリスト

所持しているツムが2×4のリストで表示され、選択中のツムが画面上部に表示されます。

縦持ちのゲームは押せる要素を画面下部に表示するのが割と鉄則となっており、ツムツムもそれを意識しているようです。

表示要素やスキル説明はシンプルで省略されており、基本的にはプレイすることでユーザーがスキル内容を把握したり覚えたりする形のようです。

パズルゲーム画面

パズル中の画面も、フェルト調のUI。

ツムが立体の3D表示(だと思う)になっており、うっすらシャドウも付いてます。

消去する際に、触れているツムが大きくなり、光るラインがガイドとなって繋がった後、エフェクトと共に消去されます。

最後のツムは光る円と共に数値も表示され、これが連続して消去されることによって画面が賑やかになり、気持ち良さや爽快感に繋がります。

イベント画面

イベント画面、上図は2025/3現在開催されているデザインになります。

毎月、趣向を凝らしたイベント画面になっており、デザイン性の高さや表現の幅が広く、アニメーションも凝っているため大変刺激になります。

ディズニーの世界観やクオリティを踏襲した雰囲気もあり、大変素晴らしいです。

ディズニーのポスター作品が多数収録された書籍があり、こちらのクオリティと似た感動を覚えます、気になる方はぜひ読んでみてください。

まとめ:最高峰スマホパズルゲーム

ディズニー作品のクオリティに負けないくらいの熱量を感じる、UIの表現もパズルゲームの爽快感や気持ち良さを感じるハイクオリティのアプリです。

今まだ第一線でユーザーを楽しませる本ゲーム、今後も要チェックのデザインでした。

 

-デザイン考察
-, , ,