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

タグ: エンゲージメント, コラム, コンテンツ最適化, メールマーケティング, メール心理学, ユーザー行動, 心理トリガー, 配信戦略, 開封率向上
「購読解除」を隠していませんか?「迷惑メール」に変わる心理と今すぐできる導線改善 -

タグ: キャリア観, コラム, リモートワーク, ワークライフバランス, 働き方, 本音トーク, 社内文化, 社員座談会, 組織の多様性, 若手社員
【社員座談会】「若手メンバー」から見たイー・エージェンシーのリアル。入社後のギャップから、20年前の”激務時代”への本音まで聞いてみた|株式会社イー・エージェンシー公式note -

タグ: オプトアウト, オプトイン, コラム, メールマーケティング, メール配信コンプライアンス, 特定電子メール法, 迷惑メール対策, 送信前チェックリスト, 送信者認証
迷惑メール判定を防ぐ!送信前に必ず確認すべき「3つの法令遵守チェックリスト」 -

タグ: CART RECOVERY, CVR向上, EC広告戦略, カゴ落ち対策, カゴ落ち広告, クロスチャネル施策, コラム, ダイナミック広告, リターゲティング広告, 広告自動化
カゴ落ち広告はなぜ成果が出るのか?通常のリターゲティングとの違いとCVR向上の仕組みを徹底解説 -

タグ: Analytics設定, Firebase, GA4, WebView計測, アプリ分析, コラム, データ計測精度, トラッキング設計, モバイルアプリ, ユーザー行動解析
GA4計測の精度を向上させる!アプリ内WebViewとWebデータの正しい分離方法 -

タグ: DKIM, DMARC, SPF, さぶみっとメール配信, コラム, メールガイドライン, ワンクリック購読解除, 到達率改善, 大量送信者, 迷惑メール対策, 送信ドメイン認証
【2025年総まとめ】Gmail、Yahoo!メール、Outlookなど最新メールガイドライン解説

