流れるような揺れるような不思議なアニメーションが心地よい Mustafa Celik さんのポートフォリオサイト
丁寧な仕事に徹底した暖かい印象
今回ご紹介するのは、トルコのアートディレクター Mustafa Celik さんのポートフォリオサイトです。
現在はスイスにいらっしゃるようで、彼自身は国外で活動している感じでしょうか。どこかに暖かい印象を感じさせる丁寧な仕事のポートフォリオサイトになっており、なんとなく人柄がうかがえるサイトなのではないかなと思います。
シンプルなエフェクトですが、キレイにまとまっていて嫌味がなく、とてもいい感じです。
シンプルで単調なエフェクトをどう活用するかのヒント
今回のサイトは、全体的にそれほど大規模ではなく、ポートフォリオサイトらしくいくつかの事例と自己紹介を載せている感じで、コンテンツの量はそれほど多くありません。
全体的に、本当に丁寧に作ってあるなあと感じるのですが、これはいったいどういう部分から来る感覚なのか……残念ながら私のようにデザインについてあまり深い理解がないとうまく言葉にできません……
ただ、ビジュアルに関してだけの感想になってしまいますが、サイト全体に凝らされているトランジションの柔らかなアニメーションが、そういうふうに見せているのかなと思います。
波打つようなシンプルなエフェクトなのですが、これがかなり気持ち良いですね。
上の画像を見ると、少し画像が歪んでいるのがわかると思うのですが、これはマウスカーソルを左右に動かしたときに起こるエフェクトになっています。
あえて縦方向に対するインタラクションを無くし、横の動きだけを波のような動きに転換させているのですが、そのゆったりした動きが気分まで優しくほぐしてくれるような、そんな印象になっています。
スクロール操作等を行ってページ遷移が行われる際も、やはりこの波打つような動きが使われているのですが、シームレスに画像が大きく切り替わる様子がなんとも見事です。
やっていること自体は結構ありがちというか……
そんなに珍しいタイプのエフェクトでは無いと思うのですが、なんだかすごく印象に残ります。
アニメーションの速度や、波のようなエフェクトの揺れる大きさなどが、かなりうまく調整されていますね。
各事例を紹介する work のページ等では、かなり画像を多く使っていてここはもしかすると賛否両論あるかもしれませんね……非常に丁寧な作りではあるのですが、コンテンツの種類としてはとにかくビジュアルに訴えかけるものが多いような感じがします。
WebGL で実装されているサイトも、最近ではかなり多種多様なものが提供されていて、いくつかのタイプに分類できるようになってきていると思います。
今回のサイトは比較的シンプルなエフェクトを統一感を持って使うタイプで、読ませるというよりは見せるタイプのポートフォリオサイトとなっています。
アートディレクターという肩書を名乗って活動されているだけあって、活動はなにもウェブに限らず、様々なプロダクトのデザイン等を手掛ている方のようですので、こういったサイトの構成はむしろ王道だと思います。
ポートフォリオサイトとしての完成度はとても高いと思いますし、その丁寧なインタラクションやアニメーションは、参考にできる部分も多いと思います。
ぜひチェックしてみてください。
