必要なヘルプが見つかります
初心者からエキスパートまで、それぞれのレベルに合った動画チュートリアル、ヘルプフォーム、ブログ投稿を活用してスキルを伸ばすことができます。よくある質問や詳しい手順については以下をご覧ください。
-
ギャラリー コンポーネントのさまざまな機能
Google Web Designer のギャラリー コンポーネントにおける高度な機能の数々を紹介します。300 x 250 の標準バナー広告を加工する方法をご覧ください。
- 詳細モード
- UI
-
詳細タイムラインをズームする
ユーザー エクスペリエンス エンジニアのナタリーが、詳細モードでタイムラインをズームインおよびズームアウトする方法を実演します。
- 詳細モード
- 動画チュートリアル
-
Web Designer のインターフェース
Google Web Designer のインターフェースについて紹介します。どのようなツールがどこで利用できるかをご確認ください。
- 概要
- UI
-
Google Web Designer のヒント: パート 1
3D コンテンツは、CSS3 を使って作成、操作できます。オブジェクトや 2D デザインを軸に沿って回転させたり、作成中に 3D の変形や変換を視覚化したりできます。
- 3D
- ブログ
-
CSS パネルでのスタイルの変更
CSS パネルには、選択した要素のスタイルが表示されます。CSS パネルを使用すると、クラスのスタイルの編集、インライン スタイルの追加、新しいスタイルの作成を行うことができます。
- ヘルプ記事
- CSS スタイル設定
-
ライブラリ内のアセットを管理する
ドキュメントで使用する画像、音声ファイル、動画ファイルは、「アセット」と総称されます。アセットはドキュメントに読み込むと作成され、ライブラリに保存されて、プレビューや再利用が可能になります。
- ヘルプ記事
- ライブラリ
-
複数のキーフレームとサムネイルの選択
ユーザー エクスペリエンス エンジニアのナタリーが、詳細モードでの複数のキーフレームの選択と、クイックモードでの複数のサムネイルの選択について概説します。
- 詳細モード
- 動画チュートリアル
-
注目の 5 つの機能
Google Web Designer の便利な 5 つの機能とワークフロー（グループ、見本、BYOC、ドライブに公開、可変レイアウト）を紹介します。
- 概要
-
リリースノート
最新のリリースで発表された新機能について確認できます。
- ヘルプ記事
- 技術情報
-
システム要件
適切なシステム要件を満たしていることを確認します。
- ヘルプ記事
- 技術情報
-
広告環境
Google Web Designer では、Google 広告、ディスプレイ＆ビデオ 360、Google AdMob など数多くの広告環境で広告を掲載できます。こうした広告環境をワンクリックで切り替えられます。
- ヘルプ記事
- コンテンツの作成と変更
- 広告環境
-
テキストツールを使用する
テキストを追加して書式設定します。Google フォントやテキストの自動適合を使用して外観を整えます。
- ヘルプ記事
- コンテンツの作成と変更
- 新しい要素の追加
-
ペンツールとシェイプ ツールを使用する
シンプルなものから複雑なものまで、SVG の線やシェイプを描画します。
- ヘルプ記事
- コンテンツの作成と変更
- 新しい要素の追加
-
3D ツールを使用する
Google Web Designer では、3 次元で要素を移動、回転させることができます。ビューを変更して、要素をどのような位置からでも確認できます。
- ヘルプ記事
- 広告の作成
- 要素の移動とサイズ変更
-
グラデーションを使用する
グラデーションとは、色を少しずつ変えて塗りつぶす手法です。HTML 要素、キャンバス要素、SVG 要素の境界と塗りつぶしに適用できます。
- ヘルプ記事
- コンテンツの作成と変更
- 色
- グラデーション
-
要素をラップまたはグループ化する
グループとラップは、複数の要素をまとめて 1 つのオブジェクトとして操作する方法です。
- ヘルプ記事
- コンテンツの作成と変更
- 要素をラップする
- グループ要素
-
レスポンシブ レイアウトの概要
レスポンシブ デザインでは、固定されたレイアウトではなく、柔軟性のあるレイアウトを使用します。つまり広告の場合は、広告を 1 つ作成して、向きやサイズの変化に応じて要素のスタイルを変えられるようになるため、同様の広告を複数作成する必要がなくなります。
- ヘルプ記事
- レスポンシブ
-
ビューポートのサイズを変更する
レスポンシブ レイアウトを作成している最中に、完成状態のドキュメントの外観を画面サイズごとに確認できるので便利です。
- ヘルプ記事
- レスポンシブ
- ビューポート
-
アニメーションについて
Google Web Designer では、特定の時点のキーフレームを指定することで、アニメーションを作成できます。特定のキーフレームでアニメーション要素の CSS プロパティを設定すると、その要素は、1 つ前のキーフレームから指定キーフレームまでの移行時間の間に徐々に変化して最終的に指定プロパティになります。
- ヘルプ記事
- アニメーション
- インタラクティビティ
-
クイックモードのアニメーション
クイックモードでは、アニメーションをシーン単位で作成できます。ページ全体の新しいビューを追加したり、アニメーション化する要素に変更を加えたり、必要に応じて移行時間やイージングを修正したりできます。
- ヘルプ記事
- アニメーション
- インタラクティビティ
-
詳細モードのアニメーション
詳細モードでは、アニメーション タイムラインの各要素が独立したレイヤとして表示されます。レイヤ構造が採用されていることで、一連の要素の中でそれぞれの要素の位置を変更したり、要素を非表示にしたり、要素をロックしたりできるため、作業の効率が上がります。
- ヘルプ記事
- アニメーション
- 詳細モード
-
イージングについて
イージングを使用すると、アニメーションの移行を加速したり減速したりできます。
- ヘルプ記事
- アニメーション
- インタラクティビティ
- イージング
-
アニメーションのネスト
ほとんどの場合、作成するタイムラインはページ全体が対象になります。つまり、1 つのタイムラインにページの全要素が配置されます。また、親コンテナにはそれぞれ独立したアニメーション タイムラインがあります。つまり、アニメーションを別のアニメーション内にネストすることによって、複雑なアニメーションを作成できます。
- ヘルプ記事
- アニメーション
- インタラクティビティ
- ネスト
-
アニメーションをループさせる
アニメーションをループさせる方法は 2 つあります。個々のレイヤを個別にループさせる方法と、イベントを使用してすべてのレイヤを同時にループさせる方法で、後者は高度なアニメーションの場合に適しています。
- ループ
- インタラクティビティ
- アニメーション
- ヘルプ記事
-
モーションパスについて
モーションパスを使用すると、曲線や複雑なシェイプに沿ってオブジェクトを移動させながらアニメーション化できます。
- ヘルプ記事
- アニメーション
- インタラクティビティ
- モーション
-
詳細モードでアニメーションを作成する
詳細モードでは、タイムライン上でキーフレームを作成することによって各要素をアニメーション化します。タイムラインはアニメーションを図式的に表現したもので、キーフレームはアニメーションの始点と終点を示します。
- ヘルプ記事
- アニメーション
- インタラクティビティ
- 詳細モード
-
アニメーションのプレビューとスクラブ
アニメーションの作成や編集を行っているときに、プレビューやスクラブを使ってアニメーションを確認、調整できます。
- ヘルプ記事
- レイヤ
- 詳細モード
- アニメーション
- インタラクティビティ
-
コンポーネントについて
コンポーネントはあらかじめ用意されたモジュールで、広告や HTML ドキュメントに特定の機能を追加します。
- ヘルプ記事
- 概要
- コンポーネント
-
360 度ギャラリー コンポーネント
一連の複数の画像を使ってオブジェクトの回転を表示します。デフォルトでは、最後の画像が最初の画像にラップされるため、ユーザーはどちらの方向でもシームレスにオブジェクトを回転させることができます。
- ギャラリー
- ヘルプ記事
- コンポーネント
-
カルーセル ギャラリー コンポーネント
複数の画像を表示できる、スワイプ可能なカルーセル形式のギャラリーを作成します。コンポーネントのプロパティを変更して、さまざまな 3D 効果やカルーセル タイプを作成できます。
- ヘルプ記事
- ギャラリー
- コンポーネント
-
ギャラリー ナビゲーション コンポーネント
別途配置可能なナビゲーション パネルをスワイプ ギャラリー、カルーセル ギャラリー、360 度ギャラリーに追加します。
- ヘルプ記事
- ギャラリー
- コンポーネント
-
スワイプ ギャラリー コンポーネント
ユーザーが左右にスワイプしてさまざまな画像やグループのセットを表示することのできる、簡単なギャラリーを作成します。
- ヘルプ記事
- ギャラリー
- コンポーネント
-
「カレンダーに追加」コンポーネント
ユーザーが自分のカレンダーに追加することのできる、イベント通知を作成します。
- ヘルプ記事
- カレンダー
- コンポーネント
-
ジェスチャー コンポーネント
広告に対するユーザーの操作を取得します。
- ヘルプ記事
- コンポーネント
- ジェスチャー
-
画像ボタン コンポーネント
イベントベースのアニメーションを作成せずに、視覚的に反応するボタンを作成します。
- ヘルプ記事
- ボタン
- コンポーネント
-
タップ領域コンポーネント
画面上の任意の場所に、ユーザーのタップやクリックに反応する透明な要素を配置します。
- タップ領域
- コンポーネント
-
タップして通話 / テキスト送信コンポーネント
サポートされているスマートフォンに表示されるモバイル広告から、指定した電話番号への発信または SMS テキストの送信を開始します。
- ヘルプ記事
- コンポーネント
- 通話 / テキストメッセージ
-
地図コンポーネント
設定や検索が可能な地図をプロジェクトに追加します。ユーザーの現在地や、その他の特定の位置情報を表示できます。
- ヘルプ記事
- Maps
- コンポーネント
-
ストリートビュー コンポーネント
ユーザーが操作できる Google ストリートビュー画像をプロジェクトに追加します。
- ヘルプ記事
- コンポーネント
- ストリートビュー
-
音声コンポーネント
広告に音声を追加します。
- ヘルプ記事
- コンポーネント
- 音声
-
動画コンポーネント
広告に動画を簡単に追加できます。
- ヘルプ記事
- コンポーネント
-
YouTube コンポーネント
広告に YouTube 動画を追加します。プレーヤーや再生をカスタマイズできます。
- ヘルプ記事
- コンポーネント
- YouTube
-
iframe コンポーネント
プロジェクト内に外部 URL 要素（外部 HTML ページなど）を読み込みます。
- iframe
- コンポーネント
- ヘルプ記事
-
スプライト シート コンポーネント
スプライト形式のアニメーションを追加して、個々のスプライトをフレームとして連続的に表示します。または、単一のスプライト シート内に複数の画像を配置することで画像ファイルの数を減らします。
- ヘルプ記事
- コンポーネント
- スプライト シート
-
各コンポーネントの API
カスタムコードを作成するための、各コンポーネントで利用可能なプロパティ、イベント、メソッドの一覧を確認できます。
- ヘルプ記事
- プレビュー
-
イベントについて
イベントを利用すると、ユーザーのジェスチャーやタイムラインのキーフレームなど、広告や HTML ドキュメント内で発生する出来事に応じたアクションを設定できます。
- ヘルプ記事
- イベント
-
カスタム操作を作成する
JavaScript を使用して、独自のカスタム操作を作成できます。カスタム操作は、一度定義した後はクリエイティブ内で再利用可能です。
- ヘルプ記事
- イベント
-
バナー広告を作成する
バナー広告は、ウェブページやアプリ内の特定サイズのスロットに表示されるシンプルな広告です。
- ヘルプ記事
- バナー広告
- 広告の作成
-
エキスパンド広告を作成する
エキスパンド クリエイティブは、標準バナーのサイズで開始して大きいサイズに展開される広告で、ユーザーの注意をより惹きつけることができます。
- ヘルプ記事
- イベント
- エキスパンド
-
インタースティシャル広告を作成する
インタースティシャル広告では、ページ遷移、アプリの起動、ゲームのステージの読み込みなど、自然な画面移行ポイントでフルページ型の広告が表示されます。
- ヘルプ記事
- インタースティシャル
- 広告の作成
-
ダイナミック広告を作成する
ダイナミック広告とは、広告に表示する画像やテキストをデータフィード内の情報に基づいてダイナミックに決定することで、関連性の高いメッセージをユーザーに届ける広告です。
- ヘルプ記事
- AMPHTML
- 広告の作成
-
AMP HTML 広告
Google Web Designer を使用して AMP HTML 広告を作成します。AMP（Accelerated Mobile Pages）で作成された広告は、標準の広告よりも読み込み速度が速いため、モバイル端末に適しています。
- ヘルプ記事
- 広告の作成
- AMPHTML
-
テンプレートを使用する
テンプレートとは、よく使用されるスタイルや機能を使って、一般的なサイズであらかじめ作成された広告のことです。画像などのアセットを置き換えることで、実際に機能する広告を簡単に作成できます。
- ヘルプ記事
- 広告の作成
- テンプレート
-
カスタム テンプレートを作成する
作成した広告をテンプレートとして保存します。テンプレートを作成しておけば、同じ広告の別バージョンを数多く作成する場合に特に時間の節約につながります。
- ヘルプ記事
- 広告の作成
- テンプレート
-
広告検証ツール
広告検証ツールでは、一般的な問題について広告の検証が実施され、検証結果がリアルタイムでパネルに表示されます。
- ヘルプ記事
- 広告の作成
-
アウトライナーでドキュメント構造を操作する
アウトライナーでは、ドキュメント内の要素がツリービューで表示されるため、要素の選択と移動を簡単に行えます。
- ヘルプ記事
- DOM
-
広告や HTML ページをプレビューする
作成中の広告や HTML ページをお使いのブラウザでプレビューすることで、パブリッシュしたときにどのように表示されるのか、どのように動作するのかを確認できます。
- ヘルプ記事
- プレビュー
-
完成品をパブリッシュする
プロジェクトをパブリッシュすると、入稿用の最終的なファイルが生成されます。Google Web Designer では、ローカル フォルダのほかに Google ドライブや Studio にも直接パブリッシュできます。
- ヘルプ記事
-
詳細タイムラインをズームする
ユーザー エクスペリエンス エンジニアのナタリーが、詳細モードでタイムラインをズームインおよびズームアウトする方法を実演します。
- 詳細モード
- タイムライン
- 動画チュートリアル
-
イージング機能（ステップスタート、ステップエンド）
ユーザー エクスペリエンス エンジニアのナタリーが、ステップスタートやステップエンドといったイージング機能の追加方法を紹介します。アニメーションを徐々に遷移させるのではなく、1 つのキーフレームから別のキーフレームへと瞬時にジャンプさせる場合に特に便利です。
- 動画チュートリアル
- イージング
-
タイムライン レイヤの非表示とロック
ユーザー エクスペリエンス エンジニアのナタリーが、タイムラインの複数のレイヤを非表示にしてロックする手順を紹介します。
- 詳細モード
- タイムライン
- 動画チュートリアル
-
UI の概要
UX エンジニアのジョンが、Google Web Designer のユーザー インターフェースについて概説します。さまざまなツールバーやパネルの使用方法のほか、ワークスペースを好みに合わせて整理、調整する方法をご覧ください。
- 動画チュートリアル
- UI
-
イベントの概要
Google Web Designer のエンジニアのマチェックが、イベント ワークフローについて概説します。イベントを使用した CSS スタイルの設定やカスタム操作の追加などの方法をご覧ください。
- 動画チュートリアル
- イベント
-
グラデーション ツールの概要
Google Web Designer のエンジニアのジャン＝ピエールが、線形グラデーションや円形グラデーションといったグラデーションの概要と、グラデーション編集ツールを説明します。
- 動画チュートリアル
- グラデーション
-
シェイプの概要
Google Web Designer のエンジニアのジャン＝ピエールが、楕円ツールや長方形ツールなどのシェイプツールについて概説します。
- 動画チュートリアル
- シェイプ
-
テキストの概要
Google Web Designer のエンジニアのシュオが、テキストパネルの使い方など、テキスト機能について概説します。テキストのサイズ変更や移動のほか、ドキュメント間でのテキスト スタイルのコピーなどの方法をご覧ください。
- 動画チュートリアル
- テキスト
-
2D と 3D の描画の概要
Google Web Designer のエンジニアのルーカスが、2D と 3D の描画機能とツールについて概説します。
- 動画チュートリアル
- コンテンツの作成と変更
-
タイムラインの詳細モードの概要
Google Web Designer のエンジニアのナタリーが、タイムラインの詳細モードを紹介します。アニメーションの作成、キーフレームの使用、イージングの設定などの方法をご覧ください。
- 詳細モード
- 動画チュートリアル
-
広告検証ツール
Google Web Designer のエンジニアのジョンが、広告検証ツールについて概説します。このワークフローの改善では、潜在的な問題について広告の検証が実施され、検証結果が広告検証ツールのパネルに表示されます。この検証は広告の承認を保証するものではありませんが、問題をすぐに確認して修正できます。
- 広告の作成
- 動画チュートリアル
-
ワークプレイス パネルセット
Google Web Designer のエンジニアのヤチが、Google Web Designer でお気に入りのパネルセットを保存できるワークスペース パネルセットについて紹介します。
- 動画チュートリアル
- ワークプレイス
- 設定
-
モーションパスの概要
Google Web Designer のエンジニアのルーカスが、モーションパスについて概説します。モーションパスを使用すると、指定したパスに沿ってオブジェクトを移動させながらアニメーション化できます。アンカー ポイントを設定してこのアニメーションを定義し、必要に応じて屈曲させたり接続したりできます。
- 動画チュートリアル
- モーション
-
モーションパスを編集する
Google Web Designer のエンジニアのチアリンが、モーションパスの編集について説明します。モーションパスの編集機能を使った、ステージ上のアニメーションのさまざまな編集方法をご覧ください。
- 動画チュートリアル
- モーション
-
グループの概要
このビデオでは、Google Web DesignerエンジニアのLucasがグループ機能のデモを行います。
- グループ要素
- 動画チュートリアル
-
イベントが設定されたグループの概要
Google Web Designer のエンジニアのルーカスが、新しいグループ機能でのイベントの使用について概説します。グループを使用すると、1 つのオブジェクトとして編集および管理できる、要素の再利用可能な集合を作成できます。グループとイベントを組み合わせることで、高度なアニメーションを簡単に作成できます。
- 動画チュートリアル
- イベント
- グループ要素
-
レスポンシブ広告のワークフロー
Google Web Designer のクリエイティブ スペシャリストのケント マイヤーが、レスポンシブ広告のワークフローを紹介します。レスポンシブ テンプレートから独自のレスポンシブ広告を簡単に作成する方法をご覧ください。
- レスポンシブ
- 動画チュートリアル
-
アウトライナー
このビデオでは、Google Web DesignerエンジニアJean-PierreがOutlinerの概要を説明します。
- 動画チュートリアル
- アウトライナー
-
タイムライン キーフレームのスケーリング
Google Web Designer のエンジニアのナタリーが、キーフレームのスケーリング機能について紹介します。Shift キーを押しながら、選択したキーフレームを詳細タイムライン上でドラッグすると、キーフレームの間隔調整を維持しながらアニメーションの長さを変更できます。
- 詳細モード
- タイムライン
- 動画チュートリアル
-
Google Web Designer のギャラリー コンポーネントについて
Google Web Designer のギャラリー コンポーネントにおける高度な機能の数々を紹介します。
- ブログ
- ギャラリー
- コンポーネント
-
Google Web Designer のヒント: パート 2
カスタムコードの作成、タイムライン イベントを使用した広告のループなどを紹介します。
- 詳細モード
- カスタムコード
- ブログ
-
Google Web Designer のテキストについて
Google Web Designerドキュメント全体のテキストの外観を管理する方法について説明します。
- テキスト
- ブログ
使ってみる
下の [Web Designer をダウンロード] をクリックしてダウンロードし、画面の指示に沿ってインストールします。
