ITサービス系のソーシャルアイコンを作るなら「Perfect Icons」、大抵のロゴならあります※

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

ソーシャルロゴ

Perfect Iconsというサービスで、ソーシャルアイコンを自由にカスタマイズして作ることができます。

IT系のサービスなら、たいていのロゴは網羅されているのではないかと思います。こんな感じに。

いろいろなアイコンフォント

僕はこれまで、こういったソーシャルアイコンは、Font AwesomeにあるBrand Iconsのウェブアイコンフォント使用してきました。Font Awesomeのアイコンフォントも比較的手軽にHはできますが、Perfect Iconsは、アイコンの「大きさ」「角丸め」「アイコン間のスペース」「アイコン色」「ホバー時のエフェクト」などを自分好みにカスタマイズして利用することができます。

ただし残念ながら、なぜだかfeedlyのアイコンはありません。上の画像のfeedlyっぽいアイコンは、日本でのサービス利用が現在準備中の音楽ストリーミング配信サービス「Spotify」のものです。

今回はそんな「Perfect Icons」の使用方法を紹介します。

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

Perfect Icons

Perfect Iconsは、以下のように1ページ内でアイコン作成まで完結できるソーシャルアイコン作成ツールです。

インターフェースはこんな感じです。

Perfect Icons - A social icon creation tool.

作成の手順としては、こんな感じです。

  1. 利用したいアイコンを「Add Icons」から選択する
  2. アイコンの大きさや形、色を入力してカスタマイズする
  3. 個別のSNSのURLを入力する
  4. アイコンファイルをダウンロードする
  5. CSSとHTMLを編集して設置する

利用したいアイコンを「Add Icons」から選択する

画面下の「Add Icons」ボタンをクリックします。

アイコンの追加

するとこれだけの中からアイコンが選べます。

選択できるアイコン

選択していくと、こんな感じで、有名どころからマイナーなものまで、いろいろなロゴマークを選択できます。※feedlyは無い

ロゴアイコンが表示される

アイコンの大きさや形、色を入力してカスタマイズする

スライドバーなどを調節したり、色を入力したり、マウスホバー時のエフェクトを選択します。

アイコンのカスタマイズ

このようにカスタマイズすることもできます。

カスタマイズしたいコン

個別のSNSのURLを入力する

あとは、自分のSNSページのURLを入力していきます。

SNSのURLを入力

アイコンファイルをダウンロードする

「socicon.zip」をクリックしてソーシャルアイコンファイルをダウンロードします。

アイコンファイルのダウンロード

ダウンロードしたファイルは「socicon」というフォルダに解凍します。フォルダ名は好きなものにしてOKです。

「socicon」フォルダ直下に以下の4つのファイルが来るようにします。

  1. socicon.eot
  2. socicon.woff
  3. socicon.ttf
  4. socicon.svg

CSSとHTMLを編集して設置する

作業フォルダ内に「socicon」を移動させて、以下のような構成でCSSファイルとHTMLファイルを作成します。

ファイル構成

CSSの取得

もう既にCSSの設定ファイルができているのでコピーします。

CSSを取得

それを先程作成したスタイルシートに貼り付けます。

貼り付けたスタイルシート

あとはエディターの置換機能か何かで「PATH_TO」を「ソーシャルアイコンファイルがある場所(今回はsocicon)」に全て変換します。

置換後のCSS

HTMLの編集

HTMLの設置をするために、生成されたHTMLをコピーします。

HTMLの設置

それをHTMLファイルに貼り付けてやります。

HTMLファイルの編集

最後に、CSSファイルを以下のように呼び出すとソーシャルアイコンを手軽に設置できます。

ブラウザで、以下のように設定通りに表示されればOKです。

ソーシャルアイコンの完成

HTML全体だとこんな感じ。

まとめ

Perfect Iconsを使うと、これまでウェブアイコンフォント使っていても、多少手間のかかっていたソーシャルアイコンの設置が一段と簡単になります。

それにしても、これまでにいろいろなウェブアイコンフォントや、この手のサービスを見たけど、feedlyのあるところが無いのはなんでなんだろう…。

feedlyのこのようなアイコンフォントを手に入れるには、今のところ以下のように自作するしかないようです。