【採用イベントレポート】「新たな武器になる!タイポグラフィをゲームUIに効果的に落とし込むテクニックとは!?」

皆さん!こんにちは!

ブログ運営担当の黒瀧です。

今回は、先日行われた2DCG PlaNetStudioのセミナー&採用説明会「新たな武器になる!タイポグラフィをゲームUIに効果的に落とし込むテクニックとは!?」のイベントレポートをお届けします!

 今回のイベントは、なんと弊社が開発したメタバース空間「C&R Creative Studios Metaverse 」で行われました!

 なにそれ??と思ったそこのあなた!

「C&R Creative Studios Metaverse 」は日本初のクリエイター専用の仕事・交流特化型メタバースです。

現在公開されているのはまだβ1版ですので、企業PR映像やイベント情報が見られる誰でも入場可能な「リゾート地」と、クリエイターとクライアントだけが利用できる「セミナー会場」のみ公開されています。

 今夏までにはクリエイターの作品集(ポートフォリオ)を展示して発表できる「展示エリア」や、クリエイターとクライアントが交流できる「交流エリア」、ライブや講演など様々なイベントを開催できる「セミナールーム」などを追加したβ版に発展させていく計画です!

 https://www.cri.co.jp/news/004193

そして今回のセミナーが行われたのが、このメタバースの中の「セミナールーム」です。

私も実際にメタバース空間で参加したのですが、今後、新しく追加される機能も含めて期待が 膨らむ空間でした・・・!

 

 それではイベントレポートに移りたいと思います!

目次

・登壇者紹介

・タイポグラフィとは?​​

・見せるロゴと魅せるロゴ

・タイポグラフィを活用した効果的なUIデザインの例とポイント​

・まとめ

今回セミナーに登壇していただいたのは、こちらのお二人です!

Art Dir/UX Storyteiler モリケント

株式会社日本SPセンター、株式会社パズルを経て独立後MORYARTI inc.を設立。
Cygames/シテイルの『World Flipper』のUIコンセプトアーティストとして従事。
その他、YOASOBIやTOYOTA COROLLAなどのCM、サウジアラビア万博のANIME TOWNのパビリオンデザイン、東京マラソンのソーシャルマラソン、アイマリンプロジェクトでWebからキャラ衣装迄様々な部分をデザイン監修。FONTWORKSのカレンダーやWebサイトを制作。
媒体に縛られる事なくタイポグラフィからグラフィック、映像、WEB、UIUXなど広告やゲーム業界を跨ぎながらトータルでの見え方によるブランディング、アートディレクションを目指す。

C&R Creative Studios  2DCG PlaNetStudio /UIデザイナー 吉田大祐

大学卒業後、数社のデザインプロダクションを経て、2016年に株式会社アカツキへ入社。
新規事業のデザイン全般やマーケティングチームでの広告運用を行った後に、リズムゲーム『ユニゾンエアー』のリードデザイナーとして制作・デザイン監修・マネジメント業務を行う。
2021年に2DCG PlaNetStudioへ参画後、『ポケットモンスター スカーレット・バイオレット』のUI/UXデザイン開発に携わる。
現在はUE5を扱った大型タイトルのデザイン開発に従事。

 

 なんと、お二人は知り合って10年の仲・・・!

元々広告業界の飲み会で知り合ったそうです。

次回は是非お酒アリのお二人も見てみたいですね🍺

 

タイポグラフィとは?

 みなさん、タイポグラフィと聞くとどんなものを思い浮かべますか?

 タイポグラフィの一般的な定義には次の2つがあります。

  1. 文章を読みやすく見せるデザインの手法
  2. 文字でデザインを作る手法

 つまり、タイポグラフィの役割は

  1. 情報を正しく伝えること
  2. 世界観を表現すること

にあります。

 例えば、情報を正しく伝えるタイポグラフィの使われ方として代表的なものとして、任天堂のゲームではプレイヤー層が幅広いので、コアゲーマー向けのタイトルよりも特にシンプルで分かりやすく文字情報がデザインされています。

※余談ですがここに掲載されているタイトルのテキストのフォントには「ロダン」という読みやすくてキャラクター性もあるフォントが使われていることが多いです。ローカライズ時にも使われていることもあるので海外では「ニンテンドーフォント」と呼ばれているそうです

意図して使われているのかは定かではないですが、老若男女にとって認識しやすく、フォントを見ただけでワクワクし、任天堂らしさを感じ取れますよね!

一方で、世界観を表現するためにタイポグラフィが使われている作品といえば「ペルソナ5」や「スプラトゥーン」が有名ですね。

「ペルソナ5」はUIの枠を超えてアートやタイトルの顔としてタイポグラフィを使用していますし、

「スプラトゥーン」については2つのオリジナルフォントを作成してまで唯一無二の世界観の演出のために力を入れています。

 また、スマホゲームとコンシューマーゲームでもタイポグラフィの使い方に違いがあります。

スマホゲームは育成要素などが多いためコンシューマーゲームよりも情報量が多く、新たなコンテンツが追加されていくこともあり、文字の扱いが大変だそう。

吉田さんが前職で担当されていたユニゾンエアーでは、できるだけ他のアイドルゲームとの差別化を図るためとアーティストの世界観を損なわないためにタイポグラフィをたくさん取り入れていたそうです。

 UIのトーン&マナーが世界観の顔となるため、よりタイポグラフィが活きてくるのです!!

見せるロゴと魅せるロゴ

モリさんがUIコンセプトアーティストとして参画したワールドフリッパーでは、

よりワールドフリッパーらしい世界観を演出するため、オリジナルの書体が使われています。

参考:情報を伝え世界観を作る!UIデザイナーに聞いたフォントの使い方

アイテム数などの英数字と日本語を並べた時に高さが揃わないことがよくあるので、

高さを合わせるなどの工夫がされています。数字の4が少し傾いていて可愛いですね。

 細かいところまでこだわっているのが伝わってきました!

参考:情報を伝え世界観を作る!UIデザイナーに聞いたフォントの使い方

また、ゲームの全体的なバランスを崩さないために、メインストーリーや恒常イベントはモノクロのものにするなど、シンプルに統一。

 そしてシーズンごとのイベントでは変化を持たせることで、「惹きつけるためのロゴ」と「しっかりと情報を伝えるためのロゴ」を区別しています。

 さらには課金が発生するガチャページではあえてオシャレさを無くし、

パチンコ的な要素を取り入れていることが多いそう。

 「魅せるロゴ」と「見せるロゴ」の巧みな使い分けです…!

タイポグラフィを活用した効果的なUIデザインの例とポイント

▲タイポグラフィ要素を強める前

▲タイポグラフィ要素を強めたもの

上のスライドがタイポグラフィ要素を強める前のもの。

そしてタイポグラフィ要素を強めたものが下のスライドです。

 ぐっとシリアスさが増し、ファンタジー要素も盛り込まれています!

また、ゲーム以外の領域での流行りを取り入れることも意識されているそう。

 ▲皆さんが知っているハイブランドなどもフォントの変化があります

タイポグラフィを有効活用することで、素材がない場合に文字そのものを素材として扱うことができるのも大きなメリット!

まとめ

今回のイベントのポイントは以下の2点です!

  • タイポグラフィがコンテンツの世界観の顔になることを知る
  • 「魅せる書体」と「見せる書体」を分ける

 今回は、お二人のこだわりと技術についてのお話がたくさん詰まったセミナーとなりました!

普段意識せずに見ている画面でも、たくさんの工夫がされていて、

だからこそ、私たちはそのゲームの世界観に引き込まれて行くのだなと実感しました。

 ここまで読んで、イベントに参加してみたいと思ったそこのあなた!

 PlaNetStudioでは、今後もこのようなイベントを開催していきます!

 <下記リンクでセミナー案内を確認いただけます>

https://www.creativevillage.ne.jp/category/event-list/seminar/

 PlaNetStudioは現在積極採用中です!

 PlaNetStudioのデザインチームでは、案件拡大に伴い、一緒に働いていただけるメンバーを募集しております。今回ご紹介したようなテクニックをはじめ、

  • ゲームのUIデザインに興味がある
  • いろいろなゲームタイトルの制作に携わりたい
  • プロジェクトのリードやマネジメントにも挑戦したい

 そのような方、是非一度カジュアル面談にてお話ししましょう!

 ■カジュアル面談とは?

 カジュアル面談では、これまでのご経験やキャリア観をお伺いしながら、

スタジオでどのようにご活躍いただけそうかお話しできればと思います。

これからのキャリアに迷っている方や悩んでいる方も、お気軽にお申込みください!

 ▶︎カジュアル面談はこちら

https://2d-studio.crdg.jp/contact/

 以上、イベントレポートでした!次回もお楽しみに!

関連記事

  1. READ MORE

    Vtuber用トラッキングツール【nizima LIVE】を使ってみた!

    2022-01-27

  2. READ MORE

    【就活生向け 第3弾】22卒の皆さんに聞いた!「学生時代の過ごし方」

    2022-08-18

  3. READ MORE

    【初心者向け】現役デザイナーに聞いたキャラクターデザインのコツ!

    2022-04-12

  4. READ MORE

    【初心者向け】リファラル採用ってどんな採用方法?

    2021-10-06

ページ上部へ戻る