WD Online

「Webサイトと動画」の 現在・過去・未来 表現と実用の交差が生む潮流

YouTubeや各種SNS、サブスクリプションサービスなど動画がますます当たり前の存在になっている現在。Webデザインは動画・動きの要素とどう付き合うべきでしょうか。実用性との関係や、技術・デバイスの歴史から読み解きます。

デザイナーが見た表現の変遷

Webサイトに装飾としての“デザイン”が持ち込まれた頃から、GIFアニメやマウスオーバーボタンのように、制約の中でも動く要素が用いられてきました。

Flashの登場でその制約がなくなると、Webデザインは一気に華やかなものになります。全体がFlash製のWebサイトや、コンテンツとしてのFlashアニメーションを生み出すクリエイターが現れ、新しい表現の場が確立されました。

その後、SNSの誕生で共有文化が浸透し、スマホの普及でコンテンツ発信のハードルが大幅に下がります。一方、Webマーケティングの発展がWebサイトの役割と制作のセオリーに大きな影響を与えました。

こうした経緯を経た今、Webデザインと動画・動きはどのような関係にあるのでしょうか? またその未来は? 長らく最前線で活躍する3名のデザイナー/アートディレクターをお迎えし、お話を聞きました。

muramatsu.jpg
ムラマツヒデキさん
株式会社クオートワークス 代表取締役、アートディレクター。muuuuu.orgキュレーター。企画提案からディレクション、デザインまで多数のサイトを手がける。受賞歴AWWWARDS/SOTD 、CSS DESIGN AWARD/WOTDSなど。 https://quoitworks.com/
noda.jpg
野田一輝さん
UNIEL ltd.代表兼アートディレクター。Flashサイト制作、グラフィック·エディトリアルデザイン、Web制作を経験し、現在もデザイナーとして活動。AWWWARDSなどオンラインアワードの審査員も務める。 https://uniel.jp/
hara.jpg
原英寿さん
株式会社orange、株式会社ソニックジャムを経て、2015年に独立。Sunny Inc.を立ち上げる。受賞歴FWA、AWWWARDS、CSSDAなど。https://sunnny.jp/

 

①「表現」の過去と現在、「実用」との関係

動きのデザインは実用・効率重視のトレンドと相反するもの? 過去の振り返りから現在のあり方を見つめ直します。
 

WD:Webの歴史を振り返ると、これまでいろいろな形で「動かす」ということに意識が注がれてきました。どんな印象をお持ちですか?

原:僕はこの仕事は2000年頃からなんですけど、当時見た「EYE 4U」や「MONO craft」がきっかけで、動きのあるサイトって楽しいなと思いました。全面Flashの走りの頃で、画面がダイナミックに変わっていくのを見て、こんなことができるのなら面白そうだと思ったんです。

ムラマツ:僕はFlashを始めたのが12~3年前で、その頃は採用の基本スキルにFlashが盛り込まれていました。当時スゴいと言われていたサイトはほとんどFlashだったと思います。

野田:印象的だったのは、西田幸司さんの作品ですね。音楽とパララックスとブラーを組み合わせたような表現で、Webでこんな遠近感をつくれるんだと思いました。あとは、ECサイトもFlashのものがありましたよね。FLAファイルの中身をXMLで表したXFLという形式があって、それをCMSみたいに使って、そこから抽出して出力してECサイトとして動かすという。そういう自由にやっているアパレル系の方々を見て真似し始めたというのもあります。

WD:何か好きだったサイトなどはありますか?

ムラマツ:印象に残っている動きでいうと、そんなに昔ではないんですけど1→10(ワントゥーテン)の「CREATIVE IS ENDLESS BATTLE*1」ですね。こんな動きまでできるんだと思いました。

野田:今でも覚えています。

ムラマツ:あとはBIRDMANの作品ですね。制作されるものがすべて先進的で、大変刺激を受けていました。

野田:1→10でいうと、コーポレートサイトを大きな1ページで構築した作品がすごく衝撃的でした。ブロックでいくつかの領域に分けられていて、そこをスクロールで動いていくようなつくりだったんです。

原:あれ良かったですよね。

ムラマツ:Flashは修正コストがすごく高くなることがなかったですか? SWFしか納品されていないと、それをFLAに分解するツールを使ったりして。それでFlashを使いたがらない人もいたと思います。

原:ありましたね。でも楽な部分もありましたよ、SWFだけ修正して納品すればよかったので。スマホ向けにレスポンシブでつくるようになってからは、表現の幅が狭くなって大変でした。Flash以降になるとできることが限られてきて、表現としては寂しくなってきたと感じていましたね。これが普通になってしまうのかなと。

ムラマツ:動きをつけるという部分では最近追いついてきたんじゃないですか?

原:そうですね、ある程度同じようになってきたかな。内容によってはすごく大変だったりしますけど、表現としては近いことができるようになってきていると思います。

WD:デザインの段階から、技術的なところを逆算しながら考えていらっしゃるんですか?

原:僕は考えないようにしています。その結果、技術的に出来ませんと言われる(笑)。

ムラマツ:人にもよりますね。僕は、演出に関わるプロジェクトでは最大限できることをデザイン上でつくって、どうコーディングするかを考えて、やり方を指示したあとはエンジニアさんに任せます。

原:動画でモックをつくると言っていたよね。

野田:はい、After Effectsでつくっています。細かいところが静止画だけでは伝わらないんですよ。例えばイージングでも、出る時はイーズインで戻る時はイーズアウトにしてほしいとか。動画までつくるとコスト的に見合わない面はあるんですけど、エンジニアの方と一度そうしたすり合わせを行うことで阿吽の呼吸が生まれるので、後がやりやすくなるんです。ムラマツさんはパーツによる使い分けなどがバランス良いですよね。

ムラマツ:僕は、エンジニアを全部外注にしているので、あまりやるとビジネスとして成立しなくなってくるんですよ。必要以上にこだわっても、クライアントに求められているかというと、そうでもないこともありますし。そうなると、クライアントが満足するラインで、クリエイターとして自分も満足できるラインで、エンジニアも予算の中でやってもらえる範囲で、バランスが良いというかギリギリのラインを探っている状態なんです。

WD:クライアント側から、動きについて要望が出ることはありますか?

ムラマツ:今は皆さん、重くなることを嫌いますね。先方からすごく動くサイトを参考に出されて、こんなふうにしたいと言われることは多くないです。ただ、要望されていなかった部分に動きをつけて喜ばれることはありますね、重くなければ。

原:僕は実績に載せている作品が動くものが多いので、そうしたタイプの制作を依頼されることが結構あります。逆に、全然動かしたくない人も増えていると思います。Flash当時は動くことが前提でしたけど、今は情報が見やすければいいくらいの考え方もありますね。

野田:昔はWebがブランドアイデンティティを表現するアートの場になって、華やかな印象がありましたが、今はユーザビリティやコンバージョンに重きが置かれて、一部では、表現はイベント展示やエントランスなどのインスタレーション等に場所を移してきていているように感じます。

WD:確かに、この5年くらいは特にWebサイトへ「実用・成果」を求める傾向が見られます。そうした中での「表現」のあり方をどうご覧になっていますか?

ムラマツ:僕は「白か黒か」ではないと思っています。どちらかしか手に入らないと考えがちかもしれませけど、実用や成果を担保しながら、動きをつけて、クライアント自身や商品をより魅力的に見せることはできると思うんです。マーケティングやSEO重視の流れになっていることは理解しているし、僕自身デザインだけに傾倒しているわけではなく、Web解析士の資格も持って知識もありますけど、それだけじゃないよねという違和感も持っています。その可能性を僕は探っているところがあります。人は感情で動くので「なんか良い」と思わせる表現やスタイリングは、数字に直結しなくとも軽視はできません。

原:確かに、二極化してしまうのは極論ですね。僕はWebサイトを建築に例えることがよくあって、例えば住宅を建てるならそれほどリッチな装飾や電気設備はいらないけど、商業施設なら華やかさも欲しいしサイネージなども必要です。動きが必要かどうか以前に、どういうサイトを建てるから何が要る、という考え方の話ですね。商業施設的なサイトは減っているのかもしれませんけど、多分波があるのだと思います。コンバージョンだけ気にしても(ユーザーと)長期的な関係がつくれなかった、という状況が起きる可能性も考えられますよね。

野田:「実用・成果」へのコミット方法は、各企業や個人にとって手法が違うから面白い部分もありますが、Twitterで業界の人の発言を見ていると、デザインの基本技能が優れた方やWeb技術を積極的に取り入れる方よりも、UIデザイン、マーケティング領域に属するデザイナーが多い印象があります。もちろんUIやマーケティング領域の中でもデザインが上手な方もいらっしゃいますが、母数の問題だと思います。それで、数が多いと発言の影響も大きくなり、それが正しい声だとお客さんも信じてしまう。もちろん正しいことだし、すごく良いことを言っていると思うんですけど、それだけでなく、本当の意味での技術やデザインの力で解決できることも多いという側面も、知っておいてほしい部分ではあります。

※1) http://works.1-10.com/corporate/1-10design-v3/

続きを読むためにはログインが必要です。
マイナビBOOKSの「WD Online全文購読サービス」(有料)をご利用ください。

マイナビBOOKSへの新規会員登録もこちらから。

定期購読者はオンライン版が読み放題 !!
雑誌『Web Designing』の定期講読者には、
WD Onlineの全文購読サービスを無料でご提供しています。
詳しくは「定期購読のご案内」をご覧ください。

この記事を見た人はこんな記事も見ています