Google Web Designer(Beta)を使ってみた

連載の途中だけど、ファンキーなネタが転がりこんできたので、一発記事を書くことにしたよ。

Google Web Designerというのは、HTML5、CSS3、JavaScriptのオーサリングツールだ。まだベータ版だけど、面白そうなのでインストールしてみたよ。

詳しくはここを読んでもらえればわかると思う。

Google Web Designer

一部では『AdobeとWebデザイナをGoogleが殺しに来た！』なんて言われてるらしいよ。

まぁAdobeのアプリってそもそもバカ高いし、Creative Cloudも体験版ほとんどインストールしてひと通りいじってみた感じ、悪くはないんだけど、相変わらず動作がもっさりしてて、いじってて全然楽しくないんだよね。楽しくないのにクリエイティブな作業するのって苦痛だし、ちょっと俺はできないなぁ。

それからWebデザイナというより、むしろフロントエンドエンジニアを殺しに来たんじゃないかって感じもしないでもない。ま、俺としては別にどっちでもいいんだけどね！！！

というわけで、早速ダウンロードしてインストールしてみたのでレビューするよ。

ダウンロードとインストール

まずは上記サイトの右上にある、『Download Bata』ボタンからダウンロードだ。
ダウンロードはすぐに終わるよ。そしてインストールもすぐに終わる。

因みにこんな感じのアイコン。

起動してみて面白かったのは、ローカライズがしっかりされているみたいで、ちゃんと日本語で表示されたんだよね。これは気合入ってるな。

新規作成

メニューの『ファイル』から『新規作成』を選ぶとこんな感じになる。

大きく2つの種類に分かれる。『Google広告』、『空のファイル』だ。
試しに今回は『Google広告』の『エキスパンド』を選んでみた。

テキストで『Torham Journey』なんて入れてみて、下のタイムラインで2コマ目を作り、好きな場所へ回転させて配置後、再生ボタンを押してみた。すごく簡単にアニメーションが作れるよ。

一応動画をYouTubeにアップしておいたよ。

ワークエリア上部にはファイルのタブがあるけど、下部には別のメニューがある。

このメニューから『コードを表示します』を選択すると、アニメーションがCSS3で作られてるのがわかると思う。なかなか良さげだね。

プレビュー機能も実装されているようで、これはインストールされているブラウザが一覧で表示されるんだろうね。

俺がOpera入れてるのがバレてしまったか。まぁそれはいいや。

画面右側には各種プロパティ系の情報やツールが収められている。
これはファイルの種類によって変わってくると思うけど、ざっくり紹介しておくね。

色付け

読んで字のごとく、色を選択するツールだ。ただしRGB限定らしいので、ESL、HSVなどで選べるようになると、Illustrator使いとかは便利かなって思った。

でも基本的な機能は揃ってるよね。

ちなみに左クリックでメインカラー、右クリックでサブカラーが使えるらしい。これはなかなか作業が捗るかも。

プロパティ

まぁこれもよくある、選択されているオブジェクトの詳細情報が見れたり設定できたりするパレットだね。

HTMLとかXML、CSS作るときにはかなり参照することが多いと思う。

ちなみにテキストオブジェクトを選択した状態だとこうなる。

ちょっと画面に収まりきれてないけど、かなり細かいところまでGUIで設定することが出来そうだ。

興味深いのが『3Dの位置と表示』部分だね。
相対値と絶対値で選べるんだけど、これは単純にCSSだとz-indexになるのかな。それともGoogleのことだから将来を踏まえてWebGLなんか対応しちゃったりするのかな。

いずれにせよ3Dは今後のWebには必至になってくると思われるので、こういった表示がこれからどんどん浸透していくと思うんだよね。

実際問題、多くの3Dモデラーなどで使われている3Dカーソル（赤、緑、青）、Google Web Designerも同じ表現してるから、俺みたいにblenderとか使ってる人にとっては馴染み深い感じ。表現が意味深で愉快だと思う。

コンポーネント

さて、次はコンポーネントだけど、そもそもコンポーネントってなんぞや？ってなると思う。
こちらはWebで調べてみたところ、予め興味深い動きをする動作やアクションなどのオブジェクトををまとめた、テンプレートやライブラリのようなものだ。

サムネイルを見てもらえるとわかると思うけど、360°ギャラリー、カルーセルギャラリー、スワイプ対応ギャラリーなど、おそらくAndroid OSやiOSを意識した動きを再現してくれる便利なライブラリだろう。

試しに『カルーセルギャラリー』をドロップして設置し、サイズをエクスパンドと同じく『300x240』にし、プロパティ内の『コンポーネントプロパティ』で画像を幾つか選択した状態でプレビューしてみたので、動画をご覧あれ。

こんな複雑そうな挙動をものの数分で実装出来てしまうというすぐれものだ。

どうだろ、なかなかすごいよね。
画像自体のサイズがまだおかしいけど、これはソースコードを直接直したりすれば行けると思う。

イベント

イベントは例えばクリックされたとかタップされた時に、何をどうするのか、なんてことを設定することができるんだよね。

試しに、画面がクリック/タップされた場合、新たに作ったページにジャンプするような設定をしてみた。

ページというのは画面の右下にある『bannerPg1』みたいに書かれたところなので、アニメーションのフレームじゃないので注意しよう。

ここをクリックして新たに1ページ追加し、名前を適当に付けておく。

その後イベントパレットの『+』ボタンでイベントを追加していく感じになる。

これも動画をキャプチャしておいたのでご覧あれ。

ちょっとわかりにくいかもしれないけど、実際にやってみてもらえればわかると思うよ。

スタイル

そして最後にスタイルだ。これはもう読んで字のごとく、CSSのことだね。

何かオブジェクトを選択した状態だと、左のサムネイルのように、CSSが整列されて綺麗に表示される。

要素を追加したければ『追加』ボタンで追加できるし、編集したかったら直接ダブルクリックすることで入力が可能になる。

スタイル自体を追加したければ、パレット下段にある『+』ボタンでいくつでもスタイルを定義することができる。