Sponsored Contents

adobeの最新記事

Image credit:
Save

URLの前に「雷」マークがついているモバイルサイトの秘密とAdobe Animateの関係、ご存知ですか?

Adobeのプロダクトマネージャーから良い広告制作でのヒントを

井上晃(AKIRA INOUE)
2019年5月10日, 午前07:00 in Adobe
37シェア
0
37
0
0

連載

注目記事

スマホでググッたとき、URLの前にカミナリマークが表示されるサイトがあるのをご存知ですか? これはそのウェブページが「AMP」による高速表示に対応していることを意味します。最近はこうしたモバイルサイトを頻繁に見かけるようになりました。

一方で、サイト内の広告もAMPにうまく対応させなくてはいけない、ということが課題として存在します。広告だけ表示が遅いのは、コンバージョン率を下げる要因になり得るからです。

さてそんな状況の中、4月17〜18日に開催された「AMP Conf 2019」に合わせ、「Adobe Animate」のプロダクトマネージャー「Ajay Shukla(アジャイ シュクラ)」氏が初来日。今後のモバイル向け広告制作における、重要なアップデートについて、お話いただいたのでレポートしたいと思います。

Gallery: Adobe AnimateがAMP HTMLをパブリッシュする | 5 Photos

5

カミナリマークでAMPサイトを見分けられる

そもそも「AMP」とは、Accelerated Mobile Pagesの略称です。2015年にGoogleが発表した、モバイル向けWebサイトを高速表示させる仕様のこと。冒頭で触れたとおり、AMPに対応したウェブサイトでは、Googleで検索したときにURLの直前にカミナリマークが表示されます。

中身の詳細は省きますが、要はAMPの定める仕様に適したHTMLとJavaScriptコード(AMP HTMLとAMP JS)が使われていて、作法に一定の制限があるわけです。これにより、無駄なロードやレンダリングなどが極力省かれる仕組みになります。

ITコンシェルジュ
▲こんな感じのカミナリマークを見かけたら、それがAMP対応のモバイルサイトということです

また、こうしたAMP対応のウェブサイトを開くと、Googleのサーバーが自動的にキャッシュした情報が読み出されます。

ITコンシェルジュ
▲記事を開いたときにURLがGoogleのサーバーになっているのがわかります

これらの仕組みによって、決してハイエンドでないスマートフォンでも、リッチなコンテンツが楽しみやすくなるというわけです。

AMP対応広告をAdobe Animateで作る

一方で、AMPは現在進行系で発展を続けています。Googleが次に一手として動いているのは広告の改善だと「Adobe Animate」のプロダクトマネージャー「Ajay Shukla(アジャイ シュクラ)」氏は解説します。

Shukla氏:「AMP対応のウェブサイトは早く表示できるの​​​​ですが、広告だけは遅くなってしまうことがあります。そこでGoogleとAdobeが協力して、Adobe AnimateからAMP対応の広告コンテンツを簡単に作れるようにしようという話になりました」

ITコンシェルジュ
▲Shukla氏は今回初来日。インド工科大学ルーキー校で工学学士号(Indian Institute of Technology, Roorkee)、ミネソタ大学でコンピュータサイエンスの修士号、シカゴブースビジネススクール(Chicago Booth School of Business)で経営学修士号を取得。クアルコムとモトローラでの勤務を経て、2007年にアドビに入社。CFA協会認定証券アナリストでもあります

そもそも、Adobe Animateはアニメーションを作成するツールです。2015年11月に改称される前は、「Flash Professional」と呼ばれていました。しかし、「Flash Player」だけでなく、「HTML5 Canvas」や「WebGL」といったマルチプラットフォームに対応したため、名前から「Flash」がなくなったという背景があります。そして、​​​​​​2018年10月にはAMP HTMLへの対応も発表されました。
​​​​​ITコンシェルジュ
​​​▲Animateで作成したコンテンツをAMP HTMLの仕様で出力できます(写真の機能はBeta版)。基本的なコンテンツの作り方は従来と何も変わりません
​​​​​​
​​では、AMP HTMLに対応したコンテンツはどのくらいの速度で表示されるのでしょうか。Shukla氏が筆者の目の前で、HTML5 CanvasとAMP HTMLのコンテンツを「Lighthouse」のベンチマークで比較してくれました。

結果、広告コンテンツが表示されるまでにかかった時間は、HTML5 Canvasが3.9秒、AMP HTMLが2.9秒。両者が表示されるスピードには1秒の差がありました。ファイルサイズはAMP HTMLの方がほんの少し大きいにも関わらずです。モバイル向けサイトにおいて、この差は大きいと言えます。

もちろん、Adobeはあくまでクリエイティブの面を担当しているので、こうしたAMPの​​​​​パフォーマンスの最適化についてはGoogleが担う領域です。ただ、Adobeとしても​​​​​​出力時のファイルサイズをさらに小さくしていくことにGoogleとともに取り組んでいるとのこと。

ITコンシェルジュ
▲Adobe Animateの画面。初心者でも解説動画を見ながら使い方を学べます

Adobe Animateには、「キャラクターアニメーション」「ソーシャル」「ゲーム」「教育」「広告」「Web」という6つの大きなカテゴリがあります。

Shukla氏曰く、「この6つのカテゴリで、それぞれのユースケースをバランスよくサポートしていくことが必要。ユースケースによって求められているものが異なるからです。広告ならイメージを取り込める必要がありますし、ゲームならUnityに対応していた方が便利など、ユースケースごとのニーズを全てカバーできるのがAnimateだと思っています」とのこと。

同氏が「まずは欧米での展開を重視した」というように、まだまだ日本の一般ユーザーにとっては馴染みが薄い存在ではあります。しかし、スマートフォンでウェブサイトを見ている裏で、こうしたツールが活躍しているのは非常に興味深く、今後のアップデートにも注目しておきたいです。




広告掲載についてのお問い合わせはad-sales@oath.com までお知らせください。各種データなどはこちらのメディアガイドをあわせてご覧ください。

37シェア
0
37
0
0

Sponsored Contents