初心者コースセクション2

初心者向けウェブサイトワールドトレーニングコースのセクション 2 へようこそ。

このセクションの終わりまでに、次のことができるようになります。

アニメーションバナーを作成する
アニメーションバナーにオーバーレイテキストを追加する

アニメーションバナーの作成

アニメーションバナーを作成するには、まず少なくとも2つの静的バナーを作成する必要があります。これはグラフィックデザイナーに依頼することもできますが、このコースではCanvaで無料で作成できます。バナーのサイズは、選択したウェブサイトテンプレートによって異なります。このコースで作成するサンプルサイトは、1200x480ピクセルの「Decor Theme」テンプレートを使用しています。

以下は私たちが使用したバナーです。お好みに応じてダウンロードして使用できます (各リンクを右クリックして [名前を付けて保存] を選択してください)。

1枚目のTシャツバナー

2枚目のTシャツバナー

3枚目のTシャツバナー

「デザイン」ボタンを選択し、「バナー画像/スライドショー」オプションを選択します。デフォルトでは既に4つのバナー（メインバナー1つとアニメーションバナー3つ）が表示されています。4つすべてがスクロールパターンになっており、各バナーは一定数のセクションが表示されてから次のセクションへと移動します。

このコースセクションではバナーを 3 つだけ使用します。そのため、赤いアイコンボックスをクリックしてアニメーションタイトルの下のバナーの 1 つを削除し、[公開] ボタンをクリックしてこれまでの作業を保存します。

残りの3つのデフォルトバナーを、ご自身のバナーに置き換えることができます。これを行うには、各バナーの下にある画像アイコンをクリックします。画像ウィザードが開き、デバイスから画像を選択してアップロードできます。3つのバナーすべてについて、この手順を繰り返してください。

ページをさらに下にスクロールすると、デフォルトのアニメーションバナー効果を編集できるボックスが表示されます。ここでは、アニメーションのスタイルと速度、スライド間のトランジション速度、バナーの表示位置、バナー上のキャプションの位置を選択できます。このコースでは、キャプションの表示オプションを「中央」に設定し、その他のオプションはデフォルトのままにしておきます。

アニメーションバナーにキャプションを追加する

ページを上にスクロールして、3つのバナーをもう一度確認してください。各バナーの横には、「リンクURL」、「キャプション」、「CTA（行動喚起）」の3つのボックスがあります。ここに、各バナーに表示するテキストを入力してください。

使用するリンクURLは、各バナーで同じです。3つの点が入った青い四角をクリックすると、正しいリンクを見つけることができます。URLウィザードが開き、トライアルサイトのページを見つけるか、下部のボックスにURLをコピー＆ペーストしてください。この例では、「このサイトのページへのリンク」オプションをクリックし、「ショップ」ページを選択します。