Google Web Designer では、中央の大きな領域を使用して、プロジェクトの作成とコードの編集を行います。この領域の周りに、ツールバー、ツール オプションバー、タイムライン、各種のパネルが配置されており、要素の変更、コンポーネントの追加、イベントの追加などを行うことができます。
ドキュメント
Web Designer インターフェースの中央に現在のドキュメントが表示されます。
次の 2 種類のドキュメント ビューを利用できます。
- デザインビュー: 画像やテキストなどのドキュメント要素が、ブラウザで表示したときと同じように視覚的に表示されます。白いステージは、広告またはウェブページの表示領域を表します。
- コードビュー: コードとフォーマットが適切に色分けされた状態でドキュメント コードが表示されます。
デザインビューとコードビューは設定画面でカスタマイズできます。
1. ツールバー 2. ツール オプションバー 3. タイムライン 4. パネル 5. ビューバー
ビューバー
ビューバーでは、デザインビューとコードビューの切り替え、ブラウザでのドキュメントのプレビュー、広告の公開を行えます。
ツール
ツールバーには、ステージで要素を作成したり操作したりするためのツールが表示されます。テキストやシンプルなページ要素の作成ツール、色選択ツール、3D ツールなどが用意されています。
| ツール | 説明 |
|---|---|
選択ツール |
ステージ上のオブジェクトを選択、移動します。 |
モーションパス ツール |
アニメーション化された要素の曲線のモーションパスを描画します。AMP HTML 広告またはイメージ広告では使用できません。 |
3D オブジェクト回転ツール |
オブジェクトを 3 次元で回転させます。 |
3D オブジェクト変換ツール |
オブジェクトを 3 次元に移動します。 |
要素ツール |
ステージ上でのクリック＆ドラッグ操作であらゆるタイプの HTML タグを作成します。 |
| ペン、楕円、長方形、線のツール |
シェイプツールを使った基本シェイプ、ペンツールを使ったベジェ曲線など、SVG 描画を作成します。 |
テキストツール |
テキストを追加、編集します。 |
長方形、楕円、ポリゴンのマスク |
クリップパス マスクを要素に追加します。 |
長方形、楕円、ポリゴンの背景ツール |
背景フィルタを使用して div を追加します。イメージと動画ドキュメントでのみ使用できます。 |
塗りつぶし、ストローク、グラデーションのツール |
プロジェクト内の要素の色を変更します。要素の塗りつぶし、ストローク、グラデーション塗りつぶしが可能です。 |
スポイトツール |
ステージ上の要素から色を選択します。 |
3D ステージ回転ツール |
プロジェクトの 3D ビューを変更します。 |
手のひらツール |
ステージのビューを変更します。 |
ズームツール |
クリエイティブをズームイン、ズームアウトします。 |
 塗りつぶしの色とストロークの色 |
アクティブな塗りつぶしとストローク（枠線）の色を変更します。 |
ツール オプション
上部のツール オプション バーには、現在選択されているツールのオプションが表示されます。たとえば、テキストツールを選択している場合、ツール オプション バーにはフォントとテキスト レイアウトのオプションが表示されます。
タイムライン
タイムラインでは、キーフレームを使用してアニメーションを作成します。クイックモードでは、アニメーションをシーン単位で作成できます。詳細モードでは、各要素を個別にアニメーション化できます。
パネル
パネルには、[カラー]、[プロパティ]、[テキスト]、[コンポーネント]、[CSS]、[CSS 効果]、[レスポンシブ]、[イベント]、[ダイナミック]、[ライブラリ]、[広告検証ツール]、[アウトライナー] パネルがあります。パネルはサイズや配置を変更でき、組み合わせたり、閉じたりもできます。詳しくは、パネルの整理についての記事をご覧ください。
ドキュメント タブ
複数のドキュメントが開いている場合、各ファイル名が別々のタブに表示されます。タブをクリックすることで、ドキュメントを切り替えることができます。また、次のドキュメントに移るには Ctrl+Tab キーを、前のドキュメントに戻るには Shift+Ctrl+Tab キーを押します。
ドキュメント タブがウィンドウに収まりきらない場合、タブの右側にある「その他」アイコン 