WD Online

集中企画一覧 Web Designing 2016年4月号

Adobe Animate CCの全貌とその戦略(3/3)●集中企画 Chapter 03: 事例から見るAnimate CCの使いどころ

リッチコンテンツツールとしてWebシーンの一時代を築いてきたAdobe Flash Professionalが約3年ぶりのメジャーバージョンアップをし、2016年2月、その名称を「Adobe Animate CC」として正式に公開された。ここでは全貌と、これからの展望について解説する。

最後に、実際にAnimate CC(旧Flash Professional)経由でHTML5 Canvasコンテンツを制作した事例を紹介。どのようなシーンでAnimate CCを用いると効果的か、使いどころを解説する。

 

Animate CCとHTML5 Canvasの関係

具体例を見る前に、HTML5 Canvasについてあらためて触れておく。

Canvasは、HTML5で導入された新しい要素で、JavaScriptを使うことで動的に図を描画することができる。逆に言えば、たとえ簡単な図形であっても、JavaScriptを書くことができなければ何も描画することができない。

その点Animate CCで作成したコンテンツは、Canvasへの描画に必要なJavaScriptに自動的に変換して書き出すことができる。そのため、アニメーションを再生するだけであれば、JavaScriptを1行も書くことなく実装することが可能。もしクリックによってアニメーションを再生するといったインタラクション制御などを実装する場合に、初めてJavaScriptを記述していくことになる。

 

パーツアニメーションへの利用

ここからは、筆者が制作に参加した事例2点をもとに解説する。

216627ac61d124bb546b6c68f6d184d9.jpg
01 居酒屋「魚民」によるキャンペーンサイト。名前を入力すると、約5,300種の魚介類名との合致度=「魚民度」が算出され、度数に応じてクーポンが発行される。結果をSNSにシェアすることで、さらに豪華賞品が抽選で当たるようになっている
「魚民はどこにいる?」 公開終了 エージェンシー:DENTSU プロダクション:RYDEN

1点目の「魚民はどこにいる?」は、HTML5でつくられたキャンペーンサイトだ(01)。キャンペーン用につくられたオリジナルキャラクターに合わせた世界観を演出するため、各画面に合わせてアニメーションを実装した。その中で、キャラクター登場時や抽選時には、よりリッチな表現が必要になり、部分的にCanvasを使ったアニメーションを採用している。ここにAnimate(Flash)を利用することで、タイムラインを使って効率的に複雑なアニメーションを作成することができた。また、アニメーション作成とインタラクション実装の2つの工程を分離することができたため、並行して作業が可能になるというメリットもあった(02)。

f8e9d2d4cfe9a310fce52cb1afb0ba51.jpg
02 キャラクター登場時の背景に表示されるインジケーター風アニメーション。デザイナーはAnimate CCのタイムラインでアニメーションを作成するだけで、JavaScriptは1行も書いていない。エンジニアとのスマートな分業が実現できた

ちなみに同キャンペーンでは、PC、スマートフォン、フィーチャーフォンの3つのプラットフォームそれぞれに、専用のページを制作。モバイル向けにはファイルサイズを抑えるために、PC用に作成したCanvasアニメーションの一部のみを利用する、という工夫も行った。

Animate CCを適材適所で使いこなす

もう1例の「KAMABOKO ROAD TO 1000」は、かまぼこ900周年を祝うためのスペシャルサイトだ(03)。

a421675b6191ba29a0ab694f7c7af005.jpg
03 誕生から900周年を迎えた「かまぼこ」のスペシャルサイト。1,000周年に向けて、これからの100年間に込められた想いを近未来SFタッチで表現している
「KAMABOKO ROAD TO 1000」 エージェンシー:DENTSU プロダクション:RYDEN

オープニングや、コンテンツ内のグラフのアニメーションにAnimate(Flash)を利用しており、1例目と同様にアニメーション作成とインタラクション実装の分業を行った(04)。

6b820723a274bd719ad59d55d708d647.jpg
04 Animate CCを利用できると、すべての実装をコーディングに頼らないメリットがある。エンジニアとの分業が可能で、制作コストにも寄与する

Animateから出力されるJavaScriptでは、簡潔かつ直感的なコードでCanvasを利用するために「CreateJS」というライブラリが利用されている。このCreateJSには、アニメーションの再生以外にもさまざまな機能が用意されているため、エンジニア側ではそれを利用する形でコンテンツのプリロード、BGMの再生、スクロール位置に応じたグラフの再生を実装している(05)。

06dfa2d89ff705a3959aa65980eb5e82.jpg
05 冒頭ではユーザーにサウンド再生のON・OFFボタンを選んでもらうつくり。このサウンド再生をCreateJSの機能によって実装した

なお、同サイトには、途中で挿入されるアニメーションがあるが、ここでは意図的にGIFアニメーションを使っている(06)。動く箇所すべてにAnimateを使うのではなく、ツールの向き・不向きを理解して活用するのが重要なポイントとなる。

8deceba0f2d7c5ae5c55c172fddb4e2e.jpg
06 アーティストのシシヤマザキ氏による特徴的なアニメーション。このように1フレームずつ画像が描かれるような表現をCanvasで描画すると、逆に膨大なファイルサイズになってしまうため、この部分はGIFアニメーションで実装している

Web標準技術に対応するAnimate CC

ここまで、Animate CCを活用したWebサイトの事例を紹介してきたが、これ以外にもAnimate CCの活用事例は多数ある。HTML5でつくるカジュアルゲームやバナー広告、タイムラインを用いたソーシャルゲームの素材、モバイルアプリのプロトタイプなど、活用される幅も広いが、いずれも、Animate CCの強みである、直感的かつ効率的なアニメーション作成機能と、インタラクション制御機能をおおいに活かしている。

Animate CCは、HTML5やWebGLといったWeb標準技術に寄り添いながら、良質なインタラクティブコンテンツを制作するメリットを備えている。使いどころを踏まえたAnimateの活用が、効率的で高い生産性をもたらしてくれるはずだ。

 

e0d68205f4a65f3c4f03f7b0166b1f36.jpg
Text:沖良矢(Chapter 01、Chapter 03)
愛媛県生まれ。デジタルコンテンツ制作会社にて各種制作/ディレクションを務めた後、2008年に独立。インタラクションデザイナーとして、さまざまなプロジェクトに参加している。
20ee4d5194830438a746098dee3a9741.jpg
Text:池田泰延(Chapter 02)
(株)ICS代表。筑波大学非常勤講師。Flash経験15年。勉強会やメディアサイト運営などの活動を通して積極的にWebのインタラクションデザインの情報共有に取り組んでいる。https://ics.media/

掲載号

Web Designing 2016年4月号

Web Designing 2016年4月号

2016年3月18日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

ECサイト、次に打つべき6つの施策/Adobe Animate CC

サンプルデータはこちらから

■ 特集:ECサイト、次に打つべき6つの施策
 自動化・効率化‥‥。あなたのサイトを儲かるサイトに!

自動化と効率化が鍵。儲かるサイトはこうつくる!
「ECショップの売り上げが伸びない!」「それどころか、毎日の作業に押しつぶされそう」といった悩みを持つ店長さんやショップの運営担当さんは数多くいらっしゃるはず。そこで彼らの声にじっくりと耳を傾けてみると、「集客」「決済」「ステップメール」「チャット」「多店舗展開」「倉庫・物流」の6つにポイントがあることが見えてきました。
儲かっているショップは、この6ポイントをよくよく見直し、ツールなどを使いながら、自動化・効率化しているのです。本特集は、悩めるショップの皆さんはもちろんのこと、サイトの制作に携わるWeb制作者の皆さんにも読んでいただき、一丸となって「売れるECサイトづくり」に勤しんでいただくための内容になっています。さあ、はじめましょう!

 【Introduction】中小ECサイト運営者が、今取り組むべき6つの施策
 手間のかかるSNSマーケティング、本気で取り組むならツールが役立つ
  プロが薦める最新デジタルツールレポート1:コムニコマーケティングスイート
 カード決済をしない顧客に最適な支払い方法を提供する「導線」を
  プロが薦める最新デジタルツールレポート2:Amazonログイン&ペイメント
 シナリオに沿って内容を変え、自動送信する「ステップメール」
  プロが薦める最新デジタルツールレポート3:アスメル
 【Column】中小のECサイトにこそ、マーケティングオートメーション導入を
 Webにおける「おもてなし」の接客を実現する「チャットツール」
  プロが薦める最新デジタルツールレポート4:Zopim
 モール間の管理・連携を自動化してくれるツールがすごい
  プロが薦める最新デジタルツールレポート5:ネクストエンジン
 使いやすく独自色の強い新しい物流サービスに注目を
  プロが薦める最新デジタルツールレポート6:オープンロジ

■ 集中企画:Adobe Animate CCの全貌とその戦略
 “Flash”がHTML5時代に生まれ変わった! リッチコンテンツ作成ツールの必要性を解説

リッチコンテンツツールとしてWebシーンの一時代を築いてきたAdobe Flash Professionalが約3年ぶりのメジャーバージョンアップを行い、2016年2月、その名称を「Adobe AnimateCC」として正式に公開されました。「なぜ、今、Flashをバージョンアップするのか」「何ができて、どのような需要に対応しているのか」など、その全貌と、これからの展望について解説していきます。

■ WD SELECTION
Prius I.D./relax×LEGACY『relax』特別復刊プロジェクト/ホンダオートテラス presents 中古車グランプリ/リベロジック株式会社/727看板物語/アニメ『ヒストリカル』/IJC MUSEUM IS JAPAN COOL ?/KPP 5th Anniversary Special Website/PS4「進撃の巨人」(Yahoo! JAPAN PR企画)/GIANT MINI4WD PROJECT/un-T factory! NAGOYA /NON-GRID Inc./SAVASミルク「よみがえれ、運動部魂! 部活ワザ選手権」

■ ビジネス・EC
 □ ECサイト業界研究
  ファーストタッチポイント:リピーター獲得のポイントは「ダンボール」にあり

 □ 月刊店舗設計
  ブランドショップAXES:細かな改善を積み重ね、売上を半年間で150%向上

 □ モバイルビジネス最前線
  monomy:日本のモノづくりを変える? 新スタイルのアクセサリー通販アプリ

 □ 知的財産権にまつわるエトセトラ
  動物が描くアート作品と著作権

 □ Bay Area Startup News
  ニッチな製品でも、世界には需要がある! クラウドファンディングで海外進出

■ マーケティング・プロモーション
 □ サイト改善基礎講座
  アクセスログに統計解析を用いてユーザー像を導く

 □ ハギハラ総研
  ネット利用時間という考え方はいずれなくなる

 □ デジタルプロモーションの舞台裏
  ど真ん中の商品訴求でビール・酒類商戦を勝ち抜く

 □ 行動デザイン塾
  “脳内カレンダー”活用のススメ

 □ 課題解決のためのUI実装講座
  ページ遷移をなくして離脱を防げ! 無限スクロールの活用方法

 □ 解析ツールの読み方・活かし方
  過去パターン依存から脱却し、新たな顧客層を掘り起こす

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
  [バズ施策]マス→ネットでバズらせる:引越し侍TVCM by 眞鍋海里
  [デジタルプロモーション]PR成功の黄金律:Intelligent Parking Chair by 築地 Roy 良
  [Webサービス]声で伝えるストーリー:Adobe Voice by 土屋尚史
  [IoT]本当に意味のあるものは、いつだってシンプルだ:Calender Watch by 神谷憲司

 □ モノを生むカイシャ
  シフトブレイン:本当の仲間たちとたどり着いた「働き方」の追求

 □ 清水幹太の「Question the World」
  褒めて褒めて褒めまくって、歴史を刻む:クレア・グレイヴス

 □ ツクルヒト
  「圏外」から伝えつづけるリアル:都築響一(編集者)

 □ 最果タヒの「詩句ハック」
  第22回 自動返詩

 □ デザインにできることMonologue
  Vol.147 2001年から旅して

 □ エキソニモのドーン・オブ・ザ・ボット
  人工知能は超知能、そして“悟り”へ‥‥。人間とBOTの対談も今月でログアウト!

■ インフォメーション
 □ Topics
  TABO/Japan Growth Hacker Awards 2016/Phantom 4

 □ Movement&News
  横尾芸術の本質は“ 引用” にあり「横尾忠則 迷画感応術」/「私」とは誰だろう? 世界と自分との新たな関係性を探る展覧会/玉木宏からピース又吉、メーテルまで! 展覧会は音声ガイドで選ぶ? ほか
  【2015年日本の広告費】連続増加の牽引役はインターネット広告、運用型広告はさらなる拡大/“ グロースハッカー”が語るカイゼンの極意/IBMとソフトバンク、Watson日本語版APIを提供開始 ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています