TOP > note > Google Design の Google Web Designer ツールを使ってみた

Google Design の Google Web Designer ツール(β版)を使ってみました。

Google-Design

Webオーサリングアプリケーション

Google Web Designer

起動は軽い。Adobeっぽいツール感なので、Photoshopなどに慣れている人はそんなに戸惑いは無さそう。

2

「新しいファイルを作る」メニューで出てくるのはGoogle広告用のフォーマットと、他HTML、CSSなど。
広告用のフォーマットは便利そうと思いながら今回はHTMLを選択。

3

プレビューモードの使い勝手感はGoLiveに似ているかな…。テキスト等は初期位置を自由に決めることができて、そこにコードではdivが生成されていました。

4

パスツールが使えて自由な描画ができます。

5

3D機能がついていて描いた絵がぐるんぐるん動かせます。

6

下部にキーフレームが挿入できるウインドウがあり(アニメーション機能→詳細にしておく必要があり)CSSアニメーションが作れちゃいます。
楽しい!

せっかくなのでわぷーを動かしてみました

(わぷーとは→WordPress日本公式キャラクターわぷー http://ja.wordpress.org/about-wp-ja/wapuu/ )

7

動かしてみたよ!(新しいウインドウで開きます。)

CSSアニメーションだから軽い!(GoogleChromeのみ動作確認済) SVGのアニメーションにもチャレンジしてみたかったけれど今日はここまで。

サイトも作ろうと思えば作れそうだけど、それよりも最初の用途にある通り、広告バナー作成や、CSSアニメーションを作るツールとしては実践にも使えそうと思いました。

Webでの表現が広がるのは楽しいですね。

 

(「わぷー」 の画像は、「GPL バージョン2 またはそれ以降のバージョン」というライセンスのもとに公開されています。著作権は作者のカネウチカズコさんに属します。 GitHub わぷーのSVGファイル)


arrow-left WordCamp Kansai 2014 参加者ブログリスト #wckansai
Previous post

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>