Web Designer のインターフェース

Google Web Designer では、中央の大きな領域を使用して、プロジェクトの作成やコードの編集を行います。この領域の周りに、ツールバー、ツール オプション バー、タイムライン、各種パネルが配置されており、要素の修正、コンポーネントの追加、イベントの追加など、さまざまな作業を行うことができます。

UI の概要

ドキュメント

Web Designer インターフェースの中央に現在のドキュメントが表示されます。

次の 2 種類のドキュメント ビューを利用できます。

  • デザインビュー: 画像やテキストなどのドキュメント要素が、ブラウザで表示したときと同じように視覚的に表示されます。白いステージは、広告やウェブページの表示領域を表します。
  • コードビュー: コードやフォーマットが適切に色分けされた状態でドキュメント コードが表示されます。

デザインビューとコードビューは設定画面でカスタマイズできます。

1. ツールバー  2. ツール オプション バー  3. タイムライン  4. パネル  5. ビューバー

ビューバー

ビューバーでは、デザインビューとコードビューの切り替え、ブラウザでのドキュメントのプレビュー、広告の公開を行えます。

ツール

ツールバーには、ステージで要素を作成したり操作したりするためのツールが表示されます。テキストやシンプルなページ要素の作成ツール、色選択ツール、3D ツールなどが用意されています。

ツール 説明

選択ツール
ステージ上のオブジェクトを選択、移動します。

モーションパス ツール
アニメーション要素の曲線のモーションパスを描画します。この機能は AMPHTML 広告では使用できません。

3D オブジェクト回転ツール
オブジェクトを 3 次元で回転させます。

3D オブジェクト変換ツール
オブジェクトを 3 次元に移動します。

タグツール
ステージ上でのクリック&ドラッグ操作であらゆるタイプの HTML タグを作成します。

テキストツール
テキストを追加します。

ペンツールとシェイプツール
シェイプツールを使った基本シェイプ、ペンツールを使ったベジェ曲線など、SVG 描画を作成します。

色ツール
要素の塗りつぶし、ストローク、グラデーション塗りつぶしなど、プロジェクト内の要素の色を変更します。

3D ステージ回転ツール
プロジェクトの 3D ビューを変更します。

手のひらツール
ステージのビューを変更します。

ズームツール
クリエイティブをズームイン、ズームアウトします。

ビューポートのサイズ変更ツール
デザインしているビューポートのサイズを変更します。この機能は AMPHTML 広告では使用できません。

ツール オプション

ツール オプション バーには、現在選択しているツールのオプションが表示されます。たとえば、テキストツールを選択している場合、ツール オプションバーにはフォントとテキスト レイアウトのオプションが表示されます。

タイムライン

クイックモード
詳細モード

タイムラインでは、キーフレームを使用してアニメーションを作成します。クイックモードでは、アニメーションをシーン単位で作成できます。詳細モードでは、各要素を個別にアニメーション化できます。

パネル

インターフェースのパネル領域には、[カラー]、[プロパティ]、[テキスト]、[コンポーネント]、[CSS]、[レスポンシブ]、[イベント]、[ダイナミック]、[ライブラリ]、[広告検証ツール]、[アウトライナー] パネルが含まれています。パネルはサイズ変更、再配置、組み合わせのほか、閉じることもできます。詳しくは、パネルの整理についての記事をご覧ください。

ドキュメント タブ

複数のドキュメントが開いている場合、各ファイル名が別々のタブに表示されます。タブをクリックすることで、ドキュメントを切り替えることができます。また、次のドキュメントに移るには Ctrl+Tab キーを、前のドキュメントに戻るには Shift+Ctrl+Tab キーを押します。

ドキュメント タブがウィンドウ内に収まりきらない場合、タブの右側にあるその他アイコン  をクリックすることで、開いているすべてのドキュメントのリストをポップアップ メニューで表示できます。ドキュメントを選択すると、そのドキュメントに切り替わります。ドキュメントを閉じるには、ファイル名にカーソルを合わせて x をクリックします。

この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。