もっと読む

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

こんにちは。ブログ運営担当のARTチーム石川です。4月を迎え暖かい陽気が続いて過ごしやすい時期になりました。皆様いかがお過ごしでしょうか。私は花粉症がひどいのでティッシュが手放せない日々を送っ…

続きを読む

もっと読む

アニメチーム ポートフォリオのススメ~構成とイラスト~

こんにちは!2DCGプラネットスタジオ アニメーションチームのKです。今回は、2Dアニメーション領域での就職を目指す方に向けて、「ポートフォリオの構成」と「イラスト作品」についてお話しします。…

続きを読む

もっと読む

【初心者向け】デジタル線画のコツをご紹介!

こんにちは。ブログ運営担当ARTチームの石川です。蒸し暑い日が続いていますが皆様いかがお過ごしでしょうか。じめじめとした気候に体調など崩されないようにご注意ください。…

続きを読む

もっと読む

2年目デザイナーが東京本社で修行!?感想レポ

こんにちは!2DCGプラネットスタジオ、デザイナーのオハシです。突然ですが、皆さんは「出張」経験されたことはありますか?なんと私オハシ、新卒2年目にして初の出張─本社で約2か月…

続きを読む

もっと読む

【Spine】2Dアニメーションを2.5次元にする方法

はじめまして! 2DCGプラネットスタジオ アニメーションチームの馬場です。  皆様Spineというものをご存じでしょうか?Spineとはイラストを素材にアニメーションを作るソフト…

続きを読む

もっと読む

これからVTuberを始める方へ!トラッキングの基礎知識とツール紹介

はじめにこんにちは、アニメーションチーム所属のハシモトです!皆さんはVTuberをご存じでしょうか。現在は多くのタレントさんが活動しており、皆さんも1度は目にしたこ…

続きを読む

もっと読む

Live2D・Spineで作るアニメーションの12原則の話 ②カーブを使いこなそう

アニメチームのKです!今回はアニメーションの12原則とグラフアニメーションの話の第二回。前回は前提知識のご紹介をさせていただきました。Live2D・Spineのアニメー…

続きを読む

もっと読む

【新卒インタビュー】新人研修って何するの?入社後の“最初の一歩”をのぞいてみよう!

こんにちは、ARTチームのブログ担当アダチです!9月に入り、就職活動を真剣に考え始める方も多いかと思います。「入社したらすぐ現場に出るのかな?」「研修って実際何をするの?」そん…

続きを読む

もっと読む

アニメチーム ポートフォリオのススメ~書類選考と中途採用~

こんにちは!2DCGプラネットスタジオ アニメーションチームのKです。2Dアニメーション領域での就職を目指す方に向けての記事の第四弾です。ポートフォリオのススメシリーズの最終回…

続きを読む

もっと読む

<プロジェクトを動かす人の話>PM/進行管理ってこんな仕事です。

2DCGプラネットスタジオ PMチームのお仕事とははじめまして。今回から社内ブログを担当することになった、PMチームの”とみ”です。初回はゲーム制作に関わる「PM(…

続きを読む

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

アニメチーム ポートフォリオのススメ~構成とイラスト~

【初心者向け】デジタル線画のコツをご紹介!

2年目デザイナーが東京本社で修行!?感想レポ

【Spine】2Dアニメーションを2.5次元にする方法

これからVTuberを始める方へ!トラッキングの基礎知識とツ...

Live2D・Spineで作るアニメーションの12原則の話 ...

【新卒インタビュー】新人研修って何するの?入社後の“最初の一...

アニメチーム ポートフォリオのススメ~書類選考と中途採用~

<プロジェクトを動かす人の話>PM/進行管理ってこんな仕事で...

【採用イベントレポート】「新たな武器になる!タイポグラフィをゲーム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. もっと読む

    【クリーク・アンド・リバー社主催】Game meetsってどんなイベント!?

    2021-09-07

  2. もっと読む

    ※終了済みのイベント※2Dアニメーションチームイベント「2D動かさナイト」レポート

    2024-03-06

  3. もっと読む

    ※終了済みのイベント※【PlaNetStudio新卒歓迎BBQ】2DCGクリエイターの絆を深める交流イベント

    2024-06-10

  4. もっと読む

    ※終了済みのイベント※クリエイター必見!クリエイティブ業界のキャリアについて考えるウェビナー開催!

    2022-03-10

採用情報

ABOUT

2DCG PlaNetStudio
最高のクリエイティブ制作・クリエイターの キャリアデザインができるスタジオを目指しています。

運営:
2DCG PlaNetStudio

所属:
C&R Creative Studios

チーム別記事一覧

ページ上部へ戻る