<シリーズ02>Google Web Designer ベータ版を使ってみました

WEBSASチームスタッフ

デザイナーズコラム第六弾

WEBSASを支えるデザイン担当者がお届けする連載コラム。
第六弾は、「Google Web Designer ベータ版を使ってみました」。

2013年10月23日 デザイナー

「Google Web Designer」のベータ版が公開されました。

最近、お客様のご要望をお伺いした後「それはiPhoneでは見られませんよ」とお伝えすると別案になることがよくあります。
「それ」とはFlashコンテンツのこと。 iPhoneをはじめとする「iOS」はFlashに対応していません。今後も対応する予定がないと言われています。(※1)

御存知の通り、Flashは閲覧するためのアプリをインストールしなければ再生できません。
逆に言えばFlash PlayerをインストールしているマシンであればOS、ブラウザを問わず同じように動作したのです。
昨今人気のiPhoneなど表示できないプラットフォームが増えたことで、Flashで構成されたサイトが減少傾向にあります。

「Google Web Designer」公式サイトより

それに変わるのが以下3つの組み合わせ

HTML5+CSS3+JavaScript

  • 構造文書として強化されたHTML5
  • アニメーションなど表現力がさらに高まったCSS3
  • インタラクティブな仕掛けには欠かせないJavaScript

今後Webデザインはこの3つの技術が柱になるでしょう。

「Google Web Designer」はその3つを自動で生成してくれるアプリです。

矩形や円形、テキストなどのオブジェクトを画面上で直接描画し、3Dを含むアニメーションを簡単に作成できるという、まさに「Web Designer」なのです。

今までも同様のアプリは存在していました。
この「Google Web Designer」ベータ版発表でニュースになっている理由は まず
・無料であること。
それから
・Googleが提供するアプリであること。

配布元であるGoogleならではの強み、それが広告用フォーマットです。
Googleの広告出稿(※2)に最適なフォーマットが用意されています。

しかもシンプルで直感的に作成できるインターフェイス。
まったく知識がない方でも、なんとなく触っているうちにアニメーションができているはずです。

スクリプトを一切打たずに作成したデモがこちら

WEBSAS
WEBSAS
  • ※リロードして御覧ください
  • ※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」もそうでない方も一度触ってみることをおすすめします。

参考

公式サイト(ダウンロードもこちらから)
https://www.google.com/webdesigner/

公式チュートリアル
https://support.google.com/webdesigner/?hl=ja#topic=3249465

各ブラウザHTML5、CSS3の対応一覧
http://fmbip.com/litmus/

各ブラウザHTML5、CSS3、SVGの対応一覧
http://caniuse.com/

  • ※1 swf、flvファイルをiOSで表示する対応アプリはありますが、Apple純正ではありません。
  • ※2 エキスパンド:バナーの上に長くカーソルを乗せておくと、モーダル広告が立ち上がるもの
    インターステイシャル:ページ遷移途中の1ページ広告
  • ※3 Internet Explorer6-8、また9も一部未対応
  • ※4 Apple製品のモバイルとパソコンは同一のOSではありません。