おうちでお仕事(したい)!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!日々の勉強記録と行動記録をしていきます。目標は2016年中にタイトルの(したい)をとること!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!
日々の勉強記録と行動記録をしていきます。
目標は2016年中にタイトルの(したい)をとること!

WEBデザイナーのための遊んで学べるサイト

こんにちは!
駆け出しWEBデザイナーにとって、WEBの世界もデザインの世界もわからないことの連続。
調べてみても勉強してみても、専門用語が踊っていてちんぷんかんぷん。そして下がっていくモチベーション……。
こういう経験、きっと私だけじゃないと思います(そう思いたい)。

そこで!今日はゲーム感覚で学べるサイトをご紹介したいと思います!

CSSセレクタについて学べる CSS Diner

f:id:yaike_webnohito:20151217151719j:plain
CSS Diner - Where we feast on CSS Selectors!
台の上に乗っている皿や、その上に置かれている食べ物をCSSセレクタで指定するゲーム。
皿の上でぽよんぽよんと動いている食べ物がかわいいです。正解した時にぽーんと上に飛んでいくのも快感!

初心者でも難なく最初の方はこなせるので、「え、簡単簡単!」と思っていたのですが、最後の方は苦戦しました……。意外と知らないことが多いなと改めて実感。

全26問なので、さくっとできますよ!
問題もさることながら、私は英語でちょっと苦しみましたが……!

CSSセレクタについては下記のページがまとまっていて見やすいので、解き終わった後に復習するのもいいかもしれませんね。
セレクタの種類-CSSの基本
意外と便利なCSS3の":nth-of-type" - smartboyのWeb製作メモ帳


ピクセルの感覚を養う Pixact.ly

f:id:yaike_webnohito:20151217154850j:plain
Pixel Game: A Pixels Test to Quiz Your Knowledge | Pixactly
widthとheightの数字が指定されるので、ドラッグで指定されたピクセルを描画するゲーム。
簡単そうに思いますが、特にガイドも引かれていないので、めちゃくちゃ難しいです……!
初心者だからでしょうか?ベテランならできるのか??
これがさくっとあてられるようになったらすごいですね!
1pxがデザインを決める!ということもよく聞くので、隙間時間にこつこつ挑んでいきたいです。


カーニングの感覚をつかむ Kern Type

f:id:yaike_webnohito:20151217153333j:plain
Kern Type, the kerning game
アルファベットの単語が出てくるので、カーニングが必要な文字を見つけて調整するゲームです。
なんとなくでも解けるのですが、解いていくうちに知らず知らずのうちに感覚をつかむのか、精度があがっていくのでおすすめです。きっとやるうちに慣れてくるんですね。

10問なので、ちょっとした時間で挑戦できます。
カーニングやタイポグラフィについては奥が深くてこんがらがってしまうことが多いので、備忘録もかねてわかりやすかった記事もおいておきますね。
デザインの基本★文字詰め(カーニング)のコツをつかもう | WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”
WEBサイトが映える、タイポグラフィの基本ルール | Web制作会社スタイル


カラーコードを理解する What the Hex?

f:id:yaike_webnohito:20151217155142p:plain
カラーコードが指定されるので、そのカラーコードが表す色を当てるゲーム。
カラーコードの理屈?を最初はよく理解できていなかったので、すごく苦戦しました。

カラーコードはシャープ(#)に続く6桁の16進数で表記される。2桁ごとに赤・青・緑の濃淡が表され、16進数(0~F)の0が最も薄く、Fに近づくほど濃い色となる。
カラーコードとは - IT用語辞典 Weblio辞書

これがわかっているだけで、結構解けるようになります!
カラーコード表から引っ張ってくるだけじゃなくて、やっぱりちゃんとわかってないと融通きかないと思うので、何度も挑んで身につけていきたいと思います。
ちょっとやらないだけで鈍るので、日々精進だなあと思う今日この頃です……!


他にもデザイン、プログラミングに役立つゲームはたくさんインターネット上にありますので、ぜひ、探してみてください!
私はこれらのゲームを下記の記事で知りました。


気になる方はぜひ見てみてくださいね!