NITE and DAY.blog

ルーチンを嫌う遊び人クリエイターKaiのシゴト観。

【デザイン好きの私がハマった】WEB上で出来る!インタラクティブな【学習ゲーム】

f:id:doubleM:20151209135536p:plain
デザイナー歴4年目に突入しようとしている遊び人クリエイタ―のKaiです。

今回は 暇つぶしにもなって 非常にためになる"WEB上で出来る"スキルチェックゲームをご紹介します。ゲーム感覚で能力アップが図れる、という内容もさることながら、(おそらく)SVGやキャンバスを使ったインタラクティブな動きの作りも非常に参考になる素敵なサイト様たちです。

 

Method of Actionによるデザイナー向けスキルアップゲーム

この手のゲームを公開している中では一番有名なサイト。素敵なゲームを複数公開しています。
method.ac

1. ベジェ曲線が苦手な人や、タイポグラフィの勉強がしたい人向け!「Shape Type」

f:id:doubleM:20151129205526p:plain
ベクターによる文字の整形練習が出来ます。

2. DTP系のスキルを身につけたいな。という人向け!「Kern Type」

f:id:doubleM:20151129205703p:plain
文字詰め(カーニング)の練習が出来ます。

3. デザインの配色決めが苦手な人向け!「Color」

f:id:doubleM:20151129205811p:plain
自分の色識別能力を図りながら、気付いたら配色ロジックも身に付いているまさに夢のようなカラーゲーム!ちなみに私はこの「Color」をやって緑系の色味識別が苦手なことに初めて気付きました。


どれも、1ページ目(スクショ画面)で何ができるのか分かってしまう、「説明不要のUI」が中の人の技術力の高さを物語っていますね。

4. "適切なピクセル数を見極める目"を鍛えられる「Pixact.ly」

f:id:doubleM:20151129210245p:plain
普段PhotoshopやIllustratorの「情報」ウィンドウに頼っている私としては非常に難易度の高いゲームでした。とっさにピクセルを想像できるスキルは持っていても損はないかもしれませんね。

5. キーボードタップで起こるエフェクトが印象的!Touch Pianist

touchpianist.com

最後は、デザインスキルとは全く関係ないけれどデザインが参考になるWEBゲームです。これを見た時、思わず「天才か!」と呟きました(笑)特に小さい子供にとって、ピアノ練習で大変なのは「曲を通して覚える」こと。このゲームはキーボードを叩くだけで(美しい音とエフェクトで悦に浸りながら!)曲全体とキータイミングを学習できる画期的なゲームになりそう!とプレイしていて非常にウキウキしました。

みなさんもぜひ、チャレンジしてみてくださいな!

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ