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 への対応に一手間掛けずに済みそうな伸びではあります。 やはり同梱のブラウザは強いですね。

画面解像度

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

• 腹黒キャラクター乱用抑制呼びかけ運動

腹黒なキャラクターが好きではないのは、こういったものの積み重ねが原因だったなぁと思い出した。 十代の頃は好きだったのですけれど、あまりにも多くこれらの事例に触れてきたため、「 またかこの展開か ･･････ 」 「 このキャラもか ･･････ 」 と辟易して今に至る訳です。 嫌いではないのだけれど、やはり警戒してしまう。

そりゃあキャラクターも人間ですもの、黒い面も腹に一物もあるでしょう。 でも、テンプレ腹黒が量産されすぎていると、みんながみんな埋もれてしまうというか、折角の腹黒キャラクターが際立たないというか、折角の良さが引き出せないどころかマイナス要因になってしまうというか ･･････ もったいないなぁ。

腹黒に限らず、今だと ［ ツンデレ ］ や ［ ヤンデレ ］ などもそうですね。 属性それ自体が悪という訳では決してなく、乱用してしまうことが前述のようにもったいない。 飽和状態過ぎて飽きられてきてしまったり辟易されてしまったり ･･････

今回は主に二次創作においてでしたが、一次創作でも同じだなぁと。 わたしも作り手として自戒。

ちなみに、ウチで腹黒なのは 『 Contract×Killer 』 の零さまと燎牡くらい。
『 Plastic Colors 』 のウォードは矯正可能なヤンデレ、シリスは病み過ぎて自滅したタイプ。

関連エントリー

• 創作ベスト3バトン
• オリキャラ子バトン

一文字の日々つれづれ の 『 イラストサイトにおける5つの自己アピール手法 』 を読んで、引きこもりイラストサイトなわたしなりの自己アピール手法を2つにまとめてみました。 ･･････ まとめるも何も2つしかない。

1. バナーも全力投球
2. イラスト系検索サイトへ登録
3. 相互リンクについて

続きを読む

• アクセス数と大きく結びつく一般人の流行 - 北の大地から送る物欲日記
• アクセス稼ぎとか気にしないのが気楽 - 北の大地から送る物欲日記

これらの記事を読んで、いつもわたしが思っていることを少し。

SEO （ 検索エンジン最適化 ） のためになるべく最大限の努力をするようにしています。 それはアクセス稼ぎのためというより、ちょっとした疑問があれば Google で検索、がクセになっているわたしは、検索結果に表示されるサイトにいつもとても助けられているから、わたしも同じように誰かの助けになりたいと思っているから。

最近の例ですと 『 イラストや漫画に使用したフォントまとめ 』 がそうです。 フォント名で検索して辿り着く方が多いなあと気付き、入手元を探しているのかもと記事にしました。 イラストや漫画を見て、「 良いなぁこのフォント。 なんていう名前だろう、どこでダウンロード出来るんだろう 」 と思っても、描き手ご本人にはなかなか尋ねにくいものですよね。 こうした疑問を持つ方のためにも （ 一番は自分の備忘録のためなのですけれど ）、フォント名をメモしてあると親切かなあというのがそもそものタグ付けの理由です。 ねこまぐろ雑貨店 のフォントメモを見て、これは！と思ったのが始まり。

SEO って結局はアクセスを持っているサイト （ Google や Yahoo! など ） に媚びる行為なんだよね。

2008-08-12 ニュース - まなめはうす

だから ［ 媚びる ］ 行為だとは思わない。 「 アクセス稼ぎみたいでちょっと ･･････ 」 とか、「 結局は媚びてるんでしょ 」 みたいに思って SEO 対策しないのはもったいない！ 誰かが探している何かがあなたの書いたものにあるかもしれないのに。 出来ることを最大限やろうとすることは、恥ずかしいことでも後ろめたく思うことでも何でもないんじゃないかな。

わたしのようにイラストサイトの場合だと、SEO 云々よりも本体であるイラストをがんばることが何よりのアクセスに繋がると思うｗ　専用のサーチに登録するとか。 中身が伴わないのに外側ばかり取り繕っていても、来てくれる人をガッカリさせるだけだし、それが続くと 「 このサイトはダメ 」 と覚えて二度と足を運ばない。 辿り着いても先へ進まず閉じる。 なんという逆効果。

たくさんの人が見てくれたら良いなとは思います。 でも、［ 浅く広く ］ よりは ［ 狭く深く ］ の方が良いなとも思います。 一番は ［ 広く深く ］ ですけれどｗ　深く好きになってくれる人が出来るためには、まずはたくさんの人の目に入る必要がありますし、アクセス数について考えることは悪いことではないと思います。 が、やはり中身があるかと、何より自分が楽しめているかが大事。

アクセス稼ぎの行為自体は否定しないけれど、結局のところアクセス稼ぎ “だけ” に夢中になるよりかは、自分の書きたい事を好きに書いてた方が遠回りなようで実は結構アクセスに結びつきやすいってのが自分の中での結論 （ あくまでも私自身の場合、ですが ） なので、誰に媚び売ることもなく、たんたんと書きたいように書くだけのブログを続けてます。

アクセスが増えるってのは嬉しいし、モチベーションにもなるんだけど、情報発信してる根本は何かを書いて発信したいことがあるからやってるんだ、ってとこを忘れちゃいけないな、と。

アクセス稼ぎとか気にしないのが気楽 - 北の大地から送る物欲日記

わたしも 「 好きなものを好きなときに好きなだけ 」 という自分の根底にあるものを忘れず、楽な気持ちでやっていきたい。

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

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

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

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

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

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

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

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

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

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

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

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

という訳でまとめ。

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

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

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

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