いま,見ておきたいウェブサイト

第166回 2021年特別編 2020年の特徴,2021年のこれから

この記事を読むのに必要な時間:およそ 11 分

Flashサイトの特徴

軽快なアニメーションと動画,インタラクティブ性を最大限に活用できるFlashは,多くのキャンペーンサイトに利用されていきました。当時のFlashサイトは,どんな特徴を持っていたのでしょうか。特徴を3つほど挙げてみましょう。

1つ目の特徴として,個性的で自由なUI(ユーザーインターフェイス)が挙げられます。今ならウェブサイトの構築などでよく目にする「デザインガイドライン」のようなものは,当時存在しませんでした。したがってFlashサイトの制作者によって熟考された,サイト構造やレイアウト,色彩設計やアニメーションとともに,個性的なUIが登場してきます。

ウェブサイトの持つ世界をUIを通じて表現するため,見た目を重視しすぎて使いにくい例も多数ありましたが,しだいに利便性の高い,ユーザーの使いやすいUIへと洗練されていきました。

ウェブサイトの持つ世界をUIで表現した,インターフェイスデザイナーの中村勇吾さんの代表作のひとつ,⁠ECOTONOHA」⁠2003⁠⁠。ユーザーがメッセージを投稿すると,それらが葉となり,やがて一本の木へと成長します

2つ目の特徴として,マウスなどの入力装置を使ったインタラクティブ性が挙げられます。

ドラッグやマウスの位置,マウスカーソルの移動速度や動き,スクロールボタンやボタンキーボードからの入力など,さまざまな動きとグラフィック表現を組み合わせることで,通常のウェブサイト閲覧時に使うクリックだけでは不可能な,新しい表現が生まれていきました。

Wrangler Europeによる2010年の春夏コレクションをフィーチャーしたウェブサイト『⁠WRANGLER BLUE BELL SPRING/SUMMER 2010』⁠2010⁠⁠。人物の動きをマウスの「ドラッグ&リリース」でコントロールする方法が新鮮な驚きを生み出した

3つ目の特徴として,ウェブサイトへのアクセス時に再生されるスキップ可能な動画,イントロムービーが挙げられます。

多くの画像や動画を使う機会が増えると,ウェブサイトにアクセスした時,必要なデータのダウンロードに時間がかかってしまいます。ムービーを再生しながら必要なデータを裏で読み込むことで,ユーザーがウェブサイトから離脱しないようにする方法のひとつでもありました。

アメリカのマンハッタン・ミッドタウン地区にあるホテル,Bryant Park HotelのウェブサイトBryant Park Hotel⁠2004)のイントロムービー。音楽に合わせた大胆なアニメーションでホテルのイメージを表現している

イントロムービーでウェブサイトのUIの操作方法を説明する事例もありました。ユーザーが必要とする部分だけのデータを小分けしてダウンロードする技術や,高速なブロードバンド回線が一般的になると,イントロムービーは少なくなっていきます。

この他にも,パーソン・イン・プレゼンテーション(映像内で人物が視聴者に対して,直接コンテンツのプレゼンテーションを行う)のような,動画とインタラクティブ性を融合させた表現方法など,多彩な表現がFlashによって生み出されました。

男性用電気シェーバー「Philips Norelco」をユニークな語り口で男性が紹介していく「Philips Norelco - Second Puberty」⁠2006⁠⁠。動画を多用したパーソン・イン・プレゼンテーションの手法を取り入れたウェブサイトのひとつ

Flashを取り巻く環境の変化

2009年,前年から大きな問題となっていた世界金融危機がFlashサイトにも影響を与え始めます。世界的な景気後退の影響で,潤沢な予算をつぎ込んで制作されていたウェブサイトやキャンペーンサイトが減少し始めます。

そして2010年4月29日,⁠Flash Player」の今後を大きく決める出来事が起きます。

「iPhone」を販売するAppleの最高経営責任者(CEO⁠⁠,Steve Jobsが「Adobe Flash」への考えを述べた公開書簡「Thoughts on Flash(Flashに対する考え⁠⁠ を発表しました。

図6 AppleのSteve Jobsが「Adobe Flash」への考えを述べた公開書簡「Thoughts on Flash」

図6 AppleのSteve Jobsが「Adobe Flash」への考えを述べた公開書簡「Thoughts on Flash」

この公開書簡は,Steve Jobsが「iPhone」でFlashを排除する理由を6つの項目(オープンな技術ではない,Flash以外の技術で問題なくウェブの閲覧が可能なこと,脆弱性やセキュリティの問題,バッテリーの電力消費問題,タッチデバイスへの未対応,先進的で革新的技術の遅れが生じる)に分けて述べながら,モバイルデバイスが中心となるこれからの時代に「Adobeは優れたHTML5用ツールの開発に力を向けるべきではないか」と問いかける内容でした。

Adobeもこうした意見に対して,ただ指をくわえて見ていただけではありません。

2010年6月リリースの「Adobe Flash Player 10.1」では,Appleからの批判に答え,とくにモバイル端末対応の機能を強化しています。省電力・省メモリ化,マルチタッチとジェスチャー操作の検出,加速度センサーのサポートとデバイス方向に合わせた画面切り替え,動画のハードウェアデコード,GPUによるレンダリングなど,急速にシェアを拡大していた「モバイルデバイスにどうしてもFlashを対応させたい」という,Adobeの本心が伺える強力なバージョンアップでした。

しかし,加速的なモバイルデバイスの普及,とくに「iPhone」のシェアが拡大していくにつれ,⁠iPhone」上で動作しないFlashではなく,HTML5でコンテンツを制作する動きが起き始めます。また,シェアを拡大していたGoogleのブラウザ「Google Chrome」を使用したHTML5の実験的なコンテンツが広告賞で高評価を獲得するなど,変化の始まりを予感させる年となります。

図7 ⁠Google Chrome」の機能をアピールするために制作されたThe Wilderness Downtown⁠2010⁠⁠。HTML5でコーディングされたこのウェブサイトは,2011年のカンヌ国際広告賞サイバー部門で3つのグランプリを受賞した

図7 「Google Chrome」の機能をアピールするために制作された『The Wilderness Downtown』(2010)。HTML5でコーディングされたこのウェブサイトは,2011年のカンヌ国際広告賞サイバー部門で3つのグランプリを受賞した

2011年には「HTML5 vs. Flash」というテーマが頻繁に取り上げられるようになります。この年に入っても「iPhone」⁠iPad」がFlashに対応しないことから,モバイルデバイスでも動作が可能な技術であるHTML5の話題が盛り上がりを見せます。HTML5のCanvas API(JavaScriptとcanvas要素でグラフィックを描画する)を利用したウェブサイトは,登場時こそ動作の重さが目立ちましたが,少しづつFlashとの差を埋めていきます。

図8 モバイル版「Flash Player」開発中止が発表された,2011年11月9日のAdobe Blogのエントリー「Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5」

図8 モバイル版「Flash Player」開発中止が発表された,2011年11月9日のAdobe Blogのエントリー「Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5」

頑なに「iPhone」⁠iPad」をFlashに対応させなかった,AppleのSteve Jobsがこの世を去ってから約一カ月後の2011年11月9日,AdobeはBlogで「Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5(FlashはPCのブラウジングとモバイルアプリに注力。アドビはさらにHTML5へ貢献する⁠⁠」という今後の方針を示すエントリーを公開します。この中でモバイル版「Flash Player」の開発中止を発表したことから,モバイルデバイス向けのコンテンツは,HTML5で制作される流れとなります。

この時点でも,⁠Flash Player」はPC用ブラウザのほとんどにインストールされている状況でした。しかし,PC用とモバイルデバイス用のコンテンツを作り分けることの難しさやコスト,急速に利用者が拡大するモバイルデバイスへの対応が最優先となったことで,PCでも新たなFlashコンテンツの制作が減少します。

2012年には,WebGL(Web Graphics Library)などの新しい技術を使い,Flashに依存せずブラウザ上で3Dグラフィックスを扱う事例が増え始めます。

同時にブラウザ上では,HTML5による独自の表現方法が登場してきます。とくに画面のスクロールに連動したパララックス(視差)表現は大流行しただけでなく,その後のウェブサイトのコンテンツで頻繁に利用されるなど,基本的な表現方法のひとつとして確立されていきました。

図9 Nikeによる「⁠Air Jordan 2012」のウェブサイト『Air Jordan 2012 - AJ2012』⁠2012⁠⁠。何枚もの画像を細かく移動・変更させながら,ウェブサイトで奥行きを強調するパララックス効果とスクロールの組み合わせが特徴的。モバイルデバイスでも同様の表現が可能

図9 Nikeによる「⁠Air Jordan 2012」のウェブサイト『Air Jordan 2012 - AJ2012』(2012)。何枚もの画像を細かく移動・変更させながら,ウェブサイトで奥行きを強調するパララックス効果とスクロールの組み合わせが特徴的。モバイルデバイスでも同様の表現が可能

HTML5による独自の表現だけでなく,Flashサイトで使われていた表現がモバイルデバイスのブラウザ上でも可能になると,Flashでウェブサイト全体を組み上げる事例は急速に減っていきました。

2013年頃からは,Flashで制作されていたソーシャルゲームがスマートフォンのアプリとして提供され始めます。ウェブサイトと同様に,ブラウザ上で動いていたFlashゲームも新たな技術へと移行し始めます。

2017年7月25日,AdobeはBlogでFlash & the Future of Interactive Content(Flashとインタラクティブコンテンツの未来)というエントリーを発表します。

この中で「HTML5,WebGL,WebAssemblyなどの技術が成熟し,ブラウザにプラグインが提供していた機能が統合された」として,2020年末に「Flash Player」の更新と配布を停止することを発表します。同時に「既存のFlashコンテンツを新しいオープンフォーマットへと移行することを推奨」したことで,事実上「Flash Player」の時代は終わりを告げることとなります。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。