シゴト・ススメル・チカラ~ある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
-

タグ: AI学習設計, GA4, Googleマーケティングプラットフォーム, Google広告, LTV向上, ウェビナー開催, コラム, データ活用, マーケティング分析, 広告運用最適化
【オンデマンド動画】広告成果の「頭打ち」を打破する!GA/GMPを活用したAI学習設計と運用戦略 -

タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
アツギ株式会社様:shutto翻訳ご利用事例 -

タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 採用情報, 文化, 環境
2026年5月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -

タグ: AI議事録, コラム, ナレッジ共有, 会議効率化, 文字起こし, 業務効率化, 生成AI活用, 生産性向上, 社内DX
【オープン社内報 2026年5月号】イー・エージェンシーグループ プレミアムニュース|株式会社イー・エージェンシー公式note -

タグ: BigQuery, GA4, アクセス解析, コラム, サンプリング, データ分析精度, データ活用, マーケティング分析, レポート改善, 探索レポート
バラバラな広告データをGA4で一つに アップデートで進化した「広告」セクションの活用法 -

タグ: GA4, googleアナリティクス360, web解析, アクセス解析, コラム, データドリブン, データ活用, ニュース, マーケティング分析, 導入支援
イー・エージェンシー 新経営体制に。新たにGemini Enterpriseの導入を支援

