たなびく布のような質感を活用した抜け感あるデザインが美しいダブダブダブのウェブサイト
風が吹き抜ける
今回ご紹介するのは、ダブダブダブというウェブ制作などを行っているチームのウェブサイトです。
おそらく代表を務めていらっしゃる方が屋号として掲げている名称なのだと思いますが、なかなかおもしろい名前ですよね。
サイト上には WebGL を用いた演出もあるのですが、一貫してすごく風通しのよい雰囲気、デザイン的な言葉で言えば抜け感があるウェブサイトとなっています。
リンク：
名古屋市のWeb制作・ホームページ制作｜集客特化のマーケティング戦略｜フリーランス｜ダブダブダブ
布の動きがとても自然
今回のサイトの WebGL 実装はそれほど派手な仕掛けがあるわけでも色合いが奇抜なわけでもないのですが、すごく存在感のあるビジュアルをしています。
ページがロードされたあと、最初のイントロ演出がすごく印象的に仕上がっていて一気にこのサイトの持つ空気感に包まれます。
布がゆっくりと流れるように動く様子はとても心地よいです。
若干ローポリの 3D モデルみたいな質感を持ったイラストに、個性的なアルファベットが組み合わされ、とっても印象的なキービジュアルになっていますよね。
ゆっくりと布の位置が変化するのと同時に、ほんのわずかにですが風にたなびくように布が波打っていて自然な質感になっています。
影の質感もやさしい感じで本当によく考えられているなと思います。
また、サイト内の背景部分にも、キービジュアルと似たような質感が意図的に盛り込まれている感じがあります。
これは静止画で伝えるのはちょっと難しいのですが、白い背景部分にときどき波打つようなアニメーションが動く瞬間があるんですよね。
キービジュアルの布イメージを上手に背景を使ってサイト全体の意匠として盛り込んでいてかっこいいです。
最近、少しだけデザインの勉強とかしてみているのですが、書籍なんかを見ているとよく「抜け感」という言葉が出てきます。
この抜け感という言葉、なんか個人的にはちょっと使うこと自体に抵抗があるんですが、今回のサイトにはまさにその抜け感がすごく強く感じられますよね。
風に揺れる布の質感と、余白の上手な使い方、そしてサイト全体のカラーリングやトランジションのスピード感などが相まって、それらの質感というか印象みたいなものが作られているように感じました。
ぜひチェックしてみてください。
