2015.02.27
思わずハマってしまう！Webデザインの勉強になるゲームやクイズをまとめてみた
あなたはどういった形でWebデザインを学んでいますか？Webデザインに関する本を読んだり、好きなブログを読んだり、セミナー等に参加したり…。そうやって学ぶことはとても楽しいですよね！新しい知識や技術を得ることで、自分のWebデザインに活かすことができ、それがまた達成感に繋がることもありますよね。
そしてもう一つ、Webデザインはゲーム感覚で学ぶこともできます。ゲーム感覚で学ぶことで、思わずそのゲームにハマってしまい、気づけばその技術が鍛えられていた！なんてことも。今回はそんな勉強熱心なあなたに、「思わずハマってしまう、Webデザインの勉強になるゲームやクイズ」をご紹介します！
フォント系
フォント検定
表示されている日本語のフォントを4つの選択肢の中から当てるクイズです。1つの問題につき10秒の制限時間がある「ランキングモード」と、時間無制限の「トレーニングモード」の2種類からチャレンジすることができます。日本語フォントを見極める技術がつきそうです！しかし日本語フォントを当てるのは想像以上に難しいですね…。
▼記事リンク
フォント検定
typewar
表示されているアルファベットを2つの選択肢の中から当てるクイズで、iPhone用のアプリもあるそうです。英字フォントを見極める技術がつきそうです。英字フォントは結構有名なものも多いので、Webデザインを学び始めた方にもおすすめです！
▼記事リンク
typewar
Fonttrainer
表示されている単語のフォントを複数の選択肢の中から当てるクイズです。各色別になっている単語をクリックすると、フォント一覧が表示されます。フォントをクリックし、サイト画面左下の「Check」を押すことでチェックすることができます。う～ん、正直これも難しいですね…。
▼記事リンク
Fonttrainer
Kern Type, the kerning game
表示されている文字にカーニングを施すゲームです。文字間は適切に調整しないとバラけて見えてしまい、デザイン的にも視認性の観点でも問題が起きてしまいます。カーニングを習い始めた直後は、何が正解で何が間違いなのか分かりづらいので、このゲームを活用することでカーニング技術を鍛えることが出来そうです。
▼記事リンク
Kern Type, the kerning game
カラー系
X-Rite Color IQ Test
ランダムに並べられている色のパネルを、両端のパネルに併せてグラデーションを作るゲームです。パネルはドラッグ＆ドロップで動かすことができ、「Score Test」をクリックするとスコアが表示されます。スコアは0に近ければ近いほど高得点になります。色の差が少ないパネルを隣り合わせに並び替えるので、色を見極める技術がつきそうです！ちなみに私のスコアは「7」でした。
▼記事リンク
X-Rite Color IQ Test – Learn How You Really See Color!
Color
中央に表示されている円の色を、制限時間内に色相環の中から選択するゲームです。色相環から色を選択しているとき、中央の円と色が比較できるので割りとやりやすいと思います！色相環から色をパッと選べる技術がつきそうです。また配色の際に色相環を効率よく使うことが出来そうですね。
▼記事リンク
Color -Method of Action
What the Hex?
上部に表示されているカラーコードの色を、その下部に表示されている円から選択するゲームです。カラーコードは、赤/緑/青の成分を00からFFの数値で指定します。よく使う色であればカラーコードは覚えていそうですが、頭の中でRGBをミックスさせるのはかなり難しいですね…。極めると色に関してはカラーコードで会話が出来そうですね。
▼記事リンク
What the Hex?
Color Run
左右に分かれた色のうち、明るい方の色をひたすらクリックするゲームです。色の見極めがパッと出来るようになりそうです。しばらくプレイしていると「あれ…？どっちが明るいんだ…？」という迷いが出てきます(私だけでしょうか)。選択スピードが早くなると、上部に表示されている制限時間も増えるのでついついハマってしまいます！
▼記事リンク
Color Run
サイズ系
Pixactly
上部に表示されている幅と高さの短形をマウスで描くゲームです。クリックをやめるとサイズが確定され、正しいサイズが点線で表示されます。要素のサイズ感を鍛えることが出来そうです！個人的には指定されたサイズが大きければ大きいほど難しいですね…。
▼記事リンク
Pixactly
Whatpx
中央に表示されている黒い要素の幅を当てるゲームです。「what px?」と記載のある箇所にピクセル数を入力し、Enterキーを押すとスコアを表示します。こちらも「Pixactly」と同様、サイズ感を鍛えることが出来そうです！自分で短形を描くよりは、比較的簡単かもしれません。
▼記事リンク
Whatpx – Pixel Guesstimation Game
Draw a Square
先程ご紹介した「Pixactly」と同様に、指定された幅と高さの短形をマウスで描くゲームで、サイズ感を鍛えることが出来そうです！自分が作ったサイズと、正解のサイズの差が見やすいですね。
▼記事リンク
Draw a Square
The eyeballing game
図形を平行四辺形にしたり、要素の中間地点を見極めるゲームです。テストは1つの形式ではなく、1つ目のテストは「綺麗な平行四辺形にする」、2つ目は「線の中間地点を当てる」、3つ目は「指定の角度を半分にする」、4つ目は「内接円の中心を見つける」、5つ目は「円の中心点を当てる」、6つ目は「青線を操作して直角にする」、最後は「3つの線の交わるポイントを当てる」です。7つのテストを3回繰り返して終えるとスコアが表示されます。スコアが小さければ小さいほど高得点ということになります。
▼記事リンク
The eyeballing game
コーディング系
HTML5 Elements Quiz
109あるHTML5で使えるタグをひたすら入力するゲームです。HTML5は意外と知られていない機能性の高いタグなどがありますが、極めるとHTML5をフル活用出来るようになりそうですね。そしてこれを全て入力出来るのはもはやHTMLマスターです。HTMLを習い始めた頃は、タグをノートにひたすら書いてました(笑)
▼記事リンク
HTML5 Elements Quiz
HTML5 Quiz
HTML5に関する問題に対して4つの選択肢の中から選択するクイズです。例えば「HTML5の前のバージョンは何？」など。コーディング記述を学ぶことも重要ですが、その概要を知ることも重要ですね。
▼記事リンク
HTML5 Quiz
CSS Quiz
CSSに関する問題に対して4つの選択肢の中から選択するクイズです。例えば「CSSは何の略？」など。HTML同様、コーディング記述を学ぶことも重要ですが、その概要を知ることも重要ですよね。
▼記事リンク
CSS Quiz
デザイン系
The Bézier Game
指定通りにベジェ曲線を描くゲームです。中々学ぶのが難しいベジェ曲線をゲームで学ぶことで、苦手意識がある方も克服できそうですね！illustratorを学び始めたとき、このベジェ曲線は本当に苦労した覚えがあります…。
▼記事リンク
The Bézier Game
バッチリ先生からの挑戦状
ある商品のポスターを作ると仮定し、写真やタイポグラフィなどをそれぞれ2択の中からデザインとして相応しいものを選択するクイズです。クイズは全部で4問なので気軽に参加できます。デザインには1つ1つ意味があることを再認識できそうですね。自信があっても思わず「これで正解かな…？」と若干不安になります(笑)
▼記事リンク
バッチリ先生からの挑戦状 -あなたのデザイン力を試してみよう！
番外編
bubbles games
Webデザインを学ぶためのゲームではないのですが、こちらはHTML5で構築されたバブルゲームです。自分(赤い円)を十字キーで操作し、自分より小さい円を吸収することで大きくなっていきます。自分より大きい円に接触すると、接触している間にどんどん円が小さくなってしまいます。とても中毒性のあるゲームで、円をブラウザ枠ギリギリのサイズにするまで満足できません…(笑)
▼記事リンク
bubbles games by franz enzenhofer
まとめ
いかがでしたか？Webデザインを本やブログ記事で学ぶことも楽しいですが、ゲーム感覚で学ぶことも楽しいですよね。思わずハマっているうちにその技術が大幅に鍛えられているかもしれませんね。
ちなみに個人的に特に気に入ったのは、カーニングを調整するゲーム「Kern Type」です。見本とぴったりのスコアが出た時は大喜びです(笑)ゲームを活用して、あなたもより一層Webデザインを楽しく学びましょう！