-
【Lottie】Illustratorで描いた絵をAfterEffectsで動かしてLottieとして書き出してWebページで動かす
(2023年11月追記)AfterEffectsよりシンプルで簡単に作れるLottielabのバージョンの記事も書きました。 https://deep-space.blue/web/3095 STEP 1. Illustratorで描いた絵をAfterEffectsで動かす 参考:https://helpx.adobe.com/jp/after-effects/how-to/... -
SVGは場合によっては重い? SVGとPNGどちらで書き出すかまとめ
シンプルなアイコンやロゴはSVGで書き出したほうがきれいで軽い! しかし、場合によっては SVGのほうが重い SVGにしてもきれいじゃない ということもあります。どんなときはSVGで書き出すとよいのか?をまとめました! パスで作られたポイントの数が少ない... -
備忘録 – Adobe XD のプラグインを作ってそこからNotion APIを叩いてみよう
https://deep-space.blue/web/2216 XDで混植プラグインを作った話は別記事にあります 結果的には思った通りにできなかったのですが「Adobe XD上の選択したオブジェクトの情報をNotionデータベースに登録する」ということをやろうとした時のメモです。 でき... -
備忘録 – Notion APIをローカルのnodeから叩いてみよう
Notion API の ドキュメントの導入に書かれている内容を、Node.js / npm 初心者がやってみた備忘録です! Notion側の準備 データベースの準備API認証情報の準備 データベースの準備 新規のデータベースを適当に作ります。 データの列の名前を後で使うので... -
遅延読み込みしたGoogle FontsのFOUTを、Font Loading APIを使って軽減してみた
【2022年3月】Google Fontsのパフォーマンス比較&ハリー・ロバーツ方式の勝手に改良版 にて、Google Fontsを遅延読み込みする方法についてまとめました。 しかし、この方法では「 FOUT(Flash of Unstyled Text)」という現象が避けられません。 ページ... -
Google Material Icons をアイコンフォントとしてXD & Webページで使う方法まとめ
Google Material Iconsは通常デザインデータ作成時などはSVGアイコン画像として使うことが多いかな、と思います。 が、実装ではアイコンフォントとして利用したい→デザインデータでもアイコンフォントとして使用したい!という場合の方法についてまとめて... -
【2022年3月】Google Fontsのパフォーマンス比較&ハリー・ロバーツ方式の勝手に改良版
★ハリー・ロバーツ方式の勝手に改良版は記事の最後にあります★ GoogleFontsをウェブページで普通に使うと、PageSpeed Insights (というかLighthouse)に 「レンダリングを妨げるリソース」として登場してしまう問題があります。 「普通に使う」とは Google ... -
【メモ】縮小表示した画像のレンダリングとimage-rendering:crisp-edgesの使用結果まとめ
以下の3ブラウザでの画像のレンダリング状態の調査と、image-rendering: crisp-edgesを使った場合のレンダリング具合のメモ。 Chrome 98(Edge 98も見た目おんなじでした) Safari 15.2 IE11 様々なブラウザでの表示確認用に作ったページ Chrome×縮小表示... -
【Karabiner-Elements】外付けテンキーをMacの左手用デバイスにする
Macでcommand + shift + control + 4 を急にたくさん押すことになって(スクリーンショット)左手が辛かったので、左手用デバイスに挑戦してみました! 購入したのはこちらのテンキー。 Karabiner-Elements https://karabiner-elements.pqrs.org/ キーボー... -
【Mac OS / Word】画像の変更 > クリップボードから のキーボードショートカットを設定する
急にMac OS版のWordで「画像の変更」→「クリップボードから...」の操作を大量に行ったので、キーボードショートカットの設定方法のメモです。 キーボードショートカットは設定できない 残念ながら… Mac版のWordには「ツール」→「ショートカットキーのユー...