画像ブロックにインパクトのある視覚効果を追加して、訪問者の注意を引きます。

サイトの画像ブロックに効果を追加して、画像をよりスタイリッシュに見せることができます。画像が常に動くようにアニメーションを追加する効果や、訪問者がサイトのそのセクションをスクロールしたときにのみ表示される効果などがあります。これらの効果を適用する方法は、創造エディター セクションとクラシック エディター セクションのどちらに画像を追加したかによって異なります。

始める前に

• 画像効果は、単一の画像にアニメーションを追加します。バージョン7.1を使用している場合は、サイト全体のアニメーションを使用してサイト全体にアニメーションを適用できます。
• 個々の画像ブロックのアニメーションは、サイト全体のアニメーションにオーバーライドされます。
• 編集した.gif ファイルに画像エフェクトを追加すると、静的な.jpg ファイルに変換されます。
• サイトに視覚効果を追加する前に、アクセシビリティに関するリソースを確認することをおすすめします。

創造エディターで画像ブロックに効果を適用する

創造エディター セクションの画像ブロックに画像を追加した後、画像をダブルクリックするとエディターが開きます。その後、次の操作を行います。

1. [デザイン] をクリックし、[画像エフェクト] をクリックします。
2. メニューから効果を選択します。効果に加えた変更は、サイトのプレビューに表示されます。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了]、そして [保存] の順にクリックしてエディターを閉じます。

画像効果のスタイル

次の画像効果から選択できます。

• なし - オーバーレイの不透明度を設定するほかに効果はありません。
• 液状 - 画像に波紋のような効果を与えます。
• フィルム グレイン - アニメーションする静的オーバーレイを画像に追加します。
• パララックス - 訪問者がスクロールすると画像が動きます。
• 屈折線 - 直線のパターンをかぶせて画像を屈折させます。
• 屈折円 - 円のパターンをかぶせて像を屈折させます。

画像効果をクリックし、設定アイコンをクリックして、詳細パネルで効果をカスタマイズします。

詳細パネルで任意のカテゴリーをクリックしてドロップダウン メニューを展開し、次のようなその他のオプションを表示します。

• 効果のサイズと形状のカスタマイズ
• 液状などのモーションによる効果の速度と方向を編集する

画像効果のタイプに応じて、効果のコア コンポーネントを変更する際に使用できる設定が異なります。ランダムな設定を試してみるには、効果を選択するときにシャッフル アイコンをクリックするか、効果の詳細パネルで [ランダム化] をクリックします。

各効果をテストして、どのような効果があるか、サイトでどのように機能するかをよく理解することをおすすめします。

クラシック エディターで画像ブロックに効果を適用する

クラシック エディター セクションの画像ブロックに画像を追加した後、画像をダブルクリックするとエディターが開きます。その後、次の操作を行います。

1. [デザイン] をクリックし、[アニメーション] をクリックします。
2. リストから効果を選択して、画像とテキストに適用します。オプションを選択すると、ページにプレビューが表示されます。

アニメーション スタイルをブロックする

ブロック全体をアニメーション化するには、次の設定から選択します。

• なし - サイト全体のアニメーション設定を無視し、アニメーションは適用されません。
• サイトの既定 - ブロックはサイト全体のアニメーション設定に合わせます。
• フェード イン - ブロックがフェード インします。
• 上にスライド - ブロックが上にスライドします。
• 水平クリップ - 水平方向のレイヤーにブロックが読み込まれます。
• 垂直クリップ - 垂直方向のレイヤーにブロックが読み込まれます。
• チルト アップ - ブロックが上方に傾いてズーム インします。
• チルト ダウン - ブロックが下方に傾いてズーム インします。
• フォーカス イン - ぼやけたブロックが表示されたのち、ピントが合います。
• 滑り込み - 画像とテキストがどちらか一方から内側にスライドします。
• 滑り出し - 画像とテキストが中心から外側にスライドします。
• カスタム - 画像とテキストのアニメーションを個別に設定します。

画像とテキストを別々にアニメーションさせる場合は [カスタム] をクリックし、以下の設定から選択します。

• なし
• フェード イン
• 上にスライド
• 下にスライド
• 左からスライド
• 右からスライド
• フォーカス イン

これらの設定を使用したコラージュ画像ブロックの例を次に示します。

• アニメーション - カスタム
• 画像アニメーション - 右からスライド
• テキスト アニメーション - 左からスライド

トラブルシューティング

画像効果がサイトに表示されない場合は、次の点に注意してください。

• コンテンツがアニメーションしない場合は、サポートされているブラウザーを使用していることを確認してください。
• 画像効果は、WebGL (デバイスのグラフィック プロセッサーと連動するツール) をサポートするブラウザーとデバイスにのみ表示されます。ブラウザーがこのツールをサポートしているかどうか確認するには、get.webgl.orgにアクセスしてください。ブラウザーがWebGLをサポートしていない場合、セクションの背景は静的な状態で表示されます。

ヒント: サイトがバージョン7.1の場合、訪問者はデバイス設定から一部のアニメーション機能をオフにすることができます。これにより、サイトの閲覧時に表示される動きが少なくなります。たとえば、Macユーザーがデバイスで画面の動きを減らすことを選択した場合、画像ブロックや背景画像について有効にしたアニメーションは、その訪問者に対してアニメーション表示されません。

その他のアニメーションと効果

サイトのバージョンや効果を追加する場所によっては、バナー画像、背景動画、セクション背景画像などの代替画像を使用して、同様の効果やアニメーションを画像に適用することができます。

各タイプの詳細については、リンクされているガイドをご覧ください。