ソシャゲUIデザインの歴史を自分なりにまとめてみた
UIのテイストを考えよう！じゃあ最近のソシャゲのスクショしまくろうぜ！という機会が複数回あったため、ソシャゲのスクショを年代別にまとめた資料を個人用に作ることにしました。
その資料を眺めていてジャンルやテイストは違えど一定の流行というものが見て取れ、まとめてみたら面白いかと思い備忘録的に記事にしてみました。
比較用のボタンのデザイン基本設定：
【金フチ＋青ベースで家アイコンとHOMEの文字が入ったボタン】
こちらの画像の設定をベースに各時代で良く見られたデザインを反映させたボタンを作成しました
～2013
【参考ゲーム】 パズドラ、モンスト、黒猫のウィズなど
・コントラストや立体感が強くギラギラした印象
・フォントは白に黒フチのゴシック体で見やすさ重視
・アイコンはイラストに近い書き込みの多さ
解像度が今よりも低い時代なので視認性を重視したデザインが多い
書き込みが細かくスキューモーフィズム(実物に似せた質感のデザイン)的なデザインが多かった。
ジャンプ系IPのゲームは今でもこのラインのデザインが採用されることもあるので普遍的な少年漫画的なイメージなのかもしれない
2014~2018
【参考ゲーム】 デレステ、FGO、シャドウバース、A3！など
・視認性を保ちつつ立体感やコントラストが控えめな傾向に
・アイコンがフラットに
・世界観に合わせたデザイン
解像度が上がりカードイラストが豪華になる中、UIはシンプルでフラットデザインのものが増えた。ソシャゲでストーリーが重視されるようになり世界観に合わせたデザインも増加
2019~2021
【参考ゲーム】 アークナイツ プロセカ ツイステ ウマ娘 リィンカネ 原神 など
中国・韓国発のアプリが人気になってきた頃合い
スマホの解像度や性能がさらに高くなりボタン単体の視認性よりも世界観・見栄えの良さを優先したものが増えている印象。
文字の主張はさらに下がり、ボタンの立体感や縁取りは少なく繊細なコントラストの装飾が使用されている。
2022~2023
【参考ゲーム】崩壊スターレイル ヘブバン NIKKE ハガモバ FF7エバークライシス
ボタンらしい区切りや縁取りをしないものが増えた（なので例え画像が作り辛い）
一見シンプルでも色収差がやすりガラス効果などのエフェクトを入れたり、ボタンそのものより触った時の動きをリッチにする傾向に。
エフェクトが映えるように背景が暗い色合い＋透明感系のUIが多くなってる。
まとめ
だいたいこういう流れになっている
リアルで視認性重視のデザイン
↓
フラットで視認性重視のデザイン
↓
世界観を伝える繊細なデザイン
↓
シンプルだが触った時の反応が凝ったデザイン
webデザインの流行と同様にデバイスの発展と共にイラスト的なものから２次元ながらも実体感のあるものに進化していってる模様。
今後さらなる発展が進んで３次元的なUIが主流になったらphotoshop上でボタンデザインをどうこうする時代ではなくなる日が来るかもしれない…
未来予測(おまけ)
流れが分かれば未来の予測が立つはずなので未来のソシャゲUIデザイン予想をしてみます。
【予想】
ゲーム開発は莫大な時間がかかるものなので、webデザインの流行をちょっと遅れながら取り入れている感があり、去年～今年のwebデザイン流行が来年以降のソシャゲUIデザインの方向性になる気がする。
昨今の流行を見る限り 【AI 多様性 ジェンダーレス Y2K ドローン】
あたりがキーワードになっていそう。
(AI生成の良し悪しはさておき、あのごちゃっと感・切り張り感のあるデザインは流行りと言って良さそう)
きっと未来のホームボタンはこんな感じだ！！！
・ホームが三角屋根なんて決めつけ古い！多様性の時代は地球がホーム
・フォントは1種類じゃなくて色んなのをごちゃっと使う！
・性能の高いデバイスで豪華なエフェクト使い放題！！！
・Y2Kなので宇宙ポップ！！レインボー！！！
青と金ってデザイン設定がどっかに行ってしまった…。
来年に見返して予想結果に笑おうと思います。
ここまで読んで頂きありがとうございました！
この記事が気に入ったらサポートをしてみませんか？