あなたは何点!? デザイン知識・スキルを『ゲーム』で知れる・学べる面白ゲーム7選

更新日: 2018年01月31日

デザイン

皆さんは、Webデザインに関する知識・スキルを、どのようにして学んでいますか？

Web関連のスクール・アカデミーに通ったり、本を読んだり、セミナーに参加したり……など、Webデザインを学ぶにはパッと思いつくだけでも様々な方法があります。

新しい知識を付けることは、自らの業務の幅を広げることにもなりますし、過去に味わったことのない達成感を味わえる可能性をもたらしてくれるはずです。
身に着けた知識・スキルは、自分のデザインに即座に反映させることが可能です。
しかも、それを身に付ける上で楽しみながら習得できるとしたら、どうでしょうか。きっとそんな勉強方法があれば知りたいと思われる方もきっといるはずです。

そこで今回は、ぜひとも皆さんにオススメしたい勉強方法をご紹介します。

それが「ゲーム」です。
Webデザインの知識・スキルレベルをゲームを通じて、測定しながら学ぶことができます。

ゲーム感覚で測定して学んでいくことで、思わずそのゲームにのめり込んでしまいます。気が付けば圧倒的な技術が身についていた、ということもあるかもしれません。
気になった方は、ぜひ一度トライしてみてください。思わずはまってしまうかもしれないので注意が必要です。
　　

Webデザインの実力を測るおもしろゲーム7選

1. 16進数言い当てクイズ

http://yizzle.com/whatthehex/

Webデザイナーは、必ずと言っていいほど毎日色を表す*「16進数」*と向き合います。
慣れてくると、値を見るだけでR(赤)・G(緑)・B(青)からどんな色になるのかがわかってくるのではないでしょうか。

そこで挑戦してみてほしいのが、「What the Hex?」という16進数の言い当てクイズです。
登場する16進数のカラーコードを見て、5つの選択肢の中から該当する色を当てていきます。

http://rgbchallenge.com

ちなみに、16進数ではなく「RGB」で色を推測するゲームもあります。
こちらのほうが簡単……と思いきや、レベルが上がるごとに際どい選択肢が多くなってきて大変です。まずはぜひ挑戦してみてください。
　　

2. ピクセル測定ゲーム

http://pixact.ly

Webデザイナーは、ピクセル単位でボタンやボックス領域を表示するのも日常茶飯事です。
ピクセルに自身がある方は、「Pixact.ly」というピクセル測定ゲームで自分のピクセルに対する感覚を試してみてください。

Width(横幅)とHeight(縦幅)が表示されるので、その大きさの選択範囲を作成していきます。
できるだけ誤差を少なくして、得点を稼いでみてください。
　　

3. ベジェ曲線ゲーム

http://bezier.method.ac

Illustratorを業務で使用している方にとって、ベジェ曲線は必ずといっていいほど使用します。
こちらのベジェ曲線ゲームでは、指定された枠の中で如何にベジェ曲線を上手に引くか、にトライします。

http://shape.method.ac

また、こちらのゲーム（上）は、赤い点をドラッグしながら曲線のハンドルを操作して、指定されたフォントの元の形に戻していくゲームです。
　　

4. フォント言い当てクイズ

http://ilovetypography.com/ifontgame/

こちらは、表示されている欧米フォントのフォント名を4択で選択していくゲームです。
日本人にとって馴染みのないフォントもいくつか登場するので、完答はかなり難易度が高いです。

http://ampersand.xyz/fontest/

また、日本語フォントに特化した言い当てゲーム*「フォント検定」*もあります。
ゴシック系はわかりやすいですが、明朝系は際どいものが多く、ぜひ目を見張って挑戦してみてください。
　　

5. カーニング調整ゲーム

http://type.method.ac

Webデザイナーとして、空間や余白には敏感になっておきたいものです。
こちらの「Kerntype」というゲームでは、カーニング調整に挑戦します。

こちらのゲームで難しいのは、1文字だけではなく、複数の文字を少しずつズラして、正確なカーニングにするという点です。
カーニング調整を行って「Compare」(比較)をクリックすることで、実際の正確なカーニングとの差異を測って、スコアを計算します。
継続的に90点以上が出せればカーニング調整のセンスがあると言えそうです。果たして何点取れるでしょうか。
　　