Designやフロントエンドのことなど。Designやフロントエンドのことなど。cordingSVGスプライトを使用してコマ割りアニメーションを作ってみました。以下の記事を参考にさせていただきました。CSSスプライトとstepsを使ってアニメーション画像を作ろう今回作ったサンプルはこちらです。cordingcompassを使っていないけどスプライト画像だけ作成したかったので、generatorを探してみました。以下、今回行った手順です。cordinganime.jsを使ってSVGロゴを線画で描画し、最後に色を塗りつぶすというサンプルを作成したのでご紹介します。デモこちらが完成したデモです。cordingJavaScriptファイルのリンクは、<header>に書くのか?</body>の直前に書くのか?読み込み速度を考慮した上での結論は以下です。WordPress他の方のブログを見ていて、サイドバーに固定された目次が見やすくていい感じだったので設定してみました。WordPressとこのブログで使用しているテーマLuxeritasを使えばすぐにできました。designこちらの記事では無料フォントについてまとめました。ここでは有料フォントについてまとめたいと思います。※価格や利用許諾は2019年11月現在のものですので、最新の情報はそれぞれのサイトでご確認ください。2019デザインの仕事のほとんどはフォント選びにあると言っても過言ではないと思っているraccoonicoです。フォント選び、大変ですよね。デザイナーに必須と言われていたモリサワフォントは年間49,800円(税抜)。serverウェブデザイナーのraccoonicoです。このブログはXSERVERにて運用しているのですが、当然いくつかのサーバーを検討しました。2020最近のWeb制作で特に重視されているのが、表示スピード。表示スピードをあげるために画像サイズの最適化は必須対応項目です。画像最適化するための2019年現在のベストプラクティスを調べてみました。2019イラストレーターからベクターデータをコピー&ペーストしてPhotoshopに貼り付け、それを自由変形しようとしたところ、2つの頂点が同時に動いてしまい、傾きに合わせて変形することができませんでした。