GIF の作成・保管・管理・共有・埋め込みが可能な Gfycat

GIFのホスティングサービスのGfycat

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

作成した GIF は、すぐに SNS に共有できます。

また、 Web サイトには、再生・停止・共有ボタン付きの iframe で埋め込めます。

さらに、作成した GIF は Gfycat 上に保管されるため、保管場所に困りません。

その上、会員登録をすれば、保管した GIF の一元管理ができます。

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

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

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

Android : Gfycat Loops: GIF Cam+Recorder

iOS : Gfycat: Send GIFs & Memes

「動画はファイルサイズが大きくて困る…。」という方に、おすすめのサービスです。

Gfycat の会員登録

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

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

ただ、保管した GIF の管理には、会員登録が必要です。

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

Gfycatの会員登録画面

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

GIF の作成と編集

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

UPLOADとCREATEの2つの方法で動画をGIFに変換

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

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

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

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

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

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

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

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

SNS に共有

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

GIFに変換後にSNSシェアが可能

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

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

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

Gfycat はアクティブユーザーが多いため、 Gfycat を通じた拡散も期待できます。

Web サイトに埋め込み

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

GIF変換後に表示される三点アイコン

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

3つの方法でWebサイトに埋め込めるEmbed

埋め込んだ 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 個のオプションがあるため、細かく調整できます。

番外編: oEmbed を使った WordPress への埋め込み

WordPress には、 3 つの方法のほかに「 Gfycat URL 」を使い oEmbed でも埋め込めます。

WordPressにはGfycat URLで埋め込み可能

ただし、別途 CSS の指定が必要です。

AMP への対応

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

使用する AMP スクリプトは、 amp-gfycat です。

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

また、この記事の AMP ページにも、埋め込んでいます。


これまで当サイトでは、 Web サイトの動作を説明する際に MP4 形式の動画を使っていました。

ただ、動画はファイルサイズが大きくなり、 WordPress の最大アップロードサイズの 2MB によく引っかかる…。

上限を変更すればいいのですが、ちょっと面倒。動画の圧縮も手間がかかります。

でも、 Gfycat を使えば、そんなことに悩む必要はありません。これからは動画ではなく、 Gfycat を使っていきます。

だって GIF の作成が簡単だし、 JavaScript を使わずに再生・停止ボタンを実装できるなんて楽だもん。

しかも、 AMP に対応しているのは魅力的です。