デジタルカメラで撮影した画像ファイルやスキャナーで取り込んだ画像ファイルなどを、IBMのウェブアートデザイナーと言うアプリケーションを使用し、主にウェブ上で表示したり、メール添付する為の加工の方法について説明します。
※以下の説明で使用している画像は2007Kパパさん提供のものです（いい場面をお撮りいただきました）
画像を撮影する場合、ラボで印画紙に焼いてもらう事を想定してメモリーの許す限り高画質で保存することが望ましいと思います。その後の加工で圧縮・劣化させることは出来ても、オリジナル以上にすることが出来ないからです。
下の二つの画像をクリックし、表示された画像の右隅に表示される「通常サイズで表示する」アイコン（右の画像のように表示されます）をクリックしてみてください。
※サーバーの基準で1MB以上のファイルは表示できない場合があります。
 |
|
オリジナル（Sample1）
|
画像サイズ変更後（Sample2）
（高品質）
 |
いかがでしたか、大きさは別としてパソコンで見るには画質の差があまりないと思います。
しかしファイルサイズは7倍以上も違います。
さらに下の画像の比較もご覧になってみてください。
|
|
画像サイズ変更後（Sample2）
（高品質）
|
画像サイズ変更後（Sample3）
（中品質75%）
 |
しっかり見れば画質に差があるのですが、一見すると同じに見えます。
しかしファイルサイズはと言うと17％弱になり、さらにオリジナルと比較するとすると（縦横サイズは別として）2％程度まで圧縮されました。
このような加工をウェブアートデザイナーで行うことで、Web上に公開したり、メールに添付したりする場合に負荷をかけずに閲覧や受け渡しが出来ることとなります。
| ※オリジナルはとても貴重なものです、加工後絶対に上書き保存とかしてしまわないように注意する事が必要です。 |
白堊の球児ホームページ（ブログ）にはアクセス解析機能と言うものがあり、訪問いただいた方々の情報がある程度分かるようになっています。（え～そんな事分かっちゃうの！と心配されるかもしれませんが、さほど心配する必要のない範囲です）
その中に、お使いのパソコンの画面の解像度を集計する機能があり過去1年間（2008/5月時点）で見ると
| 1024x768 |
63% |
| 1280x1024 |
17% |
| 1280x800 |
13% |
となっており、上記に合わせることがストレスを感じることなくご覧いただけるサイズであると想定できます。
当サイトの現行の画像基本サイズは640x480pixとして扱っておりますが、集合写真や迫力のある表示にしたい場合などは横幅900～1000pix、頂戴した画像が4x3の比率以外の場合その比率に合わせて加工しています。
※4x3の比率は従来の写真プリントの比率から来ているようですが最近のデジタルカメラは横長の設定を使うことが多いようです。
上記①で比較のために表示させた画像は横幅を強制的に縮小し240pixで見せて、クリックすると元画像を別のウインドウで開くように設定してあるものです。
保存してあるのは元画像1枚です。（Blogは元画像と、サムネイルという小さなものを自動的に作成する場合が多いようです）
元となる画像を仮に240x180pixで保存したとします。
この画像を元にどんな大きさにも表示が可能なのですが、240x180pix以上に拡大する事は出来ません。（正しくは「綺麗に表示できません」）下記画像をクリックしてみてください。
 |
 |
元画像の一部をトリミング（Sample4）
240x180pix
|
左記元画像を拡大（Sample5）
640x480pix
|
せっかくの一眼レフ画像が安いデジカメのデジタルズームにて撮影した画像のようになってしまいますね。
以上のことから
通常の画像であれば横幅1000pix以下で良いこととなります。
プリントアウトを想定した場合はどの程度の大きさにプリントするかにより、別途考える必要があります。
（※ホームページビルダーがインストールされている前提です）
ホームページビルダーに付属しているウェブアートデザイナーを起動します。
スタート→すべてのプログラム→IBMホームページビルダー→ツール→と進みます
下記ウインドウが開きます。
白色部分の名称をキャンバスと言い、加工できる範囲を表しています。
デフォルトでは640x480のサイズに設定されていますが大きさを自由に指定できます。
編集→ファイルから貼り付けを選択します
加工したいファイルが保存してあるフォルダを選び、画像を選択し、開くボタンをクリックします。または画像をダブルクリックしても同様です。
表示された画像にマウスを合わせ右クリック、オブジェクトの編集を選びます。
オブジェクトの編集ウインドウが開きますので
幅に変更したいサイズを入力します。今回は1000と入力します。
縦横比保持の項目にチェックマークを付け、
オブジェクトの編集ウインドウ以外の部分をクリックします。
下図のようにサイズ変更されました。
オブジェクトの編集ウインドウを右上のＸボタンをクリックして閉じます。
画像のどこかを左クリックして「加工する画像を選択」した後
右クリックで表示されるメニューからからWeb用保存ウィザードを選択します。
Web用保存ウィザードにしたがって作業を進めていきます。
JPEG画像で保存する場合は画質の選択が出来ます。
デフォルトでは75%に設定されています。そのままで充分かと思います。
保存する場所に任意のフォルダを指定し、ファイル名に管理しやすい名前をつけます。
日付と連番を併用するのが良いかと思います。
連番は一桁だと11枚の場合、1の次が11となってしまうので二桁以上がお薦めです。
E-mailに添付する方法がもっとも一般的です。
その際にはプロバイダによって一回の送信限度容量を制限しているところがありますので注意が必要です。
たとえば送信容量の制限が1MB(1000KB)の場合はそれに合致するように何回かに分けて送信する必要があります。
10枚とかであれば問題ないかと思いますが、大会などの場合100枚近くの枚数になる場合も考えられます。
その場合便利なのが、無料レンタルサーバーです。
白堊の球児やパパＡの速報などのBlogも基本的には同じ考えですが、Blogは画像を一枚づつ登録しなくてはならない為、転送に大変な手数がかかります。
しかし通常のホームページスペースはパソコンと同じようにフォルダごとの転送が可能ですのでワンクリックの操作で100枚でも200枚でも移動できます。（物理的な転送時間は容量が増えれば長くなります）
| 仮）『白堊の球児！画像保存サーバー』 |
 hakua-no-kyuji.***.jp
└hitachi-ichiko
└img
└20080426
└20080426-001.jpg |
↑
同じ階層構造でも、別でも構いません
↓ |
| 『パソコン側』 |
My Document
└白堊の球児関係
└img
└20080426
└20080426-001.jpg |
上記の上下間をホームページビルダー付属のファイル転送ソフトFTPツールを使って操作します。
送り手はパソコンの20080426の中のファイルをサーバーにアップロードし保存します。
このファイルが欲しい受けて側はサーバーにある20080426の中のファイルをダウンロードし自身のパソコンに保存します。
この方式についてはご希望があればレンタルサーバーを開設し準備いたします。
最近は1GB位まで無料のレンタルサーバーがありますので充分実現可能な方式であるかと思います。
ファイル転送ソフトFTPツールについては改めてマニュアル化しますのでしばらくお待ちください。
Sample1画像のように、スポットをあてたい部分のみを良い画質のまま切り抜き（トリミング）たい場合が出てきます。
画像を見ながらマウスで選択範囲を指定し、切り取れば良いのですが同じ縦横比で何枚も処理する事が発生します。
その時に便利なのがキャンバスを利用したトリミング方法です。
編集→キャンバスの設定をクリックします
キャンバスの設定ウインドウが開きます
ここで任意のサイズにします。
今回は幅1000、高さは元画像の比率を採用し、666と入力しOKをクリック。
このままでは全体が見れませんので、次にウインドウの表示サイズを調整します。
表示→任意の縮小を選択します。今回は1/2倍とします。
ウインドウの上部に（1/2倍）の表示がされ、キャンバスの全体が表示されました。
ここに編集したい画像を読み込みます
③実際に加工してみる で行った手法を使い、同じように元画像を
編集→ファイルから貼り付け で呼び出します
表示された画像をマウスでつかみ、表示させたい部分にあわせます。
上記の表示も迫力が伝わる良い構図かと思いますが個人的な好みは捨てて
選手二人がキャンバス内に納まるように画像サイズを調整します。
前述の→オブジェクトの編集 を参考に調整してください。今回は横2500としました。
画像の位置を合わせて、左上のハサミボタンをクリック。
画像の位置にマウスを合わせるとマウスポインターが+に変わっていますのでキャンバスの外側を選択します。
どれだけ大きく選択しても自動的にキャンバスの大きさ（今回は1000x666）になりますので、大まかな選択でかまいません。次に切り抜きボタンをクリックします。
下図のように切り抜いた画像と元画像の二つが表示されますので右下の元画像を選択しDeleteキーで削除し、残った画像（切り取った1000x666）を→Web用保存ウィザードに従って保存してください。
以上で完了です。下のように保存できました。クリックで拡大表示になります。
|
| ⑥ファイル転送ソフトFTPツールについて（準備中） |
|
|
