Blog ブログ

お問合せ・ご相談

楽しく学べる!webデザインの勉強になるゲーム5選

ブログ

2022-06-10

楽しく学べる!webデザインの勉強になるゲーム5選

こんにちは、Creative.LABのスタッフY.Mです。


デザインを学ぶなら、関連書籍を読んだり、ブログを読んだり、セミナーを受講したり、と色々な手段がありますよね。

でも、もっとお手軽に学びたい!自分のスキルをテストしてみたい!という方におすすめなのが、ゲーム感覚で学べるサイトです。


本記事では、無料で楽しくデザイン基礎を学べるおすすめサイトをご紹介します。

英語表記のサイトが多いですが、直感的に操作ができるので気になるサイトはぜひお試しください^^




カラー

色彩感覚 ー色相環ー 


Color 

https://color.method.ac/ 


中央に表示される色を、色相環の中から選択するゲームです。マウスカーソルに合わせて選択する色が変わり、中央の色と比較できるので簡単だと思います! 

相対的な色彩感覚はもちろんですが、色相環から瞬時に色を選ぶスキルも身につきそうです。




色彩感覚 ーグラデーションー 


  ▼x-rite カラーIQテスト

https://xritephoto.com/ph_toolframe.aspx?action=coloriq 


ランダムに並んでいるタイルを色相順にグラーデーションになるように並びかえることで、色彩感覚をテストすることができます。

採点結果のスコアが0に近いほど高得点です。




UI

スクリーンショット 2022-06-10 14.22.32

Can't Unsee

https://cantunsee.space/ 


どうしたら見やすくて使いやすいデザインになるのか。

Webデザインに直結するUI感覚をテストできます。

画面に表示される2種類の画像を比較してどちらが良いUIデザインかを選択していきます。

段階的な3つのレベル「Tutorial」「Easy」「Medium」でそれぞれ18問ずつ出題されます。

1問回答するごとにどこ違いがあるのか、じっくりデザインを見比べることができるので、納得しながら進めることができます。




文字間(カーニング)

Kern Type 

http://type.method.ac 


表示される文字をドラッグして動かして、文字間を調整することでカーニングを学ぶことができます。

文字間は適切に調整しないとデザイン的にも視認性にも影響がでてしまいます。

このサイトを活用するとカーニング技術が身につきそうです。




図形サイズ感覚

スクリーンショット 2022-06-10 14.09.52

Pixactly

https://pixact.ly/


指定される四角形のサイズをマウスでドラッグして描くゲームです。

Px単位の図形サイズの感覚を鍛えられそうです。

個人的には、回答のあとに出るメッセージ(特に大きくサイズを誤ったとき)が面白かったです!




まとめ

今回はデザインスキルを楽しく学べるサイトをご紹介しました!

どれも短時間で簡単にできる内容ですので、気軽に遊んでみてください^^