WordPress + Lightning のサイト制作・カスタマイズ・サポートを承ります

Inkscape でSVG形式の画像を作ってみました

ホームページのこと

スマホの高解像度化の流れ

スマホの画面は高解像度化がどんどん進んでいます。

老眼が身近に感じるようになった私は、あんな小さい画面でそこまで解像度を上げる必要があるのかねぇ・・・と疑問に思いますが、今後もこの流れは続くでしょう。デジカメの画素数が増えてきたのと似ていますね。

この高解像度化はスマホ向けのホームページ制作にも影響を与えています。

通常、ホームページで使用するロゴ画像やボタンは PNG / GIF / JPEG などのビットマップ形式で作るのが一般的です。

ピクセルサイズを小さめに抑えたビットマップ形式の画像を使ってホームページを制作すると、最新機種のスマホで表示したときに画像がぼけて見えてしまうという現象が起きます。そうならないためにピクセルサイズを増やすと、ホームページが重たくなってしまいます。

スマホ向けに SVG 形式の画像を使う

この問題の対策のひとつとして考えられるのが、SVG 形式の画像を使うことです。

SVG 形式の画像は拡大表示しても輪郭が滑らかできれいに表示されるという特徴があり、高解像度のスマホ画面で表示してもぼけることがありません。

Inkscape というフリーソフトで SVG 形式の画像を作ってみましたので、PNG 形式と比べてみます。

まず、原寸表示です。

SVG 形式
SVG形式の画像

PNG 形式
PNG形式の画像

もちろん、原寸表示ではどちらもきれいに表示されています。

それでは拡大していきましょう。

SVG 形式
SVG形式の画像

PNG 形式
PNG形式の画像

SVG 形式
SVG形式の画像

PNG 形式
PNG形式の画像

拡大すると PNG 形式の表示は悲しい結果になりますが、SVG 形式の方は拡大してもまったく問題ありません。

Inkscape、なかなかよさそうです

初めて Inkscape を使ってみましたが、なかなかよさそうなソフトだと感じました。

上記のボタン画像はおおよそ以下のような手順で作りました。

  1. 四角形、円、三角形を配置
  2. テキストを配置
  3. オブジェクト(テキスト)をパスに変換
  4. ページサイズをコンテンツに合わせて変更
  5. SVG 形式で保存

操作に慣れると、効率よくホームページ用の画像を作れそうな印象を受けました。

そのうちに時間ができたら、じっくりと使い方を研究してみたいと思います。

WordPress サイト制作・カスタマイズ・サポートを承ります

このブログを運営している、魚沼情報サービスの対馬です。ブログをご覧いただき、ありがとうございます。

弊社は、WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。

ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メールなどを使用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、まずはお気軽にお問い合わせください。

ホームページのこと
魚沼情報サービスをフォローする
魚沼情報サービスのブログ

コメント

  1. abin より:

    くりっく先生、こんにちは。
    SVG形式の画像恐るべしです。
    Inkscape、私も試しています。
    次回からのレッスンは、本格的な
    ホームページ制作になりそうですし
    役立てるといいなと思います。

  2. くりっく より:

    abin さん、こんにちは。
    これからは SVG 形式の画像を使う機会が増えるでしょうね。
    いっそのこと、パソコン向けのホームページでもロゴやボタンのような画像を
    SVG 形式で作っておきたい気がしますが、Internet Explorer 8 だと SVG は
    表示されないんですよね。