web– category –
-
【Adobe XD】和欧混植を実現するMixed FontTypeプラグインを作りました
Adobe XDで font-family:Lato, "Noto Sans JP", sans-serif; というような文字組が設定できればいいのに… ということで、XDで混植を実現するプラグインを作りましたので使い方のご紹介です。 【Mixed FontType プラグインの使い方】 Mixed FontTypeプラグ... -
【Lottie】Illustratorで描いた絵をAfterEffectsで動かしてLottieとして書き出してWebページで動かす
【STEP 1. Illustratorで描いた絵をAfterEffectsで動かす】 参考：https://helpx.adobe.com/jp/after-effects/how-to/jp-for-designers-1.html 動かしたいオブジェクトごとにレイヤーに分ける AfterEffectsで読み込むと、Illustratorのレイヤー＝AfterEffe... -
SVGは場合によっては重い？ SVGとPNGどちらで書き出すかまとめ
シンプルなアイコンやロゴはSVGで書き出したほうがきれいで軽い！ しかし、場合によっては SVGのほうが重いSVGにしてもきれいじゃない ということもあります。どんなときはSVGで書き出すとよいのか？をまとめました！ 【パスで作られたポイントの数が少な... -
備忘録 – 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)に 「レンダリングを妨げるリソース」として登場してしまう問題があります。 【「普通に使う」とは】 Goo... -
【メモ】縮小表示した画像のレンダリングとimage-rendering:crisp-edgesの使用結果まとめ
以下の3ブラウザでの画像のレンダリング状態の調査と、image-rendering: crisp-edgesを使った場合のレンダリング具合のメモ。 Chrome 98（Edge 98も見た目おんなじでした）Safari 15.2IE11 様々なブラウザでの表示確認用に作ったページ 【Chrome×縮小表示... -
【WordPress】SEO SIMPLE PACKで固定ページの時はサイトデフォルトのOGP画像を適用させたい
meta descriptionやOGPの設定をよしなにしてくれる SEO SIMPLE PACK というプラグインがあります。 https://ja.wordpress.org/plugins/seo-simple-pack/ Yoast SEOより省機能な感じを気に入って使っているのですが、ひとつ問題がありました。 固定ページの... -
IE11でサイトを開いたときEdgeに自動リダイレクトするようにしてみた！
IE11でアクセスしたサイトを強制的にMicrosoft Edgeで開くようにする方法があります。 「IE 互換性リスト（IE compatibility list）」または「Need Microsoft Edge list」と呼ばれる、microsoft.comにあるリストに載せてもらう、という方法です。 このリス...