Google Web Designer ベータ版を使ってみました
デザイナーズコラム第六弾
WEBSASを支えるデザイン担当者がお届けする連載コラム。 第六弾は、「Google Web Designer ベータ版を使ってみました」。
WEBSAS デザイナー
「Google Web Designer」のベータ版が公開されました。
最近、お客様のご要望をお伺いした後「それはiPhoneでは見られませんよ」とお伝えすると別案になることがよくあります。
「それ」とはFlashコンテンツのこと。 iPhoneをはじめとする「iOS」はFlashに対応していません。今後も対応する予定がないと言われています。（※1）
御存知の通り、Flashは閲覧するためのアプリをインストールしなければ再生できません。
逆に言えばFlash PlayerをインストールしているマシンであればOS、ブラウザを問わず同じように動作したのです。
昨今人気のiPhoneなど表示できないプラットフォームが増えたことで、Flashで構成されたサイトが減少傾向にあります。
それに変わるのが以下3つの組み合わせ
HTML5+CSS3+JavaScript
- 構造文書として強化されたHTML5
- アニメーションなど表現力がさらに高まったCSS3
- インタラクティブな仕掛けには欠かせないJavaScript
今後Webデザインはこの3つの技術が柱になるでしょう。
「Google Web Designer」はその3つを自動で生成してくれるアプリです。
矩形や円形、テキストなどのオブジェクトを画面上で直接描画し、3Dを含むアニメーションを簡単に作成できるという、まさに「Web Designer」なのです。
今までも同様のアプリは存在していました。
この「Google Web Designer」ベータ版発表でニュースになっている理由は まず
・無料であること。
それから
・Googleが提供するアプリであること。
配布元であるGoogleならではの強み、それが広告用フォーマットです。
Googleの広告出稿（※2）に最適なフォーマットが用意されています。
しかもシンプルで直感的に作成できるインターフェイス。
まったく知識がない方でも、なんとなく触っているうちにアニメーションができているはずです。
スクリプトを一切打たずに作成したデモがこちら
- ※リロードして御覧ください
- ※IEは9以下では表示されません
生成されたhtml
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<meta name="GCD" content="YTk3ODQ3ZWZhN2I4NzZmMzBkNTEwYjJl9e6efa993741e328690d9f4576bb1571"/>
<title>undefined</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.0.0.924">
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.gwd-div-vjxw {
position: absolute;
left: 0px;
top: 0px;
font-family: 'Times New Roman';
text-align: left;
color: rgb(0, 0, 0);
font-size: 160px;
border-image-source: none;
border-color: rgba(0, 0, 0, 0.360784);
}
.gwd-span-tsul {
color: rgb(226, 221, 221);
}
.gwd-div-xs3b {
height: 186px;
width: 381px;
left: -100px;
top: 0px;
opacity: 0;
}
.gwd-span-z1r9 {
width: auto;
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
color: rgb(131, 174, 210);
}
.gwd-gen-hsiggwdanimation {
-webkit-animation: gwd-gen-hsiggwdanimation_animation 3s linear 0s 1 forwards;
-moz-animation: gwd-gen-hsiggwdanimation_animation 3s linear 0s 1 forwards;
animation: gwd-gen-hsiggwdanimation_animation 3s linear 0s 1 forwards;
}
.gwd-gen-3cotgwdanimation {
-webkit-animation: gwd-gen-3cotgwdanimation_animation 3s linear 0s 1 forwards;
-moz-animation: gwd-gen-3cotgwdanimation_animation 3s linear 0s 1 forwards;
animation: gwd-gen-3cotgwdanimation_animation 3s linear 0s 1 forwards;
}
@-webkit-keyframes gwd-gen-hsiggwdanimation_animation {
0% { -webkit-animation-timing-function: ease-out; left: 0px; top: 0px; opacity: 1; }
33.3333% { -webkit-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.5; }
100% { -webkit-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0; }
66.6667% { -webkit-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.1; }
}
@-moz-keyframes gwd-gen-hsiggwdanimation_animation {
0% { -moz-animation-timing-function: ease-out; left: 0px; top: 0px; opacity: 1; }
33.3333% { -moz-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.5; }
100% { -moz-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0; }
66.6667% { -moz-animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.1; }
}
@keyframes gwd-gen-hsiggwdanimation_animation {
0% { animation-timing-function: ease-out; left: 0px; top: 0px; opacity: 1; }
33.3333% { animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.5; }
100% { animation-timing-function: linear; left: 300px; top: 0px; opacity: 0; }
66.6667% { animation-timing-function: linear; left: 300px; top: 0px; opacity: 0.1; }
}
@-webkit-keyframes gwd-gen-3cotgwdanimation_animation {
0% { -webkit-animation-timing-function: ease-out; left: 200px; top: 0px; opacity: 1; }
33.3333% { -webkit-animation-timing-function: linear; left: -100px; top: 0px; opacity: 1; }
100% { -webkit-animation-timing-function: linear; left: -100px; top: 0px; opacity: 0; }
66.6667% { -webkit-animation-timing-function: linear; left: -100px; top: 0px; opacity: 0.5; }
}
@-moz-keyframes gwd-gen-3cotgwdanimation_animation {
0% { -moz-animation-timing-function: ease-out; left: 200px; top: 0px; opacity: 1; }
33.3333% { -moz-animation-timing-function: linear; left: -100px; top: 0px; opacity: 1; }
100% { -moz-animation-timing-function: linear; left: -100px; top: 0px; opacity: 0; }
66.6667% { -moz-animation-timing-function: linear; left: -100px; top: 0px; opacity: 0.5; }
}
@keyframes gwd-gen-3cotgwdanimation_animation {
0% { animation-timing-function: ease-out; left: 200px; top: 0px; opacity: 1; }
33.3333% { animation-timing-function: linear; left: -100px; top: 0px; opacity: 1; }
100% { animation-timing-function: linear; left: -100px; top: 0px; opacity: 0; }
66.6667% { animation-timing-function: linear; left: -100px; top: 0px; opacity: 0.5; }
}
.gwd-div-4395 {
left: 300px;
top: 0px;
opacity: 0;
}
.gwd-gen-hsiggwdanimation-gen-animation0keyframe {
left: 0px;
top: 0px;
opacity: 1;
}
.gwd-gen-3cotgwdanimation-gen-animation0keyframe {
left: 200px;
top: 0px;
opacity: 1;
}
</style>
</head>
<body>
<div class="gwd-div-vjxw gwd-gen-hsiggwdanimation gwd-div-4395 gwd-gen-hsiggwdanimation-gen-animation0keyframe">
<span class="gwd-span-tsul">test01</span>
</div>
<div class="gwd-div-vjxw gwd-div-xs3b gwd-gen-3cotgwdanimation gwd-gen-3cotgwdanimation-gen-animation0keyframe">
<span class="gwd-span-tsul gwd-span-z1r9">test02</span>
</div>
</body>
</html>
htmlと長いCSSが書きだされていますね。
マウス操作だけでここまでできました。
しかし、現時点で、その3つの組み合わせでFlashと全く同様のことはできませんし、すべてのブラウザが対応しているわけではありません。
html5/CSS3対応状況
http://fmbip.com/litmus/
特にInternet Explorerの対応状況に注目してください。
日本ではInternet Explorer下位バージョン（※3）のシェアが一定数を占め、全く対応しないというのは難しいのが現状です。
現状使い道のない技術かと言えばそうでもありません。 冒頭で触れたiOS。これはスマートフォンにも搭載されているOS（※4）です。
そう、スマートフォンなら最新のブラウザもインストールさせていてOS、アプリのバージョンアップも比較的容易。最新技術を試すには絶好の環境なのです。
Window XPのサポートが2014年4月に切れることを受けて、WindowsPCの買い替えが進んでいます。
OSが変わることによって今まで下位バージョンのInternet Explorerを利用していた方も、続々とモダンブラウザに移行しています。
今後Windows7でもInternet Explorer11が利用できるようになることが予定されており、ますますHTML5+CSS3+JavaScriptの需要は高まっていくでしょう。
これから勉強される方は書きだされるソースを確認、編集することで、効率的に学ぶことができます。
「Web Designer」もそうでない方も一度触ってみることをおすすめします。
- ※1 swf、flvファイルをiOSで表示する対応アプリはありますが、Apple純正ではありません。
- ※2 エキスパンド：バナーの上に長くカーソルを乗せておくと、モーダル広告が立ち上がるもの
インターステイシャル：ページ遷移途中の1ページ広告 - ※3 Internet Explorer6-8、また9も一部未対応
- ※4 Apple製品のモバイルとパソコンは同一のOSではありません。