ケーススタディ：どうぶつの森にデザインを学ぶ
こんにちは。グラフィックデザイナーの安村シンです。
今回は番外編として、いま大人気のゲーム『あつまれ どうぶつの森』（nintendo swich）からデザインを学ぶ、というケーススタディの記事を書きました。
こちらのゲームはいま大人気で、子供はもちろん親世代の人たちも含めて多くのファンがいます。
この人気の影には、きっとデザインの力も働いているはず。
そんな思いから調べてみたら、デザインの秘密がたくさん見つかったので記事にまとめました。
さあ、森へ学びにいきましょう！
1.読むストレスと、かわいさのバランス
「あつまれ どうぶつの森」は、ゲームのなかで、同じ島にいる村人とお話をすることができます。
この時のUIというか、フォントの選び方が特徴的で驚きました。
普通なら書体はなるべく統一するのが原則ですが、どうぶつの森ではゴシック体と丸ゴシック体が共存しています。
「たぬきち」はこのキャラクターの名前です。その名前の部分は丸ゴシックですが、しゃべってる内容の部分はゴシック体となっています。
もし、両方とも丸ゴシック体だったら、こうなります。
（↑かわいいですね）
全部丸ゴシックのバージョンは、かわいいのですが、やや可愛すぎる気がします。
そしてなにより、Swichの小さい画面では「ぬ」や「だの濁点」の文字が潰れぎみになってしまいそうです。
これでは若干、視認性に懸念が残ります。
そこで、あらためて「あつまれ どうぶつの森」で使用されているフォントをみると、そのあたりの視認性をバッチリクリアしています。
（↑読みやすいんだなも！）
■ このフォントは何者なのか！？
いったいこのフォントは何者なのか！？フォント警察としては、なんとしても書体を突き止めたい・・・ということで、何を使っているのか調べてみました。
丸ゴシック体は、おそらくフォントワークスさんの「スーラ」であると分かりました。名前部分と、ふりがな部分です。
そして肝心のゴシック体。これは結論から言うと見つかりませんでした。
調べてみると、どうぶつの森シリーズは昔からこの「絶妙にポップだけど読みやすいゴシック体」を使い続けているようです。
これはひょっとすると、オリジナルフォントかもしれません。
しかし、「スーラ」が見つかるなら、ゴシック体もなにかベースとなるフォントがあるはず。それに、漢字も含めて全部がオリジナルフォントなんて、大変すぎるのでありえない。
そこで、全力投球して調べてみたところ、
分かりました。
漢字と数字部分はおそらく、同じくフォントワークスさんの「FOT-ロダンNTLG Pro」で形状がほぼ一致しました。
（どこに本気を出しているのか）
予想としては、シリーズの初代である６４版『どうぶつの森』のときに、平仮名のオリジナルフォントが開発されていて、それをブラッシュアップして歴代使用している。そして漢字については既存のフォントを使用しているとみました。
オリジナルのひらがな・カタカナ＋既存の数・漢字の合成フォントでできていると思われます。
【合成フォントとは】
ひらがな・カタカナ・漢字・英数字など種類ごとに違う書体を振り分けて、組み合わせたもの。ブランドや雑誌ごとにオリジナルの合成フォントが存在したりする。
う〜ん、いきなり奥が深い。沼に片足をつっこんでしまいました。
【注！】上記のフォント警察の捜査ですが、noteを読んだ方からのコメントにより誤認逮捕だったことが判明しました…（2020年4月29日現在）
記事の一番最後に追記しております。フォント沼の深さを思い知りました。。
2.「色分け」という差別化術
さて、デザインの話に戻ります。
当ゲームのなかで、村人話しかけてみてもう一つ気がついたのは、
セリフをいう発言者名の吹き出しの色が、相手によって変わることです。
これは、セリフの発言者が誰なのかを分かりやすくする工夫の１つと思われます。
なにも工夫をしないでいると、吹き出しの形は固定されているため、誰が喋ってるのか分かりにくい現象が起きがちです。
ひと昔、いやふた昔くらい前のゲームなら、吹き出しのなかにバストアップをいれたりするくらいです。
（↑ひと昔・ふた昔の例）
色分けとは、デザインにおいて非常に有効な手段です。
これは特に情報のグループ化で役に立ちます。
たとえば「日付の話はこの色」「値段の話はこの色」などと、話題ごとに色を設定することで、説明せずともグループがわかるようになり、ストレスなく読むことが可能となる場合があります。
（↑デザインには目を瞑って、色分けの効果だけを見てください）
名前部分の色分けは、まさにこの一種。
う〜ん、どうぶつの森、深い。
3.「不要な要素」の必要性について
デザインは、シンプルであればあるほど良い、というのが昨今の主流の考え方です。
しかし、それも時と場合によります。
僕は『あつまれ どうぶつの森』のこちらの画面をみて、「不要な要素も必要なんだ」と感じました。
さてどこでしょうか。
ここです。
左側には、謎の波マークとタヌキのシルエット。
右側には現在地マークのような何か。
この部分のおかげでとてもスマホ感が出ているのですが、
機能としてはWi-Fiに繋いでいてもとくに光ったりせず不要な部分です。
現在時間の表示も、この画面で確認する人は少ないだろうという判断からか、グレーで表示されています。
スマホ感を出すための要素としてあるらしき謎のタヌキのシルエットは、デザイン的にはとても重要である不要なパーツ。
「不要な要素」が必要である場合もある、と改めて気づかされました。
4.わかりやすく、楽しい一覧のヒミツ
最後は、「たぬきマイレージ+」の画面から学びます。
たぬきマイレージ+の画面とは、こちらです。
この画面、なかなかすごいなと感じました。
なぜなら「なんとなく眺めてるとワクワクする」からです。
「たぬきマイレージ+」とは、ゲームを進めているうちに特定の行動をするとボーナスが貰える、という仕組みです。こちらの一覧画面で「マイルGET!」をチェックすることで初めてボーナスが加算されるようになっています。
（↑マイルGet!も、スタンプ部分を隠して上から表示されるため分かりやすい）
このワクワクする仕組みは、なんなんだろう？と立ち止まって考えてみると、
正体の一つは、おそらくこの１個１個の記事の背景イラストにあるのではないか、と感じました。
ジャンルごとに、「釣りの話は背景が海のイラスト」「昆虫の話は背景が草のイラスト」など、パッとみて「いろんなジャンルがあり、いろんなボーナスが入るらしい」と情報が伝わってくるようになっています。
（↑村人に関するものは、村人をイラスト化した背景）
ただ色分けするだけでなく、イラストをうっすら交えることで「各ジャンルのイメージ」まで同時に伝えています。
ハンコの形がジャンルごとに違う点も、もちろんワクワクの演出のひとつで
集めたときの達成感にもつながってくる要素だと思います。
ですが、まずハンコがない序盤のうちに「げぇー、たくさんある・・・」と思われてしまっては、集める気も起きません。笑
この一覧ページのデザインには、相当なおもてなし力が集約されているように感じました。こんなデザインができる人を、とても尊敬します。
おわりに
いかがでしたか？
視点を変えると見え方が変わる。ゲームをしている人にとって特に、身近なデザイン例のご紹介でした。
ちなみに私自身は、このゲームの進み具合がとても遅いようです。
周りの方がバシバシと街を発展させているのを見て衝撃を受けています。
スローライフを楽しむゲームですから、それでいいのです。
さて、今回の「あつまれ どうぶつの森」にデザインを学ぶ、というテーマは
もともとはaoki kanaeさんがツイートしていたものです。
#あつまれどうぶつの森
— aoki kanae┃ designshop aoki (@designshop_aoki) April 12, 2020
あつ森のたぬきマイレージ。
文言の長さによって長体かけたりルビの長さによってスペースあけたりタイポの観点でも勉強になりますわ。
マイルのジャンル分の背景もわかりやすいのう。
なにからでも勉強できるのが #デザイン のいいところ。 pic.twitter.com/JEut8HDOs7
（↑文字の長体率を見るとは・・・恐るべしです）
そのあと冗談のノリで、カナエさんからnote化のリクエストを頂いたのですが
それを間に受けて書いてみました。笑
そうしていざ記事を書こうとゲーム画面を見てみると、それまで無意識で気づいていなかった隅々までデザインされていて、学ぶことがたくさんありました。
身近なところに目を向けて、視点を変えてみると新しい発見があります。
あつ森に限らず、デザインはいろんなところに存在しています。
身の回りをみて、「ひょっとしてこれもデザイン？」と探してみるのも
おもしろいかもしれません。
追記：誤認逮捕のおしらせ
おわりの後に、まことに残念なおしらせです。
戦術のフォント警察による捜査、「オリジナルフォント＋ロダン NTLG」の見立てについて、誤認逮捕であったことが判明しました。
至らぬ限り、まことに、もうしわけありません。。。
noteのコメントより有力な情報を寄せて頂き、再調査したところ、
オリジナルフォントではなく「ロダンわんぱく」であることが判明しました…！
（↑ほぼ一致……！！！だなも）
細部での「、」や「！」の形状の違い、濁点のサイズの違いはあれど、これはもう、まさに、ほぼ一致。
漢字部分についても「ロダン NTLG」と断定していましたが、「ロダンわんぱく」も「ロダン NTLG」も、元祖となる「ロダン」の漢字を使用しているとの情報が・・・！
（漢字は、元祖ロダンのお姿でありました・・・敬礼）
さらに。
なんとふりがな（ルビ）の部分は、名前部分にも使われている「スーラ」を元にしたフォント「UD丸ゴ」であるとの指摘も頂きました。
実際に比べてみると・・・！
（↑似てるけど・・・全然ちがうっっっ）
つまり真相は、こういうことのようです。
まさか・・・・
３種類のフォントの組み合わせとは・・・！！！
あつまれ！どうぶつの森。
奥が深い。なんておそろしいゲームなんだ・・・！
ますます隅々から、目が離せません！
（最後までお読みくださり、ありがとうございました！）
サポート頂いた分は、ビール代として、ひとり打ち上げに有効活用させて頂きます。 がんばれます。ありがとうございます！