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

PR 2014/7/28 2014/8/4 ブログのための画像使用・編集, ブログ, WEBサービス 12

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

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

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

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

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

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

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

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

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

主な手順は以下です。

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

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

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

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

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

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

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

利用する画像

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

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

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

大きさは、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だと思います。

SVG画像の作成

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

キャンバスのサイズ変更

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

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

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

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

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

PNG画像からパスを作成

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

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

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

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

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

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

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

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

オブジェクトを中心に

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

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

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

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

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

SVGファイルの書き出し

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

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

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

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

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

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

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

IcoMoonでフォントの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作成されたもの

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

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

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

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?t154j0');
    src:url('fonts/icomoon.eot?#iefixt154j0') format('embedded-opentype'),
        url('fonts/icomoon.woff?t154j0') format('woff'),
        url('fonts/icomoon.ttf?t154j0') format('truetype'),
        url('fonts/icomoon.svg?t154j0#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-feedly:before {
    content: "\e600";
}
.icon-feedly-square:before {
    content: "\e601";
}

使い方

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="demo-files/demo.css">
    <link rel="stylesheet" href="style.css"></head>
<body>
    <div class="bgc1 clearfix">
        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;2)</small></h1>
    </div>
    <div class="clearfix mhl ptl">
        <h1 class="mvm mtn bshadow fgc1">Grid Size: Unknown</h1>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-feedly"></span><span class="mls"> icon-feedly</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e600" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="&#xe600;" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
        <div class="glyph fs1">
            <div class="clearfix bshadow0 pbs">
                <span class="icon-feedly-square"></span><span class="mls"> icon-feedly-square</span>
            </div>
            <fieldset class="fs0 size1of1 clearfix hidden-false">
                <input type="text" readonly value="e601" class="unit size1of2" />
                <input type="text" maxlength="1" readonly value="&#xe601;" class="unitRight size1of2 talign-right" />
            </fieldset>
            <div class="fs0 bshadow0 clearfix hidden-true">
                <span class="unit pvs fgc1">liga: </span>
                <input type="text" readonly value="" class="liga unitRight" />
            </div>
        </div>
    </div>

    <!--[if gt IE 8]><!-->
    <div class="mhl clearfix mbl">
        <h1>Font Test Drive</h1>
        <label>
            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
            min="8" value="48" />
            px
        </label>
        <input id="testText" type="text" class="phl size1of1 mvl"
        placeholder="Type some text to test..." value=""/>
        </label>
        <div id="testDrive" class="icon-">&nbsp;
        </div>
    </div>
    <!--<![endif]-->
    <div class="bgc1 clearfix">
        <p class="mhl">Generated by <a href="http://icomoon.io/app">IcoMoon</a></p>
    </div>

    <script src="demo-files/demo.js"></script>
</body>
</html>

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

<link rel="stylesheet" href="style.css">

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

<span class="icon-feedly-square"></span>

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

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

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

240px icon-feedly-square

240px icon-feedly

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

ダウンロード

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

feedlyのWEBアイコンフォント

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

[wpdm_file id=1]

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

その他

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

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

1000×1000pxです。

SVGファイル

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

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

まとめ

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

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

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

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

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

私も「なぜFeedlyだけFont Awesomeに登録されてないのか・・・」と思っていたところ、こちらの記事に辿り着きました。
もの凄く丁寧な解説で本当に素晴らしいです！
Feedlyのアイコンフォント使わせて頂きますね。
名前:わいひら投稿日：2014/08/04(月) 16:42:39 ID：190b8c64e

記事がお役に立って良かったです！
本当に、なんでないの？って感じですよね；
僕が作成したアイコンフォントは、Font Awesomeのものより少し大きく表示されてしまいます。
使用するときは、CSSなどでサイズを85％程度に縮小してやる必要があるかもしれません。
名前:ケイタ投稿日：2014/08/15(金) 11:23:06 ID：656a9177a

サイトにFeedlyフォントを組み込むことが出来ました。
大きさはデフォルトのままで問題ない感じです。
どうもありがとうございました。
名前:わいひら投稿日：2014/08/15(金) 17:07:06 ID：8759711bf

大きさ大丈夫でしたか。
他のサイトでも使えてようでよかったです！
名前: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のアイコン、有難う御座いました。
本当に感謝しています。
名前:わいひら投稿日：2015/08/16(日) 16:57:10 ID：a73e72d69

そういった設定でもうまくいくんですね。
ありがとうございます。
アイコンがお役に立てたようでよかったです。
名前:Kanami 投稿日：2016/11/02(水) 15:06:01 ID：3b2684190

わいひら様

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

大切に使わせていただきます。
ありがとうございました。
名前:わいひら投稿日：2016/11/02(水) 20:37:37 ID：859f4cee0

Illustratorなどを使えない素人が無料ツールを駆使して無理やり作ったものではありますが、お役に立てたのであれば幸いです。
そう言っていただけると、公開してよかったです！
名前:でこはち投稿日：2017/02/15(水) 18:09:12 ID：ebd7f73d1

記事を参考にして、オリジナルのアイコンをフォントセット化することができました。
内容がわかりやすく、大変助かりました。
ありがとうございます！
名前:わいひら投稿日：2017/02/15(水) 20:02:40 ID：ebceac611

記事がお役に立ったようでよかったです！
名前:しかさω 投稿日：2017/04/15(土) 21:25:02 ID：186ba4882

わいひらさんが作成されたFeedlyのアイコンをそのままサイトに設置させていただきました。
私のところではFont Awesomeのアイコンより少し小さく表示されますが、CSSで◯の中に収めたら特に気にならない感じです。
（というか恐らく、大きさがなんか揃っていない…と感じるのはサイトの製作者本人だけで閲覧者は気付いていないものと思いますが（笑））

ありがとうございました！
名前:わいひら投稿日：2017/04/16(日) 13:01:10 ID：47ae23dc9

そうなんですよね。枠いっぱいに作っているのですが、どういうわけか、Font Awesomeと大きさにズレが生じてしまいます^^;
僕も、こういったベクター画像のデザインには、疎いのでプロの方だともっと上手に作られるのかもしれません。

ただ、僕もしかさωさんと同じで、「こんな細かいところまで見てないだろう」ということで、そんな感じになっています(笑)
feedlyのアイコフォントが多少なりともお役に立てば幸いです。