見出し画像

ケーススタディ:どうぶつの森にデザインを学ぶ

こんにちは。グラフィックデザイナーの安村シンです。

今回は番外編として、いま大人気のゲーム『あつまれ どうぶつの森』(nintendo swich)からデザインを学ぶ、というケーススタディの記事を書きました。

こちらのゲームはいま大人気で、子供はもちろん親世代の人たちも含めて多くのファンがいます。

この人気の影には、きっとデザインの力も働いているはず。
そんな思いから調べてみたら、デザインの秘密がたくさん見つかったので記事にまとめました。

さあ、森へ学びにいきましょう!


1.読むストレスと、かわいさのバランス

「あつまれ どうぶつの森」は、ゲームのなかで、同じ島にいる村人とお話をすることができます。
この時のUIというか、フォントの選び方が特徴的で驚きました。
普通なら書体はなるべく統一するのが原則ですが、どうぶつの森ではゴシック体と丸ゴシック体が共存しています。

画像1

「たぬきち」はこのキャラクターの名前です。その名前の部分は丸ゴシックですが、しゃべってる内容の部分はゴシック体となっています。

もし、両方とも丸ゴシック体だったら、こうなります。

スクリーンショット 2020-04-19 0.25.47

(↑かわいいですね)

全部丸ゴシックのバージョンは、かわいいのですが、やや可愛すぎる気がします。
そしてなにより、Swichの小さい画面では「ぬ」や「だの濁点」の文字が潰れぎみになってしまいそうです。
これでは若干、視認性に懸念が残ります。

スクリーンショット 2020-04-19 0.33.37

そこで、あらためて「あつまれ どうぶつの森」で使用されているフォントをみると、そのあたりの視認性をバッチリクリアしています。

画像14

(↑読みやすいんだなも!)


■ このフォントは何者なのか!?

いったいこのフォントは何者なのか!?フォント警察としては、なんとしても書体を突き止めたい・・・ということで、何を使っているのか調べてみました。

丸ゴシック体は、おそらくフォントワークスさんの「スーラ」であると分かりました。名前部分と、ふりがな部分です。

スクリーンショット 2020-04-19 0.38.26

そして肝心のゴシック体。これは結論から言うと見つかりませんでした。

調べてみると、どうぶつの森シリーズは昔からこの「絶妙にポップだけど読みやすいゴシック体」を使い続けているようです。
これはひょっとすると、オリジナルフォントかもしれません。

しかし、「スーラ」が見つかるなら、ゴシック体もなにかベースとなるフォントがあるはず。それに、漢字も含めて全部がオリジナルフォントなんて、大変すぎるのでありえない。
そこで、全力投球して調べてみたところ、

分かりました。

漢字と数字部分はおそらく、同じくフォントワークスさんの「FOT-ロダンNTLG Pro」で形状がほぼ一致しました。

スクリーンショット 2020-04-19 0.42.07

(どこに本気を出しているのか)

予想としては、シリーズの初代である64版『どうぶつの森』のときに、平仮名のオリジナルフォントが開発されていて、それをブラッシュアップして歴代使用している。そして漢字については既存のフォントを使用しているとみました。
オリジナルのひらがな・カタカナ+既存の数・漢字の合成フォントでできていると思われます。

【合成フォントとは】
ひらがな・カタカナ・漢字・英数字など種類ごとに違う書体を振り分けて、組み合わせたもの。ブランドや雑誌ごとにオリジナルの合成フォントが存在したりする。

う〜ん、いきなり奥が深い。沼に片足をつっこんでしまいました。

【注!】上記のフォント警察の捜査ですが、noteを読んだ方からのコメントにより誤認逮捕だったことが判明しました…(2020年4月29日現在)
記事の一番最後に追記しております。フォント沼の深さを思い知りました。。


2.「色分け」という差別化術

さて、デザインの話に戻ります。
当ゲームのなかで、村人話しかけてみてもう一つ気がついたのは、
セリフをいう発言者名の吹き出しの色が、相手によって変わることです。

スクリーンショット 2020-04-19 0.53.47

これは、セリフの発言者が誰なのかを分かりやすくする工夫の1つと思われます。
なにも工夫をしないでいると、吹き出しの形は固定されているため、誰が喋ってるのか分かりにくい現象が起きがちです。
ひと昔、いやふた昔くらい前のゲームなら、吹き出しのなかにバストアップをいれたりするくらいです。

スクリーンショット 2020-04-19 0.56.25

(↑ひと昔・ふた昔の例)

色分けとは、デザインにおいて非常に有効な手段です。

これは特に情報のグループ化で役に立ちます。

たとえば「日付の話はこの色」「値段の話はこの色」などと、話題ごとに色を設定することで、説明せずともグループがわかるようになり、ストレスなく読むことが可能となる場合があります。

スクリーンショット 2020-04-19 1.06.26

(↑デザインには目を瞑って、色分けの効果だけを見てください

名前部分の色分けは、まさにこの一種。

う〜ん、どうぶつの森、深い。


3.「不要な要素」の必要性について

デザインは、シンプルであればあるほど良い、というのが昨今の主流の考え方です。

しかし、それも時と場合によります。
僕は『あつまれ どうぶつの森』のこちらの画面をみて、「不要な要素も必要なんだ」と感じました。

画像9

さてどこでしょうか。

ここです。

スクリーンショット 2020-04-19 1.17.41

左側には、謎の波マークとタヌキのシルエット
右側には現在地マークのような何か。

この部分のおかげでとてもスマホ感が出ているのですが、
機能としてはWi-Fiに繋いでいてもとくに光ったりせず不要な部分です。
現在時間の表示も、この画面で確認する人は少ないだろうという判断からか、グレーで表示されています。

スマホ感を出すための要素としてあるらしき謎のタヌキのシルエットは、デザイン的にはとても重要である不要なパーツ。
「不要な要素」が必要である場合もある、と改めて気づかされました。


4.わかりやすく、楽しい一覧のヒミツ

最後は、「たぬきマイレージ+」の画面から学びます。
たぬきマイレージ+の画面とは、こちらです。

画像11

この画面、なかなかすごいなと感じました。

なぜなら「なんとなく眺めてるとワクワクする」からです。

「たぬきマイレージ+」とは、ゲームを進めているうちに特定の行動をするとボーナスが貰える、という仕組みです。こちらの一覧画面で「マイルGET!」をチェックすることで初めてボーナスが加算されるようになっています。

画像12

(↑マイルGet!も、スタンプ部分を隠して上から表示されるため分かりやすい)

このワクワクする仕組みは、なんなんだろう?と立ち止まって考えてみると、
正体の一つは、おそらくこの1個1個の記事の背景イラストにあるのではないか、と感じました。

ジャンルごとに、「釣りの話は背景が海のイラスト」「昆虫の話は背景が草のイラスト」など、パッとみて「いろんなジャンルがあり、いろんなボーナスが入るらしい」と情報が伝わってくるようになっています。

画像13

(↑村人に関するものは、村人をイラスト化した背景)

ただ色分けするだけでなく、イラストをうっすら交えることで「各ジャンルのイメージ」まで同時に伝えています。

ハンコの形がジャンルごとに違う点も、もちろんワクワクの演出のひとつで
集めたときの達成感にもつながってくる要素だと思います。
ですが、まずハンコがない序盤のうちに「げぇー、たくさんある・・・」と思われてしまっては、集める気も起きません。笑

この一覧ページのデザインには、相当なおもてなし力が集約されているように感じました。こんなデザインができる人を、とても尊敬します。


おわりに

いかがでしたか?

視点を変えると見え方が変わる。ゲームをしている人にとって特に、身近なデザイン例のご紹介でした。

ちなみに私自身は、このゲームの進み具合がとても遅いようです。
周りの方がバシバシと街を発展させているのを見て衝撃を受けています。

スローライフを楽しむゲームですから、それでいいのです。

さて、今回の「あつまれ どうぶつの森」にデザインを学ぶ、というテーマは
もともとはaoki kanaeさんがツイートしていたものです。

(↑文字の長体率を見るとは・・・恐るべしです)

そのあと冗談のノリで、カナエさんからnote化のリクエストを頂いたのですが
それを間に受けて書いてみました。笑

そうしていざ記事を書こうとゲーム画面を見てみると、それまで無意識で気づいていなかった隅々までデザインされていて、学ぶことがたくさんありました。

身近なところに目を向けて、視点を変えてみると新しい発見があります。
あつ森に限らず、デザインはいろんなところに存在しています。

身の回りをみて、「ひょっとしてこれもデザイン?」と探してみるのも
おもしろいかもしれません。


追記:誤認逮捕のおしらせ

おわりの後に、まことに残念なおしらせです。

戦術のフォント警察による捜査、「オリジナルフォント+ロダン NTLG」の見立てについて、誤認逮捕であったことが判明しました。

至らぬ限り、まことに、もうしわけありません。。。

noteのコメントより有力な情報を寄せて頂き、再調査したところ、
オリジナルフォントではなく「ロダンわんぱく」であることが判明しました…!

スクリーンショット 2020-04-29 21.55.16

(↑ほぼ一致……!!!だなも)

細部での「、」や「!」の形状の違い、濁点のサイズの違いはあれど、これはもう、まさに、ほぼ一致。

漢字部分についても「ロダン NTLG」と断定していましたが、「ロダンわんぱく」も「ロダン NTLG」も、元祖となる「ロダン」の漢字を使用しているとの情報が・・・!

スクリーンショット 2020-04-29 22.00.52

(漢字は、元祖ロダンのお姿でありました・・・敬礼)


さらに。

なんとふりがな(ルビ)の部分は、名前部分にも使われている「スーラ」を元にしたフォント「UD丸ゴ」であるとの指摘も頂きました。

実際に比べてみると・・・!

スクリーンショット 2020-04-29 22.17.51

(↑似てるけど・・・全然ちがうっっっ)

つまり真相は、こういうことのようです。

スクリーンショット 2020-04-29 22.43.13

まさか・・・・

3種類のフォントの組み合わせとは・・・!!!

あつまれ!どうぶつの森。

奥が深い。なんておそろしいゲームなんだ・・・!
ますます隅々から、目が離せません!

(最後までお読みくださり、ありがとうございました!)


この記事が参加している募集

おうち時間を工夫で楽しく

いつもありがとうございます!
631
1988年生まれ。元パッケージデザイナー。2018年からフリーのグラフィックデザイナー。東京都在住。 Twitter→https://twitter.com/shinworks_net

この記事が入っているマガジン

デザインのはなし
デザインのはなし
  • 16本

グラフィックデザインにまつわる話を書いています。

コメント (4)
拝見しました!
僕自身も、あつ森をたくさんプレイしているのですが、そのような観点で見たことなかったのでとても新鮮で面白かったです。
素敵なnoteをありがとうございました!
ヨウさんも、あつ森ユーザーなんですね!
ゲームにハマればハマるほど、画面をちゃんと見なくなっていく気もしています。笑
新鮮な気持ちで、またあつ森を楽しんで頂けたら嬉しいです。
コメントありがとうございます!
はじめまして。僕もあつ森ユーザーです。
早速ですが、ゴシック体について追記いたします。
肝心の平仮名用で使用している書体は、オリジナルフォントではありません。
平仮名用の書体は、フォントワークスの「ロダンわんぱく」というかな書体で、一部のテレビ番組(日本テレビ系列の「天才!志村どうぶつ園」等)のテロップ書体としても使われている書体です。
フォントワークスから発売している「ロダンわんぱく」と「ロダンNTLG」は、元々ゴシック書体の「ロダン」にウエイトを合わせたかな書体で、OpenTypeバージョンは予め「ロダン」の漢字を組み合わせた総合書体としても使われています。
因みに、この2つの書体はモリサワからも「タイプラボN(NTLG)」や「わんぱくゴシックN(わんぱく)」としてもリリースされていますが、ラテン文字・数字・「!」などの約物が「新ゴ」・漢字を含まない等、少し異なっています。

丸ゴシック体に関しても、名前部分と一部の本文は「スーラ」ですが、ふりがな部分は「スーラ」をベースとしたUD書体「UD丸ゴ」です。

長文、失礼致しました。
Hayamaさん、初めまして!

「ロダンわんぱく」、本当にそうですね・・・!!フォント警察を名乗りながら、まったくの誤認逮捕をしてしまいました。陳謝いたします・・・。

濁点については、文字に食い込んでいないようで、やはり変形しているみたいですね。
漢字だけテイストが違うと思っていたら、ロダンの漢字だったんですね…!こちらは知識不足でした。大変勉強になります。
句点や「!」マークなどは「新ゴ」のものになっているように見えますね。

「スーラ」で名前部分が一致したため、油断していましたが
ふりがな部分はUD丸ゴが混じっているんですね…!

諸々、事実とことなる部分は速やかに訂正させて頂きます。
間違いがあり、すみません。追記を頂き、ありがとうございます!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。