BLOG
ブログ
2023年12月8日
【Notion×GIF】動くアイデア集の作り方【アニメーションのアイデアストックに】
Webサイト制作において、アニメーションはサイトのクオリティを上げる重要な要素です。
アニメーションのアイデアをストックしたいけれど、いい方法はないかな…？とお困りの方へ。
Notionとchromeの拡張機能「Chrome Capture 」を活用した簡単でお手軽なアイデアストックの方法を紹介します。
今回紹介する方法で下記のように、アイデアを収集することができます。
chrome拡張機能をダウンロード
ブラウザ上のアニメーションを記録するために、chrome拡張機能の
「Chrome Capture」をインストールします。
■Chrome Capture インストールはこちら
https://chromewebstore.google.com/detail/ggaabchcecdbomdcnbahdfddfikjmphe?hl=ja
※無料プランの場合、保存できるGIF動画の秒数は12秒までになります。もっと長いアニメーションを記録したい場合は有料プランにアップグレードしましょう。
アニメーションを保存する
- インストールした拡張機能のアイコンをクリックすると、パネルが出現。
「記録」を選択し今回は「選択された領域」をクリック。
(表示画面を丸々保存したい場合は「このタブ」をクリック)
- 下記の表示が出るため、保存する範囲を選択する
- 下部のビデオアイコンをクリックすると、記録がはじまり、
拡張機能アイコン部分に秒数が表示される。
記録を止める際は拡張機能アイコンまたはビデオアイコンをクリック。
- 左上にある保存アイコンをクリック
(オプションでGIFに文字を入れる事も可能)
- 保存パネルが表示され、サイズや保存場所を指定して保存
Notionで管理する
保存したGIF動画をNotionにアップロードしていきます。
Notionの利用には会員登録が必要です。
まだ使ったこと無いよ、とうい方はまずは下記のURLより会員登録を進めていきましょう。
https://www.notion.so/ja-jp
登録が済んだら、早速アップロードしていきましょう。
GIFはギャラリービューで管理しています。
- サイドメニューから「新規ページ」を作成し、テーブルを選択
- 「新規データベース」をクリック
- 「ビューを編集」をクリックし、ビューのレイアウトを変更する
- 「ギャラリー」をクリック。ビューの見た目が変化。
(ビューのレイアウトの変更は後から何度でも可能)
- 赤枠部分にアップロードしたいGIFをドロップ
(プロパティを追加でURLやテキストエリアを追加することが可能、参考サイトのURLなど入れておくと便利です！)
- GIFがアップロードされ、表示されるように！
- 完成！同じ手順でストックを増やしていきましょう。
注意点
Notion無料版ではファイルのアップロードは1ファイル5MBまでとなっているため、GIFのファイルサイズには注意しましょう。保存範囲を小さくしたり、画質を落とすことでGIFのファイルを小さくする事も可能です。
どうしても5MB以上のファイルをアップロードしたい！といった場合は有料版へのアップグレードが必要になります。
最後に
GIF動画の作成については他にもchrome拡張機能の「GIFを記録する」など、様々なツールがあるため自分に合ったものを見つけてみてください。
今回はアニメーションのストック方法について紹介させていただきました。アイデア収集の参考になれば幸いです！
デザイナー
nakao
デザイン進化の先へトランスフォーマ中
こんな記事も
読まれています
CONTACT & WORKS
お気軽にご相談・お問い合わせください