1. DX支援サービス

    進化したデジタル技術を浸透させることで人々の生活をより良いものへと変革する

  2. ソフトウェア開発サービス

    VAREALだからできる、RubyとRuby on Railsに特化した、素早く柔軟なソフトウェア開発

  3. AI関連サービス

    データ活用と機械学習を用いたビジネスの着実な深化を。

  4. クリエイティブサービス事業

    美しいだけではない
    機能的UI/UXと正しいコーディング。

  5. 自社製品のご紹介

    自社製品のご紹介

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. 株式会社ミクシィ様 チケット販売サイトの開発支援

  3. 株式会社ドワンゴ様 e-learningシステム「N予備校」

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 保育園関連情報メディア開発

  11. 飲食店マッチングネイティブアプリ開発

  12. マッチングサイトメッセージ機能開発

  1. 製造業のDX支援〜営業日報管理システム開発〜

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  5. 佳秀工業株式会社コーポレートサイトリニューアル

  6. 開発コンサルティング

  7. 団体管理システム

  8. ITコンサルティング

  1. Webサイト訪問者分析のためのデータ分析基盤構築

  2. 製造業のDX支援〜営業日報管理システム開発〜

  3. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  4. 生産管理システム

  5. 仮想化サーバー導入

  6. タブレット端末導入

  1. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  1. イベントサイト 「オンラインで集まろう 学研クリスマス&おとしだまウィーク」

  2. ウォータージェット加工.com サイトリニューアル

  3. 佳秀バイオケムサイトリニューアル

  4. スカイライト コンサルティング様コーポレイトサイトリニューアル

  5. ハイブリィド株式会社 様 [ IT-Manager SD ]

  6. ライオン株式会社様 パーソナライズされたレコメンドAIの開発

  7. 国際的機関の組織内システム開発

  8. 既存会計サービスのUI/UXデザイン改善

  9. 株式会社 クリニカル・トライアル 様 希少疾患SNS「RareS.(レアズ)」

  10. 人材マネジメントシステムUI/UXデザイン

  11. 保育園関連情報メディア開発

  12. Vareal株式会社中途採用情報サイト

Design

特長を知っておこう!「SVGアイコン」と「アイコンフォント」の違い

デザイナーの福田です。
皆さん、Webサイトのアイコンはどうしていますか?最近だとSVGアイコンで表示させることが多いのではないでしょうか。SVGアイコンは拡大しても劣化せず、色も変更でき、アニメーションさせることもできるので大変使い勝手がいいですよね。

ですが、コードが長すぎると感じる時はないでしょうか。そんな時はアイコンフォントを使うのも一つの手段かと思います。今回はSVGアイコンとアイコンフォントを比較してご紹介します。

記述の違い

例えば以下のアイコンのようにパスの数が多い場合の記述を比較してみます。

SVGアイコン

SVGアイコンだとコードがかなりの長くなってしまいます。

アイコンフォント

アイコンフォントであればこれだけの記述で表示させることができます。

書き出し方法

SVGアイコンはイラレを使えば簡単に書き出すことができます。それに対してアイコンフォントは少し手間がかかります。

SVGアイコン

イラレで書き出す場合は書き出したいアイコンを選択して「アセットの書き出し」パネルの「+」ボタンを押します。

パネルにアイコンが追加されます。アセット名は変更しておいた方分かりやすいのでここでは「human」にします。あとは「書き出し」ボタンをクリックして保存先を指定するとSVGファイルが書き出されます。

「human.svg」を開いて中のコードをhtmlに貼り付ければアイコンが表示されます。

アイコンフォント

アイコンフォントはWebサービスを使う必要があるので今回はicoMoonを使います。
SVGファイルは上記で作成した、「human.svg」を利用します。
出典:https://icomoon.io/

まずは「import Icons」をクリックしてSVGファイル(human.svg)を読み込みむと、アイコンが追加されます。

次に、追加されたアイコンを選択して右下の「Generate Font」をクリックします。

そして、右下の「Download」ボタンをクリックして保存します。

書き出されたZipファイルを解凍すると以下のファイルが含まれています。
この中で必要なのは「style.css」と、「fonts」フォルダ内の「icomoon.svg」「icomoon.ttf」「icomoon.eot」「icomoon.woff」のフォントファイルです。

表示させる場合はこれらのファイルを読み込んで以下のように記述するとアイコンが表示されます。

メリット・デメリット

SVGアイコン

メリット

  • アニメーションさせることができる

デメリット

  • 記述が長くなってしまう

アイコンフォント

メリット

  • 記述が短い

デメリット

  • アニメーションができない
  • 書き出しや設定までに手間がかかる

まとめ

いかがでしょうか。アイコンの数が多いとSVGアイコンの場合、記述が長くなり可読性が落ちるので使う数によってアイコンフォントと使い分けてもいいかもしれません。

VAREAL(バレアル)はWeb制作の仕事も受け付けておりますのでお気軽にお問い合わせください。


Varealの制作部門のサービス内容はこちら
クリエイティブサービス事業

Varealの制作部門の実績はこちら
WORKS クリエイティブサービス

関連記事

%d bloggers like this: