シゴト・ススメル・チカラ~ある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
-
タグ: さぶみっと!メール配信, クラウドサービス, コラム, ニュース, 自社サービス
ITreview Grid Award 2025 Springにて「High Performer」を受賞しました!(メールマーケティングツールカテゴリー) -
タグ: eコマース, itreviewアワード, カゴ落ち対策, クラウドサービス, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにてカゴ落ち対策カテゴリー部門で「High Performer」を受賞しました! -
タグ: Webサイト多言語変換サービス, shutto翻訳, インバウンド, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにて、ウェブサイト翻訳ツール部門で「Leader」を5年連続で受賞しました! -
タグ: 2025年の崖, DX推進, GA4, Googleアナリティクス, IT人材育成, gmpプレミアムサロン, イー・エージェンシー, オンライン学習, コラム, データ活用, マーケティングDX, レガシーシステム, 企業変革, 社内教育, 自社DX戦略
「2025年の崖」を乗り越える!DX推進とIT人材の育成が鍵 -
タグ: GA4, GMPパートナー, Googleアナリティクス, Udemy Business, アクセス解析, イー・エージェンシー, オンライン学習, コラム, サイト運営支援, データ活用, マーケティング支援, 初心者向け講座, 動画講座, 学習プラットフォーム, 法人向け教育
Udemy Businessで視聴可能に!GA4のスキルアップを強力サポート! -
タグ: AI時代の働き方, Web3, コミュニケーションデザイン, コラム, ブロックチェーン, 仕事の創造性, 企業の想い, 企業理念, 働き方の価値観, 採用メッセージ, 正直に生きる, 社内文化, 社員インタビュー, 社長メッセージ, 誠実なコミュニケーション
甲斐社長から2025年度の期初メッセージ「正直に生きよう」|株式会社イー・エージェンシー公式note