サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> ユーザビリティ >> 画像とそのサムネイル

画像とそのサムネイル



画像を有効に使う

画像はテキストに比べてサイズが大きく、ダウンロード時間などを考えると最小限に抑えるべきです。使用する場合は、可能な限り圧縮することが望まれます。

とはいえ、ウェブデザインには画像は不可欠で、文字だけのサイトよりユーザーを引き付けます。画像は文字より目に入りやすく、また即座に理解することができますので、有効に活用するべきです。

「画像は最小限に抑えるべき」、「画像は有効に活用するべき」と述べましたが、この2点を組み合わせたのがサムネイルを用いるという手法です。
サムネイルとは、比較的サイズの大きな画像を縮小または切り取りをして小さな画像(160×120くらい)を作成し、それを見本用として表示させたものです。ユーザーが興味を持った小さな画像をクリックすると、大きな画像が表示される仕組みで、ユーザーは効率よくウェブを見ることができます。


サムネイルの作り方

サムネイルの作り方には、一般的に単純に画像ソフトで縮小するやり方と、画像の必要のない部分を切り取るトリミングというやり方があります。縮小すると細部がつぶれてしまい、トリミングをすると画像の印象が変わってしまう場合があります。

そこで、縮小とトリミングを上手く組み合わせる手法があります。例えば元画像の10%のサムネイルを作りたければ、まず元画像の32%をトリミングして、その後に32%縮小すればいいのです。

例えば、以下の400×300の画像から80×60のサムネイルを作成します。



画像処理ソフトで普通に縮小すると左図のように、またトリミングだけを行うと右図のようになります。

 

これでは、細部がつぶれてしまい、写真に何が写っているか分かりません。そこで、元画像を200×160をトリミングします。



この画像を80×60に縮小します。



普通に縮小した場合と比べて、写真に何が写っているかが分かりやすくなります。


 
 

Webの開設と運営法に戻る Next:アニメーション




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Accessibility, Usability. All rights reserved. - Home