WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： トレンド >サービス紹介

Web業界に限らず、デザインセンスは一朝一夕で身につくものではありません。どれだけデザインについて考えながら日々過ごしているか、さらには繰り返しの勉強が必要になります。
今回はそんなデザインセンスをゲーム感覚で楽しく学べるサイトを3つご紹介します。

文字間を学べるサイト「Kern Type」

1つ目は文字間の余白を学べる「Kern Type」です。
サイトにアクセスすると中央に文字が配置されています。この文字をマウスでドラッグして丁度いい位置に移動させます。（最初の一文字と最後の文字は移動不可）
調整が完了したら右下の「Done」ボタンをクリックします。

すると移動させた文字の後ろに正解の青文字が映し出されます。この正解の位置との誤差で下に点数が表示されます。

文字間はほんの少しのズレで違和感が生じるため、ぜひとも感覚を養いたいですね。

サイズ感を学べるサイト「Pixact.ly」

2つ目は解像度を学べる「Pixact.ly」です。
アクセス後、中央に配置されている「Enter」ボタンをクリックするとスタートします。
その後、画面上部にwidthとheightの数値が表示されます。この数値に合わせて下の余白に範囲選択で書き込みます。（一度離したらすぐに答え合わせとなるため慎重に微調整しましょう）

範囲選択が完了すると正解のサイズが比較として表示されます。正解との誤差によってスコアが加算されて全5回繰り返します。
自身のベストスコア更新を目指したり、知人と合計スコアを競ったりするとより面白いかもしれませんね。

UIを学べるサイト「Can’t Unsee」

3つ目はUIを学べる「Can’t Unsee」です。
サイトにアクセスするとチュートリアルが出題されています。
操作は非常に簡単、表示されている2つのUIから正解を選択していくだけです。例題のため「Click the correct image」と記載してある左をクリックしてみましょう。

クリック後、正解であるチェックマークが表示されました。この画面でUIのどこが合っている（間違っている）のか解説もしてくれます。

ちなみに不正解を選択すると先ほどのチェックマークが「×」で表示されます。

最初は比較的簡単な問題ですが、進めていくと段々難しくなっていくのでぜひ挑戦してみてください。

まとめ

『継続は力なり』という言葉があるように、常に学んでいくことで身についていきます。
参考書を読んだり外にある看板やチラシを目にして感覚を養いつつ、今回紹介したようなゲーム感覚で楽しみながら自然と身に付けるというのも面白いかと思います。