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

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

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

 

スポンサーリンク

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

1.KernType

KernType

Kern Type
A game to learn how to kern type

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

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

 

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

ShoottheSerif

to the point - I shot the Serif! (but I did not shoot the sans-serif)
I Shot the Serif (but I did not shoot the sans-serif) play online, or download the app

※音出ます

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

 

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

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

文字の種類について

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

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

 

3.typewar

typewar

Internal Server Error

結構好き

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

 

4.フォント検定

フォント検定

404 Error - Not Found

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

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

MORISAWA PASSPORT ONE

MORISAWA PASSPORT ONE

73,000円(11/21 17:06時点)
Amazonの情報を掲載しています

 

5.SHAPE TYPE

SHAPETYPE

Shape Type
A game to learn how to complete letterform shapes

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

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

 

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

HelveticaVSAraial

MIMEARTIST

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

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

mとwが強いです。

 

おまけ

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

KILLCOMICSANS

Kill Comic Sans - Objective

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

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

 

2.Pixact.ly

pixact.ly

How pixactly trained are your eyes?
Pixactly is an online tool that tests how well you know your pixels. Try it for yourself! #pixactly

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

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

 

おわりに

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

それではまた!

この記事を書いてる人
リク

札幌出身・東京在住のフリーランス。webデザイナー・カメラマン(写真・映像)として活動しています。

日常的なつぶやきがメインTwitter

ほぼiPhoneで撮った写真のInstagram

リクをフォローする
タイポグラフィデザイン・アートフォント
スポンサーリンク
スポンサーリンク
リクをフォローする
FABREC

コメント

スポンサーリンク
タイトルとURLをコピーしました