アイコンフォントを描く時の注意点
スクラッチでアイコンフォントの元になるイラストを描く方法を21時限の中の「3.Scratchでイラストを描く」で解説しました。今回描いて作ったアイコンフォントがこれです→
※スクラッチで描いた物で解説していますが、インクスケープでもイラストレーターでも考えは同じです。
2022年2月14日 追記 こんなアイコン作りました。
アイコンフォントを描く時に気を付ける5つのポイント
そこでは詳しく書かなかったのですが実はIcomoonに取り込む時に以下の5つのポイントをクリアしていないとちゃんと表示されません。
ポイント
１.２.３は21時限で説明済みですので残りの４と５を書きます◎
スクラッチで描いたイラストを書き出します。
書き出したファイルをIcomoonのImport Icons で取り込んだら注意が出てしまいました。一旦無視して「Dismiss」で次に進みます。
選択したアイコン一覧の画面でも注意が出ます。しかも今取り込んだアイコンの顔周りがちゃんと表示されていません。
「ストローク（線）は無視されます」と注意しています。アイコンをクリックしてみると、
イラストがちゃんと表示されていないね
ちょっと見にくいけれど、グレーの部分（目、鼻、ツノ）は表示されていて、黒い丸（顔の輪郭）の部分が表示されていないようね
このまま進めてアイコンフォントにしてWebで表示するとこうなってしまいました。この差は何でしょう
4.線は表示されないので筆ツールなどで描きます
スクラッチで描いた所までさかのぼると、ちゃんと表示されなかった（黒で表示された）顔の輪郭は円ツールの枠線を使って描いた27の太さの「線」＝ストロークでした。
”ストロークは無視されます”ってIcomoonの注意に出ていたね
直線ツール、四角形の枠線、円の枠線 は表示されないので注意
線以外のツールで描き直します。
例えば円ツールの中を塗りつぶして、消しゴムツール（Max100まで）で中を丸く消します。
見た目は同じでも右は「太さ〇〇の線」で、左は線ではありません。
5.パスを統合しておいた方が安全です？
パスの統合というのは、イラストのパーツをバラバラで無く（水色のように）スッキリ1つにまとめる事です。ただ今回はこれをしなくても大丈夫だったので大きさや細かさにもよるのかもしれません。
以前バッグのアイコンをイラストレーターで作った時にこれが原因で綺麗に表示されず修正した経験がありました。
お絵かき機能がシンプルなスクラッチでパスの統合をするのは結構手間なので（もし綺麗に表示されなかったらこの記事を思い出していただくという事で）このままでいいのかもしれません◎
2021年11月11日 追記
Inkscapeで「パスの統合」をするにはノードツールで選択
インクスケープでパスの統合をしなかったら、サイトでアイコンを表示した時に大きさによっては変な白が出ましたので統合の仕方を書いておきます。
パスの統合をするには「選択ツール」ではなく「ノードツール」で統合したいパーツを選択し、上のメニュー＞パス＞統合 です。
左のようになればOK、右はまだバラバラです。
私のPCが重かったからか、全てを選択して１回で統合しようとしたらダメでした。手間ですが小まめに数回に分け統合出来ました◎
2021年11月13日 追記
パスを統合する、しない問題
そう言えばScratchで作った物は「パスの統合」していなかったような？と最近気付きました。そもそもその機能が無いのです。Scratch、Inkscape、Illustrator の３つで改めて検証しました。
- Scratch はしなくてOK（「パスの統合」機能がありません）
- Inkscape はした方が無難
- Illustrator はしないとダメ
としました。表示サイズ、もしかしたらIllustratorのバージョンでも違うかもしれないので絶対とは言えませんが。
Scratchだけしなくて大丈夫なのは単純なイラストだったからかなと思い少し複雑なゾウカブトを描いてみましたが、
（上）ちゃんと表示されました。（下）Inkscapeでパスの統合をした物と比較しても問題なさそうです。
作ったアイコンをダンロードして実際に使う方法
この後、IcomoonでファイルをダウンロードしてWordPressや他で使うやり方は「プログラミング1年生」の21時限、22時限をご覧ください。
21時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_前編
22時限：WordPressにIcoMoonで作ったアイコンフォントを入れる方法_後編
お疲れ様でした。
