【デザインの基本】デザイン系テストサイトを2つ紹介しつつ大事なことを伝えます

f:id:uidesigner:20190206231936j:plain

こんにちは!楽しくデザインしてますか?

今日はデザインをより楽しくお勉強できるテストサイトを2つご紹介します。
テストサイトと言っても、かなりお遊び感覚でできるものなので、ぜひぜひ楽しんでトライしてみてください!

KERNTYPE a kerning game

type.method.ac

こちらはカーニングを鍛えるゲームです。
カーニングって何?って人はこちらの記事をどうぞ。

coliss.com

カーニングとはつまり、文字と文字の間を適切に詰めて、より見やすくする技法のことです。
これがとても大事!
街中を歩いていて看板やポスターを見た時、何か違和感を感じることはありませんか?何か分からないけど、何か気持ち悪い…みたいな。
それはきっとその文字に、適切なカーニングがなされていないのです。

なぜカーニングが大事なのか?
それは下の記事を読めば分かります。ちょっと古い記事ですが、私が大好きで大事にしている記事です。新人さんに必ず読んでもらってます。デザインの基礎とも言える大事なことがたくさん書いてあるので、ぜひ読んでみてくださいね。
この記事に書いてあることが一通りできたら、ちゃんとした文字組みとか習っていなくても素敵な文字組みができるようになると思います。

stocker.jp

この記事の通り、グラフィックのデザイナーさんと比べて、Webのデザイナーは文字組みや文字詰めが甘いと言われます。ほんとにそう…。
自らの戒めのためにも定期的にこの記事を読み返すのです。

特に「括弧は一番細いフォントを選ぶ」ってこれ私めっちゃ大事だと思っていて、これをやってるのとやってないのじゃ読みやすさとか見やすさとか美しさが全然違うんですよね…。デザインチェックの時にカーニングのダメ出しをしすぎて「カーニング警察」とか呼ばれたりしている私です。

あ、違う違う。カーニングのゲームの話だった。

そんな感じで、KERNTYPEでは、デザインで大事なカーニングの練習を楽しみながら行うことができます。

サイトを開くとこんな感じで違和感を感じる文字が表示されるので

f:id:uidesigner:20190206233713p:plain

「e」をタップして、点線のあるところまで動かして調整してみましょう。
これがカーニングです!

f:id:uidesigner:20190206230656p:plain

これも同じく、「A」をタップしたあと、マウスでもいいしキーボードの矢印でもいいので文字のバランスを調整しましょう。
「A」だけでなく「V」の調整も必要になるはずです。

f:id:uidesigner:20190206230636p:plain

よしできた!
この並びが一番美しい!と思ったら「Compare」のボタンを押しましょう。

f:id:uidesigner:20190206230709p:plain

こんな感じで採点してくれます。
よかった、100点ですw

f:id:uidesigner:20190206230953p:plain

カーニングが甘いとこんな感じで添削されますよ。
ぜひオール100点目指して練習してみてくださいね。

Can't Unsee

続いては、最近colissさんで紹介されていた、こちらのゲーム。

cantunsee.space

どちらのデザインが正解か?というゲームなのですが、これが結構面白い。

f:id:uidesigner:20190206231520p:plain

こんな感じで正しいと思う方を選択すると、

f:id:uidesigner:20190206231556p:plain

じゃーん!正解!
みたいに採点されていきます。このゲームが良いと思ったのは、ちゃんと良い理由が書いてあるところ。
これで言うと

f:id:uidesigner:20190206232454p:plain

どっちが正しいと思いますか?

f:id:uidesigner:20190206232513p:plain

正解は左。
Speech bubble pading」と理由が書いてあります。「吹き出しのパディング」が、右のデザインがダメな理由です。右の吹き出しは、文字に対して謎の余白があって適切ではなかったですよね。
という具合にちゃんとそのデザインの正解の理由が書いてあり、さらに英語の練習にもなるので素敵だなと思います。
デザインには必ず理由が必要です。「なんとなく」というのはありえません。デザインをいいと思う理由、悪いと思う理由を自分の言葉で伝える練習を続けて行くといいなと思います。

このゲーム、結構な量があるのですが後半に行くほど間違い探しみたいな難易度になるので、ちょっと笑っちゃいました。楽しみながらやるといいと思います。

ちなみに私は7080点でした。

f:id:uidesigner:20190206232855p:plain

colissさんによると、「6,000の後半から7,000の前半の方が多いようです」とのこと。
ほっ。

いかがでしたか?

楽しいデザイン系サイトを2つご紹介しました。
また楽しげなサイトを見つけたらご紹介していきます。

デザインは楽しいものです。ぜひ楽しみながらお勉強を続けてくださいね。

 

こちらの記事もぜひ!

 

www.uidesigner.tokyo

 

私が必ずおすすめするデザイン基礎の本のリンクも置いておきます!
ぜひご一読ください。