【WordPress】 ブログタイトルロゴにときめきを♡ SVG画像を使うべき4つの理由

東京のすみっこより愛をこめて。fummyです😊💡

WordPressでSVG、つかっていますか?

当ブログのタイトルロゴはSVG画像をつかっています。(ので、ほんのり動いています!)

しかし、WordPressではSVG画像がデフォルトでは使えない(アップロード時にエラーが表示されます)ため、使用するためにはひと手間が必要です。

これに関しては、別記事でWordPressでSVGを使えるようにする方法をまとめました。

【WordPress】プラグインで有効化!WordPressでSVG画像をアップロードする方法

2018.09.05

ただおそらく、WordPressの初期状態で使えないファイル形式の画像を、「本当に使って大丈夫なの?」と思う方もいると思いますので、本記事では、わたしがSVG画像をおすすめする理由と、WordPressで使用する際の注意点について書いていきます。

SVG画像は、Webサイトでは一般的に使用されている形式であり、使えるとリッチな表現ができるようになるので、クリエーターとしての幅が広がります!

ぜひぜひ、これを機にSVGの良さを知っていただけたらと思います(✿´ ꒳ ` )

SPONSORED LINK

タイトルロゴはSVG画像がオススメである4つの理由

どうして、わざわざWordPressにプラグインを導入してまで、ブログのタイトルロゴにSVG画像を使うことをオススメしているのでしょうか。

これに関しては、大きく分けると4つの理由があります!

理由①:拡大縮小に強く、どこで見ようが美しい。

これが最大の理由です。

SVGは「Scalable Vector Graphics」の名の通り、拡大縮小にとても強いので、パソコンで見ようがスマホで見ようが、鮮明で美しい線で画像を表現できるのです。

ちょっと専門的な話をすると、Webで扱われている画像には、大きく分けて「ラスター形式」と「ベクター形式」の2種類の形式があります。

よく使うのはPNG/JPEGあたりだと思いますが、これらはラスター形式

画像を網の目のように細かい点(ピクセル)に分割して、それぞれの点に色の情報を与えるものです。つまり、ラスター形式は点の集合なので、画像を拡大すると、点が大きくなるわけですから、どうしても画像が粗くなり、ギザギザになってしまうんですよね。

百聞は一見にしかず。ということで、

こちらのPNG画像をご覧ください。

特に高解像度のスマホやRetinaディスプレイで見ると、現時点ですでにじわってしてませんか? さらに、画面を拡大してみてください。すごくギザギザして見えると思います。

このようにPNGが悲惨なことになるのに対して、SVG画像をみてみてください。

Fummy's Lab.

画面の拡大もしてみてください。どこまでも線が美しく、鮮明なままだと思います。しかもささやかに豆電球が呼吸をしている(笑)。(※アニメーションはIE非対応。後述します。)

SVGはベクター形式。簡単に言うとプログラムで描かれた画像です。

点の座標と、それを結ぶ線などの数値データを計算して、画像を表現しています。そのため、画像のサイズを変更してもその都度それに合わせて計算&描画し直してくれます。画面サイズや解像度など意識しなくても、いつも変わらず美しいまま表示してくれるのです。

SVGがすごい理由①
いくら拡大したり縮小しても、線やカラーが美しいまま!

理由②:プログラムで書かれた画像なので、後から変更するのが容易。

プログラムで書いた画像ってどういうこと?

って、きっとイメージがわかない方もいると思いますので、コードをお見せします。左側のプログラムの実行結果が、右側の画像になっています。

IllustratorからSVG形式で書き出した画像を使うだけだったら、別にコードを見なくてもよいのですが、フミラボのロゴは後からアニメーションをつけたので、コードをいじっています。

See the Pen fumilab-logo by fummy (@fummy) on CodePen.

プログラムなので、色の変更も簡単です。
コード上のカラーコードの部分を書き換えればいいだけですから、一瞬で色の変更ができます。

例えばWebサイトのリニューアルを行なったとして、サイトカラーのイメージがまったく変わってしまったとしても、SVGファイルを開いて該当箇所のカラーコードを変更すればいいだけ。画像を書き出した後も、後から変更が効くのでとても楽です!

SVGがすごい理由②
プログラムなのでコードを書きかえるだけで、色も動きも後から簡単に変更できる!メンテナンス性が高い!

理由③:アニメーションがつけられる。

もうすでに話が出てきてしまってはいるのですが、SVGはプログラムなので、書き出した後に命令を書き加えることができます。つまりアニメーションがつけられます。

生きた獲物ををみつけると瞳孔がカッと開くネコのごとく、動くものが大好きなわたしなので、ロゴもここぞとばかりに動かしています(笑) 。
かといって、何でもかんでも闇雲に動かせばいいというものでもないので、豆電球が呼吸する程度のささやかに動きなのですが。もっと回転させたり、移動させたり色々できますよ。

Fummy's Lab.

動くとやっぱり訪れてくれたお客さまの印象に残りやすいですよね。また、サイト運営者の立場からしても「来てくれてありがとうー!」の気持ちを、動きを使って表現できると思います。

SVGがすごい理由③
アニメーションがつけられる!

理由④:SVGにも得意/不得意分野があるが、ロゴは得意分野に該当する。

理由②でご紹介したコードをコピーしてエディタに貼り付けていただくとわかるのですが、ちょっとコードが長いですよね。
小さいなタイトルロゴですらこの長さなので、写真のように情報量の多い画像をSVGで表現しようとすると・・・大変なことになりそうなのは、なんとなく想像がつくと思います。

SVGは美しいのですが、何でもかんでもSVGが良いわけではなくて、シンプルな画像向きです。写真のような複雑な画像は、従来通りJPEGやPNGが適しています。

タイトルロゴはというと、通常、情報量が少なくてシンプルです。

そのため、SVG向きだと言えるのです。

SVGがすごい理由④
シンプルな画像で最大限の力を発揮する!タイトルロゴには最適!

まとめると、やっぱりタイトルロゴはSVGがオススメ!

「なぜタイトルロゴはSVG画像がよいのか?」という問いに戻ります。

まず向き不向きという点で、タイトルロゴのように、情報量の少ないシンプルな画像にはSVGはとても向いています。
適性がある上に、拡大縮小に強くて、どこからみても美しくて、色も後から変更できて、おまけにアニメーションも入れられてしまうというメリット尽くし。使わない手はないと思っています!

またわたし個人としては、タイトルロゴはWebサイトの顔だと思っています。
訪れてくれたお客さまの記憶に引っかかるための、シンプルでわかりやすい重要なアイコン。なので、できるかぎり美しい状態で、お客様に歓迎を表現できるものにしたい、という思いがあります。

WordPressでプラグインを導入してまで、SVGを推す理由が、伝わりましたら幸いです・・・!

SPONSORED LINK

SVG画像を使用する際の注意点

こんな素敵なSVGなのですが、使用する際には、気をつけなければならないことがあります。

別の記事にまとめましたので、以下の注意点を知っておくと、SVG画像を使ったほうがよいか、使わない方がよいかということを自信をもって判断できると思いますので、ぜひ参考にしてみてください!

SPONSORED LINK

おわりに

タイトルロゴ, SVG, WordPress< ときめき

ここまで読んでいただいて、「ブログのタイトルロゴはSVG画像にすると良さそう・・・!」って、思っていただけましたでしょうか。

本記事は、タイトルロゴに限定しているのが実はミソです。(笑)
本当はサイトの内のすべての画像を美しく表示させたいけれど、ファイルサイズ、対応ブラウザ、外部システムとの連携の課題もあるので、わたし自身も、タイトル画像以外の画像は、ちょっと様子見です。

詳しくは、関連する以下の記事もみていただけたらと思います!

それでは、今日も素敵な一日を!

fummy

SPONSORED LINK
SPONSORED LINK