続・アイコンフォント

すっかり梅雨入りしましたね。
昼休みにグァバジュースを買って、トロピカル気分で働いております、國宗です。

さて、以前岩井さんがアイコンフォントについて記事を書いていましたが、 今回はわかりやすく、もう少し深く掘り下げたアイコンフォントのお話をしたいと思います。

そもそもアイコンフォントって何なの?

アイコンフォントを分かりやすく説明しますと、 「機能のいっぱいある、アイコン集のフォントをブラウザ上で動かす」という事です。 これだけだと、まだ分かりにくいので、 まずはOpentypeというフォントの形式を説明します。

Opentypeとは……

Opentypeには、リガチャー(合字)、スウォッシュ(単語の頭や末にアクセントをつける)、分数など様々な機能があり、 これを使うと、ただキーボードで入力した文字がプロフェッショナルの組版に変わるのです。 リガチャーを例に上げますと、
例えば「Office」という文字を入力します。(illustrator CC、Adobe Garamond Premium proを使用)
欧文合字機能をONにすると……

Officeの「ffi」の部分が、1文字になりました。 これは、フォントの作り手側が意図的に「f」と「f」と「i」が入力された場合に1文字の「ffi」に変換しているのです。 fiやflの黒く中途半端な部分をなくし、本文を読みやすくさせるためです。

さて、これからアイコンフォントの話に移ります。今までの「ffi」を応用したのがアイコンフォントです。僕のよく使っている「Symbolset」のサイトです。

アニメーションの文字の部分をクリックするとテキスト入力に切り替わります。 この状態で「love」とキーボードで入力して下さい。

すると、「l」、「o」、「v」とここまでは、普通のテキストなのですが、
最後の「e」を入力すると「♥」になりました。

https://symbolset.com

これがアイコンフォントの使い方です。

まとめ

【メリット】

  • 画像の代わりにテキストを入力しているので、SEO的に良い。
  • ビットマップの画像データではないので、拡大縮小しても汚くならない。Retinaもバッチリ。
  • CSSでの色の変更や装飾も自由自在。

【デメリット】

  • IEでもWebフォントを読み込めますが、クロスブラウザでつかうには、
    様々な種類のアイコンフォント形式を読み込まないといけない。

また、僕は正しい使い方ではないのですが、アイコンフォントを通常のフォントとしてインストールし、 カンプデザインにも使ったりしています。
こうする事で、いちいちアイコン集を探す手間が省けるので、 重宝しています。 ただし、この場合は画像ファイルになってしまうので注意が必要ですね。

機会があれば是非お試しください。

【無料!】ファイル圧縮オンラインサービスのまとめ

こんにちは。デザインおよびコーディング担当の黒木です。

弊社では様々なウェブサイトの運営管理を行っており、「このファイルをホームページにアップしてください」と、お客様から日々、様々なファイルをお送り頂いております。

jpgファイルであったり、Wordファイルであったり、PDFファイルであったり形式は様々ですが、中にはファイルサイズが数十メガバイトにも達するものもあります(PDFファイルの場合がほとんどですが)。

そんな時、如何にファイルサイズを縮小・圧縮などの軽量化を図って、サイトにアップロードするかが、大変悩ましいところです。

今は、スマホなどのモバイルデバイスでサイトを閲覧する方も多いので、やはり重いファイルはサイズを削った上でアップロードし、ウェブサイト全体をできるだけ軽量化したいものですね。

そこで今回は、ファイルサイズを軽量化してくれる便利なオンラインサービスを、ファイルの形式ごとにご紹介したいと思います。

jpgファイルを軽量化!

JPEGmini - Your photos on a diet!

インターフェイスのわかりやすさもさることながら、トップページのデモンストレーションも非常にわかりやすく、面白い仕掛けが施されています。

JPEG Optimizer - Compress and Resize Your Digital Photos

こちらは、どのくらい画質を落とすか、どのくらいリサイズするかを入力する事ができます。

pngファイルを軽量化!!

TinyPNG – Compress PNG images while preserving transparency

ややリアルなパンダのキャラがユニーク。軽量化が完了すると…?

Compress PNG Images Online

こちらも画質の圧縮度合を選択する事ができます。画像に含まれる色数の増減も選択できるのが特徴。使い方がややわかりづらいかもしれません(画像をドラッグ&ドロップしたら、「UPLOAD QUEUE」をクリック→アップした画像のサムネイルをクリック!)。

PDFファイルを軽量化!!!

Compress PDF – Reduce your PDF Online for Free

デザインや軽量化する際のアニメーションが素敵です。使い方もシンプル。

Compress PDF Files Online!

非常に細かく設定を変更できる点がポイント。しかし5MBまでしかアップロードできないようです。

どれも無料かつ簡単に使用できるサービスですので、試してみてはいかがでしょうか。

webフォントとアイコンフォントを使ってみました。

更新などを担当しています、岩井です。

 話題(ちょっとおそい?webフォント・アイコンフォントを使ってみました!

検索してみるとwebフォントもアイコンフォントも無料で提供されているサイトがいくつかありました。 今回はこちらを使ってみようと思います。

 

webフォント http://mplus.font-face.jp/

アイコンフォント http://fontello.com/

 

Continue reading

アイコンのラフスケッチ集

こんにちは。デザインおよびコーディングなどを担当しております、黒木です。

ウェブサイトに使用するアイコンをデザインする際、どんなデザインにするべきか、いつも悩みます。フリーで使用する事のできるアイコンセットなども、ネットではよく転がっているようですが、やはり新規でデザインするサイトのテイストにあったアイコンというのは、なかなか見つからないものです。

今回は、アイコンのデザインに参考になりそうな、アイコンの「ラフスケッチ」を、さまざまなSNSからまとめてみました。フリーアイコンのまとめではなく、ラフスケッチです。

まずは’Designspiration’から、いくつかピックアップしました。

Vizzywig iOS Icon Design Process

http://designspiration.net/image/4762182974613/

映像を編集するアプリのアイコンでしょうか。

iPhone App Icon Sketches — Stage 2

http://designspiration.net/image/4762181802975/

カメラアプリのアイコンのようです。描きこみが凄い…。

Jillian Fisher // Illustrations & Things

http://designspiration.net/image/156251236221/

こちらはうってかわってシンプルなアイコン集。

Making_of

http://designspiration.net/image/1056560173031/

Safariっぽいアイコンと碇、浮き輪などの海をイメージしたアイコン。ちなみに救命浮輪のアイコンは、海外では”よくある質問”などのページに使用される事が多いようです。

 

次は’dribbble’。こちらは有名ですね。

Talents

http://dribbble.com/shots/901178-Talents?list=show&tag=icon_sketch

色つき。中世ファンタジーをテーマにしたゲームアプリのアイコンでしょうか。

Sketch

http://dribbble.com/shots/657818-Sketch?list=show&tag=icon_sketch

汎用的に使えそうなアイコン集。

Hamburger

http://dribbble.com/shots/1105025-Hamburger?list=show&tag=icon_sketch

これはもうアイコンというか…。何時間かけたんでしょうか。

Video editor icon

http://dribbble.com/shots/970335-Video-editor-icon?list=show&tag=icon_sketch

こちらも映像アプリっぽいアイコン。緻密に設計しているのが伝わります。

Icons

http://dribbble.com/shots/1016618-Icons?list=show&tag=icon_sketch

カフェやレストランなどで使用できそうな、ポップで明るいアイコン。完成図と合わせると非常に参考になりますね。

 

他にも’behance’など、デザインインスピレーションを与えてくれるSNSがたくさんあります。”icon”や”sketch”などのキーワードで検索してみると、色々面白いものが見つかりますよ。
皆さんもぜひ探してみてください。