自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)

feedly-logo

最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。

アイコンフォントは、CSSで色や大きさを指定出来るし、画像と違い大きさが変わったからといって、表示が粗くなるといったこともなく本当に便利です。

僕の使用しているWordpressテーマでも、Font AwesomeのWEBフォントを使用しています。このフォントがまた、種類も機能も豊富でとても使いやすいです。ただ、そんな便利なFont AwesomeのWEBフォントなんですけど、1つだけ不満に思うことがあります。

それは、feedlyのアイコンフォントがないことです。FacebookTwitterなど、WEB上でよく見かけるロゴのアイコンはあるんですけど、feedlyのものはありません。その他のアイコンフォント配布サイトでも見つけることができませんでした。

そこで、無いのならしょうがないということで、自分で作ってみることにしました。

ということで今回は、画像ツールとか使い慣れていない僕が、なるべく面倒なことを避けながらWEBアイコンフォントを作った過程について書きたいと思います。作成したものは、最後でダウンロードできるようになっているので、よろしかったお使いください。

スポンサーリンク
レクタングル(大)広告

WEBアイコンフォントを作る主な手順

さて、アイコンフォントを作るといっても、いろいろな方法があります。

僕も調べてみて、いろいろな方法があるのを知りました。けれどそのほとんどの方法がIllustratorという個人で使うにしては少し値段が高めのソフトを使ったものでした。しかしそんな中でも、「高額なソフトを買う必要もなく、なるべく簡単に作れる方法」を模索してみたら、何とか作ることができたので、その方法を紹介したいと思います。

主な手順は以下です。

  1. アイコンフォントのデザインを画像で作る
  2. SVG画像を作成する
  3. SVG画像からアイコンフォントを作成する
  4. アイコンフォントをサイトで使用する

この手順を使用することで、僕の様な素人でも、WEBフォントを、まあまあ手軽に作れるようになりました。

今回は例として、feedlyのWEBフォントを作りたいと思います。詳しい手順については、以下で説明していきます。

アイコンフォントのデザインを画像で作る

まずは、アイコンフォントのデザインを考えます。

参考とするアイコンフォント

デザインについては、このサイトテーマでも使用しているFont Awesomeに寄せて作りたいので、似たようなデザインしようと思います。ですので、fa-twitter-squarefa-twitterみたいな感じで、feedlyのアイコンフォントを作りたいと思います。

fa-twitter-squarefa-twitter

利用する画像

feedlyのロゴとかを自分で書くのが面倒なので、feedly公式のFeedly buttonで配布されている以下の画像ボタンを加工して作成したいと思います。

feedly-follow-rectangle-flat-big_2x

画像ボタンを加工してデザインを作成

上記の画像ボタンをGIMPで加工して、以下のようなPNG画像を作成しました。

fa-feedly-square240fa-feedly240

  • 大きさは、240×240pxの正方形(好きなサイズでOK)
  • 角を丸めるのはGIMPの「フィルタ→装飾→角丸め」を使用
  • 角丸めの割合はFont Awesomeのが10:1くらいだったので240:24にする
  • 枠つきのものを反転して、枠なしのものを作成

枠なしのものは、多少小さいような気もしますが、後で何とかします。

SVG画像を作成する

とりあえずデザインは完成したので、次はSVG画像を作成します。

使用するソフト

僕が、作成手順を調べていて1番の難関はここでした。というのも、ネットにある情報のほとんどは、SVG画像を作成するのにAdobeのIllustratorを使用する方法だったからです。ちなみに、Amazonで最新版のIllustratorの値段を見てみたら、12ヶ月版で2万6000円ぐらいでした。さすがに、このアイコンフォントを作るだけで、そんな高いソフトを買う気にはならないので、何か良い無料ソフトはないかと探してみることにしました。

で、無料でSVG画像を扱えるソフト探していたら、Inkscapeというフリーソフトがあったので、それを使うことにしました。僕はそれのWindows 64bit版をPartha’s Placeからダウンロードしてインストールしました。

Inkscapeのインストール

Inkscapeのインストールは、最初に日本語を選んでしまえば、あとは「次へ」を押していけばOKだと思います。

Inkscape日本語選択

SVG画像の作成

SVG画像の作成は、本来ならパスを利用して描いていくのが一番なんでしょうけど、僕は面倒くさいので、画像からSVGに変換することにしました。(パスで描いた方が綺麗にできるし、多分サイズは小さくなります。綺麗なものは、どなたかプロお願いします!)

キャンバスのサイズ変更

まず、Inkscapeを起動したら、こんな感じにA4サイズのキャンバスが表示されます。

Inkscapeデフォルト

今回作成するのは、240×240pxのサイズなのでキャンバスの大きさを変更します。

キャンバスの大きさを変更するには、メニューから「ファイル→ドキュメントの設定」を選択します。

Inkscapeのドキュメントの設定

カスタムサイズの幅と高さを240pxに設定しました。

あとは「表示→ズーム」などからキャンバスが好みの大きさに表示されるように調整してください。僕の場合は、こんな感じの表示になりました。

Inkscapeズームの変更

PNG画像からパスを作成

この画面上に、先程作成したPNG画像をドロップします。何か警告が出るかもしれませんが「埋め込み」を選択してOKボタンを押しましょう。

Inkscape PNG画像の埋め込み

画像ドロップするとこんな感じになります。

Inkscape PNG画像を埋め込んだ後

このままだと、ただ単にPNG画像を埋め込んだだけなので、このPNG画像からトレースしてパスを作成します。

パスを作成する方法は、メインメニューの「パス→ビットマップをトレース」を選択します。

Inkscapeビットマップをトレース

すると次のようなダイアログが表示されるので、「モード」タブの「単一スキャン」や「多重スキャン」のオプションを、いろいろ選択しながら「更新」ボタンを押してみてください。多分どれでも、ある程度はいけると思います。

すると、以下のようにトレース後の状態がプレビューに飛びされるので、中でも最も綺麗に表示されるオプションを選択して「OK」ボタンを押してください。(大抵は「明るさの境界」でOKな気がします。)

Inkscape ビットマップをトレースダイアログ

ビットマップのトレース後、ロゴマークをドラッグしてずらすと、上に「パスで作成されたオブジェクト」が重なっています。

Inkscape ビットマップとレース後

パスのオブジェクトを作ってしまうと、PNGオブジェクトは必要なくなるので削除してください。(削除しないと完成品が重くなる)

Inkscape PNGオブジェクトを削除

オブジェクトを中心に

あとは、ビットマップトレースして作ったオブジェクトを中心に持ってきます。

オブジェクトを中心に配置するには、メインメニューの「オブジェクト→整列と配置」を選択してください。

Inkscape オブジェクトの整列と配置

すると、以下のようなパネルが表示されるので、以下の手順を実行してください。

  1. 「基準」を「ページ」にする
  2. 「左端で揃える」ボタンを押す
  3. 「右端で揃える」ボタンを押す

Inkscape オブジェクトの整列と配置パネルで揃える

すると、こんな感じでオブジェクトがキャンバスにピタリと合います。

Inkscape オブジェクトが中心に来る

SVGファイルの書き出し

あとは、メインメニューの「ファイル→保存(名前を付けて保存でもOK)」でSVGファイルで保存します。

Inkscape SVGファイル書き出し

もう一方の、PNG画像もこのようにしてSVG画像に変換します。

(もう一方の「オブジェクトの整列」は中央揃えを使ったほうがいいかも。)

WEBアイコンフォントの作成

IcoMoon App - Icon Font   SVG Generator

アイコンフォントを作るには、IcoMoonというWEBサービスを使用します。

IcoMoonは、SVC形式のアイコンデータをアップロードするだけで、自作のオリジナルアイコンを作成・編集できる、とても便利なサービスです。

その他にも、「IcoMoon」「Font Awesome」「Iconic」「Meteocons」「Broccolidry」などのアイコンフォントが揃っていて、その中から使いたいものだけを選んでオリジナルのWEBアイコンフォントセットを作成することも出来てしまいます。

IcoMoonでフォントの作成

まずは、ページ上部にある「Import Icons」をクリックします。

Import Icons

アップロードのためのダイアログが表示されるので、そこで先程作成した、2つのSVGファイルを選択します。

すると、IcoMoonではこのように表示されます。

IcoMoonアップロード

次に使用するアイコンフォントを選択します。

今回は、作成したものしか使わないのでアップロードした2つのアイコンしか使用しません。

選択を終えたら、「Font」ボタンを押してください。

IcoMoon 使用するWEBはアイコンの選択

すると、アイコンの確認画面が表示されます。アイコンフォントのちょっとした編集は、アイコンフォントをクリックすることで、ここから行うことができます。

IcoMoon アイコンの編集

枠なしの「feedly」アイコンが少し小さいようなので、ここで大きくしてみます。

IcoMoon 枠なしの編集

編集対象のアイコンをクリックすることで、編集画面になります。

IcoMoon アイコンを大きくする前IcoMoon アイコンを大きくした後

このような感じで、アイコンを、スケールアップしたり、回転させたり、上下左右を反転させたり、移動したりすることができます。

最後に、「Download」ボタンを押すと、作成されたWEBワイコンフォントがダウンロードされます。

IcoMoon ダウンロード

アイコンフォント作成サイトは、その他にIconVaultなんてのもあります。こちらも簡単にアイコンフォントを作製することができます。

WEBアイコンフォントをサイトで使用する

ダウンロードしたファイルを解凍すると以下のようになっています。

作成されたもの

IcoMoon ダウンロードしたファイル

この中の、「fontsフォルダ」と「style.css」のみを使用します。

「fontsフォルダ」にはWEBアイコンフォント用のファイルが入っていて、「style.css」には.それを使用するためのスタイルが書かれています。

style.cssにはこのように書かれています。

使い方

使い方は、ダウンロードファイルの中にある「demo.html」を見れば分かります。

ヘッダー部分でスタイルを以下のように呼び出し、

使用時は、こんな感じで呼び出します。

すると、こんな感じでHTMLで利用することができます。(デモページ)

IcoMoon デモページ

実際のWEBアイコンフォント

実際に作成したアイコンフォントがこちら。

240px icon-feedly-square

 

240px icon-feedly

 

思ったより綺麗にできています。

ダウンロード

今回作成したものを以下に置いておきます。純粋に、パスを使って描いたものではないので多少粗いですが、それでも良かったら自由にお使いください。

feedlyのWEBアイコンフォント

IcoMoonで作成したWEBアイコンフォントです。

※僕の作ったfeedlyアイコンフォントは、Font Awesomeのものより少し大きく表示されてしまいます。もっと余白を持って作らなければいけなかったのかもしれません。使用するときは、サイトをFont Awesomeのものの85%にすると、大体同じくらいのサイズで表示されます。どなたか、同じようなサイズで作れた場合は、教えていただけると幸いです。

その他

あと、今回いろいろ試した中で、いろんなfeedly画像を作成したので、それも置いておきます。

大きなfeedlyPNG透過画像いろいろ

1000×1000pxです。

fa-feedly-square

fa-feedly

fa-feedly-square-b

fa-feedly-b

SVGファイル

1000×1000pxのfeedly枠つきSVGファイル

1000×1000pxのfeedly枠なしSVGファイル

まとめ

今回ようやく、念願のfeedly WEBアイコンフォントを手に入れることができました。

これで今まで、画像を利用していたSimplicityテーマのfeedlyアイコンを、アイコンフォントにすることができるようになりました。

こういったアイコンフォントを、無料で作れるツールがあるのは本当に助かります。

『自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)』へのコメント

  1. 名前:ケイタ 投稿日:2014/08/04(月) 15:05:56 ID:a6faa2d10

    私も「なぜFeedlyだけFont Awesomeに登録されてないのか・・・」と思っていたところ、こちらの記事に辿り着きました。
    もの凄く丁寧な解説で本当に素晴らしいです!
    Feedlyのアイコンフォント使わせて頂きますね。

  2. わいひら 名前:わいひら 投稿日:2014/08/04(月) 16:42:39 ID:190b8c64e

    記事がお役に立って良かったです!
    本当に、なんでないの?って感じですよね;
    僕が作成したアイコンフォントは、Font Awesomeのものより少し大きく表示されてしまいます。
    使用するときは、CSSなどでサイズを85%程度に縮小してやる必要があるかもしれません。

  3. 名前:ケイタ 投稿日:2014/08/15(金) 11:23:06 ID:656a9177a

    サイトにFeedlyフォントを組み込むことが出来ました。
    大きさはデフォルトのままで問題ない感じです。
    どうもありがとうございました。

  4. わいひら 名前:わいひら 投稿日:2014/08/15(金) 17:07:06 ID:8759711bf

    大きさ大丈夫でしたか。
    他のサイトでも使えてようでよかったです!

  5. 名前:Kei 投稿日:2015/08/16(日) 09:34:56 ID:02ab02aed

    製作者様のご指摘の通りアイコンのサイズが少し小さいように感じましたので、
    下記のようにスタイルを変更したら上手く表示されました。

    // *exp. font-sizeを指定

    #style.css の line-heightを変更
    //before
    line-height: normal;

    //after
    line-height: 1.6;

    Feedlyのアイコン、有難う御座いました。
    本当に感謝しています。

  6. わいひら 名前:わいひら 投稿日:2015/08/16(日) 16:57:10 ID:a73e72d69

    そういった設定でもうまくいくんですね。
    ありがとうございます。
    アイコンがお役に立てたようでよかったです。

  7. 名前:Kanami 投稿日:2016/11/02(水) 15:06:01 ID:3b2684190

    わいひら様

    FeedlyとPush7のWebアイコンフォントをダウンロードさせていただきました。
    SNSアイコンの素材を探しても見つからず、途方に暮れていた中でこちらへたどり着きました。
    画像加工は全くの苦手分野でして、完成したWebアイコンフォントを公開して下さり本当に助かりました。

    大切に使わせていただきます。
    ありがとうございました。

  8. わいひら 名前:わいひら 投稿日:2016/11/02(水) 20:37:37 ID:859f4cee0

    Illustratorなどを使えない素人が無料ツールを駆使して無理やり作ったものではありますが、お役に立てたのであれば幸いです。
    そう言っていただけると、公開してよかったです!