HTML5のWEB環境が当たり前になったいま、Flashはもはや淘汰された・・。次世代の環境においてバナー製作に生かせそうなツールはないか？そこでヒットしたGoogleWebデザイナーとHTML5MAKERへの素直なレビュー
FLASHに変わるHTML5のバナー作れるソフトはねーがー・・
さて、このブログを古くから訪れているマニアックなファンの方なら、たぬきちがFlashを得意としていた事をご存知だろう。
しかし、Flashに変わる新しい技術はないものか・・と模索したのがこちらの記事
CSS3VSFlash 広告バナーに向いてるのは？
すべてCSSでアニメーションを作るとはどういう事なのだ！？と興味を持ってやってみたけど、この時は2012年という事でまだ、本格的に乗り換える必要もないと思ってた訳で、その比較考察をへて、まだFlashが使えるだろうと、昔のFlashをリニューアルしたりなんかした訳で
Flashリニューアル 個人も業者も関係ない！SEOは情報戦だ！
しかし、時代は変わってHTML5環境に完全に移行した今、モバイルユーザビリティの対策にも「Flashは使わないで」という強烈なガイドラインができてしまったわけです
Googleモバイルユーザビリティのエラー項目を考察
となると、もはや使えないFlashに変わるあらたな製作環境を考えねばと、HTML5環境で調べた結果、ふたつの候補が浮上しました。実際に利用した感想込みでレビューしますね
HTML5MAKER
サイトはこちら
特徴としては、全部英語ですが、非常に使いやすい！
とにかくまぁいう事なしにすばらしい！直感的に作成できる！・・というのも下記の作成画面を見てください
最初から様々な挿入可能なオブジェクトが用意されています。そこから選択して画面上に読み込ませる以外に、任意でアップロードしたPCの画像も利用できます。左側にあるのが現在編集中のスライド。プレゼンテーションソフトでいう一枚目で表示するコンテンツ製作画面です。
このスライドを表示する秒数の調整。また、次のスライドへのオーバーラップ時間なども調整できます。右側の項目は画面内のオブジェクトを表示する位置の指定やサイズの調整を行います。もちろん画面上でオブジェクトをドラッグして調整も可能
この画面上には、一枚に見えて、実は5枚の画像が配置されています。その画像一個ずつの表示がいつから始まり、いつ消える、切り替わるのか？という時間やエフェクトを決めるのが下のタイムライン。タイムラインはドラッグで位置の調整、右クリックでエフェクトの変更ができます
flash製作経験がある人なら、ちょっと操作を覚えればさくさく操作できてこれはいい！と楽しくなる事間違いなしｗ
完成したファイルは公開ボタンでHTML5MARKERのサーバー上に保存され、作成したバナーはiframe形式の埋め込みコードで利用できます。
嬉しいことにレスポンシブWEBデザイン対応です
こ、ここまで凄いと、これで決まりだぜ！！ と思いたかったのですが・・
フリーアカウントの場合、サーバーに保存できるのが1個のみ・・。それ以上になると、画像のとおり、料金プランが・・。そうですよね・・だって、作成したコンテンツをサーバーで管理するわけですからね。そら・・ねぇ維持費もかかるだろうけど・・。あと日本語フォント使えない（ガーン）
- $49.99 /month（9999個保管）で現在価格で月6000円
- $29.99 /month（100個保管）で現在価格で月3600円
うーん・・使うとしたらPREMIUMプランか？
この月額利用じゃなければ即戦力で考えたんですけどね
GoogleWebデザイナー
さて、こちらはいわずとしればHTML5バナー製作における老舗のソフト。実は、登場初期からダウンロードして、インストールして・・ぜんぜん動かしてなかっただけです（笑）なんてったって登場初期はみんな手探りで情報がまったくないから、意味わからん
でも、今回HTML5メーカーを操作してみて、どういう具合に組み立てていけばいいのかわかったので、同様のバナーを作成してみたんですが・・こちらはHTML5メーカーのように・・あれがあれで・・これがこの機能で・・なんて説明できないほど難しい・・
まず、画像の読み込みができない。画像を読み込むためにはドラッグ＆ドロップしかない不親切さ。ここで一体どれだけの時間を無駄にしたのだろう・・。画像を読み込んだ後はコンポーネント？プロパティ？イベント？・・なんじゃそりゃ？というどこをどう操作させればアニメーションできるかもかなりの困惑
下はオブジェクトのタイムラインだろう・・とわかってはいるものの・・なんかこう操作性が直感的じゃないというか、もうね批判しかでてこない（笑）
唯一便利だな～と思ったのがコンポーネント
フリックタイプの画像ギャラリーや動画の挿入支援だったりと、ある程度型が決まってるサンプルは用意されている。ただ、CSSを理解してる人としてない人では非常に作業効率が大きく変わるだろう
例えば、画面上のオブジェクトを複数まとめてサイズを変えたい、整えたいという時、直感的な操作をする人の場合、プロパティでサイズ調整を一個ずつ行うが、CSSがわかってる人の場合、まとめてオブジェクトを複数選択して、CSSタグを開き値としてサイズを統一する記述をするだけというほど、利用者の実力によって雲泥の差がでる
GoogleWebデザイナーで完成したバナーは、PCにimageフォルダとHTMLで出力されるので、あとは自分のサーバーにアップロードすればいいだけ・・なのだが、作成したバナー一個を表示するだけのHTML形式で作成されているため、サイト内に埋め込むといった出力形式はない。
これはおそらくGoogleアドワーズ等のアニメーション広告バナーページを作成する用途に特化（バナーエキスパンドの場合）しているためだと思われる。仮にページ内に埋め込むといった場合、サーバーにimageフォルダごとアップロードして、iframeで呼び出すというコードを自分で用意する必要がある
さて、このふたつを比較した結果についてまとめよう
月額料金を払ってもいいなら直感的な操作で作れるHTML5メーカー
はっきりいってデメリットは月額料金の部分しかない！というくらい、画像を読み込ませて、あとはアニメーションを決めるだけというお手軽操作で、アニメーションバナーを作成し、埋め込み用のコードも出力されるので至れりつくせり。
おまけにレスポンシブWEBデザイン対応で伸縮でも表示が崩れないのも大きい
GoogleWebデザイナーがオススメな人
GoogleWebデザイナーは難しい事をしなければある程度簡単にできる
例えば、GoogleWebデザイナーと検索すれば出てくるような「動かしてみた」的な記事のほとんどは、3枚くらいの画像パーツを横にスライドだったり、最初からよく作りこんだ見栄えのいいバナーを見せて、ね？綺麗にできたでしょ？的なレビューが多い
これがまさに簡単な事ならさくっとできるよ？の証明。だけど、実際は、もっとこだわって作ろうとすると、できるけど、そこまでしてこれを使うメリットはないという裏返しでもある
実際、Z軸方向の距離調整や3D回転アニメーションと・・こだわればどこまでも凄いアニメーションバナーを作れそうな機能は備わっているが、実際それを行うにはあまりにもタイムラインの操作性の悪さを感じるし、パーツごとにIDを振ったり、部位的にCSSで調整したりと、ほんとにHTMLもCSSも知識がある人なら、有効に活用できると思う
ただ、「使ってみた」のレビューでも多い通り、「完成ファイルはこちらのページで見れます」と別窓で誘導されるように、別の1ページのHTMLページとして出力されるので、記事の埋め込み用途には向かない
ただ、外部サーバーではなく手元にデータをダウンロードできるので、任意のサーバーへのアップロード、iframe等を利用した埋め込み対応などという点ではコストがかからないので、これはこれでメリットな気もする
個人的にはHTML5メーカーだけどね・・コスパがなぁ・・
GoogleWebデザイナー頑張ってみるかなぁ・・
