アイコンフォントをつくってみよう

Webアプリケーションでアイコンを表示する手段は様々ですが、 Webフォント化してCSSで管理する方法もメジャーになりつつあります。 その利点としては、ベクター素材なので拡縮が自由自在な点、 1ファイルにまとめてしまえるので回線に優しく、管理もし易い点などが挙げられます。

生成するのが多少厄介ではあるものの、 SVG素材からWebフォントを生成してくれるサービスも出ていますので心配はいりません。

• Fontello – icon fonts generator
• ❍ IcoMoon

今回は Fontello を使って、描いたアイコンをWebフォントに変換してみます。

1. Illustrator でアイコンを描く

SVG出力できるアプリケーションは他にもありますが、 やはりベクターで描くなら Illustrator が一番使いやすいように思います。

やり方は人それぞれでしょうが、私の場合は次のように制作しました。

• 単位をピクセルにする
• アートボードのサイズを128*128にする
• 8ピクセル毎にグリッドを引いて目安にする
• アートボード間の距離を8ピクセルの倍数にする
• ひたすらアイコンを描いたアートボードを量産していく

「グリッドに吸着」のON/OFFを場面で都度切り替えていくとスムーズです。

2. SVGに出力する

「ファイル」→「別名をつけて保存」を選択し、「アートボードごとに保存」にチェックを入れて保存します。 すると、「[アートボード名].svg」が保存先に量産されていきます。なんて簡単なんでしょう。

ファイル名はCSSのクラス名に反映されますので、 アートボードにはわかりやすい名前をつけておきましょう。

3. Fontello にアップロードする

出力したSVGファイル群をFontelloにアップロードします。SVGファイルをつかんで画面にドロップするだけでOKです。 プレビューが表示されますので、予想通りの見た目かどうかを確認しましょう。

思い通りのプレビューにならず、次のような警告が出ている場合があります。

If image looks not as expected please convert to compound path manualy.
（予想通りのイメージでない場合は、手動で複合パスに変換してください）

SVGでの表現がうまく再現出来ていない様なので、 Illustrator に戻って出来る限り単純化して再出力後、もう一度試してみましょう。

複合パスへの変換は「パスファインダー」を駆使して行いますが、 「オブジェクト」→「パス」→「パスのアウトライン」なども便利です。

複雑で面倒な場合は、いささか乱暴なやり方ではありますが、一度ラスタライズしてしまう方法も使えます。 「オブジェクト」→「ラスタライズ」でラスタライズ後、 「画像トレース」でトレースを行って「拡張」でパスに変換して余分なパスを削除します。 （ただし、高解像度のラスタライズでも細かい部分のパスは崩れてしまう事が多いです）

4. フォントをダウンロードする

右上の「Download webfont」をクリックするとフォントデータがダウンロードされます。 スタイルシートとプレビュー用のHTMLが同梱されているので、すぐ表示確認が出来ます。 親切設計すぎて興奮してしまいますね。

5. 使ってみる

スタイルシートはいくつかのファイルに分かれていますが、 基本的には「fontello.css」を使用すればOKです。 IE7用のフォールバックが「fontello-ie7.css」として用意されているので、 対応が必要な場合は条件分岐コメント等を利用してこちらも読み込みましょう。

<link rel="stylesheet" href="css/fontello.css">
<!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->

アイコンの表示指定は「icon-xxx」のように命名されたクラスをあてるだけです。 他で見るような “icon icon-foo” といった複数クラスの指定をせずに、 属性セレクタでclassの値から判別させています。

<i class="icon-foo"></i>

複数クラスで指定した方が都合が良いケースもありますので、 自分のやりやすい様にスタイルシートを追記するのもよいでしょう。

おわりに

メリークリスマス！

2014の一人アドベント・カレンダーも無事完了となりました。 今年も残りわずかとなりましたが、何方様も良いお年をお迎えください。

松風アイコン

今日まで様々なアイコンをご紹介して参りましたが、 ここでひとつ、私の屋号「松風」をアイコン化してみたいと思います。

まずは「松」と「風」に分離して描いてみました。 「松」は古くから、その変わらない緑から長寿のシンボルとして多くの絵画や紋などで使用され、 現在でも記号化されて用いられています。 「風」の表現には流線を使われる事が多い為それにならいました。

それではこの2つを合体させてみます。

なんだかそれっぽくなりましたね！ 何か機会があったら使ってみたいと思います。

さて、「松風」はなかなか由緒ある言葉で、古典文学においても広く使われ、 現在に至るまで非常に幅広い分野で名前として採用されています。

松風（まつかぜ）は、松林にうちつける風。日本の古典文芸において「松風」（まつかぜ）は、うら（=浦）寂しい海岸の情景を表すものとして用いられた。また和歌では「待つ」の掛詞として使われた。
― 松風 – Wikipedia

よく知られているのが、京都に代表される菓子の「味噌松風」や、前田慶次の愛馬「松風」でしょうか。 地名を数えると日本国内に「松風」を含む住所は12箇所もあるそうです。

なぜ「松風」が屋号になったかは、また別のお話。

おすすめ

保存アイコン

「保存」アイコンのモチーフには旧来より「フロッピーディスク」と呼ばれる記録媒体が用いられてきました。

フロッピーディスクは10年ぐらい前までは携帯できる記録媒体として活躍していましたが、 徐々にCD-RやDVD-R、USBメモリ等に取って代わられ、 現在ではクラウドにデータを保存するのが当たり前になっています。 これから生まれてくるユーザーは、このアイコンを見ても何なのか分からないかもしれませんね。

最も普及していたと思われる3.5インチ2HDのフロッピーディスクは1.6MBの容量を持ち、 Windows95は20枚ものフロッピーディスクを順番に入れてOSをインストールしたそうです。 （CD版のリリースもあったようですが） 類似のメディアでさらに大容量の物にZIPやMO等がありますが、こちらはもっと知られていないでしょう。

最近では時流に合わせて、クラウドのアイコンを使用される事が多く見られるようになりました。

ここで問題になるのが矢印の方向で、 「なにをどこに保存するのか」によって変わってきます。 多くのWebサービスでは画面で編集中の投稿等をインターネット上に保存するため、 実質的には「アップロード」という事になり、矢印は上向きになります。

逆に、インターネット上のデータをローカルに保存したい場合は「ダウンロード」なので矢印は下向きになりますが、 それはあくまで「ダウンロード」であって「保存」と表現する事はあまりないように思います。

また、クラウドアイコンを使用しないタイプもあります。

矩形や円形を記憶領域に見立てて、その中にデータを保存するイメージですね。 クラウドの雲のように常に上部に存在する物ではないので、場面によって上下反転しても使えそうです。

おすすめ

矢印アイコン

矢印は方向を示すための最もシンプルなアイコンの一つです。 形もいくつかの種類があり（厳密には矢印以外は矢印ではありませんが）、 単体として機能するのは勿論、アイコンの一部として組み込まれる事もあれば、 複数の矢印を組み合わせて特別な意味を持たせたりする事もできます。

上にあげたものがよく知られている基本形で、左から矢印・三角形・山型と、ここでは便宜上呼びます。 有名なWebフォントの fontawesome における命名では、 それぞれ “arrow”, “caret”, “chevron” と表現されています。 “arrow” は言わずもがな、 “caret” は “^” の文字をあらわし、 “chevron” は山型の意味です。

方向と組み合わせで意味付けをした例をいくつか挙げてみましょう。

循環を描くひとつあるいはふたつ以上の矢印は、「更新（refresh）」の意味を持つことが多いです。 特にふたつの矢印は、リモートとローカルの双方向の更新、つまり「同期（sync）」の意味を連想させます。

同じく円弧を描く矢印は、文脈によっては違う意味を持ちます。 コンピューターで作業する上での最も大きなメリットである、「もとに戻す（undo）」「やり直す（redo）」です。

中心から四隅へ向かう矢印は、「拡大」を表します。 動画コンテンツを大きくしたり、全画面表示にしたりするUIでよく見られます。

逆に、四隅から中心へ向かう矢印は「縮小」を表します。

上端をあらわす直線とそこへ向かう矢印は、「ページトップへ」などのスクロールボタンによくつかわれます。

矢印はシンプルで汎用性が高いため、様々な場面でひっぱりだこです。 あらゆる記号の中で最も多忙な存在であると言えるでしょう。

おすすめ

クリップボード

パソコンにおける「クリップボード」は、 コピー＆ペーストをする際にメモリ上に一時的にデータを保存しておく為の記憶領域を指します。 アイコンはこのような形であらわされます。

由来となるのは文房具の「クリップボード」で、 ボール紙やプラスチック製等の板に大きなクリップが付いていて、 そのクリップにメモや書類を挟んで使用します。 誰しも存在は知っている文房具ですが、 実際に使う機会は、全てパソコンの中で解決してしまう今日では少ないかもしれません。

そして、「クリップボード」に無くてはならないのが、「コピー」と「切り取り（カット）」「貼り付け（ペースト）」です。 多くの人が息を吸う様にショートカットで行ってしまうので、アイコンをクリックする行為はあまりされないかもしれません。

鋏が「切り取り」を、複数のファイルが「コピー」を、クリップボードと書類が「貼り付け」をそれぞれあらわしています。

複製元のデータを残さず削除する「切り取り」が鋏だというのは、非常に理にかなっています。 しかし、「コピー」の方は単純に「ファイル群」をあらわしているようにも取れたり、 コピーする対象が必ずしもファイルではない（文字列や画像データなど）場合もある為、いまひとつしっくりきません。

例えばGoogle Driveでは、クリップボード関連のアイコンを次のようにしています。

コピーをクリップボードのアイコンに変えただけですが、こちらの方が分かりやすいかもしれませんね。 （クリップボードそのもののアイコンというのは使う機会はほとんどありませんし）

「デスクトップ」という言葉からも伺えるように、 パソコンの機能の元となっているのはオフィスのデスク上の事物である事が非常に多いです。 デスク上での作業が全てパソコンの中に収まっている様が伺えます。

おすすめ

リンクアイコン

リンクアイコンに次のような図形を用いられているのを見たことがあると思います。

これは見ての通り、船舶の錨をモチーフにした物です。 ここでいう「リンク」はWeb上の「ハイパーリンク」、すなわち<a>タグであらわされるアンカー要素を指します。 アンカー（anchor）は英語で錨を指すので、そこがアイコンの由来となっているわけです。

ではなぜ、”anchor” がリンクを表すのでしょうか。 “anchor” は動詞として用いられる場合に「つなぎとめる、固定する」といった意味を持ちます。 （それも錨の役割が由来だと思われますが） ハイパーリンクは、ジャンプ先として参照するURLにつなぎ止める役割を持ちますので、 “anchor” と表現するのに適切だったのでしょう。

An anchor element is called an anchor because web designers can use it to anchor a URL to some text on a web page.
（拙訳: アンカー要素が「アンカー」と呼ばれるのは、WebデザイナーがWebページ上のテキストにURLを結びつける為に使われるためです）
― #Anchor – HTML element – Wikipedia, the free encyclopedia

とはいえ、海洋を自由に進む船をある場所に停泊する為の錨のアイコンは、 ハイパーリンクの挙動と照らすと少し乖離してしまう気がします。 そこで、次の形をよく目にするようになりました。

鎖をあらわす図形です。 ある場所とつなぐためのハイパーリンクの役割がよくあらわされている様に思います。

こちらはリンクを解除する為のアイコンです。 鎖を断ち切るイメージですね。

おすすめ

ソート・フィルタアイコン

「ソート（sort）」というのは「分類する・並べ替えをする」という意味を持つ言葉で、 ITの文脈では、一連のデータをある要素に基いて昇順あるいは降順に並べ替える処理を指します。

上下に向いた矢印が昇順・降順をあらわしています。 表組みのフィールドの見出しなどに付けて、そのフィールドの値でソートする機能を提供したりします。

また、似た場面でよく使用される「抽出・絞り込み」、つまり「フィルタ（filter）」のアイコンはこのような形で描かれます。

モチーフはご存知の「漏斗（ろうと）」で、料理や実験などで使用される道具です。 漏斗で濾過された結果を見る、つまり、属性でフィルタリングされたデータを表示する「フィルタ」の挙動をあらわしています。 実際に濾過に使用する場合はろ紙を中にセットしますが、ろ紙ではアイコン化は難しいですね。

話は一気に脱線しますが、「漏斗」は英語で “funnel” （ファンネル）と呼びます。 男性の方には耳に覚えのある言葉でしょう。 機動戦士Zガンダムに登場するモビルスーツ「キュベレイ」の武装で、 搭乗するニュータイプの感応波で無線式の砲身を自在にあやつり、オールレンジ攻撃を行う事が出来ます。 名前の由来は、砲身が形が漏斗の様だった為とされています。

その後、同種の兵器を概して「ファンネル」と呼ぶ様になり、 漏斗の形をしていなくてもその名を冠する事になったのです。（例： νガンダムのフィン・ファンネル等）

おすすめ

画像アイコン

画像アイコンは、JPG/GIF/PNG等の画像ファイルをあらわす時に使われます。

これは壁からチラ見しているダンボーではありません。 私は数年前まで単純に三角形と円を描いた幾何学模様なのだと思っていたのですが、 アイコンのデザインが洗練されていくにつれ、 ようやくこれが山と太陽が描かれた風景画をあらわしているのだと気付きました。

このようにするとよくわかりますね。 そうなると他の被写体でも良いように思えてきます。例えば花。

この形は見たことがある気がします。 それでは人物を写したポートレイトならどうでしょうか。

これもまた、アカウントのプロフィール写真をアップロードする画面などで使えそうですね。

おすすめ

受信トレイアイコン

メーラー等でよく見る受信トレイのアイコンですが、 オフィスでよく使用されるステーショナリーがモチーフとなっています。

実際に書類を描くと、受信トレイに何か入っている事をあらわすことができます。

矢印を添えてやることで、メッセージの受信を表現する事ができますね。

モチーフとなる「書類受け・受信箱」は英語で “in-box” 等と呼ばれます。 国・地域によっては、未処理の書類受けを “in-tray”、処理済みの書類受けを “out-tray” と区別したりします。 IT界隈では “Inbox” でそのまま電子メール用の受信トレイをあらわし、 Googleからも同名のサービスがつい先日リリースされています。

cf) GoogleがGmailとInboxを分けた理由 – TechCrunch

ちなみに、Amazonから書籍などが送られてくる際の梱包の段ボールは、 A4サイズの紙がきれいに収まり、書類受けやヤレ入れとして使うのに非常に便利です。 我が家でもシュレッダー待ちの書類受けとして大活躍しています。

おすすめ

ボリュームアイコン

「ボリューム」のアイコンは、音楽や効果音等が出るアプリケーションで音量を調節したり、 出力のオン・オフを切り替えたりする際に使われます。

この形は、スピーカーの内部構造を単純化した物です。 見た目ではなく内部構造をアイコンにするケースというのは珍しいですね。 古くからこの形が使用されている為一般的になっていますが、 普通の人がスピーカーの中を覗く機会というのはほとんどありません。

一般的なスピーカーはこのような構造になっていて、 コイルに音声信号としての電流を流すと、フレミングの法則とやらで震えるコイルの振動が振動板に伝わって音が鳴る仕組みです。 素晴らしい発明です。

音量の大きさをあらわしたい場合は、音波を弧を線で描きます。弧の数が多ければ多いほど、音量は大きくなります。 Wi-Fiのアイコン等にも見られるように、弧を重ねた記号は波の強さをあらわします。

また、ペケマークを添えたり、スピーカーのアイコンを直線で取り消したりすることで、「消音」を表現する事ができます。

おすすめ