ITパスポート試験 用語辞典
サムネイル【Thumbnail】
Webサイトやアプリ、ファイル管理ソフトなど多くの画像を表示する画面で、画像や動画などの内容を一覧で簡単に把握できるよう、小さなサイズで表示された縮小画像のこと。
ファイルを開かなくても画像の中身を視認できるため、単にファイルのアイコンが表示されている場合と比較して、直観的に目的のデータにアクセスすることができる。また小さい画像はそれだけ軽量のため、表示時間の短縮にも寄与する。PCのフォルダ管理画面、YouTubeなどの動画共有サイトやInstagramなどの写真共有サイトでも定番のUI要素である。
ファイルを開かなくても画像の中身を視認できるため、単にファイルのアイコンが表示されている場合と比較して、直観的に目的のデータにアクセスすることができる。また小さい画像はそれだけ軽量のため、表示時間の短縮にも寄与する。PCのフォルダ管理画面、YouTubeなどの動画共有サイトやInstagramなどの写真共有サイトでも定番のUI要素である。
- 分野:
- テクノロジ系 » 情報デザイン » インタフェース設計
- 重要度:
- ★★★
(Wikipedia サムネイルより)
サムネイル(英語:thumbnail、サムネールとも表記される)とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ている。
視認範囲の限られるカタログや画面表示上、もしくはデータ量の限られるネットワーク上の画像情報の伝達において用いられることが多い。
利点
ページや画像の確認においては本来は原画像をそのまま確認する。しかし画像やページが多すぎる、もしくは大きすぎる場合に画面や掲載書物の掲載範囲を超える場合がある。
その場合にサムネイルとして縮小化されたものを代替にて掲載することによりページや画像の内容確認程度の用途において効力を持ち、視認スピード向上を図ることが出来る。
また、インターネットにおいては画像のサイズが大きい場合に受信に時間がかかるため、画像サイズを小さくすることによって解像度と引き換えに、通信時間の短縮を図ることによって視認スピードの向上を図ることも可能である。
作成方法
サムネイルの作成においては主に2つの方法がある。
- 原画像の縮小表示
- この方法では縮小画像をわざわざ用意しなくて良い代わりに通信時間の短縮はない。したがってサムネイルを表示するまでには時間が掛かるが、逆に、オリジナルサイズの画像を表示するときに新しくファイルをダウンロードせずにすむ。システムによっては細部がつぶれて視認性を著しく下げる。これは、サムネイルは瞬時に表示させないと操作性が低下するため、高速で低品位な縮小アルゴリズムを使っているからである。
- 原画像を縮小加工
- 縮小した画像をあらかじめ用意した場合、作成に多少の手間の掛かることはあるが通信時間を短縮できる。したがってサムネイルが表示されるまでの時間は短いが、オリジナルサイズの画像を表示するまでの総ダウンロード量は(サムネイル+オリジナルとなるため)却って増えることになる。一方、時間をかけて高度なアルゴリズムで縮小画像を作ることができ、視認性の悪化は比較的少ない。
作成のコツ
- 適切な縮小アルゴリズムを選ばなければならない。通常の拡大縮小で性能がいいアルゴリズムでも、サムネイル作成のような大比率の縮小では性能を発揮しないこともある。
- 自分で縮小アルゴリズムを書く場合は、補間よりはLPFにリソースを割くべきである。最も適切なのはランチョスフィルタとされるが、高度なLPFが使えなくても、縮小率に応じ周囲のピクセルを平均化するだけで品質はかなり向上する。LPFが適切なら、補間による差はほとんどない。
- PNGならインデックスカラーにして色数を減らす、JPEGならQ値を減らせば、同じ画像サイズでもファイルサイズは減る。ただし限度を超えると品質は大きく低下する。
- 画像編集ソフトによっては大量の余分なメタデータ(画像データ以外のデータ)をファイルに含める。余分なメタデータをつけないツールで再保存したり、除去専用のツールで除去できる。そう大きな比率ではないので1つ1つ除去するほどのものではないが、大量のサムネイルを扱うなら一括して除去するのは有効だろう。
- 周囲の重要でない箇所をカットするトリミングは、視認性を下げずに画像サイズを小さくできる有効な方法である。しかし、サムネイルをトリミングすべきかどうかは意見が分かれる。ユーザーはサムネイルをクリックすると同じ構図の画像が表示されることを期待するからである。
- 縮小しすぎないように気をつけなければならない。サムネイル作成者はサムネイルに何が描いてあるか知っているが、知らない者が見ても何が描いてあるかわからなければならない。
サムネイル表示機能のあるソフトウェア
画像表示、印刷物製作を行うソフトウェアにおいては、製作物の視認性を高めるためにサムネイル表示を行うことの出来るアプリケーションが多数存在する。代表例
- Windows Explorer
- Susie
- IrfanView
- ウェブサイトのサムネイルを生成
ただし、Windows2000などではOS標準機能として「ファイルの縮小版を表示する」機能が搭載されているため、アプリケーション側でこの機能が無くてもほぼ似たような結果が得られる。
「インタフェース設計」に属する用語
- ユーザービリティ
- アクセシビリティ
- ジェスチャーインタフェース
- マルチタッチインタフェース
- VUI
- GUI
- ラジオボタン
- チェックボックス
- リストボックス
- プルダウンメニュー
- ポップアップメニュー
- サムネイル
- ホバー
- ツールチップ
- CSS
- モバイルファースト
- レスポンシブWebデザイン
- リダイレクト
- 人間中心設計
「情報デザイン」の他の分野
「テクノロジ系」の他のカテゴリ
- 基礎理論(23)
- アルゴリズムとプログラミング(27)
- コンピュータ構成要素(33)
- システム構成要素(29)
- ソフトウェア(19)
- ハードウェア(18)
- 情報デザイン(27)
- 情報メディア(29)
- データベース(19)
- ネットワーク(74)
- セキュリティ(136)
このページのWikipediaよりの記事は、ウィキペディアの「サムネイル」(改訂履歴)の記事を複製、再配布したものにあたり、このページ内の該当部分はクリエイティブ・コモンズ 表示 - 継承 3.0 非移植 ライセンスの下 に提供されています。