輝くネオンのような美しいビジュアルと個性的なカラーリングのセンスが光る! 株式会社 ON のウェブサイト

doxas : 2019-05-13 13:20:18

オンラインとオフラインの境界を取っ払う!

今回ご紹介するのは、原宿を拠点に活動されている制作会社、株式会社 ON のウェブサイトです。

その手がけてきた事例を見る限り、ウェブの制作やデザインだけでなく、映像関係や、オフラインでの活動も手がける、まさにクリエイティブに満ちたメンバーで構成されたチームです。

自分たちのことをクリエイティブチームと呼称する彼らの、その名前どおりの個性とセンスが垣間見える、とても楽しく刺激的なウェブサイトとなっています。

リンク:

株式会社ON | ON CO.LTD. | 東京・原宿のWEB制作会社

どこまでもポジティブなエネルギーを感じさせる

今回のサイトでは、WebGL を利用した実装だけでなく、サイト全体に様々に凝らされた工夫と演出とが、渾然一体となっているような印象を受けます。

サイト内には様々なコンテンツが用意されていて、すごく情熱的というか、前のめりなぐらいにエネルギーが放出されている感じが伝わってきます。

たとえばサイト内に書かれていたメッセージの一部を引用すると……

私たちはオンラインとオフラインの両軸から

クリエイティブとクリエイターを生み出すことに

すべての時間を注ぎます。

というように、クリエイティブに対する並々ならぬ情熱と決意が感じ取れます。

大きめのフォントで大胆に配置されたメッセージがなんとも力強いですが、その背景で輝きながら駆け抜ける、ネオンのようなラインの演出が WebGL で実装されています。

このネオンのようなラインは、ベースカラーとなっているエメラルドグリーンのような配色だけでなく、ときおり別の色のものが登場したりすることもあります。

実際には、ラインのジオメトリはそのままに、動的に色のほうが変化している感じですね。サイト内のコンテンツを閲覧していると、気がつくと背景のラインが別の色になっているという感じです。

ブルームのエフェクトも掛かっていて、ほんとにキレイです。

また、ネオンのラインだけでなく、フォント(文字)に対してグラデーションが掛かっていたりするのも、今回のサイトの特徴的な演出だと思います。

上の画像では、フォントの一部がやや緑色っぽくグラデーションしていると思うのですが、実際には虹色のように暖色系のグラデーションも同時にアニメーションして現れるようになっています。

静止画で撮るのがちょっとタイミング難しかったのですが、実際に動く様子を見てもらうと、その美しいアニメーションに思わず目を奪われると思います。

さらに、サイト内に置かれている画像にはグリッチのような演出も掛かるようになっており、サイト全体のカラーリングのビビットな雰囲気と、それに絶妙にマッチした画像やグリッチなどの演出とが、ほんとにうまく混ざり合って世界観を構成しています。

冒頭で一部、サイト内からメッセージを引用しましたが……

サイト全体に、「オンラインとオフラインの境界を越えたクリエイティブ」を強く印象づけるような、さまざまなコンテンツ・メッセージが配置されており、すごく見ていて楽しい内容に仕上がっていると思います。

また、最初はエメラルドグリーン一色だったネオンが、気がつくと色とりどりのカラフルな色の洪水になっていたり、CSS をうまく活用してグリッチや DOM の傾きを表現していたり……

遊び心も随所に感じられる、とても素敵なサイトだと思います。

ぜひチェックしてみてください。

リンク:

株式会社ON | ON CO.LTD. | 東京・原宿のWEB制作会社

share

follow us in feedly

search

search

monthly

sponsor

social