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

タグ: Amplitude, EC改善, LTV最大化, コホート分析, コラム, データドリブン, ファネル分析, プロダクト分析, リテンション分析, 行動データ活用, 高速PDCA
【Amplitude入門シリーズ第3弾】迷走する施策評価から脱却する。データ起点で「次の打ち手」を最速で導く、LTV最大化の高速PDCA -

タグ: DKIM, DMARC, SPF, カスタムドメイン, コラム, ブランド信頼性, メールマーケティング, メール配信, 到達率向上, 認証設定, 迷惑メール対策
メルマガ配信で独自ドメインが必須な理由とは?フリーメール利用のリスクと到達率への影響 -

タグ: Amplitude, ai, アプリ改善, イベントレポート, イー・エージェンシー, グロース, コラム, データ分析, プロダクト分析, ユーザー行動分析, リテンション
【イベントレポート】Amplitude Tokyo Meetup supported by e-Agency〜データが導いた逆転劇~ある企業のグロースストーリー -

タグ: エンゲージメント向上, コラム, ノーリプライ, メールマーケティング, メール配信, ユーザーコミュニケーション, リレーション構築, 受信者体験, 返信誘導, 送信元メールアドレス
まだ「no-reply」を使っていますか?迷惑メール判定を招くリスクと送信専用の代替策 -

タグ: Amplitude, ECサイト, ltv, コホート分析, コラム, データ分析, ファネル分析, プロダクト分析, リテンション分析, 行動分析, 顧客体験
【Amplitude入門シリーズ第2弾】「なぜ売れない?」に終止符を打つ。 LTV向上のボトルネックを特定する、3つの「行動分析」手法 -

タグ: エンゲージメント, コラム, コンテンツ最適化, メールマーケティング, メール心理学, ユーザー行動, 心理トリガー, 配信戦略, 開封率向上
「届いた数」で満足しない!FCMとGA4でプッシュ通知の成果を「参照元/メディア」まで深掘り分析

