その他
2023-02-17
こんにちは、Creative.LABのスタッフY.Mです。
以前のブログで、WEBデザインに役立つスキルをゲーム感覚で磨けるサイトをご紹介しました。
> https://creativelab.biz/blog/20220610-538/
今回はUIデザインやCSSといったプログラミングを楽しく学べるサイトをご紹介します！
プログラミングを学び初めたばかりの方や、実践的に楽しく学びたい！という初心者〜中級者の方におすすめです。
なかには全く知識がなくても体験できるものもありますので、興味のある方はぜひサクッと遊んでみてください＾＾
User Inyerface
使い勝手の悪いUIデザインを体験する「User Interface」。
ベルギーの制作会社 Bagaar が公開しており、使いにくいUIを乗り越えて最後のページにたどり着くまでの時間を競うゲームになっています。
こちらはWEBに関する知識がなくても大丈夫。誰でも挑戦できます。
FLEXBOX FROGGY
CSSの必須項目かつ初心者がつまづきやすいFlexboxをゲーム感覚で学ぶことができる「Flex Froggy」。
CSS Flexboxのさまざまなプロパティを実際に入力しながら、カエルを蓮の葉っぱの上に移動させればクリアとなり、次のステージへ進みます。
一見シンプルに見えるものの、レベルが上がっていくにつれ難易度が上がっていきます。
Flexboxの理解に苦しんでいる人や、中級者でFlexboxに自信がある人の腕試しとして試してみてはいかがでしょうか。
GRID GARDEN
FLEXBOX FROGGYと同じシリーズで、こちらはGRIDレイアウトを学ぶことができます。
Gridプロパティを利用し、にんじんに水あげて育てるゲームとなっていて、こちらもレベルが上がるにつれ難しくなっていきます。
Gridに苦手意識がある方は遊びながら学べるので挑戦してみてください。
CSS Diner
実際にコーディングを書きながら、次々に出されるレイアウトに関するお題を解決していくゲーム。
CSS Gridだけでなく、Flexboxやその他よく活用するCSSレイアウトの組み方を学ぶことができます。
問題文は英語で書かれていますが、動いているイラストを見ながらセレクタの指定ができるので比較的理解しやすいと思います。
CSS SELECTORS CHEATSHEET
https://frontend30.com/css-selectors-cheatsheet/
表示されているCSSセレクタは何を指定しているのかを選択する内容になっています。
序盤は比較的優しめの問題が出ていますが、後半になるにつれて徐々に難易度が上がっていきます。 CSSセレクタの知識をアウトプットしたい人におすすめのゲームです。
まとめ
今回は6つの体験しながら学べるWEBサイトをご紹介しました。 時間のある時にぜひ挑戦して楽しくスキルの向上にお役立てください＾＾
