このページの本文へ

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

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

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

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

OS標準の記号フォント。こんなにいろんな絵文字(イラスト)のフォントが揃っているのだから有効活用しないと損!

 アイコンやバナーなど、Webサイトのデザインにちょっとしたイラストを使いたいけれど、絵はまったく描けない。かといって、他人に頼んで描いてもらうほどでもないし……。そんな困ったときには、記号フォントを試してみてはどうだろうか?

 記号フォントとは、通常アルファベットなどの文字が割り当てられている文字コードに、記号や絵文字を割り当ててある特殊なフォントで、Windowsの場合は「Wingdings 1」「Wingdings 2」「Wingdings 3」「Webdings」が標準で付属している。いずれも身の回りのものをモチーフにしたイラストが収録されているので、うまく使えればネット上でフリーアイコンやイラストを探すよりも手っとり早い。今回は、Illustratorでの使い方と簡単なTipsを紹介しよう(以降の操作説明は、Illustrator CS4を前提としています)。


必要なときにすぐ使うための事前準備

 初めて記号フォントをデザインに使うのなら、今後も使い回しが利くように、コピー&ペーストできる一覧を作っておくといい。ちょっとした事前準備をしておくだけで、いつでも必要な記号を簡単に探せて便利だ。まずはIllustratorを起動し、新規アートボードを開こう。

 次に、ツールパレットから「文字ツール」を選び、アートボード上にキーボードから入力可能な文字を一通り入力する。入力が済んだらテキストボックスを選択し、フォントを「Webdings」に変更しよう。これでまず、一覧が1つできた。

サンプル

キーボードから文字を入力し、次にフォントを「Webdings」に変更する

サンプル

「Webdings」の記号一覧ができた

 続いて、ほかの記号フォントの一覧も作るため、先ほどのWebdingsのテキストボックスを3つ、コピーしよう。コピーしたテキストボックスのフォントを、それぞれ「Wingdings 1」「Wingdings 2」「Wingdings 3」に変更したら、とりあえず見た目上は一覧ができた状態になる。

サンプル

「Webdings」「Wingdings 1」「Wingdings 2」「Wingdings 3」に収録されている記号・絵文字の一覧ができた

 とはいえ、このままだと単なる“文字”なので、イラストには使いにくい。そこで、これら4つのテキストボックスをすべて選択した状態で、アウトライン化(Shift+Ctrl+O、アルファベットのオー)し、文字からベクター画像(パス)に変換する。最後に、グループ化を解除(Shift+Ctrl+G)したら、事前準備は完了だ。これで、使いたい絵文字・記号だけをコピー&ペーストで使える一覧が完成した。

サンプル

文字をアウトライン化してパスに変換。グループ化を解除したら準備は完了だ

 作成した一覧は、いつでも使えるようにAI形式で保存しておこう。また、よく使いそうなイラストは、「シンボル」として登録しておくとより便利だ。シンボル化しておくと、パレットから一発で呼び出したり、「シンボルスプレーツール」を使ってパターンとして敷き詰めたりできる。シンボルの登録は、登録したいオブジェクトを選んで「シンボル」パネルにドラッグ&ドロップすればOKだ。

 次ページでは、記号フォントを元にしたイラストの使いどころをいくつか簡単に紹介しよう。

前へ 1 2 次へ

Web Professionalトップへ

Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

すぐに役立つ!プロの解説記事
一覧へ