趣味Web 小説 2004-12-31

Advice321　Heart Shaped Box

ご依頼人と Web サイトのご紹介

映画の感想を中心に据え、その他、日記・掲示板・リンク集など揃えて典型的な個人サイトの形に仕上げています。掲示板まできちんとデザインを調整されており、「丹精込めて作りました」という感じがあって、たいへん好感を持ちました。

管理人の yuki さんは神奈川在住の高校生。陸上に打ち込む傍ら、趣味でたくさんの映画を鑑賞され、感想を記録したものに限っても250本超というから、ちょっとしたものです。高校生というと、好きな映画は最近のものがメインなのかな?　と予想される方が多いでしょうが、これが意外に渋い。いや、より正確に（?）いえば「バランスがいい」ように思いました。……なんていうほど、私は映画を知っているわけではないのですけれども、フランク・キャプラ監督の作品が大好きな高校生というのは貴重ではないでしょうか。

同時代の映画ばかり追いかけていますと、せっかくたくさん観ても、同世代の人としか話ができず、つまらない思いをすることがあります。それでは意味がない、などと極端なことをいうつもりはありません。まず自分が楽しいことが大切だ、というあたりも異論が少ないでしょうからさておき、テレビも映画も本も、人と語り合う話題としての価値も馬鹿にできたものではないと思うのです。

日本史上最もレコード（CD 含む）が売れたのは、バブル崩壊後のカラオケブームの時代でした。コミュニケーションの力が音楽需要を牽引したのです。映画の場合、それほど強力なエンジンはありませんが、ウィリアム・ワイラーやヒッチコックのヒット作を観ていると、幅広い世代の方と会話できます。映画が取り持つ人の縁はたしかにあって、私もこれまで、ひょんなことから意気投合して（とまで書くと嘘になりますが）、すんなり話が通ったことも一度や二度ではありません。

2004年10月29日にテレビ放映された「ローマの休日」が視聴率16.1％を記録して話題になりましたが、1953年の映画が今も愛され続けているあたり、映画文化の懐の深さを感じさせます。

ご相談の内容

サイト名は『Heart Shaped Box』で、簡単な映画の感想を載せたサイトです。映画の感想の本文のページに色々と問題があることを自覚しているのですが、どのように直せば良いか試行錯誤している途中なので、その辺のアドバイスを中心にお願いします。勿論、その他のページや文章の内容についてでも何かあればお願いします。それでは、いつになっても構いませんので、よろしくお願い致します。

いくらいつになっても構いませんといっても、更新停止後にアドバイスするのでは、さすがに遅過ぎますね……。

アドバイスいろいろ

ご依頼には映画の感想の本文のページに色々と問題があることを自覚しているのですが、どのように直せば良いか試行錯誤している途中とあるのですが、じつは10月にリニューアルされまして、最近の感想ページではデザインが一新されています。今までのページがdiv要素依存で文字サイズ固定というひどいものだったので、これでかなり改善されたと思います。ということで、yuki さんが気にされていた問題は、既に解決したといってよいのではないでしょうか。

私がさっさとアドバイスしていれば、お手間を取らせることもなかったわけで、役立たずで申し訳ありません。

参考までに、映画感想の本文等はCSSでがっちりとレイアウトされている状態なので、直すのには手間がかかりそうです。という試行錯誤中の記述を活かしつつリニューアルに取り組んだテストケースを示します。

幅固定・文字サイズ固定の利点

幅固定・文字サイズ固定は、アクセシビリティやユーザビリティの観点から批判されることが多いのですが、単純には否定しきれません。

  • SVG 以外の画像を文字サイズの拡大縮小に追従してきれいに拡大縮小表示できるブラウザはありません（Opera の機能も不完全／ラスター画像の原理から考えて不可能ともいえます）。したがって、画像と文字サイズの適切なサイズ比に依存した視覚効果を実現したい場合、文字サイズの固定が必要になります。
  • 1行字数について、こだわりを持っているデザイナーは少なくありません。となると、文字サイズに対して文字領域の幅を決める必要があり、文字サイズが固定されているならば、当然のように幅も固定されることになります。
  • 画面全体のレイアウトを考えるとき、写真やイラストなどの非循環紋様の画像を上下の枠囲み（のようなもの）に使用する場合、SVG の利用がまだまだ現実的でないこともあって、画像の大きさに合わせて幅が固定せざるを得なくなることは少なくありません。
  • 大半の閲覧者が 1024×768 または 1280×1024 の画面いっぱいにブラウザを開いて閲覧していることから、コンテンツ領域を横幅 760px 程度に固定すると、大半の閲覧者にとってちょうど見やすい幅となります。コンテンツ領域の幅固定の主な難点は、「表示領域が固定幅より小さい場合に読みにくいこと」「高解像度のモニタを使用する場合、コンテンツ領域が小さくなり過ぎること」です。しかしデファクトスタンダードが存在する現状においては、大半の閲覧者が納得できるならそれでいい、という考え方も現実的には通用するのであって、CSS による幅固定は一概に否定できないと私は思います。
  • 表示領域に対する % 値でコンテンツ領域の幅を指定すると、表示領域が非常に小さい場合、たいへん読みにくくなります。逆に表示領域が非常に大きい場合には、1行字数がどんどん増えていくことになります。別にそんなことは問題ではない、と考える人ばかりではないはずです。結局のところ、極端なケースを持ち出せば、どんなデザイン手法も問題を抱えており、一般的に想定される範囲において問題なく表示できるのであれば、幅固定をとくに否定する理由はありません。
  • 同様に文字サイズも、14～18px あるいは 12～16pt の範囲であれば、固定しても大勢が困ることはありません。どうしても困るという方には、IE の利用者であれば、「ツール→インターネットオプション→ユーザ補助→Web ページで指定されたフォントサイズを使用しない にチェックを入れる」という手順により CSS による文字サイズ指定を解除できることを教えることで問題を回避できます。
作業方針
  1. マークアップになるべく div 要素を使わないようにしたい、という希望もありましたので、「映画感想No.34」を原本とし、まずはマークアップを私流に変更してみます。
  2. 幅固定・文字サイズ固定のデザインを再現します。
  3. 原本の雰囲気を活かした、私なりの幅固定・文字サイズ固定の排除案を示します。
1．マークアップの変更
原本
HTML 概要

<h1>文書タイトル</h1>
<h2>作品名</h2>
<div class="gazou">ジャケット写真</div>
<div class="databox"><p class="data">ナビゲーション</p></div>
<div class="movie-honbun">感想</div>

HTML ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（中略）
<body>
<h1>映画感想No.34</h1>
<h2><a name="1">Shall we ダンス？ ★★★★★★★★★（９）</a></h2><br>
<div class="gazou">
<A HREF="http://www.amazon.co.jp/dp/B0001JZHHG/heartshapedbo-22"><IMG SRC="shallwe.jpg" border="0" alt="イメージ画像" hspace="3" vspace="3"></A>
</div>
<div class="databox"><p class="data"><a href="./movie.html">戻る</a> <a href="./index.html">トップ</a><br>9.15.2004（ビデオ)</p></div>
<div class="movie-honbun"> １９９６年、日本。周防正行監督作品。ごく平均的でつまらない生活を送っている役所公司演ずるサラリーマンが、社交ダンスとの出会いをきっかけに人生が変わる様子をユーモラスに描いた作品。ダンス教室に入会する際に一万円・三万円・五万円のどのコースが良いか訊かれ「じゃあ一万円で。すみません―」と何故か謝っていたような情けない男が、「ダンスを馬鹿にするな」と職場で怒鳴るようになるまでに変貌する様子が何とも爽快で面白かったです。脇を固める個性溢れる俳優陣もそれぞれにはまり役で、中でも竹中直人のアクの強い演技は最高に魅力的。</div>
</body>
</html>

CSS
原本のスクリーンショット

原本のスクリーンショット

目標はシンプルです。

構成要素を枠線で明確化

文書の構成要素を明示した様子

  • 文書タイトル
  • 作品名
    • ジャケット写真＋ナビゲーション
    • 感想

ナビゲーションの位置が妙ですが、気にしないことにします。

適当な要素を割り振る

要素の割り振りを行った様子

<h1>文書タイトル</h1>
<dl>
<dt>作品名</dt>
<dd class="gazou">ジャケット写真＋ナビゲーション</dd>
<dt class="movie-honbun">感想</dt>
<dd></dd>
</dl>

変更案の HTML ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（中略）
<body>
<h1>映画感想No.34</h1>
<dl>
<dt><a name="1">Shall we ダンス？ ★★★★★★★★★（９）</a></dt>
<dd class="gazou"><p><a href="http://www.amazon.co.jp/dp/B0001JZHHG/heartshapedbo-22"><img src="shallwe.jpg" alt="Shall we ダンス？" width="103" height="145"></a></p>
<p><a href="#">戻る</a> <a href="#">トップ</a></p>
<p>9.15.2004（ビデオ)</p></dd>
<dd class="movie-honbun"> １９９６年、日本。周防正行監督作品。ごく平均的でつまらない生活を送っている役所公司演ずるサラリーマンが、社交ダンスとの出会いをきっかけに人生が変わる様子をユーモラスに描いた作品。ダンス教室に入会する際に一万円・三万円・五万円のどのコースが良いか訊かれ「じゃあ一万円で。すみません―」と何故か謝っていたような情けない男が、「ダンスを馬鹿にするな」と職場で怒鳴るようになるまでに変貌する様子が何とも爽快で面白かったです。脇を固める個性溢れる俳優陣もそれぞれにはまり役で、中でも竹中直人のアクの強い演技は最高に魅力的。</dd>
</dl>
</body>
</html>

というわけで、無事に（?） div 要素の排除に成功しました。

2．デザインの再現
CSS を書く

これは簡単。dd 要素を float:left; として2段組を作るだけです。原本の CSS は position:relative; を駆使して段組を実現しているため、段組するブロックの内容量によって面倒な条件分岐をしていました。float:left; なら、複雑な計算は無用です。その他、簡略な記法を使って全体に記述をコンパクトにまとめています。

*
{margin:0; padding:0;}
body
{padding:1em; background:#fefefe url(hikei.jpg) fixed no-repeat 100% 100%;}
h1,dl,dt,dd,p
{margin-bottom:11pt;}
h1
{color:#339900; font-family:Verdana,cursive; border-bottom:3px solid #390;}
dt
{line-height:18pt; font-size:15pt; font-weight:bold;}
dd.gazou
{width:120px; float:left; font-size:9pt;}
dd.movie-honbun
{width:300px; float:left; background:#fefefe; font-size:11pt; line-height:18pt;}
img
{border:none;}
a:link,a:visited,a:hover,a:active
{color:#333; text-decoration:underline;}

再現案スクリーンショット

再現案

3．幅固定・文字サイズ固定の排除案

難題、だと思います。結局、ジャケット写真は拡大・縮小できないわけです。どう頭を悩ませても、文字サイズとのバランスは、一定になりません。1行字数にこだわるとします。この場合、画面を小さくし、文字を大きくすると、悪名高き横スクロールバーが簡単に生じます。幅を表示領域に対する % 値にした場合の問題は前述の通り。

よくある閲覧環境において、そこそこ問題なく表示され、原本の雰囲気を残すには……という線で妥協点を探った結果を以下に示します。

スクリーンショット

スクリーンショット

何となく騙されているように感じる方も多いかもしれませんが、ぜひ3つのサンプルについて、文字サイズをいろいろ変更してみてください。

  1. 原本
  2. 再現案
  3. 改善案
CSS

* {margin:0; padding:0;}
body
{padding:1em; background:#fefefe url(hikei.jpg) fixed no-repeat 100% 100%;}
h1,dl,dt,dd,p
{margin-bottom:11pt;}
h1
{color:#339900; font-family:Verdana,cursive; border-bottom:3px solid #390;}
dt
{line-height:1.2; font-size:150%; font-weight:bold;}
dd.gazou
{width:120px; float:left; font-size:90%;}
dd.movie-honbun
{width:21em; float:left; background:#fefefe; font-size:100%; line-height:1.5;}
img
{border:none;}
a:link,a:visited,a:hover,a:active
{color:#333; text-decoration:underline;}

yuki さんの解決策

yuki さんの改善案

「幅固定・文字サイズ固定の排除」という課題には、過去、何度か取り組んできました。可能な場合も不可能な場合もあって、結果は一様でないのですが、yuki さんご自身の回答を拝見して、「やっぱりそうきたか」と思いました。

デザインを変更されているのです。

ちょっと寂しい感じもあった画面に華が生まれ、たいへんよくなっています。私の回答より、ずっといいと思う（とくにナビゲーションの配置など）。やはり、ひとつのデザインに固執せず、思考を柔軟に切り替えていくことが大切なのでしょう。

幅固定・文字サイズ固定の排除は、確実に、いくつかのデザインの放棄につながります。それは我慢できない、というのもひとつの見識でしょうけれども、個人サイトの場合、そこまでこだわる意味が果たしてあるのかどうか。逆に「幅固定・文字サイズ固定の排除」というテーマにこだわる意味も小さく、「どうでもいい」という答えが導かれそうな雰囲気もありますが、今、悩んでいる方にとっては「デザインを変えてもいい」という発見は、大きなヒントになるかもしれません。

私は yuki さんの決断は非常に評価できると思っています。新しい記事から新デザインにすればいい、過去ログは、そのままでいいんじゃない?　というスタンスは、個人サイトのリニューアルの王道です。

関連記事一覧

Information

注意書き