eclucifer

• web 屋が主張する 「 リキッドレイアウト 」 に騙されないために - 鍵っ子ブログ
• 「 サイトの横幅 」 再論:950px 時代のウェブデザイン - 絵文録ことのは

これらを読んで、改めて Web サイトの横幅とリキッドデザインについて考えてみました。

Before

わたしも以前は 100% 幅のリキッドデザイン （ 可変幅 ） を採用していました。
画面全体を有効に活用出来、横スクロールも出ない、俺最高！ と。

ところがあるとき、「 ブラウザを最大化すると広がりすぎて見にくい 」 とのご指摘があり、その当時は 「 見にくいならウインドウ幅調節すれば良くね？ そのためのリキッドなんだから 」 と、特に問題視していませんでした。 わたしも最大化して見てはいますが、常にサイドバーを表示しているため、そう広すぎるとは思わなかったので。

しかし、［ ウインドウ幅をそれぞれのサイトに合わせて調節しながら見る ］ ことと ［ 横スクロールバーが表示される ］、どちらも ［ 普段の環境で快適に見られないことに対するストレス ］ という点において同列のものだと気付いたのです。

100% 幅の可変デザインの問題点は理解したものの、かといって固定幅は小さい画面に合わせると大きい画面で余白がありすぎて不恰好になってしまうし ･･････ という訳で出した結論は、

• 要素の幅の最小値と最大値を指定する CSS プロパティ ［ min-width ］ ［ max-width ］
• 上記に対応していない IE6 には IE 独自のダイナミックプロパティ ［ expression ］

これらを採用する、というものです。

After

わたしのサイトはイラストサイトなので、展示するイラストの横幅の最大値 （ 600px ） を基準にします。 余白は左右 30px ずつ取り、ボーダーは 6px ずつ加えました。

モダンブラウザ用 CSS

div.sample {
	border-left  : 6px solid #E5E5E5;
	border-right : 6px solid #E5E5E5;
	min-width    : 660px;
	max-width    : 900px;
	width        : 82%; }

• 最小幅は 672px （ 600px ＋ 余白 60px ＋ ボーダー 12px ）
• 最大幅は 912px （ 840px ＋ 余白 60px ＋ ボーダー 12px ）
• その中間では、ブラウザの表示領域の 82% の幅にする

IE6 用 CSS

* html div.sample {
	width : expression(document.body.clientWidth < 691? "671px" : document.body.clientWidth > 832? "812px" : "auto"); /* IE */ }

• ブラウザの表示領域が 691px 以下の場合は 671px に
• ブラウザの表示領域が 832px 以上の場合は 812px にする

ここで注意しておかなければならないのは、< 691? "671px" と > 832? "812px" を、< 671? "671px" > 812? "812px" のように 同値にしてはいけない ということ。 幅を変えるたびにブラウザが落ちて危険です。 なんというブラクラ。 少し余白を設けるように、数値に余裕を持たせてください。

参考リンク

• モダンブラウザ向け CSS ハック - ウェブネタブログ
• IE6 で min-width, max-width を実装する CSS - Tech de Go

イラストサイトである以上、イラストの最大幅よりも小さな表示領域の場合は横スクロールバーが出てしまうのは必至、と割り切りました。 max-width が min-width と 140px 240px しか違わないのは、［ 広すぎても読みにくい ］ ということから自分が読みやすいと感じる値を算出した結果です。

最小値と最大値に迷っている方は、BROWSIZE.ORG でご自身のサイトの閲覧者の実状を研究してみてはいかがでしょうか。 サイトの方向性によって結果がガラリと変わってくるので、他のサイトでの解析結果が必ずしも当てはまるとは限りません。

追記

min と max の差が僅かしかない。 意味が無いような ･･････。

はてなブックマーク - リキッドデザイン問題は max-width と IE6 用 expression で解決 - eclucifer blog

その ［ 僅かな差 ］ で横スクロールバーが出る Web デザインになったりするので、［ 僅かな差 ］ というのは重要な問題。 と思ったけれど、考えてみれば ［ max ］ なのだからもう少し広げても良い気がする ･･････ という訳で、100px 広げてみました。

おまけ

当サイトにおける過去一ヶ月のブラウザ利用状況 （ Google Analytics 調べ ） は以下のとおりです。

ブラウザ利用状況

Internet Explorer バージョン別利用状況

まだまだ IE 独断場といった感じ。 やっと IE7 が IE6 を追い抜いたばかりですが、来年の今頃、遅くても再来年には IE6 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度

ちなみに画面解像度の結果はこのとおり。 横幅だけでなく、縦幅も考えさせられる感じ。 ヘッダを大きくしすぎて肝心のコンテンツがスクロールしないと見えない、というサイトも結構あったりしますね。

フラン☆Skin はてな支店 の 『 漫画、イラストサイトにブログが向いている理由 』 （ コメント欄 含む ） を読んでのわたしなりの意見です。

長文読むの面倒、な方は まとめ をどうぞ。

上記の記事タイトルは参照した記事への返信という形で 『 Re: 漫画、イラストサイトにブログが向いている理由 』 としていますが、記事の要約としては 『 漫画/イラスト/小説サイトがブログだと見辛い 』 ですので、それを踏まえた上で読んでください。

また、当記事はブログでサイトを公開している方を批判するためのものではありません。 制作者・閲覧者共にストレスなく作品を楽しむためにはどうしたら良いかを、言及先の記事を基に自分なりに考えまとめたものです。

基本的に tt さんのコメント、通りすがりAさんのコメント に同感です。

追記で紹介されている FLIPFLOPsONLINE さんや なぐ茶。さんのブログの使い方は、迷わず目的のコンテンツへ辿り着けるし、まとめの一覧もあってとても理想的な形だとわたしも思います。

が、ブログ形式の 絵/漫画/小説 サイトさんの一体どれほどが見易いでしょうか。 わたしが辿り着いたことのある大半のブログ式サイトさんはどれも大変見辛く、目的の作品を見られるまでに随分多くのクリックを必要としてウンザリしていました。

今ではブログ形式というだけで引き返すこともあります。 作品に巡り会う機会を自ら放棄する行為であるとは判っていても、ストレスの素になるであろうものに立ち向かう気力も余程でなければ出ないのです。

見易さや見辛さはブログ式に限らず普通の HTML 式サイトさんでも言えることですが、今回はそれはさておきます。

自分の経験した中の統計からいくと、見辛い判りにくいと思ったサイトさんはレンタルブログが多かったように思います。 初心者さんも気軽に出来るからゆえに見辛かったのか、レンタルという制約上大幅なカスタマイズが出来ないから見辛かったのかは判りませんが。

サイトの ［ 常連 ］ の立場からするとブログ式は良いですね。 フィードを購読していれば更新を自動ですぐさまチェック出来ますし、フィードリーダー上で見られてクリックの手間もない。 ストレスなく新しい作品を楽しめて良いです。

しかしながら実際、初めて訪れる方にとって見易く判り易くストレスのないサイトになっているかというと、否。 使いようによってはとても便利なブログですが、今はまだ玄人さん向けのツールと言わざるを得ないのが現状かなあと思います。

という訳でまとめ。

ブログ形式のサイトに求めるもの

• 作品一覧をまとめたページがある。
• 小説ならば次の話へのリンクがある。
• 絵/漫画の場合でも、［ 前へ ］ ［ 次へ ］ リンクがあると嬉しい。
• 最新記事の作品が続きものの場合、第一話からのリンクが欲しい。
• ただでさえ一ページの情報量が多いのだから、出来るだけサイドバーはスッキリさせていてほしい。 スクロールしなくてもコンテンツの選択が出来るくらいには。

ブログ形式の良さを受けた上で HTML 形式サイトに求めるもの

• 年齢制限などの特殊な事情を除き、無駄なエンターページは設けない。
• 最初に目にするページの判り易いところに更新情報を載せる。
• 更新情報では最新作品へのページへのリンクを設ける。
• 更新情報を楽にチェックしてもらえるように、RSS を配信する （ 『 簡単オンラインRSSメーカー 』 がオススメ ）。
• 作品を流し見出来るように ［ 前へ ］ ［ 次へ ］ のリンクを設ける。
• 改装の度に URL を変えるのを避け、なるべく恒久性を保つ。
• 止むを得ず変える場合には .htaccess のリダイレクト機能 も利用する。
• 紹介のために個別作品ページへリンクされても怒らない（笑）

わたしは小説を読むのが好きです。 特に Web 上で公開されている作品を読んで読んで読みまくるのが大好きです。 イラストサイトさんと小説サイトさんを巡る割合が 1:9 という程に小説が好きです。

たくさん巡れば巡るだけ、さまざまなサイトに出会います。 数をこなし目が肥えた分、内容だけでなく作品周りのアレコレが気になるようになりました。 もっと快適に読みたい！もっと楽しみたい！もっとずっとのめり込みたい！

そんなわたしの、小説サイトさんに求めたいことを10個にまとめてみました。 個人的に優先度の高い順に並べてあります。

登場人物の名前にはふりがなを。

初回登場時に作中で記されるのが一番良いけれど、せめて人物紹介頁には仮名が欲しい。 簡単な名前であっても、そのまま読んで良いのか合っているのか不安です。

小説にはナビゲーションリンクを。

ページの最下部に前の話と次の話へのリンクをすると、一話終えるごとにスムーズに続きを読み進めることが出来ます。 いちいち目次へ戻らなければならないのは非常に面倒で苦痛です。 サクサク物語に引き込むためにも、最低限次の回へのリンクを設けると良いのではないでしょうか。

作品の概要またはあらすじを明記する。

二次創作ならカプは必須。 ネタ系 （ 死にネタとか学園パロとか ） もあるとより興味をそそられます。 ツールチップ表示法は一つ一つリンクにマウスを当てて確認しなければならないのが面倒なうえ、パッと見読みたいと思えるものが判断出来ません。 それすらない作品タイトルだけの羅列は、読者を門前払いしているとしか思えません。

文字サイズは固定しない。

長い時間目で追う小説を、負担なく読み易いと思えるサイズは人によって違います。 サイズを固定していると、貴サイトの訪問者の多くが利用しているブラウザ 『 Internet Explorer 』 では自由に文字の大きさを調整出来ず、ストレスを抱えたまま読み進めなければなりません。

行間は適度にとる。

行間指定のない小説は、縦に読むんですか？という程に読み難いものです。 個人的には 1.6em （ 160% ） ～ 1.8em （ 180% ） は欲しいです。 しかし、開け過ぎると逆に読み辛いというのがまた難しいところ ･･････

背景色と文字色の配色は目に優しく。

よくある黒 （ #000000 ） 背景に白 （ #FFFFFF ）文字は、昔の CRT ディスプレイ では気になりませんでしたが、明るくコントラストのくっきりした液晶画面では目がチカチカしてしまいます。 黒×赤、黄×黒、赤×黒など言語道断です。 実は白背景も目に優しいとは言えないのですよね ･･････

背景画像は文章に被らないように。

肝心の文章が読み辛くなります。 背景画像はあくまでさり気ない惹き立て役で。

リンク色は既読と未読の判別が出来るものを。

どの作品をどこまで読んだのかなんて覚えていられません。 既読リンク （ a:visited ） と未読リンク （ a:link ） を color や underline などで区別させると、まだ読んでいない作品も迷わず読むことが出来ます。

ブログ形式で公開している場合、連載作品ごとに目次を設ける。

常連さんばかりではありません。 初めて訪れてくださった方に第一話からすぐ読んでいただけるように、目次用の記事があると良いのではないでしょうか。 目次を作る程でもない話数の場合は、最新話に第一話へのリンクや前回のリンクをすると親切です。

本文の書体は指定しない。

Word で制作されている小説サイトさんに多い明朝体。 書籍では基本の明朝体も、実は Web では読み辛いと感じる人も多いもののようです。 文字サイズ同様、読み易いフォントは人それぞれなので、本文の書体は指定しない方が無難です。

以上、『 小説サイトさんに求めたい10のこと 』 でした。

もちろん作品に力を注いでくださることが一番嬉しいのですけれど、こういうちょっとした読者への気配りも、作品の魅力を最大限引き出す重要な役割を果たすものだと思うのです。