レイアウトにひと工夫

レイアウトにひと工夫
■レイアウト設定の基準は？　加筆 ■ピクセル単位のデザインは危険？　加筆 ■読みやすいレイアウトとは？ ■読みやすいレイアウトを考える(1) ■読みやすいレイアウトを考える(2) ■字の大きさはどれくらい？ ■小説のレイアウトとネット小説のレイアウト

　サイトデザインを考えるうえで重要になるのは、訪問者の多くがどのような表示環境を設定しているのかです。

　特に画面解像度が重要になってきますね。例えば、1024×768を基準にデザインした場合、800×600で閲覧すると画面からはみ出す可能性が高くなってきます。上下のスクロールすら不快に感じる方がいるというのに、左右のスクロールなんてもう絶対に避けたいところです。

　そこで、アクセス解析とアンケートを利用して表示環境のデータを採集しました。そのデータは次の通り。

1024×768	13805	0.59%
800×600	5855	0.25%
1152×864	1574	0.07%
1280×1024	909	0.04%
640×480	242	0.01%
1600×1200	176	0.008%
その他	694	0.03%

合計	23255

　最小の解像度が640×480、最大の解像度が1600×1200。最も多かったのが1024×768で、全体のほぼ六割。次に多いのは800×600で、これと1024×768の数字を合わせると、全体の八割以上になります。

　したがって1024×768と800×600の解像度で動作確認をし、両方で適切な表示ができていれば、とりあえずはほとんどの訪問者を満足させることができると云えるでしょう。

　最近では17インチディスプレイが普及し、解像度も大きくなりつつあると予想できました。しかし現段階では1024×768だけに最適化するのは、まだ時期尚早のようです。また企業サイトでよく800×600に最適化してあるサイトを見かけますが、これでは最も多い1024×768の訪問者の不興を買う恐れがあります。ここはやはり1024×768を基準にデザインを考えるべきです。

　……なんて云いたいところですが、そう簡単にはいかないようです。次のアンケート結果を見て下さい。

▲TOP

　これは以前「あなたの表示環境教えて下さい」というアンケートで得たデータです。

　画面表示に関する部分だけ抜いてみました。

全画面表示派	14
小ウィンドウ閲覧派	13

　サンプル数は27で少ないですが、ブラウザを全画面表示させている方と小ウィンドウ表示させている方との割合がほぼ半々になりました。

　極めて興味深い結果です。

　麻鳥さんに指摘していただいたとおり、ここには表示環境（解像度）の違いも影響しているはずです。

　これは推測に止まってしまいますが、800×600といった低解像度で閲覧している方は概ね全画面表示派で、1024×768といった高解像度に設定している方の中に小ウィンドウ閲覧派が多数含まれていると考えられます。

　したがって1024×768が最多だからと云って、この解像度に合わせるのは、早計に過ぎます。1024×768に設定している方の多くが、小画面で閲覧していると推測できるからです。

　ということは、800×600かそれ以下のディスプレイサイズを想定してサイトをデザインする必要が出てきます。しかしこの小画面がどれほどのサイズなのか、これはまったく不明で予測もできません。

　ですから、ピクセル単位でのデザインは極めて危険と云えるでしょう。例えば、800×600を念頭に置き、幅600ピクセルのテーブルを利用してレイアウトを定めた場合、小画面のサイズによってははみ出したりレイアウトを崩したりします。

　このあたりは実に難しい点ですが、パーセント単位でデザインをすれば、この危険性は一応回避できます。しかし、このサイトではパーセント単位のデザインを採用していますが、極めて難しいですね。どうですか？　レイアウトが崩れて読みにくくなっていたりしていませんか？

▲TOP

　プロのWebデザイナーの方によると、テキストぎゅうぎゅう詰めサイトはそもそも見づらいそうです。適当に余白を設けることが見やすいサイトの条件と書いてありました。

　確かに、プロに依頼したと思われる企業のサイトは、余白とグラフィックが大部分を占めています。見やすさを向上させると同時に、グラフィックでインパクトを与えているのですね。

　ここで問題となるのは、そもそも小説系サイトはテキスト主体である、という点です。つまり小説系サイトは原理的に見づらいサイトになる運命にある、と云って良いでしょう。

　それでは、ネット小説でありながら、かつ、読みやすいレイアウトはあるのでしょうか。

▲TOP

　読みやすいレイアウトはいくつか考えられますが、先ずhtmlの利点を最大限に活用するなら、

グラフィックを主体とした小説ページ

　というレイアウトが考えられます。

　これはイラスト主体の小説よりも一歩進めた、絵本や漫画に近いレイアウトになります。プレイステーションなどで、サウンドノベルが好調に売れていた点を考慮すると、イラストのほか、効果音、ＢＧＭなども用意した方が、うんと読みやすく、読まれやすい小説ページとなるでしょう。ただ、かなりファイルがかなり重くなると予想されます。重いファイルが読まれないのは前述の通りですし、そのうえイラストやサウンドの出来が少しでも悪ければ、二度と人が来ない可能性もあります。

　このイラスト主体のレイアウトは、完成すれば、かなりの集客率と講読率を期待できますが、手間の割にリスクが大きいという点も考慮に入れるべきでしょう。少なくとも、僕のように、できるだけ無料でサイトを運営しようと云う個人には、無理なレイアウトと云えます。

　画才に自信のある方は、小説のイメージイラストを随所に散りばめたレイアウトにすると、かなりの人に読まれるようになるでしょう。イラストがある小説系サイトはそもそも人気があるのですから、さらに人気は上がると予想されます。

▲TOP

　イラスト主体のレイアウトを放棄するなら、どのようなレイアウトが考えられるでしょうか。ここで思い出していただきたいのは、「余白を多くした方が良い」というプロの言葉です。

　そこで、こんなレイアウトを提案します。

段落ごとに一行空ける
数行にわたる段落を避ける
片側もしくは両脇に余白を設ける

　このうち２と３は、共同研究室（掲示板）の鍵屋さんの書き込みにあったものです。自分の経験に照らし合わせても、僕はこの意見に賛成です。４は僕が付け加えました。（鍵屋さんのサイトはhttp://www.ne.jp/asahi/kagiya/tsumugidou/kitanzoushi/kitanzoushi.htmです）

　２と３のレイアウトは、僕が初めて読んだ小説ページで採用されていました。これが結構読みやすいです。初めは通常の小説のレイアウトになれていたので、「ああ、素人が小説を書くとこうなってしまうのかなぁ」などと、自分が素人の癖に思っていました。ところが、段落ごとに一行空けると、それだけでかなり読みやすくなります。特に、エッセイ・評論系の文章は段落ごとにまとまりがあるので、段落ごとの一行空けにはかなりの効果を期待できます。僕がこのページでこのレイアウトを採用しているのは、そのためです。

　４のレイアウトは、通常ディスプレイサイズ800×600で作成しているページを、1024×768にして動作確認すると、必要を実感できます。文字が小さくなった分、左端から右端までの距離をかなり長く感じますから、眼球の運動がいつもより大きくなった気になってしまうのです。これは意外に眼の疲労をもたらします。

　そこで、このページでは、両脇に10パーセントずつ空白を設けてあります。

　まあ、そこまで考えなくとも、手っ取り早く余白を作る方法ではあるので、皆さんにおすすめします。特に左側に余白を設けて、そこにサイトのコンテンツを並べると、これはかなり見やすいページになると思います。

　ただ使用するタグは<table>～</table>ではなく、<body leftmargin="（余白の数値）" marginwidth="（余白の数値）">がおすすめです。これは共同研究室（掲示板）で、さゆさんから教えていただきました。

　<table>タグを利用して余白を作ると、表示までに時間が恐ろしくかかる可能性があります。<table>タグはその中身の情報をすべて読みとってから表示されるようになっているからです。短文であれば問題はありませんが、長文になると、表示されないイライラからお客さんが別のページ（別のサイト）に飛んでしまう可能性は極めて大きくなります。

※tableタグとleftmargin・marginwidthタグについてご教授して下さった、さゆさんに感謝します。さゆさんのサイトはhttp://www19.big.or.jp/~sayu/です。

　ただ余白の作り方はたくさんありますね。例えば、ネット小悦研究室では細かなテーブルをつなげて余白を作っています。またスタイルシートを使う手もありますし、<div>タグでスタイルを設定したり、<blockqoute>を使う手もあります。いつかまとめてみたいと思います。

　ところで、ネット小説研究室の表示パフォーマンスはどうですか？　ストレスを感じるようなら、お教え下さい。

▲TOP

　僕は、字の大きさは見やすさ・読みやすさにあまり影響しない、と考えています。

　なぜかというと、「水龍公司」という僕が最も美しいと思っている中国系サイトがあるのですが、ここの文字がかなり小さいからです。文字は小さくとも僕はこのサイトが大好きですし、読みにくいと思ったこともありません。単なる「小さい文字好き」かも知れませんが。

　とにかく、「水龍公司」は小さなフォントを採用しているにも関わらず、もうすぐ十万カウントを回ろうかという超人気サイトなのです。この点からすると、少なくとも文字の大きさとサイトの人気とはあまり関係ないようです。といっても、読みやすさとの関係は依然不明ですね。

　確かに、文字が小さいとそれだけで読みにくくなりそうな気もします。ですが、ディスプレイサイズは人それぞれですから、最適なフォントサイズを定め難いのもまた事実。ここは最適なフォントサイズについて、皆さんの意見を是非聞きたい部分です。

　逆に、１４ポイント近い大きなフォントだと、これは読みにくいと僕は感じます。

　以前、ネットスケープ用に大フォントのページを作ったのですが、これをＩＥで見ると、文字が１４ポイントに拡大されてかなり読み難いと感じました。一度に視界に入る文字量が減少するため、速読できないと云うのも、その一因でしょう。

　いずれにせよ、文字サイズは見る人がそれぞれ自分のブラウザで調節しているはずですから、標準の文字サイズを基調にしておいた方が無難だと思います。ちなみに僕の父は老眼気味なので、文字サイズ最大でホームページを見ています。そうした場合、大きなフォントのサイトに移動すると、かなり読みづらいので、いちいち文字サイズを小さくする必要があります。恐らく大部分の人はそんな苦労をするくらいなら、中身を見もせず次のサイトに移動するでしょう。

　というわけで、標準の文字サイズで作った方が良い、と僕は思います。フォントの話は「フォントに注意」でもう一度触れます。

▲TOP

　小説の書き方を勉強した方であれば、小説のレイアウトにいくつかの規則があることを知っていると思います。例えば、会話文は改行して始めるとか、段落間の空白行は場面の転換点を表すとかです。

　上に述べてきたようなネット小説のレイアウトは、こうした小説のレイアウトと矛盾します。ですから、これからプロの作家を目指している人は、上掲のレイアウトを採用してはいけません。自然に書き癖として身に付いてしまうからです。

　しかしネット小説が新しい表現技法として確立するならば、それはそれで面白いことです。そうなれば、小説とネット小説は全く別の媒体となります。ですから、ネット小説だけに通用するレイアウトも、遠慮なく採用して良いことになります。

　これから先のことはわかりませんが、個人によるネット小説の発表は増加するかも知れません。そうなれば、ネット小説だけに通用するレイアウトも自然と確立されるでしょう。かえって紙媒体の小説用レイアウトは敬遠されることにもなりかねません。さて、どうなるのでしょうか。

　ところで、僕はネット小説用のレイアウトをまだ採用していません。特に段落ごとの一行空けにはかなり抵抗を感じます。これは将来作家を目指しているからではなく、抵抗を感じるからです。他人のネット小説を読む際にも、段落ごとの一行空けを見ると、つい文章の稚拙さを感じ取ってしまいます。レイアウトと文章力には何の関係もないのですが。

　というわけで、皆さんはどうなのでしょうか。インターネット上だけで通用するレイアウトを小説ページでも採用するべきでしょうか。それとも、やはり小説としての書式を遵守すべきでしょうか。よろしかったら、掲示板かメールにご意見を下さい。お待ちしております。

▲TOP