「BTP」の記事一覧

こんにちは！シライユウキ(@gameyuuki_)です。 最近は暖かくなり始め、本格的に春が来たな〜とほっこりしています。笑 みなさん、ブログ更新のツイートってされますよね。 よく見かけるのは「記事名＋URL」っていう形です。 僕がほぼ平日刊でお送りしている（はず）の「C-log Topics.」ですが、これの更新告知ツイートは「記事名＋URL」の形に続けてツイートするような形で「トピックスダイジェスト」というGIFアニメを一緒にツイートしています！ 先日設置したアンケートフォームでも、このGIFアニメについてのご意見を頂いたりして思っていたよりも反響があって嬉しい限りです。 本日はそのGIFアニメの作り方をみなさんに紹介していこうと思います！ 「リクエストアドベントカレンダー」に参加しています！ この記事は参加しているブロガーコミュニティ「BLOGGERS TEA PARTY」内の「リクエストアドベントカレンダー」という企画でリクエストをいただいた記事です。 前日の「webledge」からバトンをもらい、3月19日は当ブログが記事を書きます。 明日は「AllSync.jp」が記事を更新予定です。 リクエストアドベントカレンダーについての詳しい説明はこちらから それでは早速ですが作り方について解説をしていこうと思います。 使うツール 実は使ってるツールは単純なものばかりです。 まず初めに紹介するのがプレゼンテーション用アプリの「Keynote」です。 Macユーザーの方なら最初から搭載されているやつです。 ちなみにWindowsでも、Officeを使っている方ならPowerPointでもある程度代用ができます。（今回PowerPointの説明はありません。要望があれば後日書こうと思います。） このアプリを使用して動画を作成しています。 続いて使用するのは「Gifski」という動画ファイルをGIFアニメに変換してくれるアプリです。 勘の良い方はこの時点でどうするかある程度わかりますね…笑 Windowsの方は同じように変換できるウェブサイト「ezGIF.com」を使うと変換ができます！ Gifskiに出会う前はこのサイトを使って変換していました！ （他にこれいいよー！ってやつあったら教えてください） 「トピックスダイジェスト」の作り方 それでは制作方法について説明していこうと思います！ ざっくり手順説明すると Keynote（PowerPoint）で動画作成 書き出した動画データをGifskiで変換 ツイートに添付して送信 これだけです。 それでは順に追ってサクッと説明していこうと思いますー！ Keynote（PowerPoint）で動画作成 まず、はじめにKeynoteで動画をつくります。 作るって言っても特別な事をする訳ではありません笑 普通にプレゼンテーションを作る感覚で大丈夫です。 注意点としては最初に選ぶテンプレートは自由ですが、サイズを「ワイド」で選択してください。 この方が投稿した時に切れたりせずにいい感じになります。 また、アニメーションを設定して動きをつけるのですが、その時に全て自動で動くように設定をしてください。 クリックをしないといけないところがあると上手く書き出せません。 基本的にページの最初に登場させたいものを「トランジションの後（遅れ０秒）」にして、それ以降は「ビルド○の後（遅れ0.3〜7秒）」に設定してもらえば大丈夫だと思います！ ページ自体のトランジション設定も忘れないでくださいね！ すべての入力・設定が終わったら動画ファイルとして書き出します。 ファイル→書き出す→QuickTime...を選択してください。 日付を自動入力する 細かいテクニックのような部分を紹介したいと思います。 「トピックスダイジェスト」のツイートを見てもらうと分かると思うのですが、日付を毎回入れています。 この日付ですが、毎日手動入力しているわけではないんです。 まず、上のメニューバーの「表」をクリックして表を作ります。 続いて、列と行をどちらも1にして1×1の表にします。 この表はExcelなどの表と同じなので関数が使えます。 そこで「TODAY関数」を利用して日付を自動で取得します。 =TODAY と入力してもらえば下記のような画面になるのでEnterを押してもらえば大丈夫です。 あとは背景やフォントを好きなように変更してもらえばOKです。 書き出した動画データを「Gifski」で変換 続いて「Gifski」を使って動画データをGIFアニメに変換します。 変換といっても難しい動作ではなく、動画ファイルをドラッグ・アンド・ドロップするだけです！ 保存先を指定して数分待てば自動で変換が終わるのでそれでGIFアニメは完成です。 ツイートに添付して送信 最後にTwitterの投稿画面に完成したGIFアニメを添付してツイートをするだけです！ 注意点：GIF画像はモバイル上では5MBまで、ウェブ上なら15MBまでと決まっています。 写真やGIF画像付きでツイートする方法より もし、容量を超えてしまった場合は最初にWindowsユーザーの方の変換ツールで紹介した「ezGIF.com」さんで容量の圧縮も出来るので使ってみてください。 「Optimize animated GIF」というページで容量を圧縮することが可能です。 まとめ 今回のリクエストアドベントカレンダーで頂いたお題は 「C-log Topics.のTwitterサムネイルで使っているGIFアニメの作り方を教えてほしいです。」 というものでした！ 自分なりにわかりやすく解説したつもりなのですが、いかがでしたか？もしわかりづらい部分などあったら、このTwitterで連絡もらえると助かります！ 昨日の「webledge」のけーすけ(@saradaregend)さんの記事はこちらから。 明日は「AllSync.jp」のSync(@allsync_jp)さんが記事を更新予定です。 リクエストアドベントカレンダーについての詳しい説明はこちらから

CLOG

「BTP」の記事一覧

Keynote・PowerPointで書き出した動画をGIFアニメにしよう！

シライユウキ