文字デザインをしてみよう Vol.0 文字組みの基礎

こんにちは、ユイPです。
東京では桜が開花し始め、すっかり春の陽気になりました~。もうすぐ4月、別れの季節が終わって、新しい事が始まる季節ですね。

今回は文字デザインをする前の文字組みの基礎編です。
ロゴを作る以前に、文字を綺麗に見せる文字の扱い方やフォントについて書いてみたいと思います。

★文字デザイン本編 Vol.1 Vol.2

※今回は「和文」をベースとした解説を行います。


フォントについて

文字デザインをする上でまず欠かせないのが、フォントです。文字がメインとなるクリエイティブにおいてどんなフォントを選ぶかは1番重要なポイントじゃないかな?と思います。
和文フォントには代表的な2つの種類があります。「ゴシック体」「明朝体」です。

左がゴシック体、右が明朝体です。同じ画像でも、フォント一つでだいぶ印象が違うのがわかりますね。ゴシック体の方が目につきやすいけど、明朝体の方が画像にあっていて雰囲気が出ていると思います。

ゴシック体は縦も横も同じ太さが特徴です。明朝体は縦が太くて横が細く、ウロコと呼ばれる三角形が右端についています。
またゴシック体は「視認性」が高く、明朝体は「可読性」が高いという特徴があります。


Point.「視認性」と「可読性」について

視認性:目で見たときの確認のしやすさのこと
可読性:読みやすさの度合のこと


こういった文章の場合、見比べてみて本文の方は明朝体の方が読みやすいと思いませんか?
明朝体は線が細いので、読み手が疲れにくいそうです。確かに、ゴシック体の方ははっきりとした文字が続いていて長い文を読んでいたら疲れてしまうかも…ゴシック体が並んでいる紙と明朝体が並んでいる紙だったら、明朝体の方を手にとって読んでしまいそうですね。
ですが、パッと目につくのはゴシック体の方ですよね。なので、タイトルの部分、この画像でいう「こころ」の部分はゴシック体の方が適しています。
これらがゴシック体の「視認性」、明朝体の「可読性」の特徴です。

基本的に資料や、レポートなどはこのゴシックと明朝を使う事が多いと思われます。
プレゼンテーションなどに使う資料は視認性の事、そしてスクリーンに映すと文字が薄くなって細い明朝だと見づらくなる事などを考えてゴシック体を使う事が適しています。
逆にレポートなど文章がずらっと並ぶものは、「可読性」を考えて明朝体がいいですね。ゴシック体でも、太さを細めにするといいと思います。明朝は逆に太くしすぎないように気をつけましょう。

ゴシックや明朝とひとえに言っても種類がたくさんありますし、それ以外にもフォントの種類はたくさんありますね。

同じ文字でもフォント一つで雰囲気が変わるというのを伝えるために、同じ文章を色々なフォントを使って打ってみました。
ロゴなどを作る時は、イメージに合わせて色々なフォントを試してみると楽しいですね!

文字のバランスを整える

文字詰め

まずはこちらの画像をご覧ください。

同じフォントサイズで、全く同じ文章です。でも何か違いますよね。
上の文章は文章を打ったままのベタ組み、下の文章は文字と文字の間隔を詰めてバランスを整える「文字詰め」を行っています。
文字詰めは文字を扱う際に非常に大事なポイントになります。

文字詰めには「カーニング」「トラッキング」といった機能を中心に使用します。※Photoshop、Illustratorなどのソフトの場合


Point.「カーニング」と「トラッキング」

カーニング:隣同士の2文字の間隔を調整する
トラッキング:テキスト全体の間隔を一定に整える

文字詰め文字組みについての詳細はこちらの記事もご覧ください→たのしい文字組み 字間を調整してみよう


こんな感じで、文字の間隔でだいぶ印象が変わりますね~。

私が文字詰めを行う手順としては、まず文字全体に一度「オプティカル」もしくは「メトリクス」をかけます。※この2つの違いを細かく説明すると長くなってしまうので、気になる方は検索してみてください
その後に気になる部分をカーニングで一つずつ調整したり、全体の字間を広く/狭くしたい時にはトラッキングの数値を調整します。

文字の大きさのバランスを整える

フォントによっては、漢字と平仮名/カタカナの大きさが少し違ってしまっているものがあったりします(デザインフォント系に多い)。
強調するためにわざと差をつける意図がない場合には、それぞれの文字サイズを調整して一定の大きさにしましょう。

バランスがとれてより綺麗に見えるようになったのではないでしょうか。

逆に、一定のフォントサイズのものをあえて差をつけて目立たせたい文字を強調させるという手法もあります。
これはロゴなどの文字デザインをする際にオススメです。

「お母さん」「異世界」「転生」というキーワードが目立つようになりました。
文章やクリエイティブの種類によって適宜使い分けてみてください!


文字の扱い方については私が社会人としてデザインをやり始めてから最初に学んだ事でもあります。それくらい大事な事なんですね~。
文字詰めなど最初は慣れなくて、間隔がすごい空いているのに気付かなくて先輩に指摘されたりしていましたが…今では楽しくなって、誤差でしょ!って部分までこだわってしまう事もあります。フォントもこんなに種類によって差があるなんで気づきませんでした。

以上、「文字デザインをしてみよう Vol.0 文字組みの基礎」でした。
デザインはもちろん、資料作りなどにもこの記事の内容を役立てて頂けたら嬉しいです。
これからも楽しく文字と付き合っていきましょう~!明朝体大好きだけど困ったらゴシック体使いがち、ユイPでした。


■合わせて読みたい
タイトルロゴ風 文字デザインをしてみよう Vol.1
タイトルロゴ風 文字デザインをしてみよう Vol.2


■使用させて頂いたフリーフォント
「うつくし明朝体」 / フロップデザイン
「ラノベPOP」 / フォントな

■それ以外のフォント
モリサワフォント


★(ほぼ)毎日更新ゆるくツイート中
デジマースブログ公式Twitter

アニメ GIF の容量を軽くする方法【PhotoshopとAnimate】

こんにちは!
今回のテーマは「アニメ GIF の容量を軽くする方法【PhotoshopとAnimate】」です。

アニメ GIF は静止画を沢山表示させますので、どうしても容量がかさみがちです。
そんなアニメ GIF の容量を軽くするためにはどうしたら良いか、簡単な方法をPhotoshopとAnimateの場合でお話ししたいと思います。


何故アニメGIFを軽くするの?

そもそも何故アニメGIFを軽くする必要があるの?画質など最高の状態で表示した方が綺麗なのに…と疑問に思う方もいるかもしれません。
軽くする1番の理由は処理速度です。容量が軽い方が表示も早くユーザーが快適に使う事が出来るからです。
また、SNSや広告などにアニメGIFを使いたい場合、大抵の媒体は容量制限があります。作成したアニメGIFが容量が超過している場合は軽くする必要が出てきます。


アニメGIFを軽くする簡単な方法

アニメGIFを軽くする簡単な方法は大きく分けて3つあります。
「カラー数を減らす」「画質を劣化させる」「サイズを小さくする」です。

それでは早速作ってみましょう!
作業環境は下記のとおりです。

——————————————

■ Photoshop CC 2019
■ Animate CC 2019

——————————————


カラー数を減らす

カラー数を減らすとは、最もポピュラーで効果的な方法です。
単色の場合、容量は最も軽い状態になります。
カラー数が複数あったり、グラデーションを掛けたり繊細な描画を行っている場合は、その分データが増えますので容量も重くなります。

例えばコチラのアニメGIFを見て下さい。


単色のアニメGIFの容量は45KB、グラデーションの掛かったアニメGIFの容量は239KBで約5倍の差があります。

このように、とにかく容量を軽くしたい場合は単色が最も効果的ですが、デザイン的に単色だけでは難しい場合も多いかと思います。
そんな時は、アニメGIFを書き出す際にカラー数を減らします。

カラー数を減らす方法ですが、Photoshopの場合、「ファイル」→「書き出し」→「Web用に保存」で詳細設定パネルを開き、「カラー」を調整します。

Animateの場合、「ファイル」→「書き出し」→「アニメーションGIFを書き出し」で詳細設定パネルを開き、「カラー」を調整します。

それぞれカラー数は「256」「128」「64」「32」「16」「8」「4」「2」と8種類から選べます。
数字が小さいほどカラー数が減り容量も軽くなりますが、描写も荒くなっていきます。

場合にもよりますが、64までなら綺麗な状態で書き出すことが出来ます。
もっと容量を軽くしたい場合は32か16くらいまでが良いです。多少見た目に影響は出ますが、ある程度のディティールを保って書き出すことが出来ます。
8以下になると見た目が大きく変化してしまいますので、どうしてもの時以外はオススメしません。
2まで下げるとカラーが足りず形すら保てなくなっていますね…


画質を劣化させる

画質を劣化させるとは、GIFを構成するデータを部分的に破棄することで容量を軽くする方法です。
容量を軽く出来るメリットはありますが、大幅に劣化させると見た目が悪くなるデメリットもあります。

画質を劣化させる方法ですが、Photoshopの場合、「ファイル」→「書き出し」→「Web用に保存」で詳細設定パネルを開き、「劣化」を調整します。

Animateの場合、「ファイル」→「書き出し」→「アニメーションGIFを書き出し」で詳細設定パネルを開き、「非可逆圧縮」を調整します。

それぞれ劣化の度合いを0%~100%で変えられます。
オススメは5%~10%です。容量を軽くしつつ画質も綺麗に保てます。
20%まで行くと劣化の度合いが目視でもハッキリわかるようになります。30%以降はかなり荒くなりますので、容量と見た目の許容範囲を見計らってみて下さい。



サイズを小さくする

サイズを小さくするとは、アニメGIFその物のサイズ(横幅と高さ)を小さくして容量を軽くする方法です。
例えば、比率を変えずに全体を半分に縮めた場合、容量もザックリ言って半分になります。
また、余分な背景があればその部分をトリミングして、サイズを小さくする事で容量を少し減らす事が出来ます。


【Animate+α】HTMLで書き出す

Animateの場合、HTMLで書き出す事が出来ます。
アニメGIFではないのですが、HTMLにする事で同じ表現でも大幅に容量の軽いデータにする事が出来ます。

方法ですが、「ファイル」→「パブリッシュ設定」でパブリッシュ設定パネルを開きます
「JavaScript/HTML」の4つの設定項目、「基本」「HTML/JS」「イメージ設定」「Webフォント」の設定をします。

「基本」の項目が一番重要で、表示回数やレスポンシブの有無、書き出し方法などを設定する事が出来ます。
「HTML/JS」「イメージ設定」「Webフォント」は特に指定がなければデフォルト設定で問題ないかと思います。

「基本」の設定は、状況によりそれぞれ異なります。
今回は「簡単な図や動きなど全てAnimateで作成している場合」を例として、下記のような設定で書き出しました。

「イメージアセットを書き出す」設定でパフォーマンスなどに問題が出た場合は、「ドキュメントをテクスチャとして書き出し」の方にチェックを入れて下さい。

設定が終わったら「パブリッシュ」を押してHTMLとJavaScriptを書き出します。
容量が2つ合わせて14KBですので、とても軽くなりますね。

今回はHTMLとJavaScriptだけ書き出されましたが、Animate上で画像や音声を使用していた場合はその分のデータも書き出されます。

実際にHTML形式で書き出してこのページに組み込んだ物がこちらになります。




おわりに

いかがでしたでしょうか?
アニメGIFは容量が重くなりがちですが、PhotoshopとAnimateなら細かい調整をして容量を軽くする事が出来ます。

同じ物を作った場合、どちらで作った方が軽いの?と言う方もいるかもしれません。
人それぞれの作り方で差は出ると思いますが、どちらもあまり変わりませんので自分が使いやすい方を使うのが良いかと思います。

参考までに今回の例で言うと、PhotoshopとAnimateでほぼ同じ設定でグラデーションの球体のアニメGIFを作成した場合、Photoshopで作った方が30KBほど軽かったです。
また、HTMLで実装出来る場合は、Animateで作ったHTMLとJavaScriptが最も軽くなります。

作業環境に合わせてぜひ試してみて下さい!
それではまた!デジマースのコンでした。

自動改札で止まらずスムーズに通るには

自動改札を通る時に、何らかの理由で通れないことを経験したことがありませんか?
今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

最初に

電車を利用する人は言わずもがな、たくさんいますよね。
その利用する人分、自動改札は通られています。
大半を占めて同じ時間に利用することが多い、学生、社会人を始めとし、多くの目的を持った人たちが利用しています。
利用者が多ければ多いほど自動改札の通り方にも個性が出てきます。

乗車券のタイプも電子カードタイプの定期券でピッと通る人もいれば、磁気定期券を使用している人もいます。通常の切符、またお得な切符販売もあるので切符を利用する人もいますね。最近ではスマートフォンで通る人も多く見受けられます。

それらを入れている入れ物も、スタンダードな定期券入れだったり、お財布、スマートフォンケース、ぬいぐるみキーホルダーのようなものであったりと様々なため、自動改札を通る時の人の動作も異なるのが予想できると思います。

幅広い年齢層、電車を利用する状況、自動改札を通る時の動作、乗車券の形態などが異なるのをひとまとめに受け止めているそんな自動改札に「止められてしまう時ってどんな時」なのか、そして自動改札で止まらずスムーズに通るには?どうすればいいのか冒頭に戻りますが今回はそんな自動改札をユーザビリティ目線で個人的な解釈ではございますが考えてみたいと思います。

自動改札で止められる時どんな時?

主に通れない場合の状況はどんな時か調べてみました。

*電子カードの残金が少ない
 ・通る時に確認していない
 ・後でチャージしようとして忘れていた
 ・足りると思った
*電子カードのタッチミス
*別区間の磁気定期券を入れてしまうなどのカード間違い

などでした。予想通りの内容です。
悪気はなくても、一度自動改札が閉まるとしまっている状態が解除されるまでに何秒かのブランクが出来てしまう為、特に朝など忙しない時間帯ですと後ろのお客さんがつまってしまって、申し訳ない気持ちになってしまうのではないでしょうか。

「何とか改善方法はないの?」
「一言で言ってしまえば、通る為の準備を抜かりなくしておくこと!ですね。」

そうは思っていても、完璧に残金を把握し続けることは人間難しいでしょうし、「残金大丈夫だろう」「急がなきゃ!」など思ってしまったらそのまま自動改札へGOしてしまいます。
油断したらタッチミスも発生します。それでは一体どうしたら良いのでしょうか。

利用シーン2パターン

どんな瞬間に自動改札を止めてしまうのか、よくある利用シーンから改善、対処法をユーザビリティの目線で考えてみました。

1.電子カードの残金が少ないことに気づかないまま自動改札へ向かう

このパターンは比較的多くの方が経験されているのではないでしょうか。
自動改札を通る前に券売機で残金を確認してみる、のも1つの手ですが頻度を考えるとあまり効率的ではありませんね。

手軽にだれでもすぐ残金が少ないこと、改め電子カードのチャージ金額に気づくための気づきのポイントがあれば…と思い電子カードをまじまじ見たところ、チャージ金額の残金が表記されていたらユーザー的には認識がしやすいのではないかと考えます。

ところでカード式の金券を、お店で使用したことはありませんか?
使用するとカードに後どれくらいの残りがあるかカード自体に穴を開け、ざっくりですが目で見てわかる様に工夫されていますよね。例えばカードを手に取った時に、足りない分を現金で払う準備の目安にもなります。

このように今回、電子カードの「チャージ金額」が視覚的に分からないことが、原因の1つではないかと考えます。
それならば…

現在の電子カードで実現できるかは分かり兼ねてしまいますが、もし改善案としてユーザビリティ目線から提案をするならば上記でも述べたようにカード式の金券のように電子カード上で、いつでも確認できる視覚情報を、用意してあげることで今回の「電子カードの残金が少ないことに気づかないまま自動改札へ向かう」原因の内と考えられる、通る時に確認していない、後でチャージしようとして忘れていた、足りると思った等のことが消化できるかもしれません。

2.電子カードのタッチミス

「根本的に自分が気を付けることが早いと思われますが…」

気を付けていても発生するのがタッチミス。自動改札のユーザビリティも視野に入れながら考えていきたいと思います。
以下に自動改札を用意しました。よく見る自動改札です。

タッチミスが考えられる要因として次のことが考えられます。

1.電子カードが財布などに入っており、タッチパネル部分に照準が合いずらい。
2.電子カードの周りに物があり(別のカードなど)センサーが届かない。
3.タッチが素早すぎて、自動改札からのレスポンスが追い付かない。
4.人が先に歩きすぎている。
5.そもそも電子カードを間違えた
6.手がふさがってしまっている状態でタッチし辛くて

などなど。タッチミスする人の中には、歩いている間に出てきた障害物(自動改札)かのように見ずに、流れで通る印象も少なからず感じます。
――――いくつか挙げてみましたが、個人の意識を高める事で解決の道へと向かう可能性が高いものばかりですが、人間意識を変えるのはなかなか難しいですよね。

「そしたら電子カードを手に握りしめ、タッチパネルに獲物を狙うかのようにタッチしに行けばいいの?」

そうできたら間違いはないと思いますが、そんな神経注いで自動改札を通るのは大変ですし…疲れてしまいます。
それではここで自動改札のユーザビリティを違う目線から考えてみましょう。単純に「電子カードを認識する」領域を広げてみてはいかがでしょうか。

《1》タッチ領域を広げてみる
的を広げることでユーザーに余裕をもたせる

《2》タッチ部分に追加して側面でも判定できるようにする
電子カードが何かしらに妨げられているためタッチパネルに
反応しないところを立体的に構えることで対応できるようにする

受け身を増やすことで、もしかしたら対応できるのではと考えてみました。タッチパネルの部分は広げすぎると後ろの人と同時にタッチしてしまう可能性があるので、難しい部分もあるかもしれませんが…的が広がることでタッチミスは減るかもしれませんね。

さらに飛躍してみた

今まで、現実的な目線も含めて考えてきましたが、もしこんなことが出来たら画期的、近い未来こうなると便利だなというのも含めていくつか提案してみたいと思います。

1.タッチミスはご退場

タッチミスをした際その当事者があたふたして後ろがより、つまることがありますよね。なので入口は1つですがタッチミスをした人には再タッチを不可にし、右に抜けてまた後ろに並んでもらうシステムなんていかがでしょうか。
メリットとして、後ろがつまりづらくなること、並びなおすのが大変と感じることでミスをしないよう心がけるのではないでしょうか。また、タッチミスで自分はうまいこと自動改札を抜け、後ろの人を待たせるパターンも稀にありますが、そのようなことの減少にもつながるかもしれませんね。
デメリットとして、抜ける分の幅を取ってしまうところでしょうか…。引っかかってもちょっと恥ずかしい…

両方向から利用できると便利ですが、思いのほかシビアな改札になりました。

2.歩くだけでOK!

※エラーの解決は考え兼ねています。ご了承ください。
歩くだけで判定してくれるシステムはどうでしょうか。床に判定システムがあるので、手がふさがっていたり、歩行の補助を持っている方、車いすの方でも安心して通れるのではと考えます。
(電子カードをそのまま判定させるのか、スマートフォンなどの別の何かを判定させるのかは考えどころですね)

3.個々の自動改札をなくす!

※エラーの解決は考え兼ねています。ご了承ください。
いっそのこと個々の自動改札をなくし解放感のある自動改札を考えてみました。
未来感があふれていますが、例えばスマートフォンや何かしらの電子端末に定期などの情報はすでに入っており別区間を利用するときは自動的に加算され、電話料金と同時に請求されるというもの。チャージする必要はないですね。

最後に

考えれば考えるほど、今の自動改札が「入場者のスピード制限」「乗車可能かどうかの判定」「整列入場」などのユーザーに対しての安全性も含めた考えられたものである印象が強くなりました。
これらが保たれたまま、より便利かつ効率的なものが今後出てきたら、嬉しいですが!今は周りのことも考えつつ、スムーズな通行が出来るよう一人ひとり心掛けることが大事と思います。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。それでは、またお会いしましょう!
wrote:スガ

簡単!『Adobe Animate CC』の使い方_HTML5 で広告作り

デザイナー向けのインタラクティブWebアニメーションツール「Adobe Animate CC」使って、スマホのWEB画面を横断する広告を作ってみます。
画面の上部からキャラクターが降ってきて、下部に固定のバナーに着地する目を惹く広告です。
 


作りはシンプルな全画面広告

構成は下記の図のようになります。

とてもシンプルですが、
プログラムもコーディングスキルもないデザイナーでも、ツールで補助してもらいながら作ることで何とかなるかもしれません。

それでは早速挑戦してみます。


全面固定広告の制作

固定広告部分を「Adobe Animate CC」を使って作っていきます。
※細かいオペレーション部分は割愛

まずはソフトを起動してステージサイズとフォーマットを設定します。
普及端末数の多いiPhone6系画面サイズをWebページの「dvice width」値で設定
375x667px
(750x1334px)


下部固定バナー制作

バナーはメジャーな320x50pxのネットワーク系バナーを今回は仕込んでみます。

作った画像はAnimateの「ライブラリ」に格納して、いつでも配置出来る部品状態にします。

バナーの右側には画面上部から飛んで登場するキャラクターが着地するスペースになりますので、キャラクター画像は載せず空けておきます。


登場キャラクターの作成

アニメーションパターンは運用しやすさと読み込みを考慮して出来るだけ数を抑えます。
今回は

「飛び降りる滑降ポーズ」
「着地時のポーズ」
「立ち上がったポーズ」
「決めポーズ_アニメ01」
「決めポーズ_アニメ02」
「決めポーズ_アニメ03」

以上の6パターンを作りました。

作った画像は先ほどの固定表示されるバナー画像と同じで「ライブラリ」に格納しておきます↓


キャラクターの組み込み

ライブラリーに格納したキャラクター画像は画像のままなので、
制御するために「シンボル化」をします。

シンボル化は、名をつけたフォルダのようなものの中に画像を格納することで、JavaScriptの変数で制御したり、設定したアニメーション等、情報が引き継げるものです。
さらに編集作業などが簡単になり、素材の効率的な運用が出来、「アニメGIF」に比べ、ファイル容量を軽減するメリットもあります。

背景画像など、動かす必要のないものなどはシンボル化の必要はありませんが、背景を動的に差し替える、色変えするなど、状況によって制御する場合も想定できるため、原則シンボルして格納する癖をつけておきます。

シンボルの種類は、違いがわかり難いですが、「グラフィック」「ムービークリップ」があります。
「ムービークリップ」はシンボル画像にアニメーションをつけたりボタン化したりして制御するモノで、
「グラフィック」は静止画像を扱うものです。

今回はアニメーションの静止コマ画像を扱うので「グラフィックシンボル」として格納します。

格納方法はシンボルをダブルクリックで「ステージ」表示画面を開けるので、格納したい画像をライブラリからドラックして適当に置きます。
「Ctrl」+「Alt」+「1」~「6」キーで左上揃えや中心揃えなどショートカットが出来ますので試しましょう。

基本は左揃え
「Ctrl」+「Alt」+「1キー」
を行ったあと、
上揃え
「Ctrl」+「Alt」+「4キー」
を行う
「左上配置」にしておきます。

今回は要素が少ないので「ムービークリップ」にわざわざ「グラフィック」を格納せず、ルート(基本の親階層)にアニメーションのコマ画像を配置していきます。


「グラフィック」をタイムラインへ配置

それでは「グラフィック」(コマ画像)をタイムラインに格納してアニメーションを作ります。

タイムラインは1コマ毎の横並び制御になるので馴染みが多いデザイナーは多いと思います。

アニメーションの開始時点は画面上部画面外ですので、
ステージ上部座標の
x23
y-89
に配置します。
※キャラ画像は高解像度対応で150x150pxで制作してますが、配置する際は半分の72x72pxで配置します。

全6個のキャラクターアニメーション画像とベースバナー画像を配置します。

下部バナー画像に着地して「決めポーズ」をする画像の座標は
x284
y589
あたりで配置しています。

降下中のアニメーションは「飛び降りる滑降ポーズ」コマ画像を「画面外」と「着地寸前」の2箇所に始点終点として配置して「クラシックトゥイーン」で繋ぎ、自動補完アニメーションを使うと簡単です。(タイムラインの紫部分矢印が「クラシックトゥイーン」を設定した状態です。)


アニメーションの制御

アニメーション画像間の表示時間等(フレーム間隔)を調整してイメージ通りのアニメーションが出来ていれば配置は完了ですが、
一度再生されたらそれで止まったままだと広告効果が悪いので、決めボーズのアニメーションを定期的に特定フレームまでリープ処理をさせます。

こちらのスクリプトを最終フレームに書き込みます↓
this.gotoAndPlay(“anime_roop”);


これにより、赤旗で「フレーム名」(フレーム番号でも可)をつけた文字列”anime_roop”の旗地点まで戻って繰り返し再生
されることで無限ループ可能となりました。

バナー画像クリックによるWEB遷移の組み込みは、
下部固定ボタン画像の上に新規レイヤーを作り、

ボタン範囲を制御す「ムービークリップシンボル」を、
・バナー画像と同サイズ
・バナー画像と同座標
・白一色塗り
・アルファの設定を1%
にして薄く透過状態でボタン画像にピッタリ重ね配置します。

制御のJavaScriptは、
作った「透明ムービークリップ」を選択した状態で、「アクションパネル」(スクリプト入力画面)の「コードスプニット」から「HTML5」⇒「クリックしてWEBページに移動」を選べば自動で入力してくれて便利です。

※「ムービークリップ」などシンボルを作った場合は必ず「シンボル名」(名前)を付けておきましょう。
忘れると制御対象が設定できないので名前付けが必須です。


htmlとJavaScriptの書き出し

それではwebページへの組み込みを行います。

「Adobe Animate」から「パブリッシュ」を実行すると、

「html」ファイル
「JavaScript」ファイル
そして、使用した画像が格納されている
「img」フォルダ

以上が書き出されます。

JavaScriptはhtmlファイルのなかに内包する設定も可能です。
※「パブリッシュ設定」から書き出し詳細が変更できます。

以上を表示させたいWebページの「headタグ内」に、
書き出されたAnimateから書き出されたhtmlファイルの

<!-- write your code here -->

で囲まれた部分をコピペし、
「bodyタグ」周りの以下の部分をコピペ

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:375px; height:667px">
<canvas id="canvas" width="375" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:375px; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

スタイルは「position」プロパティで設定できる値「fixed」を設定して、画面のきまった位置に固定させる書き換えを行っています。
position: fixed; bottom: 0; left: 0;
を使って上部基準で固定して組み込めば完了です。

<body onload="init();" style="margin:0px;">
<div id="animation_container" style="position: fixed; bottom:0px; left:0px; background-color:rgba(255, 255, 255, 0.00); width:100%; height:667px">
<canvas id="canvas" width="100%" height="667" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:667px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>

コチラがWEBページに広告を組み込んだスマホ表示に最適化したサンプルページです↓
★組み込みサンプルを⇒ひらく


さいごに

ブラウザ画面全体を使った仕込み表現はFlashの時代からあった仕組みで目新しくはなく、
時代が一回りして戻ってきたと考えられます。

しかし、利用者に対して予測を超える表現は「ユーザー体験」を阻害する可能性が高く注意が必要です。

組み込む際は広告訴求内容と、対象サービスページの親和性を注意さえすれば、好意的に受け入れられる可能性も否定できないと考えます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。