自動的に再生されるループ アニメーションで訪問者を惹き付けましょう。

.gif (Graphics Interchange Format) とは、ショート アニメーションをサポートする画像形式です。アニメーション.gifは自動的に再生され、音声はなく、通常はループします。

Google画像やgiphy.comなどのサイトを検索して.gif画像を検索するか、サードパーティーのソフトウェアを使用して独自の画像を作成します。.gifファイルは、お客様のサイトが画像をサポートしていれば、どこにでもアップロードできます。

アニメーション.gifの例を次に示します。

.gifを追加する

.gifは、お客様のサイトの画像を追加できる場所であれば、以下のどこでもアップロードできます。

• バナー
• カバー ページ (バージョン7.0)
• ギャラリー ブロック (バージョン7.0)
• ギャラリー ページ (バージョン7.0)
• ギャラリー セクション
• 画像ブロック
• インデックス (バージョン7.0)
• ロゴ
• ポートフォリオ ページとサブページ
• サイトの背景 (バージョン7.0)

.gifには、静止画像と同じオプションがあります。たとえば、サイトのバナー画像がオーバーレイ テキストをサポートしている場合は、.gifバナーの上にテキストを表示できます。

注: .gifを組み込みの画像エディターで編集したり、画像エフェクトを追加したりすると、.gifが静的な.jpg ファイルに変換されます。

ベスト プラクティス

サイズを小さくする

大きな.gif画像は、サイトの動作を遅くする可能性があります。アニメーション.gifは、サイトに表示したいサイズにフォーマットすることをおすすめします。画像のベストプラクティスに従い、.gif画像が当社のファイル サイズのガイドラインを満たしていることをご確認ください。

.gifがファイル サイズ制限を下回っている場合でも、個々のフレーム数が原因でアップロードできないことがあります。この場合は、サードパーティーの画像ツールを使用してファイルの圧縮を試してみてください。これはSquarespaceサポートの範囲外です。.gif圧縮後に品質に問題がある場合は、.gifを動画に変換し、その動画をサイトに追加してください。

ストレスを与える画像を避ける

.gifは、訪問者の目を引いたり、ダイナミックな動きを加えたりするのに最適な方法ですが、その動きはストレスを与えることもあります。以下の点に留意してください。

• 訪問者にテキストやその他のコンテンツに集中してもらいたい場所では、.gifの使用を避ける。
• 動く物が多いと訪問者をイライラさせてしまうので、1つのエリアに複数の.gifを置くのは避ける。

ヒント: .gifにアクセスしやすくする方法については、「オーディオ、画像、動画にアクセスしやすくする」を参照してください。

圧縮設定をチェックし、歪みや不適切な色を避ける

.gifが、特に色のグラデーションや影のあるエリアで歪んで見える場合は、圧縮が原因である可能性があります。.gifファイルには1フレームあたり256色しか含めることができないため、画像編集ツールでは、.gifを作成する際にディザリングと呼ばれるプロセスを使用して色数を減らします。

画像の品質の調整は、Squarespaceサポートの範囲外です。画像編集ツールの圧縮またはディザリング設定を調整するには、より高品質なソースを.gifに使用してみるか、使用しているツールのヘルプ ドキュメントを確認してください。

アニメーション ボタンを作成する

クリックスルーURLは、画像をサイト上の他のページへのリンク、外部ページへのリンク、またはファイルへのリンクに変換します。これらのリンクは、画像ブロック、ギャラリー ブロック、および一部のギャラリー ページで利用できます。

ヒント: ロゴには、ホームページに移動するためのクリックスルー機能が組み込まれています。

アニメーション ボタンを作成する方法の1つを次に示します。

1. レイアウト ページなど、ブロックをサポートするエリアにポスター画像ブロックを追加します。
2. [コンテンツ] タブで、.gifをアップロードします。
3. [デザイン] タブで、[クリックスルーURL] フィールドにリンクを追加します。お客様のサイト上のページにリンクしている場合は、コンテンツ リンクを作成します。
4. ポスター画像ブロックのタイトルまたはサブタイトルを使用してテキストを追加します。
5. 画像ブロックのスタイルを設定し、他のブロックを追加してサイズを変更します。

.gifの代わりに動画URLを使用する

ページ セクション、バナー、またはカバー ページに動画背景を追加すれば、アニメーション.gifと同様の効果を生み出すことができます。

• .gifと同様に、動画背景は自動的にループ再生されます (音声なし)。
• .gifファイルを使用する代わりに、YouTube動画などの動画URLにリンクするという方法もあります。
• 動画バナーは一部のバージョン7.0テンプレートでのみサポートされていますが、ページ セクション用の動画背景はすべてのバージョン7.1サイトでサポートされ、カバー ページ用の動画背景はすべてのバージョン7.0テンプレートでサポートされています。

詳細については、「背景動画を追加する」を参照してください。