ホームページデザイン講座

はじめに

インターネットに関しては素人で、プログラムのことをよく知りません。単なるデザイナーのハシクレとしてホームページデザインの基本に関してまとめてみました。デザイナーの方には、「そんなこと言われなくてもわかってるって（－_－#）」という声が聞こえてきそうですが、そうでない方に少しでも参考になれば幸いです。

�使用アプリケーション�
作成分野	アプリケーション	コメント
HTML	Adobe PageMill 3.0J Dreamweaver 3J Adobe GoLive 5.0	正直言ってAdobe PageMillは思い通りにデザインできない。でも、もっとも操作しやすいソフトかなと使い続けています。当サイトのデザインは、テキストを入力して、画像を張り付けて、ときどきフレームを使って。ただそれだけ。とりあえずAdobe PageMillで十分な簡単なデザインです。
画像	Adobe Photoshop6.0 Adobe Illustrator9.0.2 Adobe LiveMotion Fireworks 3J	定番ですね。AdobeのソフトはほとんどVer.1から使用し続けています。類似のソフトも持っていますが今はもう使っていません。Flash作成も最近LiveMotionに切り替えました。
素材集	タイで買ったCD-ROM写真集(安い1000円位で買える)	市販のDTP素材集はたくさん所有していますが、マノーラのホームページではあまり使用していません。タイで買った写真集とタイ国観光政府局で借りた写真以外ほとんどオリジナルです。

ホームページデザインの基本

ここで取り上げる「基本」は、いわゆる「良しとされるデザイン」ということになりますが、当マノーラのホームページに反映しているどころか、逆に意図的に反してつくっています(~_~)。

�構成の基本�
0	基本	マノーラの場合
トップページ	重い画像は使わない	ああ重いm(_ _)m
フレーム(目次)	トップページの左か上に100pixels程度にフレームで目次を作る	目次のフレームはありません。必ずトップページに戻るボタンを各ページに付けています。ああしんどい(-_-;) 。
各ページ	左揃え、センター揃えが普通です。上を空白にするのはもっての外ですね。	左側に訳のわからない空白があります(-_-;)。
ページサイズ	幅は600pixels。下方はスクロールで見せられますが、できるだけ下に長いのは避けます。しかし、同一内容を複数のページで分割すると、移動、移動でこれまた厄介者。ほどほどに。	ページ内容によって結構スクロールが必要な箇所もあります。
文字	文字のサイズは1ページの文字分量によって異なると思います。タイトルや見出しに大きな文字はメリハリがついて良いのですが、システムフォントはやはり味気ない。ボールド指定も小さな文字はつぶれて見にくくなります。要注意。	ほとんどシステムフォントです。ボタンになど所々にフォントワークスのセザンヌEBと墨東EBを組み合わせた書体を使用しています。この書体とても好きな書体なのですが残念ながらEBしか持っておらず、太すぎて潰れて見にくい状態と思いますm(_ _)m 。
色	「色」という世界はたいへん奥深い。HPの場合特に色によって印象が左右されます。脈略のある色指定を。	フレームでヘッダー・フッダー(上下)部分のみタイデザインの模様を使い他は白が基本です。見出しとか他の色は行き当たりばったりでだんだん脈略が失われてきました(;_;)。えっ最初からナインじゃないって…。恐れ入りましたm(_ _)m 。その通り。
互換性	MacでもWinでも、どんなブラウザでも意図した通り表示できるよう作成する。	MacとNetscapeの環境で作成してるので、WinとExplorerの環境では思い通りに表示されていないはずですm(_ _)m。

で、なぜ基本にそってつくらないのかって(･_･?)。それは単純に何とか他のホームページとは違う雰囲気を出したかっただけのことであります。おそらく大半のデザイナーっていつもそんなこと考えているんじゃないかなぁ(-.-)。

�一般画像形式�
0	形式の内容	用途
GIF	256色およびWEBカラー216色を扱える形式です。アニメーションGIFというものもあり大変便利です。カラーモードはインデックスカラーのみです。	ロゴやボタンなど、色数の少ないものは容量が軽くなります。写真など色数の多い画像をこの形式で保存すると逆にかなり重くなります。避けましょう。
JEPG	フルカラーが扱える形式で、圧縮により容量を軽くできます。印刷で使われるCMYKモード+アルファチャンネルにも対応しているすぐれ物です。	フルカラーの写真を圧縮して容量を軽くします。ロゴやボタンでもグラデーションを使っている場合は、こちらの方が適している場合があります。一度圧縮したデータは復元できないのでオリジナルデータはキープしておきましょう。
他	PICT、TIFFなど今やポピュラーな画像形式はほとんど扱えるようになっています。これはMACの場合画像形式の変換技術とネットスケープやエクスプローラなど閲覧ソフトのおかげですが、一体何のために(･_･?)	配信用としてではなく、HTML形式によるLAN内でのデータのやり取りが考えられます。

�その他の画像形式�
0	形式の内容	用途
Flash	今やかっこいいWEBデザインの必携ともいえる形式。通常画像はビットマップといわれる色があってもなくても1ピクセルの色情報を記録しています。これに対してベクターイメージともいわれる座標範囲を数式で記述する方法があります。代表格はIllustratorです。画像が大図形や文字が数式データで軽いというわけです。ビットマップ画像を配置してしまうとちょっと重くなってしましますが、アニメーションも適用データに時間と移動距離の記述だけですからそう重くならない。プラグインが必要ですが、最新のブラウザは標準インストールされるので心配ありません。知識があればOS風のインターフェースも作れるという優れものです。	サイトイメージの表現やロゴ、アニメーション、インタラクティブなど用途は結構広い。画像形式というよりプログラムといった感じでしょうか。オンマウスで画像が変化したり、音も追加できるのが頼もしく、当サイトでも LiveMotionで作成したFlash形式をいくつか使っていますが、自動的に動いてるのはすべて普通のGIFアニメです。最近トップ画面にごあいさつ(WAI)をFlashでつくりました。お粗末様です(;_;)。これから徐々に取り入れようかと思っていますが、かっこよさは求めず、操作性がよくなればと考えています。
QuickTime	ムービー、音声が扱える形式です。Apple社が開発しもう10年は経つと思います。Ver1.0当時は、使用マシンが非力だつたためコマ落ちで見られたものではありませんでしたが、今では快適に見られます。画質・音質を重視したAppleらしい技術でストリーミング再生も可能ですが、高解像度ムービーはさすがにADSL1.6MHzでも途中でとまってしまうのが難点(;_;)	説明いりませんね。ムービー、音声の配信です。Mac標準のQuickTimeではオリジナルムービーを保存できないのでQuickTimeProを購入しておく必要があります。安いです。Ver4.0.3でFlashにも対応し、もうじきFlashがOS標準になるでしょう。(Flashというよりも、ベクターイメージ表示機能がOS自体に備わっていくと思います。)
他	RealAudio、Shockwave、最近ではSVGなど他にもたくさんあります。ほとんどプラグインに頼るため一般的でありませんが、画像や音声の品質、圧縮技術、データ保護、リアルタイム配信など、目的に応じてはまだまだ現役です。	これらの形式のもっとも良いところは、一般の閲覧者が勝手にダウンロードして再編・再利用できないことです。ですから、今考えると、営利目的用といった感じでしょうか。