ゲームで遊びながらタイポグラフィを感覚的に学べるサイトまとめ

デザイナーが楽しみながらタイポグラフィを学べるサイトまとめ

タイポグラフィの勉強ってどこから入って良いのか最初はよくわかりませんでした。
初心者の方は最低限フォントの分類と文字詰めの基礎だけ覚えておけば応用が効くので最初に覚えておきましょう!
関連書籍もたくさん出ていますが、まずはウェブの情報から学ぶのが良いかと思います。
今回紹介するのはタイポグラフィを感覚的に学べるゲームです。

 

この記事の目次(クリックで項目へジャンプします)

ウェブサイト上のゲームでタイポグラフィを学ぶ(無料)

1.KernType

KernType

http://type.method.ac/

これ、初心者必見です。(すごい有名なサイトですが)
デザインにおいて、並べた文字をより美しく見せるにはカーニング(文字詰め)という作業が必須になってきます。というか、出来ないとまずいです
主に文字と文字の隙間を一定間隔に並べる作業なのですが、簡単そうに見えてやってみると意外と難しいものです。

このサイトではカーニングを採点して評価してくれるので、初心者じゃなくても楽しめると思います。
※今回これを紹介したくて記事を書きました。

 

2.Shoot the Serif (音が出るので注意)

ShoottheSerif

http://www.tothepoint.co.uk/more/fun/shoot_the_serif/index.html

※音出ます

画面の真ん中にある「Junior」「Middle-weight」「Senior」から難易度を選んでゲームスタート。
いくつかある文字の中からセリフフォントのみをクリックして撃ちぬいていきます。
ミスが多かったり時間切れになるとゲームオーバーです。息抜きついでにフォントの勉強をしましょう。
実際にゲームをしている画面

 

補足:セリフフォントとサンセリフフォントの違いについて

初心者の方は「セリフフォント」と言われてもさっぱり何のことかわからないと思うので補足します。

文字の種類について

文字を大まかに分けると2種類です。赤丸で囲んだ部分の「うろこ」があるかどうか。トメ・ハネ的なあれです。
欧文フォントの場合「うろこ」があるものを「セリフフォント(serif-font)」、ないものを「サンセリフフォント(SansSerif-font)」と呼びます。
日本語だと「明朝体(うろこ有)」と「ゴシック体(うろこなし)」と分類されます。

一般的に、長文を読むのに適しているのがセリフフォント、明朝体。見出しなどに使用するのがサンセリフフォント、ゴシック体とされています。
新聞を見るとよくわかると思います。

 

3.typewar

typewar

http://www.typewar.com/

結構好き

シンプルなフォント当てクイズです。

 

4.フォント検定

フォント検定

http://ampersand.xyz/fontest/

こちらもフォント当てクイズですが、日本語版です。
出題されるフォントの多くは、デザイナーで知らない人はいないであろうモリサワのフォントから。

同社のウェブサイトを見るとわかりますが「文字ってこんなに美しいんだ」と感動してしまうほど素晴らしいフォントばかりを取り扱っています。
一つひとつのフォントはなかなかいい値段がするのですが、MORISAWA PASSPORT ONEを購入すれば年間49,800円(税別)で全てのフォントが使い放題になります。
比較的どこでも購入できますが、Amazonで買えば40,000円ちょっと。1万円くらい安く買えるのでおすすめ。

 

5.SHAPE TYPE

SHAPETYPE

http://shape.method.ac/

これはどちらかというとカリグラフィに分類されると思うのですが、とても好きなので紹介します。

ピンクで表示されている部分をドラッグで引っ張って文字を元の形に戻すゲームです。シェイプの隙間や太さが絶妙に計算されて作られているのが良くわかるので一度は絶対やってほしい。
イラストレーターのベジェ曲線を触ったことがある方は感覚がわかると思いますが、初心者の方が触っても何となくわかると思うので、イラレの勉強ついでにやってみてはいかがでしょうか?

 

6.Helvetica VS Arial(音が出ます)

HelveticaVSAraial

http://www.mimeartist.com/helvetica/

Arialが襲ってきます。(音が出るので注意)

何かと話題になるHelveticaとArial。白い方のHelveticaをドラッグ・アンド・ドロップでジャンプさせてArialを倒しましょう。

mとwが強いです。

 

おまけ

1.KILL COMIC SANS(音が出ます)

KILLCOMICSANS

http://www.objectiveinc.com/kill-comic-sans/

海外でことごとく酷評されている有名フォントCOMIC SANSをひたすら撃ち続けるゲームです。
あまりのダサさに世界中でバカにされまくっているので、興味のある方は「COMIC SANS ダサい」で検索してみると良いかもしれません。

ゲームが楽しいかどうかは別として音がデカイです。

 

2.Pixact.ly

pixact.ly

http://pixact.ly/

これも有名ですね。タイポグラフィとは直接関係ありませんが、指定されたピクセル数をドラッグ・アンド・ドロップで描写するゲームです。

間違えた数値分だけ加点され、点数が低いほど好成績となります。
デザインの感覚を養うのに良いので紹介しました。

 

おわりに

いかがでしたか?最近あまり勉強する時間がなかったので、こういったサイトで遊びながら基礎のおさらいが出来るのはありがたいものです。
デザインにおいてタイポグラフィは大変重要な役割を果たしています。計算され尽くしたレイアウトにオシャレな写真を並べても、文字のデザインを考慮しないとものすごく見栄えが悪くなります。コピーライティングなんかにも言われることですが、言葉や文字ってそれだけ見られてるということです。
もっと本格的に勉強したい方はタイポグラフィに関する本を一度読んでみることをオススメしますよ!

それではまた!