ゲーム感覚で自分のWebデザインのスキルがどのくらいなのかが分かるスキルチェックサイトのまとめ
Post on:2014年12月4日
図形の認識、カラーの見極め、文字の美しい字詰めなど、Webデザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックサイトを紹介します。
ちょっとした暇つぶしにチェックするだけでなく、定期的にやるとスキルがアップしてるのを実感したり、今日は体調悪いなという目安にもなりますね。

指定された高さと幅のピクセルで矩形を描く、空間認識能力を確認できるサイト。

黒いバーの幅が何ピクセルかあてる、幅が正確に分かるようになると女子に避けられます。

表記されたRGB値と同じカラーを3つの中から選ぶ、RGB力を確認できるサイト。

表示された左右のカラーから明るい方を選ぶ、明度力を確認できるサイト。

複数のパネルから最も明るいパネルを選ぶ、明度力を確認できるサイト。

各列のカラーをグラデーション順に並べ替える、色相力を確認できるサイト。

表示されたカラーを色相環から選ぶ、色を見極める力を確認できるサイト。

Helveticaを使ったロゴがArialに置き換えられていて、どちらか正しいか選ぶ、Helveticaへの愛が確認できるサイト。

表示された文字に使用されている日本語フォント名を選ぶ、新ゴだけじゃないよを確認できるサイト。

文字をドラッグして美しくカーニングを施す、詰め力を確認できるサイト。

形がおかしくなってしまった文字をベジェ曲線で直す、美的センスを確認できるサイト。

さまざまな形やイラストをベジェ曲線で描く、イラレ力を確認できるサイト。

ワイヤーフレームから有名Webサービスを判断する、コンテンツを見る力を確認できるサイト。

フィッシング詐欺に使われるURLを見極める、もう騙されないようにするサイト。
sponsors