WebサイトのアイコンをPNGではなくSVGで作る理由
Webサイトで矢印やメール、電話などのアイコンを表示するとき、PNG画像を使う方法とSVGを使う方法があります。 どちらも画面上では画像として表示されますが、仕組みは大きく異なります。 PNGは小さな点の集まりで画像を表現するのに対し、SVGは線や図形の情報をもとに描画します。 この違いを理解せずに... 続きをみる
Webサイトで矢印やメール、電話などのアイコンを表示するとき、PNG画像を使う方法とSVGを使う方法があります。 どちらも画面上では画像として表示されますが、仕組みは大きく異なります。 PNGは小さな点の集まりで画像を表現するのに対し、SVGは線や図形の情報をもとに描画します。 この違いを理解せずに... 続きをみる
Webサイトを制作していると、画像を保存する際に「WebPとSVGはどちらを使えばいいのか」と迷うことがあります。 どちらもWeb制作ではよく使われる画像形式ですが、用途は大きく異なります。 結論から言うと、基本的な使い分けは以下です。 写真や複雑な画像にはWebP ロゴやアイコン、図形にはSVG ... 続きをみる
結論から言うと、手書き風フォントは自分で作ることができます。しかも、やろうと思えばそこまで特別なスキルがなくても実現可能です。ただし、「どのレベルを目指すか」によって難易度は大きく変わります。 この記事では、現実的な方法と、やりがちな勘違いも含めて整理していきます。 手書き風フォントの正体 まず前提... 続きをみる
ホームページを制作していると、パソコンでは普通の記号なのに、スマホで見ると絵文字に変わってしまうことがあります。例えば矢印や記号などが、スマートフォンではカラフルな絵文字として表示されるケースです。これはバグではなく、スマートフォンのフォント仕様によって起きる現象です。仕組みを理解しておかないと、意... 続きをみる
SVGアニメーションとは、SVG(Scalable Vector Graphics)形式の画像を動かす技術のことです。 SVGはベクター形式の画像データで、拡大・縮小しても劣化しないという特性を持っています。そのSVGに対して、動き・変形・色の変化などを加えることで、Webサイト上で表現力の高いアニ... 続きをみる
「.eps」という拡張子は「Encapsulated Postscript(エンキャプスレイテッド・ポストスクリプト)」の略で、主に印刷やデザインの現場で使われる画像ファイル形式のひとつです。EPSファイルは、写真のような点の集合でできているビットマップ画像とは違い、線や図形、文字などを数値情報とし... 続きをみる