FlashとjQuery どちらで実装するか決める際の重要なファクター

ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。
両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。

サイトのキャプチャ

A Closer Look at Choosing Between Flash and jQuery

下記は各ポイントを意訳したものです。

はじめに

HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。
ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ、モダンなウェブで広く使用されるアクティブなプラットホームであることを考慮にいれて考えてみます(どちらかというと逆説的です)。

1. FlashとjQuery どちらにするか重要なファクター

ウェブサイトの開発でどのツールが使用されるべきか事前に決定している重要なファクターはサイトの目的とその対象となるユーザーです。あなたが制作しようとしているのは個人のポートフォリオですか? オンラインストアですか? 純粋なエンターテイメント? インフォメーションの提供? どんな種類のウェブサイトで使用するアイデアでも最も適したツールを選択する必要があります。
ここではその決め手となるファクターを紹介します。

1-1. インタラクション

コンテンツのインタラクションから検討してみます。インタラクションが強化されたコンテンツはプロモーションや広告、プロダクトのプレゼンテーション、ミュージッククリップなどインフォメーションが比較的低レベルで提供されたウェブサイトです。

これらのウェブサイトは二つの情報(主に、プロモーションの名称とその入手方法)を伝えることを目的とし、楽しいユーザーエクスペリエンスを届けることにフォーカスしています。よく使用されるエレメントにはコントロール可能な3Dオブジェクト、高度なアニメーションやトランジションなどがあります。

タスクがインタラクションに大きく依存し、楽しいユーザーエクスペリエンスを提供しユーザーを引き込もうとするのには、FlashはjQueryより多くの手段を提供するものとなります。
マウスホバーやクリックでビジュアル的なフィードバックを行ったり、スムースなアニメーションなどはHTML/CSSベースでjQueryがよいでしょう。

サイトのキャプチャ

Duchy Originals

jQueryでカルーセルを実装しています。デザイナーはユーザーにコンパクトなスペースに魅力的なコンテンツを表示することに成功しました。

サイトのキャプチャ

So Be Reskin Yourself

ユーザーが自身の写真を撮り掲載することで、面白い対話型のエクスペリエンスをもたらしています。オンラインの広告キャンペーンのためにFlashを使用した良い例です。

1-2. リッチメディア

ビデオやオーディオをコンテンツに含むかも検討の材料になります。
写真や画像を扱う場合はFlashでもjQueryでも大きな違いはありませんが、ビデオとオーディオの扱いは重要なポイントになります。

ユーザーがFlash Playerでビデオを見るには、すべての主要なブラウザでインストールの必要があります。HTML5のvideoタグは、Flashに変わる適切な選択肢になります。これはいくつかの点でサイトにビデオを使用する際のプロセスを単純化します。
HTML5はjQuery(JavaScript)と組み合わさると特に強力なビデオ配信フォーマットになります。しかしながら重要な問題があります、それはHTML5のビデオコーディックがまだ標準化されていないことです。現在HTML5でビデオのエレメントを作るときは、それぞれのブラウザ用にいくつかのコーディックを使用しなくてはいけません。主要なブラウザすべてにサポートされるには、まだ数年を要するかもしれません。

そのため、サイトの重要なエレメントとしてビデオを採用したり、ビデオとオーディオを含む際はFlashにすることを勧めます。ビデオやオーディオを多少使用する程度はそこだけFlashにし、サイトのメインはjQueryを使用することが最適な解決です。

サイトのキャプチャ

We're All Fans

リッチメディアのサイトではFlashを必要とします。複数のソーシャルサービスを活用した面白いウェブサイトです。

サイトのキャプチャ

High Point Village Apartments. Hayes

動画にFlashを使用していますが、スライダ、ポップアップ、ツールチップなどjQueryのソリューションを使用したウェブサイトです。

1-3. データ

テキストの量もFlashとjQueryのどちらを使うべきか決定する要因の一つです。テキストベースのインフォメーション中心のサイトでは、大量のテキストをレイアウトで処理することができるのでjQueryの方がFlashよりよいでしょう。jQueryはテキストのリーダビリティとインフォメーションの量に制限を与えずに、テキストベースのサイトにインタラクションを加えることができます。

Flashがリッチなビジュアルやオーディオのエフェクトやディープなインタラクションを使って、ユーザーにエンターテイメント性と強い印象を与えることにおいては最適であることに疑いようがありません。しかし、パラグラフが一つ以上のテキストを扱うのは苦手かもしれません。

サイトのキャプチャ

We Are Hunted

オンラインの音楽チャートサイトです。ビデオ、サウンド、テキストなど、大量の更新データが含まれたサイトでJavaScriptを採用するのは適切です。

サイトのキャプチャ

Grip Limited

インパクトのあるデザインがとても印象的なサイトです。繊細なコンテンツ、クールなタイポグラフィ、これら大規模なコンテンツは双方向性のナビゲーションを使用して提供しています。

1-4. ポリッシュ

今日、FlashとHTML+jQueryの両方がウェブサイトの印象的なビジュアルを作成するのに充分な力をデザイナーに与えています。その違いは残念ながら機能ではなく、時間の消費の差で選択されることがあります。

もしデザインで多くのグラデーション、レイヤーのエレメント、シャドウ、変わったフォントを使用する際はFlashはずっと簡単で短時間に実装することができるでしょう。HTMLとJavaScriptを使っても同様のものが実装できます、しかし実装時間は多くかかるかもしれません。

サイトのキャプチャ

Alex Buga's Livingroom

このサイトを見たほとんどの人がFlashだと思うでしょう。さまざまなアニメーション、美しい繊細なデザイン、これらにFlashがないことを信じるほうが難しいかもしれません。

サイトのキャプチャ

Casper Faassen

Flashを使用してバーチャルな体験を提供するサイトです。デザイン的にはJavaScriptでも実装可能ですが、制作時間を考えるとFlashの方が適切です。

1-5. バジェットやリソースなど

どちらを使用するかの選択に影響を与えているファクターはまだたくさんあります。
例えば、ツールのリソースです。HTML, CSS, JavaScriptを使用するには確かな知識を必要とします。それはFlashも同様で、更にAdobe Flashというソフトウェアを購入する必要もあります。
また他のファクターとしてはセクション508を遵守したアクセシブルなコンテンツにすること(これはHTML+CSS+JavaScriptの方が楽だと思います)、ファイルサイズ(FlashはたいていのコンテンツでHTML+JavaScript版より大きくなります)があります。ページのロード時間がどれくらい重要であるかもおおきなポイントになります。

最後に軽視できないファクターとして、FlashはiPhoneとiPadに対応していないことがあります。FlashはAppleのモバイルインターネットにおいてHTML+JavaScriptに遅れをとっているということです。

サイトのキャプチャ

FlashMoto CMS Photo Portfolio

FlashMotoのFlashのテンプレートです。こういったテンプレートを利用することは、ウェブサイトの実装を短時間で行えるようにする一つの手です。

サイトのキャプチャ

Jacob O'Neal

サイトはダイナミックで、素晴らしいビジュアルエクスペリエンスを提供しています。これはjQueryのテキスト置換、ナビゲーションがうまく機能したものです。

2. jQueryとFlashサイトのショーケース

jQueryとFlashの両方のプラットフォームを使用した素晴らしいウェブサイトを紹介します。

2-1. jQuery Websites

「Flashじゃないの?」と見間違ってしまうようなサイトも多々あります。

サイトのキャプチャ

GLASSHOUSE

サイトのキャプチャ

Thomas Birke Urban Photography

サイトのキャプチャ

TLC

サイトのキャプチャ

Scoundrels

サイトのキャプチャ

Middlebury

サイトのキャプチャ

Fat-Man Collective

サイトのキャプチャ

Pedro Figueras

サイトのキャプチャ

Sibley/Peteet Design Austin

サイトのキャプチャ

Duplos by Ricardo Mestre

サイトのキャプチャ

Life+Gear

サイトのキャプチャ

World of Merix Studio

サイトのキャプチャ

Riot Industries

サイトのキャプチャ

Appear

サイトのキャプチャ

Condiment

サイトのキャプチャ

PIXEL BAECKER

2-2. jQuery Experiments

jQueryを使用した実験的なサイトです。

サイトのキャプチャ

Your World of Text

サイトのキャプチャ

Canopy

2-3. Flash Websites

Flashを使用したサイトです。音がでるものもあります。

サイトのキャプチャ

Vicente Diaz Penas

サイトのキャプチャ

Serenading Unicorn

サイトのキャプチャ

Immersive Garden

サイトのキャプチャ

Salt Films

サイトのキャプチャ

Sleepeater

サイトのキャプチャ

The Digital Invaders

サイトのキャプチャ

Waterlife

サイトのキャプチャ

Djeco

サイトのキャプチャ

Case-Mate: I make my case

サイトのキャプチャ

Jay Jays Dance Off

サイトのキャプチャ

An Encounter with Greatness

2-4. Flash Experiments

Flashを使用した実験的なサイトです。

サイトのキャプチャ

Pencil Rebel

サイトのキャプチャ

Sounds of Hamburg

まとめ

jQueryとFlashは共に、素晴らしいユーザーエクスペリエンスを提供できる強力なツールです。「Flash vs HTML5」「Flash vs JavaScript」というくだらない争いはあなたを混乱させるだけです。提供するコンテンツのゴールと利用可能なリソースを判断し、適切なツールを選択するようにしてください。

sponsors

top of page

©2018 coliss