韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

デモを見せるのに便利!「GIPHY」で画面の動きを録画してGIF画像を作る方法

Webサービス・アプリ

前回の記事、「スマホサイト用・クリックすると現れる検索フォーム」で、完成例を見せるために、Gif画像を載せました。

この画像は、「GIPHY」というMac用のアプリで作っています。
無料で簡単に作れるので便利です。

まず、Mac App Storeでダウンロードしたら、上部のメニューから、[GIPHY CAPTUR] > [Preferences]というのをクリックします。

赤い四角の部分の、「Capture Cursor」というところに、チェックを入れます。
こうすると、画面の動きを見せる時に、マウスカーソルを表示することができます。チェックを入れないと、マウスカーソルが非表示のまま録画されるので、どの部分をクリックしたかが分かりにくくなってしまいます。

そして、半透明の緑の枠を、見せたい部分に合わせます。

右下の、三本の斜め線のところをドラッグすると、大きさを調整できます。
そして、真ん中の赤い丸いボタンをクリックすると、録画開始です。
もう一度同じボタンを押すと、録画停止できます。
録画が終わると、サムネイルが一つできあがります。

この後、このGif画像をブログなどに貼り付ける場合は、上部のメニューの、[GIPHY CAPTUR] > [Preferences]をクリックし、「Join GIPHY」をクリックして、アカウントを作ります。

先ほど録画したGif画像のサムネイルをクリックすると、下のような窓が開きます。

[UPLOAD TO GIPHY]という紫のボタンをクリックします。
少しすると、URLに変わります。このURLをコピーします。

アカウントを作ったGIPHYのサイトにログインし、サイトの上の方にある「Upload」というボタンを押します。

点線で囲ってあるところに、コピーしたURLを貼り付けます。
そうすると、画面が変わります。下の方に「Upload GIFs」という青いボタンがあるので、クリック。
また画面が変わり、下の方にスクロールすると、iframeタグのソースコードが出てきます。
このソースコードをブログなどに貼り付ければ、GIF画像を埋め込むことができます。

ブログ記事に埋め込むだけでなく、コピーしたURLをメールに貼り付けたり、SNSでシェアしたりもできます。
使い方によっては、色々と役立ちそうです。

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください