Google Web Designer, プログラム

【GWD】やっと慣れてきました

GWD(Google Web Designer)は、Google製のツールで、各種HTML5バナー作ったりできます。
詳しくはぐぐってほしい

とあるところから仕事で週数本請けていてようやくよくある事例がわかってきたのでメモがてら
日本語で解説してるサイトもないから覚えるまで結構大変だった…
検索して来た人は同志だね…ウウッ
メモが何かしらのヒントになったらそれはとってもうれしいなって

ちょっと過去にやった事例と似たようなものをつくってみました。
化粧品とか女性向けのバナーに多い傾向のページめくりっぽいやつですね。
これ自体はgifでもできるから今に始まったものではないけど…

*作成メモ
・ロール用の曲げた画像を1枚
・それぞれの画像をラップしてdiv要素のoverflow:hiddenにして、タイムライン上でwidthを300>0にするといい感じ

HTML5バナーだからできることといえば、ユーザーの操作を反映させるものですね。
こういう選択させるものもいくつかありました。

*作成メモ
・タップエリアコンポーネントを配置してから、それダブルクリックで要素の中をワークスペースにして、そこにライブラリからボタン画像を配置
・ボタン画像なしで、1枚画像にかぶせる場合は上記は不要で、そのまま配置するだけ
・飛び先ごとにページを分ける必要がある(safariやchromeで見た時にアニメーションが全部スキップされてしまう)

ページくっそわかりづらかったけどここにあります。

あとはスワイプして表示させる系
自動再生させておいて、ユーザーに動かせるんだよってアピールしないと気づいてもらえないこと多いかな
左右にナビがないデザインの時は指示がなくても自動再生ONにしてる

*作成メモ
・スワイプコンポーネント配置して、プロパティのところの画像にパスを並べるだけの簡単なお仕事(./assets/ファイル名1.png,./assets/ファイル名2.png,./assets/ファイル名3.png みたいにカンマで区切る)
・自動再生する場合は、自動再生にチェック入れて、自動再生のステップ間隔(1枚が表示される時間)と、自動再生の継続時間(トータルの再生時間)を設定すること。

コメントを残す

メールアドレスが公開されることはありません。

*