あちこちの Web を見ていると、「なんだこのすげーかっこいいサイトは」と思うこともあれば、「なんだこのアンバランスで悪目立ちした画像は」と思うサイトもあります。この違いはなんでしょう？ もちろんセンスの問題もありますが、何が適切かを知っているかどうかという違いも、かなり大きな要素です。
人間だって TPO にふさわしい格好があるように、グラフィックにも TPO があります。ここでは、WWW で発信する画像について整理し、適切な画像の一端を見てみましょう。
まず、コンピュータで扱う画像には覚えきれないくらいに数多くの形式が存在します。本当に信じられないくらいにたくさん形式があるんです。まずそれを知ってください。（ときどき BMP 以外知らない人がいて、死ぬほどでかい画像を送りつけてきたりするから。）
その中で、原則的に WWW に使える形式は3つしかありません。
の３つです。それぞれ特徴があるんですが、その詳しいことは「画像形式について」の「Webに使える形式」を参照してください。すいません、以前はここにそのまま書いていたんですが、画像形式の話をひとまとめにしてしまったもんで。
基本的には写真は JPEG、シンプルなイラストは GIF か PNG、フルカラーのイラストは PNG、ですかね。フルカラーのイラストを、多少クオリティを犠牲にしても JPEG にするというのも、かなり現実的な選択ですが。何しろファイルサイズがかなり変わりますので、ね。
WWW というのはみんなが特定のサーバにアクセスし、そこからファイルをアレコレ取得し、様々な端末、ブラウザでそのデータを表示するものです。ということは Web ページを作成するときにはファイルの転送時間とページの見え方に様々な工夫を凝らす必要があります。
適切なサイズには二つの意味があります。一つはそのグラフィックスの見た目の大きさ、もう一つはファイルの大きさです。
見た目の大きさにはいろんな考え方があると思いますが、見にくくならない程度に小さい方がいいと思います。最近では高性能なデスクトップマシンが非常に安く出まわっており、17インチディスプレイもかなり当たり前になっているので、初めてのパソコンで XGA(1024*768) 以上の解像度でネットサーフィンしてるって人もずいぶん多くなっていると思います。しかし、それでもあまり大きな画面を前提にレイアウトするのは考えものです。例え 1600*1200 の高解像度が表示できる環境であっても、それをフルに使って全画面表示で Web ブラウズしてる人なんてほとんどいません。
ポータルサイトと呼ばれる、多くの人が訪れるサイトも未だに横幅 600 くらいでレイアウトしているところが多いのです。(新聞社のサイトや Yahoo!、goo などを見てもらえば分かります。)これなら 640*480 の画面でも見るのに困りませんし、XGA 以上の画面であれば、横に二つ並べて表示することもできます。つまり不必要に大きなサイズでレイアウトしない方が、様々な環境の人に、より多くの人に問題なく見てもらうことができる、ということです。
もちろん見やすさよりもインパクトと遊び心を重視するデザインもあり得ますから、そういう方向を目指す人にまでこの指針を強制するつもりはありません。確かに小さく小さくとだけ考えてたら発想の自由度はかなり落ちますから、やはり今ひとつ面白みに欠けるサイトになってしまう危険性もあります。自分のWeb サイトをアプリケーションと捉えるのであれば、あえて常識的なサイズやレイアウトをしない方がよりこちらの言いたいことを伝えやすいですし、将来の大画面化を見越して大画面用のデザインを考える、なんてことも必要なことでしょう。（X2Web という技術を使えばブラウザの形すら変更できますし。）
それを承知のうえで、あえてここでは横幅 600ピクセルぐらいを基本としてみます。そうした場合、横 600 ピクセル以上に大きい画像は表示できませんし、それ以下であっても、文字とのバランスを考えると、ときには半分の 300 ピクセル以下で言いたいことを伝えられる画像を作る必要もあります。この辺は DTP やデザインに関するレイアウトの教科書を見てもらった方が分かりやすいと思いますが、一つ言えることは、画像のサイズによって相手に与える印象は大きく変わってしまう、ということです。例えば画像のサイズを大きくした場合、単純に「目立つ」ということではなく、「かっこいい」と思わせることもできるし、「センスがない」と感じさせることもできてしまう、ということです。これは画像以外の要素とのバランスに関わってきます。
小さな画像を作るためには、やはりある程度練習が必要です。例えばボタンやアイコンも、最初はずいぶん大きくなってしまうものです。作り慣れるにしたがって小さいものが作れるようになってきます。ま、一つだけコツと呼べるものがあるとしたら、はじめからちょっと拡大した画面で画像を作る、ということでしょうか。
最近ではワープロをはじめほとんどのソフトで表示倍率を変更する機能がついています。ソフトによって拡大率、ズームなど呼び名は変わりますが、要するに実際の大きさに対してどれくらいの比率で表示するかを設定する機能です。この倍率をあらかじめ 133% や 1.5倍などの数字にしておいて画像を製作すると、できあがった画像は思いのほか繊細にできあがります。WWW ブラウザではほとんどの場合、画像は 100% の倍率で表示されますから、それより大きな倍率で作業すれば細かい作業が苦手な人でもそこそこきれいな画像を作ることができるというわけです。
できあがっている画像に対して、見た目を小さくしようと思って縮小すると、逆にファイルサイズが大きくなることがあります。これはできた画像をあとから縮小することによってそれまでより画像のパターンが複雑になるためです。写真の縮小の場合は最初から複雑なものの大きさが小さくなるので、ファイルサイズも小さくなるのですが。
本当は先に書いたように倍率を上げて最初から小さなサイズ（見た目）で作るのがいいのですが、そうもいかない場合はなんとか工夫します。
まずは圧縮レベル。JPEG や PNG は圧縮レベルの調整ができます。圧縮レベルを高くすればそれだけできあがるファイルは小さくなります。
JPEG の場合は圧縮率を高くすればするほど、できあがる画像は汚くなります。ぱっと見、意外に圧縮しても汚くならないように見えますが、それはモノによります。必ず原版を保存しておいて、それと比較して最終的な圧縮率を決めるようにしてください。JPEG は不可逆圧縮と言って、一度圧縮すると決して元には戻らないので、この辺は慎重に判断する必要があります。よく見ると意外に汚くなってるもんです。特に細い線の辺りはかなりにじみます。具体的には「JPEG画像の品質」の方で確認してください。
私は最近では高画質の設定にしておかないと安心できなくなってしまいました。モノにもよりますが、画質 70-80% くらいを目安にしています。
PNG の場合は圧縮レベルを上げると処理速度が遅くなります。つまりそれだけ複雑な計算を必要とするのです。これは、WWW の場合、その画像を見る人がどれくらいの性能のマシンを使っているか分からないので、JPEG のように自分のマシンのプレビューでは判断できません。まぁ、よほど大きな画像でない限りは最近のマシンパワーならあまり苦労なく表示できると思うので、最大限に圧縮率を上げておいてよいと思います。ただ、PNG の場合は JPEG と違って圧縮率を変更できないソフトが多いので（圧縮率が変更できることを知らないのか、わざとその機能をつけないのか？）、そういうソフトを使っている場合は PNG の圧縮率については気にする必要はありません。それにしても、圧縮率を変えられてもインターレースにできないとか、インターレースにできても圧縮率を変えられないとか、なんかそういうのばっかなんですよねぇ。
場合によっては圧縮レベルを調整するよりもてきめんに効果が現れるのは減色です。色数を減らすこと。
最近のパソコンは 1667万色なんつー、人間の目の限界を超えた表現力を持っています。いわゆる24ビットフルカラーです。しかしこれだけの色数を必要とする画像なんてそうそうありません。なのにたいていはフルカラーモードでファイルを作成してしまいます。これではかなり無駄な情報量を抱えていることになります。
減色は、この無駄な情報量を削り取ることです。
一般的には色数は 1, 4, 8, 16ビット、24ビットです。モノクロ、16色、256色、いっぱい。もう少し間がほしいなぁとは思うんですが、意外にこれでなんとかなります。特に16ビットに減色できるソフトは少なく、私は ViX 以外には知りません。で、その他のソフトでは8ビット＝256色にまで色を減らしてしまうのですが、写真でない限りはこれで十分「見られる」画像が作れます。
ただ、減色の方法がいくつかあって、上手なソフトはきれいに減色してくれますが、下手くそなソフトはあまりきれいになりません。Photoshop はあんまり上手に減色してくれないのですが、たぶんこれは使いこなせていないからなんでしょうね。
写真の場合は256色以下の画像の得意な GIF や PNG でもうまく圧縮できなくて、かえってファイルサイズが大きくなってしまうことがままあるのでオススメできません。これは、写真では同じ色の連続する部分が少ないからです。シンプルな写真を上手に減色すれば小さくできますが、それだけの手間を掛ける価値があるか？と考えるとなかなか難しいところだと思います。
写真は JPEG の圧縮率でファイルサイズを調整するのがよいでしょう。
標準で扱える形式以外に、ブラウザにプラグインを追加することで表示できるものもあります。
プラグインというのは、ブラウザに機能を追加するものなのですが、これにはかなりいろいろなものがあります。上に挙げた例は Flash というものでして、これを入れておくときれいなアニメーションを表示できたり、上のようにグラフィックの拡大縮小を行うことができます。以下に、このようなプラグインをインストールすることで表示できる形式を挙げてみます。
W3C によって策定された XML ベースのベクトルグラフィックス。Adobe から plug-in をダウンロードできます。でも、なんか Netscape ではうまくいかないんですけど？(^^;
ベクトルグラフィックスてのは、拡大縮小自由自在の画像のことで、現在（2001.01.）のブラウザでは標準で表示できるものはありません。拡大縮小が可能ってことで、地図のデータには持ってこいとなっています。ベクトルグラフィックスの場合は、Windows だと画像の上で右クリックすれば拡大縮小などのメニューが出てくるはずです。上の図は FLASH という形式の画像を表示しているところです。
正確には画像形式じゃないけど、Single Image PDF というのもあることだし、挙げておきます。PDF は便利ですよ。これも Adobe から Acrobat Reader をインストールしたり、Adobe Acrobat をインストールしたりすると自動的に plug-in が入ります。
Mac の標準画像フォーマット。本当は展開ルーチンを自前で持っているし、画像フォーマットではなくてファイル形式なんだけど、その辺の話は細かいので端折ります。
Windows の標準画像フォーマット。え、俺のブラウザは BMP が表示できる？ そんなことができるのは Windows 版の IE だけです、まったく。ブラウザと画像ビュワーを兼用するようなマネはやめてほしいもんです。ま、Windows プラットフォームだけを考えるのであれば少ないアプリでいろんなことができた方が楽でいいですけど。
Photoshop のファイル。QuickTime ってなんでも表示できますねぇ。
色情報にタグをつけて正確な情報を保存する形のビットマップデータ。印刷の世界でビットマップデータを扱うときはこの形式がポピュラーなようです。
QuickTime plug-in はその他かなりたくさんの形式をサポートしています。画像だけじゃなく音声や動画も表示できますし、QuickTime はかなり使えます。が、QuickTime を起動すると QuickTime Pro にアップグレードしろ（つまり有料版にしろ）とうるさいのでちょっとムカつく。
最近 Web でよく見る複雑できれいなアニメーションは GIF ではなく FLASH であることが多いですね。アニメーションができるだけでなくボタンをつけて動きを止めたり、インタラクティビティも高いです。ベクトル形式の静止画としても使えます。この形式で地図データを載せている Web を見たときは目から鱗が落ちたもんです。
Flash と同じく Macromedia の動的なコンテンツの作れる形式。Shockwave はサーバとのやりとりも行え、オンラインゲームによく使われています。Flash の方はどちらかというとアニメーションを使って「見せる」方に使われてるかな。
プラグインで表示できる中で、プラグインならではのメリットがあるのはやはりベクトルグラフィックスでしょう。サイズのでかい Photoshop 形式や TIFF 形式のデータが表示できることよりも、小さくて、拡大縮小のできる形式が実にありがたい。
特に地図データなんかは満足できるレベルで表示するにはかなりの大きさにしなければいけないけど、大きいと転送に時間も掛かるし、何よりページデザイン的に不恰好になります。
そこで拡大縮小のできるベクトルグラフィックス。具体的には PDF や SVG、FLASH なんかの形式を使うことになります。特に FLASH は、最近のブラウザなら標準でプラグインが入っているのでかなり使えると思います。
より詳しい説明は「画像形式について」の「ドローな仲間たち」を参照してください。
実は WWW で本当に安全に使える色は 216色しかないのだそうです。8bit の 256色からシステムに使う色と、その他諸々を引いた 216色を Web セーフカラーとして Netscape が使い始めたんだそうです。今となっては遠い遠い昔の話ですね。
といってもこれでも 256色以上出る環境を前提にしてますよね。今や携帯もインターネットな時代なわけですから、実はどんな色を使っても絶対はあり得ないとも言えます。
ここまで極端でなくても、例えば 24bit カラーを前提にした色使いをしていると、16bit カラーの環境などで微妙に色の違いが出てきたりします。バナーとやボタンと周囲の色が合わなくて浮いているサイトって、意外にあるもんです。（かくいう私のサイトもあちこち色浮きが出るんですが…。）
また、ディスプレイの設定によってけっこう違う色で見てる人が多いですし、Mac と Win ではガンマが違うので、そもそも同じ色を再現することができません。私の場合は、あまり濃い色を使わないで多少色が変化しても大きな違いが出ないようにするか、逆に思いっきり濃い色にして、多少色が変わってもその変化が出ないようにしています。（といってもそれほど厳密には考えてませんが。色に依存したナビゲーションとかしてないし。）
この辺はいつも口を酸っぱくして言っている「自分の環境を絶対と思ってはいけない」ということに通じるのですが、「そんなこと言ったって」というのも分かります。そこでやはり、自分のサイトがどのような環境を前提にしているのか、この環境でチェックしている、という情報をきちんと明示するようにしましょう。その際、どんな環境を前提にするかで、ターゲットとなるユーザーが変わってきます。大画面を前提にするのか、24bit フルカラーを前提にするのか、どのプラグインを前提にするのか、その一つ一つがあなたのサイトを訪れる人に影響を与えます。
例えばこのサイトは VGA 以上で、PNG とスタイルシートに対応しているブラウザで、Acrobat プラグインがインストールされていることが前提になります。（そのうち FLASH プラグインもこの中に含めようと思っていますが…。）まだおとなしいもんですが、これでも携帯マシンの人には期待通りにこのサイトは表示されないんじゃないでしょうか。とすると、私のサイトの情報はその人たちにはきちんと届かないということです。
色の話から少し大きくなってしまいましたが、最初から言いたいことはやはりこれです。自分の環境を絶対と思わず、どのような環境の人を想定して Web を作るのか、ということです。
基本的なツールは 「Web page を作る」の Web ページ製作キット や「ドローを使いこなせ！」、BookMark を参照してください。
探せばまだまだあると思います。好みもあるし、一般的な書籍では PaintShopPro とかをオススメするんですけど、ま、いろんなソフトについて情報を集めてみるのがいいんじゃないでしょうか。フリーソフトやシェアウェアならお試しもできるし。
ただ、減色や圧縮率変更などの単機能ツールはともかく、お絵描きについてはいろんなノウハウがあるので、ソフトが安くてもノウハウが手に入らないと質の高い絵を作ることはできません。できるだけ、本や Web でノウハウの手に入るソフトを選ぶようにした方が いいでしょう。
わたしゃ Web 用にラスタデータを作ることやフォトレタッチ、説明用の”図”の作成しかしないので、CG とかイラストといった類のグラフィックスに関してはサッパリ分かりません。
なので、こうしたノウハウやその辺に詳しい人の講座におまかせします。
最近この言葉に興味津々。でもイマイチ意味が分かってない(^^; フォントのことなのかと思うと、文字を使ったデザインのようでもあり、そうかというと文字が主役じゃない場合もあるような…。
私の中では文字を使ったデザイン。武蔵野美大の学生の作品がイメージに近いです。