動画の GIF の変換・保管・管理・共有・埋め込みが可能な Gfycat

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

動画を GIF に変換する無料サービス「Gfycat」の紹介です。

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

Gfycat とは?

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

このような機能を無料で利用できます。

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

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

海外では非常に人気があり、月間アクティブユーザー数は 1 億 3000 万人以上。

Web 版のほかに、アプリも用意されています。

会員登録

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 に共有してみました。

ばっちり Twitter 上で GIF が動いています。

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

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 を指定します。

AMP by Example で、実際に AMP ページに埋め込んだ Gfycat を確認できます。

また、この記事は AMP ページのため、この記事に埋め込んでいる GIF は全て amp-gfycat を使用しています。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。