FirstLayout

動画のGIFの変換や保管、共有、埋め込みなどができる無料のWebサービスGfycat

Gfycat とは?

Gfycat は、動画を GIF に変換する無料サービスです。

作成した GIF は、SNS に共有できます。また、サイトへの埋め込みも可能です。

主な機能は以下のとおりです。

  • 動画をアップロードし GIF に変換できる。
  • 作成した GIF は、すぐに SNS に共有が可能。
  • Web サイトに再生・停止・共有ボタン付きの <iframe> で埋め込める。
  • 作成した GIF は Gfycat 上に保管される。
  • 会員登録をすれば、保管した GIF の一元管理ができる。

これだけのことができて、無料です。

海外では人気があり、執筆時点の月間アクティブユーザー数は 1 億 3000 万人以上もいます。

会員登録

Gfycat の利用には、無料の会員登録がおすすめです。

GIF の作成・保管・共有・埋め込みは、会員登録をせずとも可能です。また、他の方が作成した GIF の閲覧も会員登録は必要ありません。ただ、保管した GIF の管理には、会員登録が必要です。

ユーザー名・パスワード・メールアドレスを入力するだけと、簡単な手続きです。登録後の返信メールで認証をすれば、会員登録は終わります。

また、Facebook アカウントでのログインが可能です。

GIF の作成と編集

動画を GIF に変換する方法として、「UPLOAD」と「CREATE」の 2 つが用意されています。

2 つの方法の共通項目は、以下のとおりです。

  • 作成した GIF は Gfycat 上に公開されるが、非公開にもできる。
  • お持ちの動画をアップロードできる。
  • お持ちの GIF のアップロードも可能。
  • アップロードサイズに制限はない。
  • 動画の URL の入力で、YouTube や Facebook、Vimeo、Dailymotion、Web サイトなどにある動画も変換できる。

動画をそのまま GIF に変換する UPLOAD

予め作成しておいた動画をそのまま GIF に変換する場合は、「UPLOAD」を選択します。

変換中は、猫がトイレットペーパーをクルクルと回すアニメーションを楽しめます。

動画を編集し GIF に変換する CREATE

再生時間などを編集されたい場合は、「CREATE」を選択します。

編集可能な項目は、再生時間やタイトル、キャプションなどです。

SNS に共有

GIF の作成が終わると、すぐに SNS に共有できます。

実際に Twitter に共有してみました。

また、メールやテキストメッセージでの共有も可能です。さらに、お使いのデバイスにダウンロードもできます。

Gfycat はアクティブユーザーが多いため、Gfycat のプラットフォームを通じた拡散も期待できます。

Web サイトに埋め込み

Web サイトに埋め込むには、作成後の共有ボタンの右にある三点アイコンをクリックします。

Web サイトに埋め込む「Embed」には、「Fixed iFrame」「Responsive iFrame」「JS Embed」の 3 つの方法が用意されています。

埋め込んだ GIF の基本的な動作は、以下のとおりです。

  • ページが読み込まれても、すぐには再生しない。
  • GIF の 50% が表示されてから、再生を開始する。
  • PC でマウスホバーをすると、再生・停止・全画面表示・再生スピード調整・SNS 共有などのコントロールが表示される。
  • スマホではコントロールは表示されないが、SNS 共有が可能。

任意のサイズで埋め込む Fixed iFrame

任意のサイズで埋め込みたい場合は、「Fixed iFrame」を選択します。

初期のコードは、GIF のオリジナルサイズが指定されています。

<iframe src='https://gfycat.com/ifr/GIF毎の固有ID' frameborder='0' scrolling='no' width='480' height='864' allowfullscreen></iframe><p> <a href="https://gfycat.com/gifs/detail/GIF毎の固有ID">via Gfycat</a></p>

コード内の widthheight の値を変えれば、サイトに合ったサイズに変更できます。

また、HTML5 で廃止となり非推奨となった frameborderscrolling の属性は、削除して構いません。GIF 下に表示されるテキストリンクが不要な場合は、<p> 以降も削除可能です。

レスポンシブな Responsive iFrame での埋め込み

レスポンシブ対応の GIF を埋め込みたい場合は、「Responsive iFrame」を選択します。Gfycat が推奨する埋め込み方法です。

初期のコードは、アスペクト比が 2:1.08 の padding-bottom:54% が指定されています。

<div style='position:relative;padding-bottom:54%'><iframe src='https://gfycat.com/ifr/GIF毎の固有ID' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0' allowfullscreen></iframe></div><p> <a href="https://gfycat.com/gifs/detail/GIF毎の固有ID">via Gfycat</a></p>

padding-bottom の値の変更で、任意のアスペクト比にできます(一般的な 16:9 であれば 56.25% )。

また、Fixed iFrame と同様に、frameborderscrolling、<p> 以降は削除可能です。

アスペクト比 4:3(padding-bottom の値は 75%)で埋め込んだのが、下の GIF です。

JavaScript を使用する高度な JS Embed での埋め込み

読み込みのタイミングやコントロールなどを細かく指定したい場合は、「JS Embed」で埋め込みます。ただし、gfycat.js の読み込みも必要です。

11 個のオプションがあるため、細かく調整できます。

AMP への対応

Gfycat は、AMP に対応できます。

使用する AMP コンポーネントは、amp-gfycat です。amp-gfycat を使用するには、<head></head> 内でライブラリを読み込みます。

<script async custom-element="amp-gfycat" src="https://cdn.ampproject.org/v0/amp-gfycat-0.1.js"></script>

そして、<amp-gfycat> タグを使い、サイトに埋め込みます。

<amp-gfycat
  data-gfyid="xxxxxxxxxx"
  width="800"
  height="450"
  layout="responsive">
</amp-gfycat>

data-gfyid には、GIF 毎の固有 ID を指定します。

Example: <amp-gfycat> – amp.dev で、実際に AMP ページに埋め込んだ Gfycat を確認できます。また、この記事は AMP ページのため、この記事に埋め込んでいる GIF は全て amp-gfycat を使用しています。

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール