| 実践編 |
２．タイトルロゴを画像として保存する |
|
画像を保存する時に気をつけなければならないポイント |
タイトルロゴが完成したら、次はこれを画像として保存する作業である。ここでのポイントは画像の品質を落とさない範囲でいかに画像を軽くするかである。
例えば、下の＜ｔｏｐｉｃｓロゴ＞を画像保存する時のケースを例に挙げて説明してみよう。
まず、ロゴの保存のしかただが、これは上列左にある「Ｗｅｂ保存ウィザード」を開き、＜選択されたオブジェクトを保存する＞を指定し、｢次へ｣と進む。ここでは＜保存形式の選択＞のページが表示されるので、「ＧＩＦ」を選択してさらに｢次へ｣と進む。（なお、写真の場合は「ＪＰＥＧ」を選択する）。すると、｢ＧＩＦ属性の設定｣のページが開かれる。ここには、設定前と設定後（ＧＩＦ処理後）の画像がプレビューに対比・表示される。この時の画像が、一番左の２５６色（「Ａ」）。つまり、最も解像度が高い状態でＧＩＦ属性の設定が行なわれた画像である。そして、これをそのままの状態で保存したとすると、そのファイルサイズは５．４ＫＢとなる（（下記サンプルの場合）。
では、次にもう少し解像度を落としてみてみよう。解像度を落とすということは画像を軽くすることであり、画像を軽くするということは即ち、インターネットでページを検索した時に画面上により早く表れるということである。
 |
→ |
 |
→ |
 |
→ |
 |
| Ａ |
|
Ｂ |
|
Ｃ |
|
Ｄ |
| ●２５６色（５４８４バイト） |
|
●１２８色（４５０８バイト） |
|
●６４色（３８０１バイト） |
|
●８色（１０７２バイト） |
| △ |
|
△ |
|
◎ |
|
× |
これは、写真にしてもロゴ文字あるいはイラストなどにしてもそうだが、解像度の高い画像は見た目も非常に鮮やかで綺麗だが、反面画像が重くなるため、画面に出てくるまでにどうしても時間がかかるという欠点がある。見る人にとってはこれほどイライラすることはないわけで、つい待ちきれなくなって切ってしまうということはよくある話である。メーカーやネットワーク関連、もしくはＷｅｂ関連企業のように、「ホームページ」そのものをＰＲ・技術発信の場として位置づけているところならばともかく、そうでない一般の企業はできるだけサッ、サッと見れるホームページづくりを心がけるべきであり、ましてや＜情報発信型ホームページ＞をつくろう！となればなおさらである。
というわけで、ここでは画像の品質を落とさない範囲でいかに画像を軽くするかという観点から、画像の保存のしかたについて話を進めて行きたい。
さて、話を元に戻そう。左から２番目の｢Ｂ｣のロゴは画像を１２８色に落として保存したもの、同じく３番目の｢Ｃ｣はさらに６４色に落として保存したものである。ここまでの３つのロゴを比較してみると分かるように、ほとんど見た目には変わりない。が、これを｢Ｄ｣の６色までに画質を落とすとどうだろう。さすがに劣化がはっきりと見えてくるのが分かるだろう。そこで、まず、Ｄをカットし、見た目がほとんど変わりないＡ、Ｂ、Ｃの中から、最も画像のファイルサイズの軽いＣ（６４色、３８０１バイト）を選び採用する。つまり、これによってＡよりも３０％も画像を軽くすることができるわけである。たかが１個のロゴと言うなかれ。これが１ページに数個のロゴや写真が入るようになると、全体の重みはかなり違ってくる。だから、ＧＩＦ属性の設定にあたっては、色数をひとつの目安として６４色程度に落とし画像保存すること。これが第１のポイントである。またこれは、ロゴ自体の色合によっても変わってくるので、最終的にはプレビューで画像確認して選択することである。
また、画像保存時のポイントその２は、キャンパス上での処理のしかたである。
例えば、上記｢Ａ｣の２５６色（５４８４バイト）のロゴをキャンパス上で（例１．）の大きさで処理した場合と、（例２．）の大きさで処理した場合（いずれも原寸）とでは、解像度は同一でもファイルサイズの容量はこのように違う。３８０１バイト対６９９４バイトだから、その重さは約２倍弱も違うのだ。
つまり、キャンパス上で保存（Ｗｅｂ保存ウィザードに）する時に気をつけなければならないのは、大きなサイズで保存するとそれだけで容量を食うことになるので、実際にホームページ上に貼り付ける位の大きさ（例１）の適当なサイズで保存することである。
また、その逆に、画像をキャンパス上で小さいサイズで保存したらどうかだが、これは保存した時のサイズの状態でページ上に貼り付けるならば問題はない。が、拡大した時に画質が劣化（ぼやける）するので要注意。あくまでも、「ホームページ」上にどの程度の大きさで貼り付けるのかを想定してキャンパス上で処理することが大切である。
 |
 |
| 例１． |
例２． |
| ●６４色（３８０１バイト） |
●６４色（６９９４バイト） |
| 例１、２共、キャンパス上で作成したロゴを原寸サイズで落とし込んだものです。 |
| ＜キャンパス上での異なるサイズの保存＞ |
 |
| ＜サイズを同一サイズに縮小して比較する＞ |
|
|
| 例１． |
例２． |
| ●６４色（３．７ＫＢ） |
●６４色（６．８ＫＢ） |
|
なお、キャンパス上での異なるサイズの画像をそれぞれ保存し、それをホームページ上に呼び出し、同一サイズに縮小して貼り付けた場合のロゴイメージは上記図の下段の通りである。つまり、画像を縮小すればするほど画質の品位は上がる（例２．の方が縮小率は高い）。しかし、ファイルサイズそのものはそれほど変わらないということである。＜情報発信型ホームページ＞の場合は、（例１．）の画像でも充分かと思われるので、キャンパス上ではとにかく大きなサイズでは保存しないことを常に心がけることである。
また、ロゴ文字の保存は写真も同様、全て｢半角・英数文字｣で入力すること。そうしないとサイトに転送できなくなるので要注意。これはページの保存など全てに共通することであり、いわば｢ホームページ｣づくりの原点でもある。
| 実践編 |
２．タイトルロゴを表紙に貼り付ける |
|
＜表＞を挿入し、レイアウトする |
さて、こうして保存されたタイトルロゴを、次はｉｎｄｅｘ（半角・英数文字）ページの表紙に貼り付ける作業である。
前回の配信では、素材集の写真を背景画像として採用。これをさらに画像編集して、数種類の表紙をホームページ上で実際に作ってみた。そこで、今回はそれらのサンプル表紙にタイトルロゴを貼り付けるまでの作業を行なってみよう。
 |
|
::::::::: |
|
|
| ●＜位置取りを決めて、表を挿入する＞ |
まず、ｉｎｄｅｘページを開き、タイトルの位置取りを決めよう。次に＜表の挿入＞をクリックし、指定の行数・列数を入れて｢ＯＫ｣ボタンを押す。すると、指定した位置に表が下りてくるので、これを適当なサイズに引き伸ばして整える。これでＯＫだ。例えば、左のサンプルのような表をつくり、その中にタイトルロゴを挿入するまでの作業を実際にやってみよう。そのステップは以下のようになる。
▼１行・３列の表を指定し、ｉｎｄｅｘページの上部に引き降ろす。
▼１列目の箇所にカーソルを当てタイトルロゴの位置取りを決める。
▼＜挿入＞ボタンをクリックし、画像ファイルの｢ファイル｣を呼び出し、あらかじめ保存していたタイトルロゴ（名称は全て半角・英数文字）を指定して「開く」をクリック。
※２列目の｢画像ファイルの挿入」ボタンを使用すれば、直接ファイルは開かれる。
▼タイトルロゴが指定の場所に挿入される。
|
| ●背景画像との色合からタイトルロゴを選択する |
前回では、画像編集の効果を使って、幾つかの表紙ページの背景画像をサンプルとして作成した。また、表紙で使用するタイトルロゴもウェブアートデザイナーを使って何種類かを実際に作ってみた。そこで、どの背景画像とタイトルロゴの色彩がマッチしているか、あるいはまた、見栄えが良いかを実際にここで組み合わせて比較してみよう。それが、左の３サンプルだ。実は、こういうことが画面上で自由にできること、これもＷｅｂの世界ならではの長所といえる。
もっとも、これは好みの問題もあるので一概にどれが良いとか悪いとかは言えないが、一応、背景画像とタイトル文字の色彩がもっともマッチしているということ。また、見た目に違和感がないということから、ここではサンプルＢを採用することにしたい。
|
|
|
| ＜１行横３列の表を作り、ここにタイトルロゴを貼る。ピンクの部分は掲載情報告知欄＞。 |
|
| ▲サンプルＡ |
|
| ▲サンプルＢ |
 |
|
::::::::: |
|
|
| ▲サンプルＣ |
タイトルロゴの貼り付けが終われば、次はタイトル部の仕上げである。｢検索ボタン｣の取り付けや情報便の訴求テーマ、あるいは発信社名等の入力を行い、さらにはアニメやイラスト・アイコンなどを表内に取り込んで飾りつけていく作業である。次回は表をフルに活用した、次のようなタイトル部の仕上げを行なってみたい。
|
|
 |
とくとく
情報 |
|
|
|
次回配信日 ９月中旬予定
|
|
