「Flashの現状とこれからの展望」web creators特別号『 Webサイト制作 最新トレンドの傾向と対策』に執筆させて頂きました

2012年1月28日にweb creators編集部より発売されたムック本に記事を執筆させていただきました。

web creators特別号 Webサイト制作 最新トレンドの傾向と対策
HTML5・スマートフォン・SNS・Webアプリケーション

僕が知人と一緒に書かせていただいた題材は、
CHAPTER3 Webアプリケーション&リッチコンテンツ
Flashの現状とこれからの展望

を書かせていただきました。(P74~P77)

最近はFlashでの制作がめっきり減り、HTML5という流れになってきていますが、現状はどうなっているのか?ほんとにHTML5>Flashなのか?
ということを僕がFlashならこの人と仕事をすると毎回お願いしていた人と一緒にFlashとHTML5のメリット、デメリットなどをとめてみました。

その一部を許可をいただきましたので紹介します。

FlashとHTML5についてはそれぞれの人いろいろな考え方があるとおもいますので,これがこれからの展望ということはわかりませんがその辺はご理解ください。

Flashの現状とこれからの展望

HTML5の台頭によりFlashへの風当たりの強さが目立っているが、本当にFlashはWebにとって必要のなくなった技術なのだろうか?

Flashはなぜ避けられはじめてきたのか

FlashとHTML、それぞれのメリット・デメリットを改めて見つめなおしてみよう。

最近はFlashが敬遠され、Flashで作られたサイトが圧倒数で減ったのは疑いようのない事実だろう。

それは、優れたWebサイトを集めたブックマークサイトを見ると顕著に実感できる。 1 ~2年ほど前までは、それらに掲載されるサイトの9割以上がFlashサイトだったが、現在は真逆といっていい状況だ。

また、Flashの魅力を大きく伝えた多田屋のサイトなど、一世を風靡したサイトの多くがHTMLでリニューアルされていくのも時代の流れを大きく象徴しているといえるだろう。

この状況を作った要因は、いまさら言及する必要はないだろうが、iPhone・iPadをはじめとしたモバイルデバイスの普及 と、HTML5やCSS3、jQueryなどの開発言語の発展が大きい 。

また、さまざまなブログや記事により「AdobeVS Apple」、「Flash VS HTML5」といった敵対の構図が描かれてきたことも無視できない。

このような潮流から、制作担当者の中には「Flashの時代は終わり。これからはHTML5やJavaScriptでサイトを構築すべき」と結論づけてしまっている人も多いが、それはあまりに単純過ぎるだろう。

これまでの議論はFlashのデメリットとHTML5のメリットのみを比較しているものが多く、実は、Flash のメリット、HTML5のデメリットという逆の側面についてはあまり突き詰めて考えられてはいない。実際、HTML5で作られたサイトの多くは、それだけでただ凄いと評価される傾向があるが、特定の環境で正常に閲覧できないなど、Flashを完全に凌駕する存在とはなっていないのも事実なのだ。

では、FlashとHTMLのどちらで作るのが正解なのだろうか?それについて検討するために、まず、FlashとHTML5の長所と短所について改めて考えなおしてみよう。

Flashの一般的に言われている短所

まず、Flashが敬遠される理由として、「ローディングの待ち時間が長い、動作が重い・遅い、更新しづらい、テキストがコピー&ペーストできない、ブックマークできない、ブラウザの戻るボタンが動作しない、印刷出来ない、SEOが弱い、iOSで閲覧できない、etc…」などがあげられる。

ローディングが表示されるだけで、Flashは重いと感じるユーザーもいるが、HTMLにすると必ずしも容量が軽くなるわけではない。png画像などを圧縮して使用できないことからも、凝ったデザインや演出になるとHTMLの方が重くなる傾向にあると思われる。

動作が重い原因は、サイトの構造や作り方に問題がある場合や、閲覧環境のスペックに依存するので、Flashだけではなく、HTMLでも同様の問題は発生する。

上記にあげられたものは、多くが回避できる問題であり、Flashだからというよりも、Flashの作り方に問題があるだけだ。

制作者の無知や怠慢または、納期が短く時間をかけられないなどに起因するものともいえる。

制作者の多くが、HTMLにシフトすることから、同様の問題が今後HTMLにも起こりうるだろう。つまりこれらの問題は、Flashのデメリットではなく、制作者側の問題なのである。

ただしSEOについては、FlashがHTMLに劣るのは間違いない。Flash単独では回避できないが、ランディングページを立てたり、SNSで拡散することによりカバー可能なので、サイトの内容次第では、効果的な演出を行えるFlashを使うべき場面は今後も多々あるだろう。

HTML5+JavaScriptの持つ優位性とは

まずFlash衰退のきっかけの一つでもあるiOSで閲覧できるという点があげられる。

HTML5+JavaScriptで作られたサイトは当然iOSで閲覧できるが、動きの激しいFlashのようなHTMLサイトの多くは、iOSで閲覧そのものはできるがPCと同様の閲覧体験はできず、期待通りの軽快な動作はしない。また、それらのサイトの多くは、古いブラウザでは正常に動作せず、代替コンテンツを用意していないものも多く見受けられる。

HTML5の魅力として動画について取り上げられることが多いが、動画一つについてもHTML5では特定のブラウザでは閲覧できない。

この状態では、HTML5が、Flashと比べて優位になっているとは必ずしも言えないだろう閲覧するサイトの内容により数値は異なるだろうが、デスクトップとモバイルデバイスとでは、デスクトップからの閲覧数が多く、また古いブラウザを使用しているユーザーも多い。それらの人々を無視して、HTMLで作成するという考え方にはやはり疑問が生じる。…………<以下続く>

テキストにすると図版や参考URLがないのでちょっと読みにくいかもしれませんが、その他「コスト面」「FlashとHTMLは共存すべき」「Flashは終わるべきなのか」「今後/新たな可能性」などについて書かせていただきました。

Webサイト制作 最新トレンドの傾向と対策

Webサイト制作 最新トレンドの傾向と対策

他の記事はこのような目次になっています。
結構興味深い内容多いです。

Webサイト制作 最新トレンドの傾向と対策 CONTENTS

■CHAPTER1 Webデザイン
01 HTML5が与えるインパクト
02 HTML5による文章構造の厳密化
03 canvasを使ってグラフを描く
04 canvas要素を使ったWebアプリ事例
05 SVGでの図形描画の基礎
06 CSS3がもたらすWeb表現の可能性
07 CSS3だけでボタンをつくる
08 Sassを活用して効率よくCSSを記述する
09 スマートフォン/タブレットに対応したWebデザインとは
10 沢山の情報を見やすくする3カラムレイアウト
11 表示領域に合わせて可変するリキッドレイアウト
12 スクロールテクニックによる見せ方の工夫
13 見た目にも楽しい動きのあるレイアウト
14 スマートフォン/タブレットを考慮したUIデザイン
15 日本語のWebフォントを活用する
16 新たなWebアニメーションツール Adobe Edge

■CHAPTER2 ソーシャルメディア
01 ソーシャルサービスの始まりから現在にいたる歴史
02 いま注目のソーシャルメディア
03 ビジネスで使えるFacebookページのカスタマイズ
04 WebページにTwitterを組み込む
05 ウィジェットをWebページに組み込む

■CHAPTER3 Webアプリケーション&リッチコンテンツ
01 Flashの現状とこれからの展望
02 Node.jsによってサーバの負荷を軽減する
03 Webアプリケーション最新事情(1) オフラインでも使用可能なGoogleアプリケーション
04 Webアプリケーション最新事情(2) Hootsuiteで複数のTwitterアカウントを管理

■CHAPTER4 スマートフォン&タブレット
01 スマートフォン/タブレット対応の最新潮流
02 レスポンシブ・レイアウトの制作手法
03 今、話題のjQuery Mobileとは
04 jQuery Mobileでのサイト制作手法
05 最近注目のPhoneGapとは
06 (株)サイバーエージェントに聞く スマートフォンアプリ開発の現場

■CHAPTER5 サイト構築&運用
01 CMSを導入するメリット
02 WordPressを利用したサイト構築
03 スマートフォンを考慮したアクセシビリティとユーザビリティ
04 Webサイトの制作と運営に関わるセキュリティ
05 サイト運営の要といえるSEOの進め方
06 アクセス解析によって効果的なWeb運営を

■CHAPTER6 ホスティング
ホスティングサービスガイド2012
全国ホスティングサービス一覧

この手のムック本は一個一個の情報は深くないですが、あらゆる内容のさわりが載っているので現状を調べる際の目安としては丁度いいんですよね。

なんか宣伝みたいになってしまいましたが書店で見かけたら是非チェックしてみてください。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事