タイポグラフィと 3D 表現に大胆なモーションも加えつつ表現した Clay Boan さんのポートフォリオ
大きな文字が大迫力
今回ご紹介するのは Clay Boan さんというデザイナーさんのウェブサイトです。
3D モデルを多く採用していて、さまざまな場面で WebGL による 3D 表現が用いられています。
一方で、演出がそれ一辺倒になっているということもなく、むしろ目立つのは大きなテキストを使ったタイポグラフィ的な見せ方の妙なのではないかなと感じます。
リンク：
Clay Boan — Multidisciplinary Designer
モーションに対する一貫性
これはデザインに関しては素人な自分が勝手に感じたこと、要は個人の感想に過ぎないのですが、今回のサイトには秩序とそれを乱すカオスとの両方が微妙な距離感で共存している感じがします。
なんかこう……
モーションに斜めのラインが意図的に盛り込まれていたり、フォントが一部だけ意図的に変更されていたり、意識的になにかを乱しているように感じる部分が結構あるんですよね。
ベースになっているのは、正確かつ合理的なレイアウトやスタイリングだと思うのですが、そこにわずかにルールから外れた要素が加わることですごく魅力的な視覚効果を生んでいる気がします。
スクロールに連動して要素が傾くように動いたりする部分は一箇所と言わずいろいろなところで見受けられ、そういう意味では一貫性もあるんですよね。
こういうバランス感覚みたいな部分はいわゆる個性と呼ばれるものなのかもしれませんが、すごくうまいな～と感じました。
3D モデルによる立体的な表現がなにを意図したものなのかなと想像を巡らせてみたりもするのですが、そこはいまいちハッキリと言語化することが自分には難しかったです。
ただやっぱりインパクトが強いというか、3D モデルがリアルな陰影を伴ってヌルっと動く様子は妙なリアリティがあって目を引きます。
いろいろと計算したうえでこういうふうに演出しているんでしょうね。
理路整然と、正確無比に構造を組み立てる難しさももちろんありますが、それを意図して崩していくことにも一定の難しさがあると思います。
写真なんかを撮っていると、王道や定石を踏まえたうえでそれをいかに外していくかということに考えが及んだりしますが、ウェブのデザインやインタラクションの設計にも、同じようなことが言えるのかもしれません。
複雑なテクニックを駆使して WebGL の実装を組んでいるというタイプのウェブサイトではないと思いますが、全体としての完成度の高さが光ります。
ぜひチェックしてみてください。
