Interview MVAサイト制作秘話

2013.6.6 THU

Case Study {01}
華やかでクリエイティブなUIが印象的な
「MVA - SPACE SHOWER MUSIC VIDEO
AWARDS」オフィシャルサイト
url. mva.jp/

文：仲町六朗　写真：谷本夏

Interview

独自性の高いUIとWebならではのアプローチが特徴的な同サイト。ここでは、シフトブレインの仲村直さん、鈴木慶太朗さん、スペースシャワーネットワークの齋藤新さんにお話をうかがった。

　1996年よりリアルイベントとしてスタートしたMVAは、2009年から番組とWebを中心に移行し、去年度からは特にWebサイトのコンテンツ強化を図っている。アワードらしい華やかなビジュアルと、クリエイティブなUIが際立つ同サイトだが、「アワードはユーザーの方々に参加していただいてこそ成立します。なので、より多くの方が参加したくなるようなフックが欲しいという要望を出させていただきました」と齋藤さん。制作のポイントは、ノミネート作品を前面にプッシュしつつ、楽しみながらMVを閲覧できるような仕組み。ネットコミュニティを通じて情報が拡散していくような、見た目と操作性が連動したサイト制作が求められていたという。

コンセプトに沿った大胆なUI

　こうした要件をふまえ、リキッドブロックによるランダム配列と、上下スクロールのエンドレス化というUIを実装することに。「UIのデザインは、ノミネート作品をメインに、というコンセプトだったので、Masonryを使ってMV自体をボタン化して並べるという案が最適だなと考えていました」と鈴木さん。さらに、“Infinite Scroll”（無限スクロール）も組み合わせているが、「Infinite Scrollを組み合わせただけだと流行りとしてありがちなUIになってしまう。そこで、一般的には下方向だけの無限スクロールを上下方向に実現したらおもしろいんじゃないかと考えました」といったことから最終的な仕様が決定。

　また、「Masonryの仕組みは、ブロックの組み合わせによってはスペースが空いてしまう個所ができてしまいます。そうした個所には違和感が出ないように、オプション的なブロックを用意しました」と仲村さんが言うように、大胆な仕組み以外のつなぎとなる個所も細かく調整し、このほかにもマウスオーバー時の砂嵐の効果や、フェードアニメーションなど、コンセプトに沿ったアクセントを無駄なく加えている。

ユーザー参加型の仕掛けと統一感の演出

メイン写真

　ユーザ本位で楽しめる仕掛けとして印象的なプレイリストについては、「ユーザーにMVをリミックスさせるアイデアなどもあったのですが、版権の問題だけでなく、アワードとしてノミネート作品の独立性が必要なこともありましたので。そこで、ユーザーが気に入ったMVを収集できる機能として、プレイリストを実装しました」と仲村さん。クライアントの要望をクリアしつつ、ユーザー同士で互いのお気に入りMVを閲覧し合うといったコミュニケーションも生み出した。

　最後に、歴史あるアワードとして、クラシカルなイメージも漂うグラフィックについて、「画家ピート・モンドリアンの線と面を基調としたアートワークにヒントを得て、矩形によるグリッドレイアウトが浮かびました」と鈴木さん。使用している書体も日本語ではオールド系の明朝、欧文はさまざまな書体を使い分けているが、レトロなイメージは外さないように注意が払われている。
　UIから細部のビジュアルまで、コンセプトに沿ってMVAの特性を生かしたサイト設計だ。

▶ プロジェクトのチーム構成	▶ Creator's Profile

クライアントはスペースシャワーネットワーク（齋藤さん）。制作をシフトブレインが行う（ディレクション／進行管理を仲村さん、アートディレクション／デザインを鈴木さん、裏側の実装は開発チームの奥村さん、許さん、安友さんによる）。	［シフトブレイン］「TOHHHHH！」という変身の合言葉を胸に、設立10周年に向けてさらなる飛躍を目指すWebプロダクション。インタラクティブ性を生かしたキャンペーンサイトから、CI、紙、映像まで、新たなるコミュニケーションの形を目下追求中。TheOne Showファイナリスト、Favorite Website Awardsなど受賞多数。url. www.shiftbrain.co.jp/ （写真は今回取材させていただいた同社の2名。左から仲村さん、鈴木さん）