19) アイコンの話　その２「文字を描こう」
以前に登場した「第13回 アイコンにこだわろう」は、NS Basic Ver.1.x向けのお話でした。
当時のNS Basicが扱える画像ファイルは特別なフォーマットでしたから、専用ツールとあわせて紹介しましたが、現バージョンでは、Ｂｍｐ、ＧＩＦ、ＪＰＥＧなどの汎用的なフォーマットの画像が利用できるようになりましたので、ここで改めて紹介したいと思います。
アイコンと言えば、NS BasicやCodeWarriorなど、プログラムを組んで、自作アプリを作るときはもちろんですが、プログラムを組まなくてもアイコンだけは必要、というケースが出てきました。
例えば、CLIE USer Club!、いわゆるクリクラ!さんで公開中の「ｃｃｃ」というアプリケーションでは、サイトの巡回情報をファイル化する際に、アイコンファイルを組み込みます。そのため、サイト管理者の方は、切り出し情報とアイコンファイルなどを用意しなければなりません。
このように、プログラムを組まなくてもアイコンが必要な状況もありますので、本稿がご参考になれば幸いです。

さて、アイコン作成に問題なのは、作成用のツールではなく、デザインです。
例えば、私のサイトでは、こんなアイコンを使っています。

　　　　

また、厳達さんのCliCliClieでは、次のアイコンが使われています。

　　　　

このように、小さなアイコンの中に、小さな文字列をキレイに埋め込むには、それなりのテクニックが必要です。
大抵のペイントやドローツールには、パソコンのフォントを使って文字列を書き込む機能がありますが、大きく表現される場合は、そのフォントの持ち味が活かされますので、見た目もキレイです。

　　　　

しかし、小さなサイズになると、フォントの種類はもちろん、バランスが大きく崩れる場合もあります。
上は、ＭＳゴシックの28ポイントですが、同じＭＳゴシックで10ポイントにすると、このような状態になります。

　　　　

ちょっと、大きくして比べてみましょう。

　　　　　　　

両者を比べてみると、右の方のＭＳゴシックを使った方がキレイに見えますが、ちょっと文字が大きいようです。
ここに、もう１つ小さいＭＳゴシックの９ポイントの文字を使ったものを並べてみましょう。

　　　　　　　　　　

１ポイント小さくするだけで、「ｍ」の文字が潰れていますし、良く見れば「Ｐａ」と「ｌｍ」の間のスペースも気になるところですね。

さて、文字を見えやすくするテクニックとしては「アンチエイリアス」などの輪郭をぼかす方法が有効です。
同じ100ポイントのＭＳゴシックですが、右側の方がきれいに見えますね。

　　　　　　　　

しかし、小さなフォントにとっては、この数ピクセルのぼかしは致命傷になってしまうようです。

　　　　　　　　

つまり、ペイントやドローツールに用意されている文字ツールと、用意されているフォントは、小さなアイコンに対しては、あまり効果的ではないと言えるわけです。

では、どうしたら効果的な文字が作成できるでしょうか？
これは、原始的ですが、自分でフォントを作るのが効果的です。
フォント、と言っても大袈裟なことではなく、必要な文字だけをデザインすればＯＫなのです。
すべてのアルファベットは、５×７ピクセルの大きさがあれば、十分にキレイな文字が作成できますので、Windows標準添付のペイントでも十分に作成できます。
例えば、次のそれぞれの文字は、最大で５ｘ７ピクセル以内に納めて作ってみましたが、十分に鑑賞に耐えますね？

　　　　

わかりにくいので、大きくしてみましょう。あ、大きくすると、ちょっとボロが出ますね(笑)

　　　　

でも、この60x60ピクセルの四角の中に大文字・小文字合わせて52文字がキレイに収められていると思うと、ちょっと驚きますね。
これらの文字を見てみると、文字によってはそれほど大きくなくても良さそうな字種もあります。
そういう字種は適当に縮めてデザインすることで、限られたスペース内に、更に多くの文字を並べる事が出来ます。
例えば、下のデザイン、パソコンでは小さくて見えないかもしれませんが、縦横40x40ピクセル内に納められています。

　　　　　　

ちょっと大きくしてみましょう。

　　　　　　

ははは、やっぱり大きくするとボロが見えますね(笑)
しかし、実際にはアルファベット26文字全部を使うわけではありませんので、必要な文字内でバランスを考えて作り上げればよいことになります。
最初に登場したCliCliClieアイコンの場合を見てみましょう。

　　　　

このデザインでは、明らかに「Ｍ」や「Ｗ」といった幅の広い文字は使えませんが、CliCliClieにはそのような文字が不要なので思いきって細長いデザインが出来るわけです。
ツールとデザインが揃えば、あとは「センス」でしょう。


さて、ここは一応『NS Basicについて』というコーナーなので、NS Basicの話も少ししておきましょう。
ご存知の通り、NS Basicでは、アイコンファイルも通常のフォーマットの画像ファイルを使えるようになりました。
ところで、画像のサイズは、どれくらいまで大丈夫だと思いますか？
それを調べるために、ちょっとイジワルな実験をしてみました。
下の画像は、縦横が70x40の画像です。わかりやすいように５ピクセル毎のグリッドで仕切られています。

　　　　

これをアイコンに使ってコンパイルすると、標準のランチャー上では、次のようになりました。

　　　　

大きくしてみると、

　　　　

おおよそ、60x24ピクセルの範囲で描画されているようですが、縦方向は文字がありますので、60x22が精一杯でしょうか。
とにかく、横60ピクセルまでＯＫでしたので、ちょっと驚きです。
これは、PalmOS 4.0ベースの日本語版エミュレータのスクリーンショットですが、CLIE N600Cの実機でも同様でした。
まぁ、実用的には40ピクセル以内に納めるのが良さそうですが、意表をつく効果として、60ピクセルまで使えることを覚えていてもよいかもしれません。
ただ、高橋さんのCrs-Launcherハイレゾ版では、驚く事に、全部の画像が表示されました。
更に意表をついたモノを作りたい方は、お試しください(笑)

　　　　


今回は、アイコンに関する話として、思いきって文字を描いてしまう話と、アイコンのサイズについてお送りしました。
あまり役に立たない話かもしれませんが、何かのネタになれば幸いです。
尚、本稿に登場したアルファベットの画像はご自由にお使い頂いて結構です。