アニメーション.gifを使用する

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

最終更新日 2024年11月28日

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

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

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

gif-example.gif

⁠.gifを追加する

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

⁠.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-example4.gif

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

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

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

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。