赤を基調とした独特なデザインが特徴の JavaScript のラーニングサイト Le Club
イメージカラーがかっこいい
今回ご紹介するのは、フランスから配信されている JavaScript の様々なコードを掲載したウェブサイトです。
今回のサイトは WebGL 専門というわけではなく、Canvas 2D や、グラフなどの表示で利用者も多い D3.js を利用したデモのほか、p5.js を利用したジェネラティブなコードの例などが多数掲載されています。
作品数はそこそこ多く、ただぼんやりと眺めているだけでもとても楽しいサイトとなっています。
様々なインスピレーションを得られるサイト
今回のサイトはなんといってもそのイメージカラーの赤い色が、かなりかっこいい雰囲気を作っており、見た目のインパクトがとても強いですね。
掲載されている作品の多くが、このビビットな赤系の色を基調としており、一貫したデザインとなっています。
WebGL を使っていないものも含めて、結構な数の作品が掲載されているのですが、ジェネラティブな感じの作品が多いのかなという感じです。
各作品のサムネイルが並べられたトップページでは、作品の上にマウスカーソルを持って行くと、どのような技術を使っている作品なのかがホバーと同時に表示されます。
パッと見た印象が 3D コンテンツのような雰囲気のものでも、D3.js を利用した二次元的なデモとして作られていたりします。統一感のあるカラーリングのせいなのか、サイトに掲載されている作品たちの存在感がすごく強いように感じますね。
デザインセンスのとても高い方が、きっとサイトを運営されているでしょうね。とてもかっこいいです。
個々の作品たちを見てみると、どのようなコードで動いているのか、作品と一緒に掲載されています。
カラーリングも非常に見やすい色遣いとフォントサイズで、詳細な説明などはありませんが、それが逆にちょっとハイセンスというか、洗練されたデザインになっている印象をより強く感じさせてくれます。
ほとんどの作品がループするように何度も同じアニメーションを繰り返すように作られており、ついついぼんやりとアニメーションする様子を眺めてしまいますね。
WebGL を利用したものは、ほとんどが three.js などをベースに作られており、スクラッチで記述されているわけではないので簡単に流用できるような作りになっており、これはこれで使い勝手がいいでしょう。
もちろん、シェーダで二次元的に結構ハイエンドな処理をしているような作品もあるのですが、シェーダのソースコードだって漏れ無く閲覧できるようになっています。
3D はちょっと苦手、という人にも、参考にできるところが多いのではないでしょうか。
エフェクト系のデモなんかもあって、なかなか見応えがありますね。
全体に、まずはその洗練されたデザインが目を引きます。
しかし、技術的にもなかなかおもしろい作品が多く、WebGL だけでなく、広く JavaScript の有名なライブラリを利用して作られているそれぞれの作品は、ひとつひとつが完成度の高い仕上がりになっています。
あまり積極的に宣伝はしていないのか、Twitter アカウントなんかも用意されてはいるものの、あまりフォロワー数も多くなく、ちょっともったいない感じがします。
参考にできる点は何かと多いと思いますので、ぜひチェックしてみてください。