このページの本文へ

使わなにゃ損!記号フォントで作るWeb素材 (2/2)

2009年03月12日 12時00分更新

文●小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

使用例1:ちょっとしたアイコンの素材に

 記号フォントに収録されているイラストは、電話やファクス、電子メールなど、普段よく目にするアイコンで使われているものが多い。どれもオーソドックスなアイテムなので、シンプルにアイコンとして使うと、デザイン上の安定感も増す。

 たとえば、電話やメールなどを表わすイラストは、そのままWebサイトの「お問い合わせページ」でアイコンとして使える。また、ウィンドウ、文字の拡大・縮小を表わすイラストなど、WebアプリケーションのUIとして使えそうなものも多くある。手軽にさくっとアイコンが作りたい時には、先ほど作っておいた一覧をざっとチェックしてみるといいだろう。

サンプル

電話やファクス、メールなど、問い合わせページのアイコンとして使える

サンプル

WebアプリのUIのイメージ。ほかにも、フォルダやプリンタ、砂時計など、使えそうなイラストは多い


使用例2:拡大してロゴやフッターのデザインに

 記号フォントのイラストを拡大して、ロゴやフッターに添えるのも1つの方法だ。アウトライン化してあるので、拡大縮小はもちろん、色を変えたり、エフェクトを加えたり、他の素材との組み合わせも自由。大きく引き伸ばして大胆に使えば、もう立派なイラストだ。OS標準のフォントには見えない。

 特にWebdingsは、乗り物や人、吹き出しなど、イラストとしても比較的使いやすい絵柄が多い。色を変えたり、他のオブジェクトと組み合わせたりと、いろいろとアレンジしてみると楽しい。

サンプル

Webdingsに収録されているイラストを使って、ごく簡単なフッターを作ってみた。色を変えたり他の素材と組み合わせるとよりおもしろい


使用例3:パターン化してWebページやキービジュアルの背景に

 最後に紹介するのは、Webサイトの背景やキービジュアルの背景の一部に使う方法だ。先ほどとは逆に、小さくした絵文字・記号を繰り返しコピーして敷き詰めれば、イラストベースの背景パターンが手軽に作れる。前のページで紹介した「シンボル」にしておけば、「シンボルスプレーツール」を使ってランダムにイラストを敷き詰めることも可能だ。

 ただ、絵柄やサイズの選択には多少、センスが要求されるし、HTML/CSS上で繰り返しを指定して背景に使うには、継ぎ目を考慮して作る必要がある。先の2つの方法に比べると、使いこなすには多少の“慣れ”が必要だが、その分、さまざまな素材や色の組み合わせを楽しみながら作業してみよう。お気に入りの背景パターンもストックしておけば、いつでも繰り返し使える。

簡単な背景パターンを3つ。今回は単純に並べただけだが、シンボルスプレーツールを使えば、ランダムに配置することもできる



 いかがだろうか。今回紹介したように、記号フォントはアイデア次第でいろいろな用途に使える。前のページで紹介した手順で、手元に一覧を用意しておけば、とっさのときにきっと役に立つはずだ。ネット上でアレコレ探し回る前に、まずはこの記号フォントをこってり使い倒してみてはどうだろうか。

前へ 1 2 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています