忙しいあなたのための、アニメーション参考ストック術
はじめに
先日、以下のようなポストをしました。
嬉しいことに、思った以上に反応を頂けたので、
みんな、同じ悩みを抱えていることがわかって、ちょっとホッとしました。
以前から、Webのインタラクションやアニメーションの参考を
毎回、ギャラリーサイトを訪問しては
一つ一つ回遊し、探し回っていたのですが、
非効率さが気になっており、一覧で動きを確認できるようなストック方法がないものかと模索していました。
経緯は端折りますが、色々と検討した結果辿り着いたのが今回の方法です。
可能な限り効率化を図っているため、
仕事やプライベートで忙しい日常の、ちょっとした隙間時間で少しづつ
動きの参考をストックして、自分だけのアニメーションギャラリーを作ることができると思います。
では、具体的な手順の説明に入ります。
1.Notionデータベースの作成
1-1.新規ページを作成
どこでも良いので、空のページを作成し名前をつけます。
1-2.ギャラリービューのデータベースを作成
「/ga」と入力すると、「Gallary view」という名前のデータベースブロックがヒットするので
選択します。
1-3.作成したデータベースに名前をつける
デフォルトでは、「Gallery view」となっているので、クリックして「Rename」します。
今回は、「AnimationDatebase」としました。ここは任意の名前で大丈夫です。
2.「Save to Notion」の導入
2-1.ダウンロード
次に、Chrome拡張機能である「Save to Notion」を導入します。
これは、手軽にWebサイトをNotionのページとして挿入できる機能を持っています。
以下からダウンロードできます。
また、設定方法は以下記事にとてもわかりやすく記載されているので
参照ください！
(この記事でも、簡単に記載します)
2-2.設定
この拡張機能は、結構使用頻度が高いので僕の場合はピン留めして
すぐに使用できるようにしています。
拡張機能を開くと、「Add New Form」ボタンがあるのでクリックします。
続けて「Select a Page or Datebase」をクリックして、
先ほどデータベースを作成したアカウントを選択、
データベースも、作成したものを選択します。
今回は「AnimationDatebase」という名前で作成したので、それを選択します。
任意の名前をつけて、Content Imageは不要なので削除し
「Save & Go Back」をクリックします。
3.DropboxCaptureの導入
3-1.ダウンロード
次に、デスクトップアプリである「Dropbox Capture」をダウンロードします。
Dropboxへの課金は必須ではなく、無料プランでも問題なく利用できます。
3-2.設定
ダウンロード後、アプリを起動し設定を行います。
右上の3点ドットボタンをクリックして、「基本設定」に移動します。
僕の設定は以下の通りです。
「スクリーンショットの準備が出来次第、画像をコピー」にしておくと
macOSデフォルトのキャプチャ機能、「shift + command + 4」で撮影した画像が
自動でクリップボードに保存されるため、「command + V」でペーストできます。
地味に便利です。
ショートカットのタブで、お好みでカスタマイズできます。
詳細のタブでは、特に理由がなければ「起動時に開く」をオンにしておくと
毎回アプリを立ち上げる手間が省けます。
また、キャプチャした画像や動画は、デフォルトで
/users/ユーザー名/Dropbox/Capture
というディレクトリに保管されますが、変更も可能です。
以上でDropbox Captureの設定は完了です。
4.アニメーションをNotionに保存する
ここまでで、準備はほとんど完了しました。
それでは、実際にNotionにアニメーションを保存する流れをお伝えします。
4-1.サイトをNotionに保存する
まずは、Notionにアニメーションを保存するためのページを作成する必要があります。
先ほどダウンロードした、Save to Notionを活用します。
気になるアニメーションを見つけたら、そのサイトを開いた状態で、
Save to Notionを起動します。
手順1で作成したデータベースが表示されるので、選択します。
何も入力しなくても、勝手にサイト名が入力されていますので
そのまま一番下の、Save Pageをクリックします。
僕は主に、アプリのNotionを使用しているので
Chromeとは別ウィンドウでNotionの先ほど作成したページを開いています。
数秒で保存が完了し、Notionに無事ページが追加されました。
(デフォルトで追加されていた空ページは削除しました。)
中身はこんな感じです。自動でサイトのURLも追加されるので便利です。
4-2.GIFをサムネに設定する
それでは次に、作成されたページのサムネイルをGIFに設定します。
保存したいアニメーションの場所を画面内に入れて、「shift + option + G」を押下します。
(ショートカット設定に準じてください。)
すると上記のような表示が出ますので、アニメーションを撮影したいエリアをドラッグで選択します。
選択すると、撮影開始、停止のコントローラが表示されるので、
撮影を開始して、アニメーションを発火させてから、撮影を終了します。
撮影が完了するとCaptureフォルダ内にGIFが保存されます。
これをサムネに設定するのですが、そのまま
ページの冒頭にペーストしても、なぜか反映されないので、
僕はストックするときは、Notionと別タブでFinderもCaptureフォルダを開いた状態で置いています。
(ペーストでいける方法がわかる方、いらっしゃいましたらご教示頂きたいです...)
ペーストで反映されないので、仕方なく
Finderから撮影したGIFをページにドラッグします。
すると、上記のようにサムネに設定されるので
一覧でアニメーションが確認できるようになります。
5.データベースをカスタマイズする
現在の僕のNotionの保存状況は以下のような感じです。
Event,UI,参考,Look&Feelという軸で絞り込むことができて、
ページ作成時に任意でタグを設定できるようになっています。
Eventには、
scrollやhoverなどのアニメーション発火トリガーを登録しています。
UIには、
buttonやcard、humburgerなどの、UI名称を登録しています。
参考には、
実際に現在取り組んでいる案件で参考にしたいものに、
チェックボックス形式で、登録できるようにしています。
Look&Feelには、
文字通り、アニメーションのテイストを登録しています。
ここからは、タグの追加方法や絞り込み設定の方法について記載していきます。
5-1.タグを追加する
まず、タグの追加方法です。
データベース上にカーソルを乗せると、3点ドットのボタンが出現するのでクリックします。
次に、Propertiesをクリックします。
Propertiesはページ内の、タイトル下の部分と連動しています。
Shown in galleryは,ギャラリー内(一覧画面)で表示されているタグで、
Hidden in galleryは、非表示のものです。
現状だと、Nameが表示されています。
不要なタグは削除します。
アニメーションの参考のために、Nameは不要なので、
一覧性を少しでも高めるために、非表示にします。
複数選択のタグ、「Event」を作成してみます。
New propertiesをクリックします。
いろんな種類がありますが、今回は複数選択の「Multi-select」を選択します
名前を「Event」に設定し、閉じます。
ページを開くと、タグが追加されているのがわかります。
ここで入力し、一度作成したタグは次回から選択できるようになります。
つまり、一度タグを作成し切ってしまうと
毎回タグを選択するだけで良くなるので、楽です。
お好みでタグを色々追加してみてください！
5-2.絞り込み設定をする
最後に、絞り込み設定の方法について記載します。
Filterボタンをクリックします。
絞り込み軸にしたいタグを選択します。
すると、以下のようのタグの値で絞り込みをかけられるようになります。
何個でも絞り込み軸は追加できるので、かなり便利です！
以上で、全ての設定が完了となります！
お疲れ様でした！！
終わりに
少し長くなってしまいましたが、
これでより効率的に、アニメーションの参考をストックしていく土台は
準備できたかと思います！
カスタマイズの幅が広く、とても色んなことができると思うので
もし何か気になることや、もっと良さそうな方法などありましたら
こっそり教えて頂けると、とても嬉しいです！(笑
お読み頂きありがとうございました！
Discussion