Advertisement

 

この記事では、デザインのさまざまなルールや原則、配色などを楽しく学ぶことができるオンラインゲームをまとめて紹介しています。

 

遊び感覚でデザインスキルをアップできるので、なにもしたくないときの暇つぶしにもオススメです。

 

ペンツールの使い方をマスターしたり、配色センスを磨いたり、CSS Gridなど新しいウェブ技術を習得したりと、お家時間にいかがでしょう。

 

 

楽しく学ぼう!デザイナーにおすすめのデザイン独学ゲームまとめ

 

Color Game

お題として表示される色を、目がどれだけ正確に認識できるかを競う配色ゲーム。色相、彩度、補色などのカラーホイールから色を選ぶだけ。

Color_Game

 

 

 

The Bézier Game

ペンツールのベジェ曲線を扱いをマスターするゲームで、ステップごとに出題されるお題の形状に合わせて、決められた手数で再現しましょう。

The_Bézier_Game-2

 

 

 

Shape Type

デザイナー初心者がつまづきやすいペンツールの使い方を、実践的に学ぶことができるもうひとつのミニゲーム。

Shape_Type

 

 

 

Kern Type

表示された単語のアルファベット文字を移動させ、完璧なカーニング間隔を設定し、高得点を目指しましょう。制限時間はありませんので、ひまなときにゆっくりいかがでしょう。

Kern_Type

 

 

 

Can’t Unsee

左右に表示されたUIデザインのごくわずかな違いを見分け、正解をクリックして進みましょう。細かすぎて伝わりにくいものばかり。

Can_t_Unsee

 

 

 

User Inyerface

もっとも使いにくいUIデザインゲームは、プロセスに沿ってコンテンツを進めていくだけのシンプルさですが、混乱するUIデザインに圧倒されるでしょう。

User_Inyerface_-_A_worst-practice_UI_experiment

 

 

 

Grid Garden

CSS Gridレイアウトプロパティを使うことで、人参に水を与えながら自分の農園を育てていく、ゲーム感覚でGridプロパティを学ぶことができます。ゲームの各レベルでは、ゲーム達成に利用できる他のプロパティについてもサンプル例と一緒に解説されています。

grid-garden

 

 

 

Bonus – CSS Diner

実際にコーディングを書きながら、次々に出されるレイアウトに関するお題を解決していくゲーム。CSS Gridだけでなく、Flexboxやその他よく活用するCSSレイアウトの組み方を学ぶことができます。

cssdinner

 

 

 

Knights of the Flexbox Table

ゲームを通して実際にコードを記述しながら、CSS Flexboxを学ぶことができます。

 

 

 

Flexbox Froggy Game

CSS Flexboxのさまざまなプロパティを実際に入力しながら、カエルを蓮の葉っぱの上に移動させるゲームで、レベル24までいくと、。

flexbox-froggy-game

 

 

 

Flexbox defense Game

Flexboxプロパティを入力することで、迫ってくる敵を阻止するゲームで、レベル12までいけばすべてのプロパティを体感的に学ぶことができます。

flexbox-defense-game

 

 

 

It’s Centered That

表示されるさまざまな図形の中心に「ドット点」があるかを見極める、ピクセルパーフェクトを狙う難易度の高いゲーム。

It_s_Centred_That___Test_Your_Designer_Eye

 

 

 

Pixactly

ピクセル単位で出題される長方形のサイズを、フリーハンドで描き、その近さに応じて得点がきまるゲーム。最初の方は簡単なお題ですが、進むにつれて激ムズに。

 

 

 

The Boolean Game

シンプルな図形を組み合わせて、美しいグラフィックを作成できるミニゲーム。Union、Subtract、Intersect、Differenceの4つのモードを活用して、お題通りの図形をデザインしましょう。

the-boolean-game

 

 

 

Kolor

表示された色を下のカラーパレットよりできるだけ素早く選び、スコアを競う色ゲーム。レベルがアップしていくと、ほぼ同じ色ばかりに、。

KOLOR_-_Free_Color_Guessing_Browser_Game

 

 

 

Color Practice

わずかな色の違いのある四角形をお題どおりに並び替えるパズルゲーム。まずは下段の灰色グラデーションを揃えるのがポイントです。

Color_Practice_-_Puzzles_From_Color_Charts

 

 

 

Hex Invaders

HEXカラーコードを暗記したいというマニアックなデザイナーにおすすめの配色ゲームで、迫ってくるインベーダーたちをHEXカラー入力で倒しましょう。

Hex_Invaders

 

 

 

Designercize

選ばれたお題に沿って、「クライアント役」からのヒアリングからスケッチまでを、「デザイナー役」の人が20分間で行うUX/UIデザインの練習「ホワイトボードチャレンジ」用に、お題をランダムで表示してくれるサービス。

DESIGNERCIZE

 

 

 

Typewar

表示される書体の名前を二択で選ぶゲーム。最初のうちは、定番フォントの繰り返しで書体名を覚えるのに便利。後半になるにつれて、判別がむずかしい問題が続きます。

 

 

 

Figma Ninja

チャプターを進んでいくことで、Figmaアプリのショートカットキーをゲーム感覚で自然とマスターできます。

figma-ninja

 

 

 

Foont.co

激ムズなフォント判定ゲーム。2択ですがどちらも似すぎた書体スタイルとなっています。全問正解すると、、。

 

 

 

margin-margin-revoulution CSS

下から迫ってくるmarginをタイミングよくタップするオンラインゲーム。矢印キーでスタートです。