ソフトウェアのためのアイコン作り (1)アイコン作成の基礎

対象	Windows用ソフトのためのアイコンを作りたい人
公開／改記日	2001/03/11 2004/11/07（リンク先修正）

みにこんてんつ一覧 | 次のページへ→

はじめに

アイコンというのはソフトの第一印象にも影響を与えるほどの重要なものでありながら、「ソフトウェアのための」アイコン作りに関しての情報はなぜかほとんどありません。そこで、（一応）過去にいくつかアイコンを作ってみた経験から有益であろう情報をまとめてみます。

記事を読むにあたっての注意

この記事では透過PNG形式の画像が多用されています。IE4以降かNN6以降などのブラウザでないと正しく表示されませんのでご了承ください。
記事中の画像ファイルは一部引用させていただいたものがあります（その場合は出所を明記しています）。また、リンクも無断で張らせていただいたので、問題がある場合はご連絡ください。

準備

アイコン作成のために必要なものをそろえます。この記事はプログラマ向けにかかれていますので、既に開発環境は整っているという前提で進みます。（とは言ってもあまり記事中では開発環境に関連したことは書いていませんが..）

必要なソフトは次のものがあります。なお、本記事中のソフトウェアはページの最下部の関連リンクのところから参照できるようになっています。

アイコンエディタ（必須）
ドロー系ソフト（推奨）

アイコンエディタは当然必要になってきますが、できれば画像編集のできるソフトもあったほうがいいでしょう。理由は後で（次回以降）わかります。まず、アイコンエディタですが、C++Builder, Delphi, VC++などの場合はそれらの機能としてアイコンエディタの機能を持っています。ですので、これを使うのもいいでしょう。これ以外の開発ツールは使ったことが無いので分かりませんが、同じような機能があるはずです。また、KH IconStudio98などのアイコン作成専用ツールを使うのも便利です。ドローツールは大抵のものなら何でもいいのですが、この記事ではPowerPoint2000(Microsoft)を使います。（ドローソフトではないような気もしますが、単に私のうちにあったものの中でドロー系のソフトがそれぐらいしかなかったというだけです。）ただし、PowerPointだと指定サイズへのリサイズができないので、リサイズのためにJTrim（スタジオマップ）などのツールを用意してください。

アイコンの作成

とりあえず、実行ファイルに組み込むまでの流れを見てみましょう。まずはアイコンの作成方法から。ここでは、橋本孔明さん[home]のKH IconStudio98を例にとって説明します。
画像部分自体の作り方（描き方）は後に回して、ここではデバイス形式に関して解説します。アイコンファイルはサイズや色数の違う複数の画像を持つことができます。エクスプローラでも大きいアイコン表示のときと小さいアイコン表示で見た目が違ってきますが、このようにするためにはアイコンファイルの段階で複数のデバイス形式をもたせる必要があります。KH IconStudioの場合は新規アイコンを作成した段階で32x32,256色の形式が作成されますが、Windowsにおけるプログラムファイルとしては、(1)32x32,256Color, (2)32x32,16Color, (3)16x16,256Color, (4)16x16,16Color の4つの形式を作成するのがいいでしょう。256色のアイコンを表示できない環境で表示する人のために16色を用意します。見た目にこだわらなければ256色を使う必要はありませんが、ここを読んでいるあなたは満足行かないでしょうから256色も用意してください。大きさも2種類ありますが、32x32はエクスプローラの「大きいアイコン」で、16x16はエクスプローラのそれ以外の表示や、ソフトのウィンドウの左上に使われたりします。形式を追加するには右図の「新規デバイス作成ボタン」を押します。
このアイコンの場合、次の4つの画像を持っています。 (1)32x32,256Color (2)32x32,16Color (3)16x16,256Color (4)16x16,16Color 今の段階では意識する必要はありませんが、頭の片隅にでも置いておいてください。

デバイス形式が4つあれば、右図のようになっているはずです。確認してください。ちなみに、主な開発環境で作る場合、Borland系のイメージエディタだと256色の形式が作れません(^^;;。また、VCのリソースエディタ(?)では256色も作れるもののパレットがなぜか16色のままだったりしてうまくいきません。（うまくいく方法がわかる方は教えてください。）
この状態で各デバイスの内容を編集し、完成したところでアイコンファイル(*.ico)として保存します。あとは開発環境のほうでアイコンを呼び出してやれば実行ファイルのアイコンとして使われるようになります。Borland系の場合は「プロジェクト」→「オプション」の「アプリケーション」タブにある「アイコンの読み込み」ボタンで読み込めばいいです。VCでの設定方法はわからないので自分で調べてください。m(_ _)m
今回はここでいったんお休みして、アイコンのデザイン例を見てましょう。

理想的なアイコンの例

理想的なアイコンのデザインはほぼ次のように分類されます。（分類のネーミングは今思いついたものを書いているので、他の人には通じないかもしれません(^^;）

シンプル物体系
- ICQ (ICQ Inc.)
- DDWIN（草本和馬さん：アイコン作成はthakataさん）
- 解凍レンジ（白川泰洋さん）
  ひとつ（1種類）の物体をアイコンにしたものです。
シンプル機能表示系
- TeraPad（寺尾進さん）
  ひとつではないものの少数の物体で構成されるアイコンです。物体が多くなりすぎるとごちゃごちゃになってしまうので、物体数は多くても3種類ぐらいが限度でしょう。
シンプル一文字系
- Word2000 (Microsoft)
- WWWC（nakkaさん）
  ソフトの名前のうち1文字を使う方法です。1文字目を使うことが多いです。漢字を使うときは16x16でもつぶれない文字か考えて使いましょう。
シンプルフルネーム系
- FFFTP（曽田さん）
  ソフトの名前が短いときに使える方法です。
キャラクタ系
その他

nakkaさん[home]によるプログラミングのオマケ：アイコンのページも参考にしてください。

悪いアイコン

悪い例としては、次のようなものがあります。これに当たっているから悪いかというと一概にそうとも言えないのですが、できるだけ避けるようにしてください。もちろんソフトの例は挙げません。

背景色が多すぎ
16Colorしかない
線が細すぎ
中途半端な文字

これらのように作ってしまうと、例えば"T-MZ FTP"というソフトのアイコンでなんて物ができてしまいます。（このアイコンはこの記事のために1分で作った手抜きアイコンです。）例えばnakkaさんのページを参考に線の太さを2倍にしただけでこうなります。これだけでもちょっとは見栄えがよくなったことが分かります。ただし、文字が7文字も入っているのでその点は改善の余地ありです。
アイコンとソフトの名前というのは密接な関係にあることが多いので、どんな感じのアイコンが作れるか考えながらソフトの名前を考えるほうがきれいなアイコンが作りやすいのではないでしょうか。

使用するソフトへのリンク

KH Softoware Factory（KH IconStudio98） by 橋本孔明さん
フォトレタッチソフト「JTrim」 by WoodyBells.
Officeホームページ（PowerPoint2000） by Microsoft

今回の関連リンク（再掲）

プログラミングのオマケ：アイコン by nakkaさん

みにこんてんつ一覧 | 次のページへ→