◆ ページレイアウト / WebMasterへの道 Part 13

画像やイラストを利用して、ページにアクセントをつけることが多々あります。ただし、あまり意味のない画像は遠慮しましょう。ネットワークトラフィックやリソースの消費につながります。

画像を扱うルール

写真であれ、イラストであれ、画像とは容量の大きいものなのです。当然、画像の縦横比が大きければ容量も増えます。無意味な画像の表示は慎みたいものです。

■ サムネイルの利用

どうしても画像を表示させなければならない状況が発生する場合は、１つのページにたくさんの画像を貼り込むのは避けたいところです。

例えば、１枚の写真画像の容量が 20KBと仮定した場合、５枚で 100KBにもなってしまいます。ブロードバンド環境では、耐えられる容量ですが、ナローバンドではどれほど待たされるか分かりません。

そんな場合には、サムネールを利用する方法があります。サムネイル（thumbnail）とは、直訳すると「親指の爪」で、つまり、小さく表示するという意味になります。画像のサイズが小さいほど用量も小さくなるわけです。サムネイル画像をクリックすると大きい画像が現れるという手法は、ユーザにストレスを与えません。

桜の写真のサムネイルを表示しています。クリックするとサブウィンドウより大きいサイズの写真が現れます。

(注：JavaScriptを使っています。）

黄金率とは

美術デザインの世界では、画像を美しく決めるための縦横比というものがあり、見た目に落ち着き感のある理想的な比率を「黄金率」と呼びます。

古代エジプトの時代に伝えられたこの比率は、「1：1.618」という縦横比を持ちます。

例えば、次の画像をご覧ください。


縦横比 1：1.138		縦横比 1：1.618

同じ元の写真を、トリミングを変えて編集したものです。右側の絵が「黄金率」の比率を持ったものです。比較してみて、どちらの絵が落ち着きがあると感じますか？

縦と横、横と縦の比率を「1：1.618」にすることで、写真や絵に限らず、ボックスや他の要素にも応用できる比率です。

決してこの比率でなければならないということではありません。このような「黄金率」という比率があることを知ってください。いろいろなシーンで利用することがでてくるでしょう。

初版更新日 2003/5/16