手描きペイント風のイラストが弾け飛ぶおもしろいイントロ演出が楽しい Graffico のウェブサイト
発想がおもしろい
今回ご紹介するのは Graffico というウェブのフロントエンドを主戦場とするスタジオのウェブサイトです。
グラデーションというよりは、パーツごとにベタ塗りに近い質感で色を塗ったようなテイストのイラストってあると思うのですが、あれを WebGL で演出に仕立てたみたいな感じの不思議なイントロが魅力的です。
WebGL が使われているのは冒頭のイントロ部分だけみたいですが、すごくインパクトがあります。
リンク：
Graffico | Sviluppo Web, Software & AI
柔らかい質感で統一されたデザイン
今回のサイトのデザインは、どこか柔らかい印象を受ける要素が多いように感じます。
角を丸くしたり、あえて線形から遠いイージングを使っていたり、インタラクティブ性にもこだわりが感じられる仕上がりです。
WebGL は先述のとおりサイトを開いた直後のイントロ演出に用いられています。
グラデーションを一切使っていないわけではないものの、どこかトゥーンシェーディングのような、ある程度ベタ塗りのような質感を持ったイラストが素材として使われています。
これ静止画で見るとそういう立体構造がそこにあるように見えるかもしれないですが、単純な立体構造という感じでもなくて、イラストを SVG 素材のようにパーツごとに細切れにして、それを組み合わせたような感じですね。（たぶん）
イントロ演出の流れは、まずパーツが次々と画面上に現れて１つのイラストを形作り、それが最後に弾けて画面いっぱいに飛び散る、という感じです。
こんな突飛な演出、どういうふうに思いついたんでしょうね……
すごくインパクトが強く、抽象的なんだけどなんかかっこいい、そんな演出だと思いました。
サイト内のその他の要素は WebGL こそ使っていませんがインタラクティブに変化する部分も多くあり、テキストをじっくり読ませるというよりはグラフィカルに視覚的な刺激で盛り上げているかんじかなと思います。
事例の提示の仕方とかも一風変わっていておもしろいですね。
フォントの使い方とかも凝っていて、創意工夫を重ねて作られているように感じます。
スクロールの質感とかを見ても、ちょっとトリッキーなので人によっては若干うるさく感じたりするかもしれませんが、個人的には楽しげなトーンがいろいろなところで垣間見えて、非常におもしろい事例だと感じました。
ぜひチェックしてみてください。
