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

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

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

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

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

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

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

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

hex.jpeg
http://yizzle.com/whatthehex/

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

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

rgb.jpeg
http://rgbchallenge.com

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

2. ピクセル測定ゲーム

pixel.jpeg
http://pixact.ly

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

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

3. ベジェ曲線ゲーム

bezie.jpeg
http://bezier.method.ac

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

line.jpeg
http://shape.method.ac

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

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

font.jpeg
http://ilovetypography.com/ifontgame/

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

fontkentei.jpeg
http://ampersand.xyz/fontest/

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

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

kern.jpeg
http://type.method.ac

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

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

6. ロゴ当てクイズ

logo.jpeg
http://www.jpink.co.uk/logo_quiz/

ロゴデザインを行う際、すでにデザインされたロゴから学ぶことも多いかと思います。
ここでご紹介する「LOGO DESIGN QUIZ」は、アメリカのテック企業を中心にロゴを推測していくゲームです。

それぞれのロゴの先頭部分が切り取られ、ABC順に並べられています。
その中には日本人に馴染みのないものもありますが、ほとんどは知っている企業のロゴでしょう。
完全正解できるか、ぜひ挑戦してみてください。
  

7. 明るさクイズ

colorrun.jpeg
http://colorrun.pl

最後に紹介するのが、「ColorRun」と呼ばれる明るさクイズです。
このゲームでは、ひたすらに左右のどちらのパネルのほうが明るいかを瞬時にクリックして当てていくゲームです。
連続正解することで制限時間が伸びますが、1回でも間違えたら失格という厳しいルールになっています。