Advertisement
Check these out next
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
Jul. 25, 2016•0 likes•27,248 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
「第2回 D2D WEBグラフィックツール ～デザインワークフローの転換～」で発表。webサイトにはあまりまだ採用されていないSpine、そしてめんどくさい所をまるっと引き受けてくれるAnimateCCを使って、たのしい細部を極めてみない？みたいな話です。スライド内にでてきた実例サイトはこちら < http://geirin-akiko.com/ >
utwebFollow
Advertisement
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
Editor's Notes
- 動くサイトにプログラムが必要な時代は終わった、 デザイナー歓喜のAnimateCCとSpineの紹介をはじめたいと思います。
- こんにちわ。デザイナーの宇都宮頼子と言います。 プログラマーの夫と夫婦ふたり体制で「宇都宮ウエブ制作所」という屋号で、事務所を切り盛りしています。 おもなデザイン制作ツールはまだFireworksをむりやり使い続けているという、絶滅寸前の残党派です。 本業とは別に「おなじといっしょ」という名前の育児ブログもやってます。子どものこと、家族のこと、ごはんのこと、ていねいなくらしに憧れてるもののできなくてもがいてるようすなんかを、わりと赤裸々につづってますので、またよかったらこちらも見ていただけるとうれしいです。 きょうは、モロ宣伝になってしまうのですが、このキャラクターを使って、スライドを説明していきたいと思います。
- きょう、どんな話をするのか、ということを先にお伝えしておくと、まぁタイトルで「動くサイトにプログラムが必要な時代はおわった」とか大きなことを言っちゃってるんですが、これです（めんどくさいところはAnimateCCが全部やってくれる！ その間にわたしらは楽しいところに十分時間をかけて、”神が宿る”という細部をもっと極めてみない？）というおはなしをします。
- まずは最近リリースしたサイトを紹介させてください。（スライド側で画像クリック）
- それでですね。何が言いたいかというと、さっきのサイト、ほぼ、わたしひとりで作れたんです。 先に言っておくと、プログラムは苦手で「あってないわー」と思って、諦めてるようなデザイナーです。アクションスクリプトもgotoAndStopレベルで止まってますし、jsもよくわかりません。普段は、夫であるプログラマーに丸投げしているようなデザイナーです。 そんな私でも作れた！ということを、まずは声を大にしてお知らせしたいと思います。
- このサイトはじゃあ中身は何でできているのか。 HTML + CANVASカンバス + クリエイトJS を使ったハイブリッド実装、です。 …このね、「ハイブリット実装」。この単語を自分の手柄としていえる日がくるなんて、と感慨深いものがあります。
- では制作フローの紹介です。 まず、素材づくりですね。イラレとフォトショップで、イラストをつくったり画像を加工したりします。 実を言うとこの後にfireworksにわざわざ持ってきて最終的にスライス切っちゃったりしてしまうんですが、今回はおいといて。 できあがった素材はまずをspineに読み込んで、アニメーションのパーツを作ります。 次にAnimateCCで仕上げのアニメーションを作ってパブリッシュ、つまり書き出します。 AnimateCCが書き出してくれたファイルにhtmlとcssを合体して、整形というかたちです。
- ここまできて、Spineってなに？ そう思ってらっしゃる方も多いと思うのでざっくりと説明しますね。 Spineのアニメーションのしくみは、画像をメッシュ化、つまりアミアミに分解して、そこにボーンという骨組を仕込むことで、画像をのびちぢみさせて自由に動かす、というものです。 （スライド側で画像クリック） 手間さえかければ、こんな感じで擬似３Dで動く、なめらかなアニメーションをつくることができます。
- 実際のファイルをちょっと見てみましょう。（ESCキーとCmd＋tabでSpine画面へ）
- 次にAnimateCCの紹介なんですが、ようはFlashのことなんですね。 細かい前後関係なども言い出したらキリがないので、かなり乱暴なかんじで、ババッと説明します。 iPhoneやiPadでは動かない！という悲劇のFlashだったわけなんですが、AnimateCCという名前に変わって、パワーアップして帰って来ました！ いままではflashプレーヤーがないと再生できないswfというファイル方式だったんですが、AnimateCCでは、そういうプラグインなしで、html5のCANVASとクリエイトJSでかき出してくれます。 そうすると、iPhoneでもスマホでもタブレットでも─もちろんPCでも、どんなデバイスでも動くし、しかも！どんなブラウザでも動くんです！ ここでねんのため注釈しておくと、canvas要素をサポートしていないIE7とか8は当然無理です。でももうMicrosoftのサポートも公式に終了してるわけだし、古いIEはほっといてもいいかな、というスタンスでやってます。
- ここで、「とあるデザイナー」のぼやきです。まぁ主に私のケースなんですが。 あるよねーと思って聞いていただけるとうれしいです。 （ここちょっと動かそうかなー）と思っていろんな「まとめサイト」からね、ソースやライブラリを参考にコピペして数値をいじってみるんですが、うまく動かなかったり、思ってたアニメーションにならなかったり。え！だっさい！と思うようなボーーヨンボーーヨンみたいな歯切れのわるいアニメーションになってしまったりとかよくあります。 それに対して、AnimateCCはもうほんと直感的なんですね。 まず自分の動かしたいイメージを先行で考えてよくって（こんな感じかなー）って、遊んでる感覚で、コチコチとタイムラインで動かしたら、「Ctrl」+「Enter」ターーーン！てパブリッシュするだけで、もうブラウザで動いてるんです。これはね、最近わすれかけてた感動でしたね！
- あと、ですね。 わたしIEチェックはできるだけ引き伸ばしてしまうクセがあるんですが、 組みながら（わーもうぜったいIE崩れてるわー。みたくないわ〜）とか思って、タスクぎりぎりまで後回しにしちゃうんですよね。 今回もイヤイヤIEチェックしてみたんですが、めっちゃちゃんと動いてたんですよ！逆におどろいたわ！って思って。 そもそも「どんなブラウザでもほぼ違いがない！」というのがFlashの魅力だったんですが、 そんな天国があったってこと、みんなもう忘れてるでしょう？忘れてたよね？ていう。
- で、じゃあ本業プログラマーから見てどうなのか？ うちの夫、いわくです。 パブリッシュされたつまり書き出された、JSを見てもらいました。 「ゼロからこれ書けといわれたらちょっと引く」 と思うくらい、本質的でない部分をAnimateCCがうまく自動化してくれている。とのことでした。 あとはNodeJS（ノード・ジェイエス）とかpackage.json（パッケージ・ジェイソン）とかブツブツ言い出したんですけど、くわしく聞きたい方はまた後で本人に聞いてみてください。
- ここでたぶん疑問をお持ちだと思うんです。「でもSEOとかアクセシビリティはどうなっとんの？」と。 canvasタグの中には、コンテンツを挿入できるので、 そこに代替HTMLを仕込んでいます。 そうすると音声読み上げもしてくれます。 でも欠点もありまして、文字選択ができないんですね。 とはいえ、カバーできるやり方はあってですね、たとえば、背景をcanvasにしておいて、上のレイヤーに文字情報やフォームのhtmlを重ねる、といったやり方とかで十分にカバーはできるなと思っています。 ちなみに、さきほどお見せしたサイトの場合は、まっすぐ規定どおりに揃ってる箇所をできるだけ無くしたいという意図を優先させて、この方法をとっていません。
- で、ごめんなさい。製作フローの話にもどります。 SpineとAnimateCCの連携についてです。 今回は私一人で完結できる方法ということで、 連番pngで書き出して、AnimateCCに読み込む方法を取りました。 これをムービークリップとして一本化させると、さらに複雑にアニメーションさせることができるわけです。ムービークリップというのは、Fireworksでいうところのシンボル、Photoshopでいうところのスマートオブジェクトみたいなものです。いわゆるパッケージ化みたいなもんですかね。 「なんでSpineで最後までアニメーションつくっちゃわないの？」という疑問も浮かぶと思うのですが、 連番pngというのは、その名の通り透過pngが大量に書き出された状態なんですね。 ステージサイズは画像サイズになるし、もっとリッチなアニメーションにしたい！と思って秒数をのばしてしまうと、そのフレーム数はファイル数になっちゃうんです。 なので、できるだけSpineでは小さなファイルになるよう工夫しています。 あ、あと補足です。 連番png以外にも、SpineからJsonで書き出してどうのこうの、とか他にも連携方法はいろいろあるのですが、そのあたりの詳しいことを聞きたい方や興味のある方は、きょうプログラマーも来てますので、彼に聞いてみてください。
- ではどんな感じで連携してるのか、実際のファイルを見てもらいましょう。（ESCキーとCmd＋tabでAnimateCC[sample.fla]画面 手の最深階層へ）
- こないだ6月にAnimateCC 新バージョンがリリースされたんですが、これがかなり強力にアップデートされました。 いままでプログラムが書けないと実現が難しかった、かゆいところに手が届いた印象です。 一例ですが、 パブリッシュのオプションで「幅や高さを基準に、─またはその両方を基準に─レスポンシブな拡大／と縮小」ができるようになったり、 読み込みが完了されたら自動的に消えてくれるプリローダーを埋め込むことができたり、などです。 これでますますデザイナーだけで完結できるところが増えました。
- では、最後のまとめです。 アニメーションつくるのって楽しい！心がおだやかになっていくわ〜！ そういう忘れかけてた感覚を思い出させてくれた上に、楽しい部分を最大限サポートしてくれるSpineとAnimateCC。 ─まぁ。これはプログラムが苦手な、わたしこと、ヘボデザイナーのイチ意見なんですが、ぜんぜん知らん人が書いた、プログラムの間と間に挟まってる、いみわからん数字をこれかな？それともこっちかな？って、トライアンドエラーでいじるよりよっぽど楽しい時間やで！ということをみなさんにもお伝えしたいです。
- 以上になります。 ご静聴ありがとうございました！！
Advertisement