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

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

「初恋シグナル」ロゴのクオリティが高い。同じテーマで作り続けるデザイナーすごい。

こんにちは、ちょこきなこです。

 

今回は「初恋シグナル」のバナーデザインについて書いてみます。

どれも大変興味深いデザインになっていましたが、数が多いので特に気になったものを紹介します。

 

 

 

f:id:appgameui:20190829074014p:image

 

 

1:よくばりボーダーライン

f:id:appgameui:20190901101801p:plain

キャラを逆さまに配置するバナーって初めて見たかも。
レイアウトでストーリー性を持たせているのが興味深い。

 

f:id:appgameui:20190829074833p:image

正位置と逆位置でのレイアウトだけで、どちらがストーリーのメインかわかるもんなんですね。

バナーではお互いの視線が画面の外に向いているけど、イベントTOPでは視線が寄るんですね。特にストーリーの変化をデザインに落とし込んだものではないとは思いますが、印象も変わりますね。

 

2:シャッターチャンスは逃さない

 「初恋シグナル」では男女のカップリングによってロゴデザインを変えていますが、このロゴではカメラのデザインも変えています。

f:id:appgameui:20190901101723p:plain

おそらくシナリオ中に登場するカメラのデザインに合わせているなど、何かしらの必然性があるのだと思われます。(シナリオに必要なアイテムがなく未確認)

芸がこまかい…!

デザイン差分に関して知ってる方がいたら教えてください。

 

f:id:appgameui:20190829074131p:imagef:id:appgameui:20190829074158p:image

  

 

 

 

3:密着スイッチ

「密着スイッチ」のロゴでは4つのデザインバリエーションがありました。

f:id:appgameui:20190901101944p:plain

f:id:appgameui:20190901102045p:plain

f:id:appgameui:20190901102028p:plain

文字にスイッチにもデザインが入っているのが良かったです。 
文字とデザインが合致している、とても素直なデザインですよね。

 

f:id:appgameui:20190829074923p:imagef:id:appgameui:20190829074952p:imagef:id:appgameui:20190829075307p:image

f:id:appgameui:20190829075203p:image

微妙に画像に載っている文言が変わっているのが意外。
開発者のこだわりなのかな…?

 

 

4:てのひらアプローチ

f:id:appgameui:20190901102152p:plain

 

かわいい!

いやいやいやいや、このドット調のキャラクターめっちゃかわいいやんかー!!え?これゲーム中で出るの?出ないよね?これ用に作ったの?めっちゃかわいい!

f:id:appgameui:20190829075552p:image

なんで急にドット描いたし。「アプリ」だからゲームっぽいモチーフにしたのかな…。
 

 

5:ふたりぼっち

 

f:id:appgameui:20190901102231p:plain

 

顔を見せないレイアウト。キャラの顔付近を暗くするデザインはキャラクターものだとよく見かけますが、全くここまで表示させないのは珍しい…。

 

f:id:appgameui:20190820232442p:plain

 

キャラクターが十分に認知されている状態なら顔を見せなくてもユーザーはこのキャラクターが何者なのか理解できるんですね…なるほど…。

 

6:放課後ゴーストハント

f:id:appgameui:20190901102400p:plain

f:id:appgameui:20190901102440p:plain

ロゴはフリーハンドで描いたのかな。独特の文字バランス…。

 

f:id:appgameui:20190829080408p:image

f:id:appgameui:20190829080513p:image

f:id:appgameui:20190829080518p:image

キャラクターの前後の配置と関係性が伺えます。

 

 

7:おあずけテンプテーション

 禁止を示すマークがカップリングによってデザイン変えていますね。

f:id:appgameui:20190901102549p:plain

f:id:appgameui:20190901102626p:plain



 

f:id:appgameui:20190829080851p:imagef:id:appgameui:20190829080856p:imagef:id:appgameui:20190829080932p:image

黒いキラキラが特徴的。

ポップ差が増して可愛い感じが出ますね。 

 

 

8:純情アンビバレント

f:id:appgameui:20190901102710p:plain

f:id:appgameui:20190901102740p:plain

 

アンビバレント」って何、って思って調べたら「同じ物事に対して、相反する感情を同時に抱くこと」とありました。

 https://www.weblio.jp/content/%E3%82%A2%E3%83%B3%E3%83%93%E3%83%90%E3%83%AC%E3%83%B3%E3%83%88

 

f:id:appgameui:20190829081158p:imagef:id:appgameui:20190829081221p:imagef:id:appgameui:20190829081302p:image

ロゴのハートが直線的だったり、エフェクトが直線的に構築されていたりして、愛情とは相反するデザイン要素で構成されているところにアンビバレントの要素があるのだな、と感じました。

 

 

9:ないしょのミッション

特にこれといって特筆するものはないのですが、単純にクオリティが高いように見えました。

f:id:appgameui:20190901102818p:plain

色のトーンであったり、シンプルなパターン構成がすごくよくまとまっています。
色数を絞ってるのが大きそう。クオリティも高く、世界観に寄せている感じも無いので汎用的に使えちゃうデザインです。

それゆえに一度使っちゃうと同じようなデザインを使えないのも悩みどころ。

 

f:id:appgameui:20190829081447p:image

 

10:XXマーキング

f:id:appgameui:20190901102904p:plain

f:id:appgameui:20190901102934p:plain

なんて読むんだろう…?
ダブルクロスバツバツ

 

スタイリッシュな色と構成なのと、唇というデザインモチーフが少し大人っぽい雰囲気が出ています。

 

黒のベタではなくドットパターンが入っている点にデザイナーのこだわりが見て取れます。

f:id:appgameui:20190829083629p:imagef:id:appgameui:20190829083634p:image

 

 

 

11:やきもちトラップ

デザインパターン多っ!
微妙にハートの色だけ変えてますね。いや…よく見ると吹き出しの輪郭線のサイズもいじってますね…。ロゴのサイズ変更にあわせて揃えているのかな…丁寧なデザイン調整している様子。

初恋シグナル バナー

初恋シグナル バナー

初恋シグナル バナー

 

イベントTOPもバリエーションが多いようです。

f:id:appgameui:20190829083945p:image

f:id:appgameui:20190829083954p:imagef:id:appgameui:20190829083949p:imagef:id:appgameui:20190829084101p:imagef:id:appgameui:20190829084107p:image

 

 

 

まとめ

デザインのほぼすべてにハートが入っているのですが、決して一本調子になっていないのもすごい…。学園モノなのでシナリオに設定的な縛りはあるものの、感情表現豊かに構成しようとしている意欲が見て取れます。

 

同じキャラクターで、テーマが恋愛という縛りでここまでデザインバリエーションをつけられるデザイナーすごい!!