CC56

CC56: 567収束までに達成したい56リスト

Day-165 いいねボタン風エフェクトアニメジェネレータとNotionの相性がいい

最近、「いいねボタン風エフェクトアニメジェネレータ」が気に入っていて、色んな画像をGIF化して遊んでいます。 中でもNotionと相性が良かったので、どんな感じになるかをメモっておきます。

いいねボタン風エフェクトアニメジェネレータ とは

以下のサイトです。

wl-amigo.github.io

画像をアップすると、それをいいね風エフェクトっぽく装飾してGIF化してくれます。 細かい色の調整や出力サイズなどを調整でき、UIもわかりやすく誰でも簡単に使えると思います。

実際にやってみると

↓のデフォルメ画像を切り抜いたものを入力します。

f:id:hyper-pigeon:20200920221740p:plain
元画像

↓ Notionの推奨サイズが280x280なので、それに従いつつ、色を変更し、ジェネレートした結果。

f:id:hyper-pigeon:20200920221648g:plain
ジェネレートしたもの

Notionで使う場合、「出現画像の拡大率」はデフォルトの80%ではなく、100%がオススメです。 Notionではアイコンは縮小されるため、視認性を高めるため大きいほうがいいと思います。

f:id:hyper-pigeon:20200920222354p:plain
Notionで使う場合のオススメ設定

Notion側での見た目

f:id:hyper-pigeon:20200920222627g:plain
ページ側での見た目

f:id:hyper-pigeon:20200920222701g:plain
縮小アイコンでの見た目

こんな感じになります。もちろん「💡 Callout」にも使えます。

基本的にNotionのデフォルト絵文字はもっさり感があって使ってないのですが、Notionの記事を作りまくっているとアイコンが被ったり、よく閲覧する記事が埋もれてしまったりします。 そういうときに、視認性のレイヤーを上げるためにこの「いいねボタン風エフェクトアニメジェネレータ」で作ったGIFを使うと結構見やすくなったりします。

ただ、あんまりGIFを多用しすぎると、ページが重くなってしまうかもしれないです。よって、頻繁に更新する記事にアクセントを付ける程度の使い方がいいかもしれません。(Notion本来のFavorite機能でも十分ではありますが)

「いいねボタン風エフェクトアニメジェネレータ」で作ったGIF以外も使えるので、他の応用方法も考えていこうと思います。 (PythonとかProcessingで独自のスクリプトを書くかも)