シゴト・ススメル・チカラ~あるWebディレクターの考えるこのお仕事って?~ 第4回 できないをできないと即答しない=プロ
西野 公文
株式会社イー・エージェンシー
普段ディレクション業務を従属的にしていると、ある程度の経験測で制限枠をつけて判断してしまうことが多くなります。
「できる」「できない」を明示的にすることで業務効率化に寄与していたり、不可能な注文を断るための制限として有益なことが多いのですが、できないことをできないと思い込んじゃって仕事するのは、本当にあるべきディレクションなのか?というのが今回のそもそもポイントです。
今回は、そういったことを考えさせられた経験談を、小さなTipsを交えながら語ってみます。
困った困ったFlash案件が来たぞ!
今までFlash案件といえば、「SEO対策に不向き」「ログ計測を踏まえると、制作時の配慮点が多すぎる」「情緒軸表現に振った表現はデータが重くなったり、SWF分割しなきゃいけない」などと、それはそれは繊細な扱いが求められていました。
私も数年のWebディレクション経験で、Flash案件ほど厄介な案件は無いとすっかり身に染みています。
まぁ、それだけ表現軸がリッチ(=動画・音・シーンを重ねることでの3次元的な訴求が可能)なわけですから、検討ポイントも増えて厄介になる、さらにはSEO対策とまでなると、そりゃあもうどうすりゃあいいんだ!となってしまっても不思議ではないですよね。
時代の流れで、不可能は可能になる!
いままでFlashの認識として、
1:1つのswfで構成されているの特定シーンをブックマークしたい。
2:swf内から、HTMLへのヒストリーバック等の特定動作をさせたい。
とSEOやログ解析においての重要なファクターに対応させることがなかなか難しい状態でした。実際、上記1と2を実現させるためには
1:swfをシーン毎に分割し、swf-swfリンクを設定したり、EmbedさせるHTMLをシーン分用意する。
→この場合、シーンが変わるたびに、新しいローディングシーケンスからの再生が必要で、内容表示までの遅延時間(レイテンシ)が長い。
2:そりゃあもう開発が必要です。個別の機能要件を設計して、それをJavaScript等の外部スクリプトで制御する。
などが必要でした。
しかし、それを一気に解消したものが、
・Swfaddress
http://www.asual.com/swfaddress/
と呼ばれているJavaScriptソースです。
これは、MITライセンスとして公開されているソースで、ソース内のライセンス記述を削除しなければ、基本的にフリーで使えます。Windows、Macintoshの主要ブラウザーでの動作検証も対応済みですので、導入は比較的簡単です。ちなみにこのソースの動作環境は、FlashPlayer8(swf-javascriptの通信機能サポートバージョン)以上です。
コレを使うことでのメリットは、
・今までswf内の特定シーンをブックマークさせられなかったものが、簡単にできる
・シーン毎にswfを分割制作する必要がないので、制作効率が劇的に向上する
・swf内からHTMLに対してのヒストリーバック等の制御ができる
(Operaはヒストリーバックでswfキャッシュを毎回再読み込みするので、現実的には非対応)
などが挙げられます。
この機能を使って、私が実際に導入した制作事例として、以下をご紹介します。
・ネスカフェ エクセラWebサイト
http://jp.nescafe.com/excella/
このページの下部にある「アイスロースト」バナーを押した際、遷移先のアドレスは、 http://jp.nescafe.com/excella/point/#iceとなり、ローディング後はアイスローストの商品特性シーンに遷移します。ユニークなアドレスなので、このシーンにブックマークできます。
次にこのページの上部にある「製品特徴」ナビゲーションボタンを押してみてください。その際のアドレスは、 http://jp.nescafe.com/excella/point/#pointとなり、製品特徴の一覧シーンが再生されます。この時のswfローディング時間は、アッという間なはずです。
これが、1swfで構成しているメリットです。要は、アイスローストをクリックした段階で、製品特徴に必要な1つのファイルで構成したswfは全てインターネットキャッシュに読み込まれています。その他の製品特徴へのシーン遷移はキャッシュ内からソースが引っ張られ、次シーンからの再生速度が向上するわけです。
しかも、swfのシーン毎にhtmlファイル名と同様の【/#シーン名】というアドレスが振られるので、ログ解析ソフトやブックマークなどにもそれぞれの視聴データが取れるというわけです。
(一部のログ解析ソフトではデータ取得が非対応の可能性があります。)
今回の制作事例は、細かなswf表示速度チューニングを行ってないので、1回目ローディングは多少時間のかかる状態ですが、細部まで手を入れると劇的な速度向上が得られます。
上記以外のswfaddress導入事例としては
・HONDA RA-107 myearthdream.com
http://www.myearthdream.com/#root
があり、こちらはもうちょっと複雑(えぐいほどチューンされた)な構造になっています。
Web業界にいると忘れがち、時間はチカラに変わること
今回の導入事例が成功したのは、「これができたらいいなぁ・・・」という願望をFlashプログラマーに打ち明けたことからです。さらっと「あぁ、外国サイトでは導入事例ありますよ」なんて話から、ダメモトで導入検証を始めたのですが、すっかりこの便利さのとりこになってます。
今回のように以前は【できない】ことでも、Webの進化の速さを考えると、今では実現可能になっていることもありますので、簡単に自分の経験則だけで【できない】と判断をせずに、常に疑問符を持って制作ディレクションをすることが、意外なところで自身のチカラを高めるきっかけになってきます。
最後に、今回紹介したswfaddressでも、FlashPlayerの特定リビジョンなどで正常動作しない等の不具合もあります。まぁ、それをもってしても恩恵のほうが大きい場合のみ、導入検討をされることをお勧めします。
PICK UP
-

タグ: CART RECOVERY, カゴ落ち対策, カートリカバリー, クラウドサービス, コラム, ニュース
ゴルフネットワークプラス株式会社様 カゴ落ち改善を自動化「CART RECOVERY®(カートリカバリー)」ご利用事例 -

タグ: 1stPartyデータ, AI学習設計, GA4, GMP, Google広告, LTV最大化, ウェビナー開催, コラム, データ活用, 広告運用改善
広告成果の「頭打ち」を打破する!GA/GMPを活用したAI学習設計と運用戦略 -

タグ: AI Agents, AI分析, Amplitude Tokyo Meetup, PDCA改善, イベントレポート, グロース戦略, コラム, データドリブン, データ活用, プロダクト分析
【イベントレポート】プロダクトの意志をデータとAIで実装する 〜現場が自走するプロダクトアナリティクスの新時代〜 -

タグ: BigQuery連携, GA4, Looker Studio, コラム, ダッシュボード設計, データ分析効率化, データ活用, マーケティング分析, レポート自動化, 分析工数削減
2025年度 お客様満足度調査 結果のご報告 – Google アナリティクス 360等データ活用支援サービス -

タグ: AEO, AI Visibility, AI検索, Amplitude, コラム, データ分析, ブランド可視化, プロダクト分析, マーケティング分析
SEOの次はAEO?AI検索時代の新戦略②「AIビジビリティ」でブランドの視認性を解き明かす -

タグ: GA4, GA4導入, GTM, Udemy講座, googleタグマネージャー, アクセス解析, オンライン学習, コラム, データ活用, 計測設定
今なら1,500円!GA4×GTM徹底解説 GA4導入講座をUdemyで公開!

