UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

2024年10月末にサービスが開始された『Pokémon Trading Card Game Pocket（ポケポケ）』でニューモーフィズムが採用されていました。

ここまで大型タイトルのスマホアプリに採用されている事例は他に知らなかったので驚きました。
数年前からずっとニューモーフィズムは流行ると言われていたものの、積極的に採用されているイメージがあまりなかったからです。

今回はそんなニューモーフィズムについて解説します。

ニューモーフィズムとは？

ニューモーフィズムについて説明する前に、過去のデザイントレンドを紹介した方が理解しやすいため、先にそれらの説明をします。

スキューモーフィズム

スキューモーフィズム（skeuomorphism）とは、現実にある物質の質感に似せるデザインのことです。
初期のiPhoneのUIはスキューモーフィズムで、各アイコンに光沢があったり各アイコンにもリアルな質感がありました。

ボタンもちょっと手前に盛り上がっているような見た目になるため、ボタンがボタンだと視認しやすい特徴があります。

最近だと、スマホゲームのような世界観を重視する場合によく見かけますがそれ以外で見かける機会は少なくなりました。

フラットデザイン

2010年以降、さまざさまなデバイスサイズに対応したり情報の伝わりやすさを重視するために、立体感をなくして平面的にしたフラットデザインが流行ります。

スキューモ—フィズムに比べるとかなり簡素で装飾も少なくなりました。
しかし、その分直感的に理解しにくかったりボタンが区別しにくいといった問題もありました。

マテリアルデザイン

フラットデザインの問題点である操作性の悪さを解消するため、Googleは「マテリアルデザイン」というガイドラインを定めました。

Material Design

フラットデザインとの大きな違いが「平面の中に高さを導入し、影でそれを表現する」ことです。

また、アニメーションやインタラクションによって直感的に理解しやすいデザインになりました。

ニューモーフィズム

そしていよいよニューモーフィズムです。
いままで紹介してきたスキューモーフィズムと、フラットデザイン・マテリアルデザインを合体させたような考え方です。

ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New（新しい）＋Skeumorphism（スキューモーフィズム）からきた造語。

ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ | PhotoshopVIP

特徴的なのが、マテリアルデザインのように浮かせるのではなく、背景からの凸凹で高さを表現することです。
シンプルかつキレイな見た目です。

少し前から流行っているダークモードを作りやすいというメリットもあります。

ニューモーフィズムの難しさ

ニューモーフィズムであらゆる要素に凸凹を使っていると、パッと見どの要素が押せるのか分かりにくくなるというフラットデザインの頃のデメリットが再発してしまいます。

また、ほぼ真っ白な見た目になってしまい、マテリアルデザイン以上に単調になりがちというデメリットもあります。

また、もし仮にオリジナリティを変に出そうとしてしまうと、ダークモードを作りやすいというニューモーフィズムのメリットの1つを打ち消してしまうことになります。

ポケポケにおけるニューモーフィズム

これはスマホゲームならではですが、ポケポケではニューモーフィズムを採用していることで、シンプルで美しい画面になり、ユーザーが見たいカードが目立ってみやすくなっているように感じます。

また、画面が単調で寂しくならないようにする工夫も見て取れます。
例えば、ゲーム内のアイテムアイコンによって画面全体が白っぽくならないようになっています。

こういったアイテムアイコンや装飾はゲームならではですね。

最初は凹んでいる要素はテキストやタップできない要素が入っていて、突き出ている要素はボタンなどのタップできる要素なのかな？とも思ったのですが、ユーザーネームは凹んでいてもタップできたりするので、タップできるかどうかはあまり関係なさそうです。

それでもよく使うであろうボタンには色が付いていたりなど、ニューモーフィズムでありながら、そこからさらに分かりやすくなるように工夫されています。

ただ遊ぶだけでなく、こうしたゲームのUIを意識してみるのも面白いのではないでしょうか。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！