「FireWoks」はWebデザイン用のグラフィックソフトと冒頭で説明しました。Webブラウザはビットマップ画像しか表示できません。グラフィックソフトの目的はWebデザインの視覚的設計図(ラフ)作成、写真の補正、解像度の変更、そして画像の圧縮です。




 

実際にWebSiteを構築するときラフ画像の全ての画像が必要ではありません。画像は非常に情報量が多きくUPロード、DOWNロードに時間がかかります。ユーザーがダウンロードのために待ってくれる時間は3秒といわれています。最近インフラ整備のおかげで光回線や無線LANの高速化しストレスは軽減されてきました。しかし、 SEO(検索エンジン最適化) の観点や [W:W3C] が標準化したXHTML+CSSのコーディング技術の観点から、画像の使用は効果的にそして無駄なメモリーを使用しない設計がWebSite構築の仕事では求められます。また画像のみのWebsiteは視覚メディアに頼って情報を得るUA(ローカルユーザー)にしか効果的ではありません。

 WebSite構築目的の優先順位(プライオリティー)によって画像の使用容量や種類は変わってきます。今は神経質に秤(はかり)ではかって書き出すような作業は要求されませんが、携帯電話専用のサイトや旧世代のマシンにも読ませられるWebSiteを作るオーダーを受けたときは画像のデータ容量に神経をつかわなけれななりません。

せっかく繊細な画像や芸術性の高いWebsiteを設計したとしても「書き出し」を失敗すると台無しになります。 書き出しはWebデザインの基礎技術で避けて通れない技術です。 より美しくより軽い画像を書き出せる技術を身につけましょう。

書き出しとは WebSite用にイメージやバックグラウンド用に画像をスライスツールで四角く区切り、画像のデータ容量を圧縮しWebブラスザで適切な表示ができるようにする作業です。現在のWebブラウザは四角形でしか画像を表示できません。丸い画像も全て四角でスライスされていることを覚えておいてください。

 書き出しで重要なデータ 画像形式 高さ/px(height)幅/px(width) データ容量/bit 等です。

モダンブラウザで表示できる画像の形式(拡張子)
  • [W:JPEG]形式
  • [W:GIF]形式
  • PNG形式( [W: Portable Network Graphics ] )IE6は表示不可
ファイル形式
JPEG
GIF
PNG
Web対応のファイル形式の比較
最大色深度
24bit
8bit
8bit/24bit/32bit
透過設定

透明のみ
透明のみ/透明なし/透明度
画像圧縮の劣化
あり
あり

適応特徴
写真やトーンの多い画像
256色以下の色数の少ない画像
アルファチャンネル可、高い圧縮率、IE6の不適合

スライスの仕方スライスツール

スライスはWEB用に書き出すための領域を四角形で囲むものです。ドキュメントの編集とは別のWebレイヤーとして区別されています。表示/非表示は レイヤーパネルもしくはツールボックスの「スライスホットスポットを隠す」をクリックしてください。スライスホットスポットを隠すの画像

スライスツールスライスツール(ill phも同じ名称です 但しFwにはスライス選択ツールがない。) で書き出すオブジェクトをドラックして囲む、もしくはオブジェクトを選択ツールで選び右クリック「長方形スライスの挿入」を選択する。

スライスレイヤーができたら、プロパティインスペクターでスライス名を半角英数で入力するようにしましょう。

この名前はスライスされた画像ファイルの名前となるので日本語などの2バイト文字を入れるとWebサーバー内でエラーが発生し表示されないので注意してください。 高さと幅も正しい大きさと正しい場所になっているか虫眼鏡ツールでドキュメントを拡大縮小して確認しましょう。 画面全体を一度にスライスをきる場合 画面下のスライスは上のスライスのラインに影響される事が多く、見直をよくすること。よく気が付かない間にスライスの大きを変えてしまっていることがあります。例えば1pxだけずれていいる等、多々ありますので見直しの癖をつけましょう。

スライスの大きさの変更は 選択ツール縮小拡大ツールが使えるのもFwの便利なところです。

書き出し

スライスが作業が終わったら、ファイルに書き出しです。 書き出しとはスライスごとにイメージ(画像)ファイルを切り出していくことです。サイトの情報設計でフォルダ構成図に沿ってフォルダを作り適切なフォルダに書き出しましょう。

スライスを1枚だけ書き出す時

スライスしたいスライスオブジェクト(スライスレイヤー)を選択ツールで選び右クリックで「選択スライスを書き出し」を選択。

書き出しダイアログボックス

  1. フォルダを選ぶ
  2. スライス名と拡張子を確認
  3. 画像のみを選ぶ(HTMLと画像)を選ばないこと。
  4. 保存ボタンで書き出しの実行

一度にドキュメント内のスライスを書き出す

一度に書き出す時は各スライスの設定が正確に設定されているか確認してください。

ファイル(F)→<書き出し(Ctrl+Shift+R)>で書き出しダイアログボックスが開きます。

書き出しダイアログボックスの画像

  1. 書き出し:画像のみを選ぶ 

    画像とHTMLを選ぶとTABLEタグでHTML ファイルを書き出す。これでよければコーディングエンジニアの仕事などいらないでしょう。冒頭で述べたように画像だけでもWebsiteはできますが全く張りぼての見せかけのサイトとなります。決してこれでいいと思はないでください。

  2. HTMLを含めるを選んでないので ここではプルダウンメニューは選べない
  3. スライスの書き出しを選ぶ
  4. ページを複数設定している場合は複数ページ選べる、普通は「現在のページ」だけにする。
  5. 選択したスライスのみをチェックを入れる。 スライスのない領域も含めるはチェックを外す。

    (チェックを入れた場合、スライスを入れてない部分も全て画像として書き出すため 不要なファイルも書き出すためチェックは入れないこと)

  6. 現在のステートのみ ステートとはアニメーションGIFなどで作れるコマのことです。 普通に画像のみを書き出したい場合はチェックの必要はございません。(アニメーションGIF以外不必要)
  7. 保存ボタンで回出しの実行

JPGE形式画像、

高い圧縮率で主に写真 を表示します。画質(1〜100%)圧縮率が高いほど画質が劣化します。(80%以上)で画質は良くなるがファイルは大きくなる。スムージングで画像にアンチエイリアスをつけたようなぼかしをつけれます。

プログレッシブをONするとインターネットでダウンロードすると時間経過に応じて粗い画質から鮮明な画質を表示します。

カラーのエッジのシャープ処理は2つのカラー境界のエッジを際立たせるために有ります。テキスト文字や輪郭がはっきりした画像の場合、このオプションを設定します。画像プレビュー設定ダイアログボックス JPEG画像の場合

  1. オプションタブ 画像書き出しの基本設定をする。
  2. Web用の書き出し形式をドロップダウンメニューで選ぶ
  3. JPEG画質の圧縮度、1から100で設定 3’は現在のプレビューでの圧縮率の表示
  4. プログレッシブモードのON/OFF
  5. カラーエッジのシャープの処理のON/OFF
  6. 画像のメモリ数、(ダウンロード時間、回線速度)シュミレート時
  7. マットカラー(透明時のぼかす背景色)

GIF形式画像、

インデックスパレットの種類を選択して最大256色(8bit)まで使うことができます。写真など色数の多い画像にはてきしていませんが、透明(透過GIF)、ディザ、インターレス、ロス圧縮を設定することができる。使用するインデックス色を少なくすることによりファイルを小さくすることができる。GIF形式は「非可逆圧縮」という圧縮を行うことができ 「非可逆圧縮」は色の変化を少なくしてファイルサイズを小さくするものでディザ(エッジの処理方法の一種)アンチエイリアスを使用した場合、ファイルサイズが大きくなるという特性を持っています。画像プレビューダイアログボックス GIF画像の場合

  1. パレット 下記で各モードの説明をいたします。とりわけ理由がなければアダプティブにしましょう。
  2. GIFインデックスカラーの使用色数です256色がMAXです。 3で表示されたカラー数を直接入力できます。
  3. スライス画像の現在抽出されたインデックスカラーです。
  4. インデックスカラーパレットです。実際にスライス内で使用されている画像の色がタイル状に表示されパレットのような表になっています。
  5. Webセーフカラーがカラーパレットにある場合 ひし形のマークが付きます。
  6. 透明をインデックスカラーの中に入れたいときに使用します。 6’)クリックして 一番左のアイコン(=)は プレビュー画面から透明に表示したい色をスポイドツールで指定します。 真ん中の(+)はカラーパレットから透明にしたい色をクリックして指定します。右端のアイコンは(-)透明にした色を元の色に戻して書き出したいときにクリックして使います。
  7. 透明色の使用するかの設定、アルファチャンネル(PNG32用) 透明インインデックスカラー(GIF PNG8用) 透明化なし。
  8. マット色の設定、 JPEG PNG8 GIFの背景色となじませる時に設定する色、境界線と背景をなじませるために指定する。

PNG形式画像、

 FireWorksの標準フォーマット(編集可能ファイル)です。

書き出し設定でPNGを選択するとPNGオプションとして色深度(色数)やインデックスカラー時のパレットを指定して減色してファイルサイズを小さくできます。PNG8は256色中透明の設定ができます。PNG24は1670万色の表示ができます。PNG32は1670万色+8bitアルファチャンネル(各ピクセル毎)(透明深層度)が表示できます。PNG32はデータが大きいですが、透明度を設定でき美しい色を表現できます。

PNG形式画像はインターネットエクスプローラー6(IE6)では表示できません。javascript(ライブラリーなど)で表示できますが、各ライブラリーにより制約が有ります。またUAの10%前後がローカルプログラムの読み込みをOFFしています。PNGを読み込む判断はターゲットユーザーのことを考慮する必要があります。画像プレビューダイアログボックス PNG画像(4アップ)の場合

上記の画像は PNG8の画像プレビューです。4UPプレビューボタンをクリックし JPEG GIFとの比較をしています。WEBSITEの設計時 ターゲットブラウザによって書き出す画像の種類を選ばなければなりません。同じような見え方であればGIF JPEG画像を使用しましょう。

 GIF PNG(8bit) パレット

アダプティブ 
画像に使われている色を元に作成されるパレットです。最小のファイルサイズで高画質の画像を作成できます。迷わずこれを使用しましょう。
Webスナップアダプティブ
画像に使用されているカラーのうち、Webで規定されている216色のWebセーフカラーとRGB値が近いカラーを割当てるアダプティブパレットです。携帯電話などがターゲットブラウザになっているときしようするかもしれませんがPCブラウザ対応ではほとんど使いません。
216色WEBカラー 
WINとMACのプラットフォーム双方で表示できる共通の色216色を使用したパレット。すべての8BIT(256カラー)のモニターで正しく表示できます。
全色割付け
画像に使われているすべてのカラーを含むパレットです。256色を超えると自動的にアダプティブに設定がかわります。
Windows/Mac Os
各OSの標準カラーで合致する色で設定します。
グレースケール
8bit階調のグレースケールで書き出し
モノクロ2階調
2色モノクロで表記します。
均等割り付け
RGBのピクセル値から必要な色を取り出したパレットです。
カスタム
 既存パレットを修正した場合に表示が「カスタム」になります。オリジナルパレットを呼び込んだときも「カスタム」になります。

カラー数

パレットにあらかじめ表記された数値以内で色を割り当てます。 直接入力もできます。カラー数が少ないほどファイルを小さくできます。

 

 透明 

GIF形式 PNG8形式ではインデックスカラーで書き出す特定色を透明にしてWeb上で書き出すことができます。

「最適化パネル」か <ファイルメニュー>→<画像プレビュー>ダイアログボックスで「GIF」「アニメーションGIF」「PNG8」の透明の設定を指定できます。

 透明インデックスカラーを選択し「透明カラーを選択」 透明ボタンでプレビュー画像上かカラーボックスのポップアップ上の透明にしたい色をクリックします。

マットの指定

背景色が透明の場合、でも文字にドロップシャドウなど徐徐に透明化している画像などを使用する場合には、シャドウの背景色とけ込むようにマット色を指定します。 マット色には背景で指定する色を指定しましょう。

ファイル形式をどう選べいいのか?

 改めて考えてみましょう。 現在稼働しているWEBサイトは数十億枚といわれています。 Webサイトは読んでみてもらうためにサーバーにアップするわけですから いろんな環境で見れるようにする技術をしらなけれなばりません。 ネットワーク環境の発達、コンピューターの買い替えが進みOSのスピードも速くなり表現力は上がってきています。 しかし、いまだに古いブラウザやOSで低速度の回線でインターネットを接続しているうイーザーもいます。 WEB製作会社やマーケティング会社では 担当するウェブサイトのターゲットユーザーを定めます。例えばECサイト(物販サイト)や市役所等の場合、アクセスしてくるお客さん(UA)はどんなインターネット環境で接続しているかをデータ化しています。 ECサイトや公共サービスのサイトの場合、新しいブラウザだけ適正に表示できるサイトを立ち上げてしまった場合、古いブラウザを捨てることになります。もしECサイトで5%の売り上げがIE6だった場合5%の売り上げをあきらめなければなりません。 また公共サービスの場合はもっと深刻です。 確かにIE6はマイクロソフトもサポートを打ち切りましたが、なんらかの事情でつかわざるえを得ない方がいます。 画像のファイル形式のみの問題ではないですが なんらかの方法でWebでのサービスつながるようにしなければならないのがWeb製作会社の仕事でもあります。

さて、コーディング技術の高さの基準としてIE6でも違和感なく表示できる技術を持つのは強みです。 また新しい技術を駆使できるのも一つの腕の見どころです。 立ち上げるWebSiteのユーザー層を考えて、使用する画像を選ぶようにしましょう。

画像ファイル選び方例
IE6ブラウザをターゲットブラウザとするか?
YES 「JPEG GIFのみを使う」
 NO 「3種類使える」
javascriptをOFFユーザーを捨てるか?
YES PNGファイルはJavaScriptで表示する。 
NO PNGは使わない
JQueryライブラリで アニメーションで画像を動かす場合 (ライブラリーによって変わるらしいです。)
「GIF JPEGでアニメーションをつける」 「アニメーションさせる画像はPNGで書き出さない」
IE6用にJQuery用のPNG表示ライブラリーを使用する
透明グラデーションや透明な柄もの
背景を含めたGIFやJPEGで書き出せないだろうか?「マット処理」を施す。 
背景に柄が入ってる文字の場合文字にドロップシャドウなどのグラデーションが入った場合は背景ごと文字を書き出し画像で文字を表記する。
柄物の上に柄物のアルファ画像が乗ってくる場合はPNG32で書き出すまたは、ずれがないようにGIF画像をレイアウトするしかありません。
    
透明柄物がスタイルシートで移動ができる場合「プロパティ position="fixed"」や要素の内容が変化し高さまたは幅が変化する場合などは「PMG32」でしか実現できません。ブログのコンテンツ部分を柄物で透明な背景で表記するなどは非常にターゲットを狭めるデザインになります。
画像の話ではないですがCSS3等で要素を透明度を指定することはできます。ただしこれもブラウザを選びます。

IE6のシェア