最近のWebデザインの流行りとして、以下のようにページトップに巨大な画像をウィンドウいっぱいに表示する、というのがある。英語圏ではこのデザインは Hero(ヒーロー)などと呼ばれている(なんでやろ)。

ON OFF YES NO ON OFF YES NO
那覇市・農連市場近くにあるフレッシュジュースのお店
(このページの制作は私ではありません)

このヒーローを制作する際、画像全体をトリミングする事なく常にウィンドウぴったりに入れて欲しいという要望が時々ある。我々デザイナーはそれが矛盾を含んでいて不可能である事を即座に理解できるが、それをまったく理解しない人に最近遭遇した。ネットの掲示板でも同様の質問をしている人がいたので、理解できる人とそうでない人がいるようだ。どうも幾何学的な思考能力が弱い人がいるようである。こういう人がクライアントで、「出来ません」と返答してしまうと、「制作者に技術がない」「無能だ」というレッテルを貼られかねない。「無能なのはオマエだ」とクライアントに言い返せればいいのだが、なかなかそうも行かないと思うので、同じことで困っている人に向けて説明してみようと思う。

使いたいのは以下の画像とする。サイズは400×300、縦横比は4対3だ。こんな小さい画像を拡大したら荒れてしょうがないが、この際サイズはあまり関係ない。縦横比こそがが最重要である事をまず念頭に置いて欲しい。

fig01.png

で、ブラウザのウィンドウサイズが1200×900だとする。サイズは画像の縦横3倍(面積比9倍)だが、縦横比は4対3と図1の画像と同じである。よってウィンドウいっぱいに画像を拡大すれば、ピッタリとキレイに収まる事になる。

fig02.png

さてここからが問題。ユーザーがブラウザを操作し、ウィンドウのサイズを変更したとする。変更後のサイズは1200×675。縦横比は16対9 (A)。今の液晶テレビの規格と同じである。で、図1の画像をこのウィンドウいっぱいに表示しようとすると、図3か図4のいずれかになる。

fig03-04.png

図3は上下が若干切れてしまっている。CSS3でいう background-size: cover; の状態がこれである。これを解消しようと上下を入れようとすると、今度は図4のように左右に隙間が生じる。こちらは background-size: contain; である。この状態は、テレビ番組で古いVTRを流す時、両サイドが空いている事がよくあるので見た事がある人も多いだろう(タケモトピアノのCMがいまだにそうである)。ではまたウィンドウサイズを変更しよう。今度は768×1024。タブレットサイズで、縦横比は3対4 (B)。画像とは比率が逆になる。

fig05-06.png

すると図5、6のようになる。今度は左右が切れるか、上下に隙間が生じるようになる。図6は、家庭のテレビで映画のDVDなどを見る時によく見る状態である。テレビと映画のスクリーンの縦横比が違うためにこれが生じる。

さて、ではどうにかして (A) および (B) のウィンドウぴったりに画像を入れてみよう。すると図7、図8のようになる。

fig07-08.png

このように、縦横比の違う画像を無理矢理ウィンドウに合わせれば、当然ながら変形してしまう事になる。さて、ではこれを変形させずにウィンドウぴったりにするはどうするか。

...無理。不可能である。何をどうしても実現できない。これは、

制作者に技術がないからではなく、
物理的・幾何学的に不可能である。
縦横比の違う2つの長方形を
ぴったり重ねあわせる方法は存在しない

のである。ここまでを簡単に説明すると、「ぴったり重ねあわせるには2つの長方形が『相似』でなくてはならない(ただし回転は除く)」ので、その条件を満たさない限りは無理である。これで理解してもらえるだろうか。もしこれでも解らなかったら、もうお手上げである。後はなんとかご機嫌を取って了承してもらうか、それが叶わねば抗議して担当者を変えてもらうかしてもらうしかない。

制作者各位の幸運を祈る。

Space Colony
この書体は Space Colony — 欧文フォント買うなら MyFonts