こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からイベントのロゴデザインについて紹介します。今回は「この星に紡ぐ一手」のロゴです。ソシャゲのイベントロゴをデザインする際の参考になれば幸いです。
主な特徴は以下です！
フォントは「スキップ」
まずは使用されているフォントから見ていきます。
ロゴの元になっているフォントは、見た感じフォントワークス社の「スキップB」かと思われます。ソシャゲ界隈だと結構使われがちな印象です。
一段目は抑揚、二段目は安定した文字組み
次に文字組みを見ていきます。
ロゴは上下二段に分かれていますが、一段目の「この星に」は文字のジャンプ率が高くベースラインも上下に散り、賑やかな印象を受けます。とはいえ、上部のラインは揃えているので、一定の秩序があるようにも見えます。
二段目の「紡ぐ一手」の部分は漢字が多いこともあり、比較的落ち着いた文字組みになっています。
一段目と二段目の上下のシルエットが揃うため、イベントとしての賑やかさはありつつも、全体としては安定した見た目に見えます。
文字色は星空を表現
続いて文字の色です。
全体的に使われている色は少なめです。
ざっと分類するなら以下のような分け方でしょうか。
| ベースカラー（75％） | #3d2892 | |
| メインカラー（20％） | #feaffe | |
| アクセントカラー（5％） | #fef5fe |
文字の色をよく見ると、濃淡のある紺色の中に小さな白い点があります。このことから、文字の色は星空を意識した色だということがわかります。
光彩の色は３種類
文字の光彩の色にも注目してみます。
大雑把に分類して白、ピンク、紫の３種類が使われています。
色にはいくつか意味が含まれていると思いますが、ロゴのビジュアルに注目した場合、主に以下の意図が考えられます。
- 白：やや青を入れた白。文字色が紺なので文字と光彩を馴染ませている。
- ピンク：イベントキャラの服の色に近い色。この色があることでキャラと合わせたときに馴染みやすい。
- 紫：背景の碁盤を表現した直線に近い色。背景と馴染ませている。
ソシャゲのイベントロゴは様々な場所で使われがちです。
そのため、ロゴとイラストの親和性、関連性を高めるためにも、色を馴染ませるというのは重要なのかもしれません。
▲キャラを背景にした場合の見え方
囲碁をモチーフにしたあしらい
ロゴのあしらいに注目してみます。
「この星に紡ぐ一手」の背景のあしらいを見ると、碁盤のような直線がデザインされています。さらに、この碁盤の様な直線は丸くトリミングされ、碁石のようにも、星のようにも見えます。
碁盤をそのままの形で配置してしまうと、固い印象を与えてしまいますが、丸く切り取ることで柔らかい印象となり、女性的で「ヘブバン」の世界観にも合うように感じました。
また、文字あしらいに注目すると、碁石の黒石は文字の一部として、白石は背景に馴染むあしらいとして見れます。囲碁と言うモチーフを取り入れつつ、文字の可読性にも配慮したロゴデザインだと感じました。
碁石の配置バランス
あしらいとしての碁石の配置も見てみます。
白石の配置はロゴの左上と右下にそれぞれ配置されています
中央は目立ちすぎてしまったり、過度に窮屈な印象になってしまうため、必然的に四隅になりがちなのかもしれません。
右下の碁石の位置をよく見ると「一手」の「手」を少し下げて、「一」の下に余白を作っていることが分かります。白石のせいで全体的に重心が下がっているため、少し文字が下がっていても、全体のバランスは大きく崩れていないように見えます。
また、左上に白石については、偶然か意図的かは分かりませんが、キャラを背景した時にエフェクトと馴染んでほとんど見えないデザインになっています。ちょうど指先辺りに表示されているものの、ほとんど見えないため、ロゴの可読性と言う点で見た時に過度に悪目立ちしていないあしらいとも見える。
碁盤と星を意識したロゴアニメーション
最後にロゴアニメーションを紹介します。
イベントPVを見ると、碁盤と星の輝きをイメージしたアニメーションでした（35秒から）。SEやエフェクトの効果と相まって、ロゴにあしらわれている碁石が強調されているように感じました。
以上です。
イベントロゴをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
