UV をクランプしたような演出が面白い! 映像制作などを行うプロダクション MFG のウェブサイト!

doxas : 2018-08-07 14:04:02

実績を見せることにフォーカスした作り

今回ご紹介するのは、日本国内で映像制作やアーティストのプロデュースなどを行っている MFG のウェブサイトです。

制作を行ったのはシフトブレインさんなので、既にご覧になったという方も多いかもしれません。

今回のサイトでは、多くの制作実績を持つ MFG さんのサイトらしく、それらの作品をいかに見せるのかということを重視した作りになっており、シンプルながらスピード感と迫力のある仕上がりとなっています。

テクスチャ座標を利用したクランプ演出

今回のサイトは日本国内の映像制作にたくさんの実績を持つ企業のサイトということもあり、彼らの手がけた映像を、既になにかしらの形で目にしたことがある、というひとも多いと思います。

実際、その制作実績の量はかなり多く、今回のサイトではそれらの作品たちを余すところなく見ることができるように工夫されています。

まず最初にページがロードされた直後に一瞬だけ描画されるイントロ演出では、シーン全体が湾曲したような構造になっており、画像が横に引き伸ばされたような UV クランプの表現が使われています。

上の画像は、その演出の瞬間をキャプチャしたものなのですが、写真の特定の位置でテクスチャサンプリングの座標が固定され、まるで引き伸ばされたように描かれているのがわかりますね。

静止画で見るとたくさんの横線が引かれたような感じに見えますが、これがアニメーションしていると非常にスピード感のある印象的な演出として目に飛び込んできます。

この UV クランプをうまく利用した演出はサイト内の様々なシーンに組み合わせて使われていて、フォントのシルエットが浮き上がって見えるように加工されていたりする場面もあり、非常に面白いです。

その他、今回のサイトでは冒頭でも書いたように MFG さんが手がけた映像作品にフォーカスした構成でサイトが作られています。たくさんある実績を一覧にしたページでは、その圧倒的な量の制作実績に驚く人も多いのではないでしょうか。

この作品一覧ページ、あるいは個々の制作実績の詳細ページなどでも、やはり他のシーンと同様に UV クランプの演出が随所で用いられています。

UV クランプ演出が、見せ方のひとつの柱のような役割を果たしており、サイト全体に統一感を持たせていますね。

今回のサイトには画像や動画がたくさん使われているのですが、その割に、ローディングで長時間待たされたり、時間差で画像が表示されてしまって演出が破綻していたりする場面にはほとんど出会いません。

リソースの管理をシームレスに、ユーザーに不自然さを感じさせないように行うというのは、演出を見せるための大切な足回りになる部分であり、そういったところにも抜かり無く丁寧に実装されている点には個人的には驚きがありました。

WebGL を使った統一感のある演出も見事で、とても高い質感に仕上がっていると思います。

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

リンク:

MFG - http://mfg-tokyo.com/

share

follow us in feedly

search

search

sponsor

social