異世界ファンタジー系オリジナル小説をメインコンテンツとする、日向葵さんのウェブサイトです。小説を書き始めたのは99年頃だそうですから、もう8年目。快速ペースでサイトを更新中なので、この事実は意外でした。なかなか続かないものなのです。
閲覧者数は1日200～300人、もちろん上を見ればキリがありませんが、成功しているケースといってよいでしょう。ウェブ拍手や掲示板への書き込みは決して多いとはいえませんが、少なくとも全くの無反応ではありません。応答が面倒にならないペース、と肯定的に見ることも可能です。
いくつもの100の質問への回答がきちんと（?）保管されており、こうしたことのひとつひとつが日向さんの人柄を伝えているように感じられました。
小説の雰囲気重視のため、小説の目次ページは、その小説によって変えています。
（中略）
最近ＨＰのデザインについて考えるようになったのですが、本や講座のサイトを見て修正しても、自分のところがそれらを実践できているのかよくわかりません。
- 見やすいデザインになっているのか？
- 訪問された方がＵターンしてしまうような構成になっていないか？
などの点について、アドバイスをいただければと思います。どうぞよろしくお願いします。
各ページの外観、サイトの構造やナビゲーションといったあたりに不安がある、ということでしょうか。
小説の雰囲気重視のため、小説の目次ページは、その小説によって変えています。
興味深いテーマなので、ここから話を始めます。
定石に従うなら「デザインは揃えておいた方がよい」わけです。けれども現実問題としては、それほど神経質になる必要はありません。微妙な話になりますけれども、私の判断基準を書くならば、少なくとも趣味レベルにおいては、「統一された基本デザインを元に各文書群に合わせてカスタマイズしていく」という方針を守る限り不都合はないであろう、と考えています。
具体的な作業手順は、1．基本となるデザインを作る 2．全ページを基本デザインに準拠して作成する 3．基本デザインでは不満のある文書をピックアップ 4．カスタマイズしたいポイントをリストアップ 5．一部文書群のデザインを一部変更する といった感じになるでしょう。ポイントはハッキリしています。ゼロからの新設計を行わない、これです。
わかりやすくするために、いったん全ページを基本デザインに準拠して製作する、としましたが、実際にはそうまでする必要はありません。最初の1ページだけは、基本デザイン準拠で作り、そこからカスタマイズを始める、それで十分です。ただしそこに例外があってはいけない。自己紹介でもリンク集でも100の質問でも同じように、基本デザインから出発しなければなりません。
いくつか実践例を示します。
「にゃごろう村」は私が初めて本格的に関わったウェブサイトです。転載リソース集にその変遷をまとめてありますが、8ヶ月の間に2回も全文書のソース書き直しを行っています。最終的にはかなり整理されたとはいえ、一時期、文書数は200を越えていたわけで、全部手作業でよくやったものだと思う。山田大佐が文章を書き、私がサイトのデザインを決める、という分業だったからこそ可能だったのではないか。
最終的に、苦労が報われたとはいい難いのですが、デザイン思想の変化はここから読み取れるかと思います。次第に「テンプレート志向」が強くなっていったわけです。
当初は全ての文書がオーダーメイドでした。それぞれの文書の内容に合わせて、山田大佐が考えに考えてリンクアイコンを決め、背景画像を設定していました。私がサイト製作のスタッフとなっても、しばらくそれらの判断に口を挟むことはできなかった。サイトの端から端まで熟慮の末に設計されていたのであって、私が自説を通すためには、その全てに反論していかねばなりませんでした。無論、それは不可能です。
原形をとどめないほどの全面リニューアルが行われたのは10月、それまでにかかった半年という月日は、山田大佐が私の攻勢にうんざりしてデザインへのこだわりを捨てるまでの時間だったといえます。しかしこの時間的猶予があればこそ、私は自由な改変が許されていたトップページのデザインを幾度となく作り直し、そのときの自分としてはまずまず納得のできるデザインに到達できたのでした。
当時、私は山田大佐謹製のデザインに何か不満があったからこそ、その改訂に闘志を燃やしていたのですが、具体的にそれが何であるかということは、長らく自覚できませんでした。私のテンプレート志向は試行錯誤の中で見出された回答だったのですが、後に様々なデザイン指南書を読んで「そういうことだったのか」と思ったことがありました。
それは、「ウェブサイトは一貫したナビゲーションを提供するべき」という原則です。さらにいくつか付け加えるなら、「閲覧者の希望を最短距離で実現せよ」「シンプルにわかりやすく」などの標語も有用かもしれません。
こうした目標を掲げて作業すると、「ゼロから組み立てられた多様なデザインに後付けで統一感のあるナビゲーションを付加してデザインの整合性に悩まされるのは無駄が大きい。基本的なナビゲーションが用意されたテンプレートを用意し、最初からその枠内で自由にやる方がよい」という考え方が出てくるのは自然です。
「趣味のWebデザイン」では全ページがほぼ同じデザインで、これはまた極端かもしれない。じつのところ単に私の面倒くさがりが発揮されているだけだったりしますしね。だからこれを真似する必要はないのですが、ともあれ日向さんにはですね、「テンプレート志向」をご検討いただきたいと思うわけです。
よろしいですか、「自由に作成された文書に後から共通部品を入れる」のではなくて、「共通部品全部入りの基本デザインを用意し、自由にやっていいと決めた部分で自由にやる」のです。ひとつふたつの文書を作る分には、さして違いはない。けれどもサイト全体をきちっと構成していけるのは、おそらく後者の方法であろう、と私は経験的にそう思います。
Advice332 で作成したものです。原本の表紙のデザインを CSS で再現し、それを他のページにも適用していきました。CSS を使ったこと自体にさしたる意味はない。ただ、それが私にとっては最も簡単な方法だった、ということですね。
このときのアドバイスは、最重点のテーマが今回と一緒なので、ぜひご一読いただきたい。
改善案では、大見出しの下に画面を貫く線を用意すること、背景画像を統一すること、この2点に留意することで、とっ散らかった印象が払拭されるのではないか、と提案しています。しかし表紙だけは原本に似せようとしたところでネジレが発生し、前記2点と配色を除けば表紙とそれ以外でかなりデザインが異なる結果となり、CSS も2種類用意する無駄があります。
アドバイス本文にも混乱があって、デザインの統一ということに関していえば表紙以外のページについて言葉を割くべきところ、原本を CSS でいかに再現したかという話を延々とやっている。しょうがないので、ここで少し補足解説します。
最近では CSS もすっかりプロの道具となってしまって、プロというのは何だかんだいって結局のところ儲かるところに注力するわけで、今ならそれは見た目と検索エンジン対策の世界である、と。そういうレベルで CSS を使いましょうということだから、デザイン屋の作った完成図を何とか HTML＋CSS で再現しようと頑張る。class だの id だのをガンガン使って長大なスタイル設定をする。
趣味レベルでも、ブログのテンプレートなんてことになると、やっぱり class と id が乱舞するすごいスタイル設定が平気で使われたりする。
私を含めて一般人が CSS を使おうというときに、こうした最近の動向みたいなものに目を奪われても、あまりいいことはない。たいてい、話を見誤ってしまうからです。
なぜプロの作ったサイトで class と id が多用されるのか。ブログのテンプレートでもそうなのか。答えは簡単で、HTML の仕様が非常にシンプルであることにその原因がある。シンプルなものをそのままスタイル設定すると、例えば順不同リストの見た目は1種類だけになってしまう。順不同リストをマークアップするために用意されているのは ul ようそだけですからね。でもそれじゃ困るわけでしょう。
標準的なブログにはいくつぐらい、見た目をちょっと変えて別のものだと示したいリストがあるでしょうね? 少なくともリストは1種類でいいということにはならない。「リストはリストでもコメントリストです」となれば comment とかいう class 属性を付しておかなきゃまずい、みたいな話になる。
完成図が先にあるプロの場合も同じで、完成図の中に見た目の違うリスト（っぽいもの）が5種類あれば、単純には5種類の class 属性値の設定がそれぞれに必要なんですね。
こういう完成図を実現するんだとか、ブログってのはとにかくこういうもので、みたいな先に条件が定められてしまっている中で、HTML と CSS に負担がくるという仕組みなんです。行き当たりばったりで class が増えちゃってるのではない。ここを勘違いしてはいけないと思います。
日向さんのサイトでは、ほぼ全文書に外部スタイルシートが読み込まれています。でも残念なことに、それが十分活用されているとはいいがたい。各文書内の装飾の多くが、インラインスタイルシートや bgcolor 属性のような「毎度々々同じような記述を繰り返す必要がある」手法でなされているのが実情です。
するとどうなるか。とくにデザインを変える必要がないところで、どんどんバリエーションが増えていってしまう。前に別のところでどんな装飾をしたのか、忘れてしまう。その場の思いつきでベストのデザインを考えていくと、同じ人間の発想だから何となく似た雰囲気にはなるけれど、やっぱり同じにはならない。人間はそれほどカッチリした生き物ではない。
とりあえずサイドバーに話を限定しますけど、上記3文書のサイドバーのデザインがそれぞれ異なっている意味は何でしょう? もちろん各々に理由はあると思う。少しでも見やすく分かりやすく、そういうことを考えてデザインが決まったのには違いない。どれも悪くない選択だと思う。でも、デザインの不統一は謎です。
サイドバーのデザインは一例であって、全般にデザインのバリエーションが豊富過ぎる、と私には思われます。見出しの背景が白・黒・灰色・モノクロのグラデーション・背景なしの太字だけと多様だったりするのもそうだし、情報をまとめた表の組み方や背景色、幅などに法則性が見出せないこともそう。
日向さんのレベルが低いのではありません。誰でもこうなるんです。むしろ日向さんは、構成のしっかりした小説や、きれいにまとまったイラストをお描きになるだけあって、かなり頑張っていると思う。
ポイントは「ルールは先に用意しなくちゃいけない」ということです。でもプロみたいに先に完成図を用意するなんて、まず無理でしょう。汎用性のある完成図を作るのはかなり難題です。その場の思いつきで何枚も完成図を描いていくなら、単に作業量が増えただけとなってしまいますよね。そもそも、これから何を始めるか分からない、そういう可能性の曖昧さに個人サイトの魅力があったりもするのではないですか。
ではどのようなルール設定をしたらいいのか。
それは「HTML と CSS をストイックに使うこと」ではなかろうか、というのが私の回答です。「市場へ行こう」の原本と改善案のソースを見比べていただければ、おわかりいただけると思う。見出し、リスト、段落といった基本的な要素を、なるべく class 属性や id 属性を付さずに用いるようにする。この制約がデザインの中に繰り返しのリズムを、一貫性を作り出していく。
ちょっと待った、小説毎にデザインを変えたいんだ、と。
ええ、そういうお話でした。私なら、次のようにします。
ヘッダー <div id="小説のタイトルなど"> class 属性値やインラインのスタイル設定のない見出し、段落、リスト </div> フッター
テンプレート志向とは、例えばこういうことだろう、と思うわけです。基本デザインを最大限活かす、個別の状況への対応は最小限の改変の手間で済ませてしまう。そうした原則を持って、さあどうしようかと考えるのです。
たった一つのスタイルシートで全部の装飾についてスタイル設定してみた事例。特定の HTML 文書だけに出てくる背景などをどう処理しているかというと、例えば <body id="cover"> などとやって、CSS に body#cover{略} という記述を追加してあるだけです。
html,body,h1,h2,p,ul,li,dl,dt,dd,div,a,em
{margin:0; padding:0; font-size:12px; line-height:1.4; font-style:normal; font-weight:herit; text-decoration:none; background:transparent; color:#333;}
body
{width:85%; padding:5%; background:#fff;}
h1,h2,p,ul,dl
{margin:1em 0;}
h1
{padding:0.2em 0.5em; border-bottom:1px solid #333; font-weight:bold;}
li
{margin:0.3em 0; list-style:none;}
li ul
{margin:0;}
li li
{display:inline; magin:0.2em;}
dt,#cover p
{padding:0.2em 0.5em; border:1px dashed #eca;}
a
{color:#f93; border-bottom:1px solid #fdb;}
a:visited
{color:#c60;}
a:hover
{color:#000;}
em
{font-weight:bold;}
img
{border:none; vertical-align:text-bottom;}
hr
{clear:left;}
/* menu */
body#menu
{padding:10px 0 0 20px;}
#menu h1
{padding:0 0 1em; border:none;}
#menu dt
{margin-top:2em; width:5em; border-width:1px 0 0 1px;}
/* cover */
body#cover
{background:#fff url("kikirara.jpg") no-repeat fixed 100% 100%;}
#cover div
{position:absolute; top:80%; left:5%;}
/* bookmark */
#bookmark div
{width:48%; float:left;}
ここまでに書いてきた話をどう読むべきか、という話を（アドバイスのたびに書いていることですが今回もまた）します。
こうしたほうがいいという意見を聞いて、そうかなるほどと思ってサイト全体のリニューアルを始めてしまうのは、お勧めできません。既にこれほどの規模に成長しているサイトです。いったいどれほどの労力がかかるかわからない。それでいて、効果の方は微々たるものでしょう。
見やすいデザインになっているのか？
訪問された方がＵターンしてしまうような構成になっていないか？
正直なところ、問題というほどの問題はないと思います。とくに閲覧を邪魔するような要素はないし、人が逃げるようなデザインでもない。
最近はめっきり廃れてしまいましたけど、以前はそこかしこに「HP評価掲示板」みたいなものがあって、評価依頼者のサイトを掲示板の住人が見に行って意見をするという文化がありました。そうしたところで意見を聞くと、「また訪問したいとは思わない」とか「すぐにＵターンした」といった酷評がガンガン出てくるわけです。でも、私はそういうの、あまり参考にならないと思いますね。
日向さんご自身の閲覧行動を振り返ってみてほしいわけです。世の中には無数のウェブサイトがあるけど、その中のごくわずかしか見ようとしない、読もうとしない。デザインも内容も素晴らしい! と感激しながら、それっきりになっているサイトなんて、たくさんあるでしょう。いま日向さんが好きでよく行くサイトが10個あるとして、それは日向さんにとってウェブで出会った最高に素晴らしいサイトBEST10なのでしょうか?
違う、でしょう。
ウェブリングとか同人系のサーチエンジンなどを経由して自分の知らないサイトをどんどん見ていくと、とてつもなく下手な絵しかないサイトや、こんなの誰が読むんだろうと不思議に思うような小説しか置いていないサイトがいくらでもあることを、あらためて実感させられます。サイトの見た目だって、やろうと思ってもここまでひどいのはそうそう作れまい、と苦笑するレベルの事例がある。
ではそれらのサイトに閲覧者はいるのか。たしかに悲惨なレベルになると本当に著者以外に見る人がいないのですが、真ん中くらいのレベルなら、誰かが好きでその絵を見にきている、お話を読みにきている。トップクラスのサイトと比較すれば、100分の1、1000分の1の人数かもしれませんよ。でもゼロじゃない。
トップだって無料で作品を公開しているのだから、常識的には平均レベルのサイトなんか見るだけ時間の無駄じゃないか、と第三者は思う。それがHP評価掲示板住人の意見です。でもそれはおかしいですよね。
平均的なレベルのサイトの読者は、自分の訪問しているサイトが客観的に最高のサイトじゃないことをよくわかっています。わかっていて、時間と多少の手間を注ぎ込んでいるのです。
主観の力は強い。サイトの人気なんてのは格差社会の最たるものですが、そんな世界でもありふれた人々はみな世界でただ一人の存在としても認識されています。よっぽどひどくない限り、誰からも見捨てられてしまうことはない。
なんといいますか、サイトの見た目をどうこうしようというのは、モテるための努力に似ているのです。みんなにちやほやされるほどの存在には、並大抵の努力ではなれやしない（あるいはどんなに頑張っても無理）。でもよく考えてみると、別に大勢に愛されなくたっていいわけですよね。
幸せに生きるための条件は、じつのところよくわからないのです。なんであの人が、みたいな事例はいくらでもあって。上（とあなたが考える人）から順番に幸せになっていくわけじゃない。
平凡な一般人のファッションなんて、半ば自己満足の世界で、あるいは社会で生きるための「たしなみ」程度のもの、文化というか慣習みたいなものに従って、ちょっと気をつけておけば「必要」は満たされる。でも自分にとっては、かなり気になることだったりする。いい服を着たら気分もよくなったりして。けっこう主観的な幸福感と関係は深いのではないか。
サイトのデザインなんて、そんなものだということです。好きでサイトいじりをやっている分には何も問題はない。徹夜して取り組んだっていいですよ。きっと楽しいと思う。でも強迫観念にとらわれて没入していくのはよくない。やってもやっても目に見える成果なんて全然なくて悲しくなっちゃう。
とりあえず、どこからはじめよう?
新しくページを増やすとき、私のアドバイスを参考にしていただければ十分だと思うのです。
ファッション誌を読んでいろいろ感銘を受けても、古い服を全部捨てて買い直したり、しませんよね。これから買う服、これからの自分の髪型、そういうものを変えていけばいいんじゃないでしょうか。もちろん雑誌もいろいろあります。読むたび影響を受ける必要なんか全然ない。「こんなダサいの、信じられない」と放り出したっていいのです。
数百人の読者がいるサイトです。自信を持って運営していただければよいと思います。
総論ばかりでは話が漠然とし過ぎているので、最後は各論を少々。
具体的に何をすべきか、というのは難しい話で、別にどうやったっていいと思う。なのでこれから書くことも、あくまで一例として読んでいただければ。
とりあえず手をつけてみるといいのは、サイトの表紙から直接リンクされているページのチェックです。それらのページにはみな共通のデザインのヘッダーとフッターがありますが、よく見るとそのデザインに統一性がない。全角スペースが1つなのか2つなのか、Web拍手はヘッダーの中なのか、フッターにも入れるのか、それとも本文領域に置くのか? こうした不整合をまず消す。
意図的にやっているなら、いいのです。でも、私にはそうは見えない。場当たり的にやってきた結果、心ならずも現状のようになってしまったのではないか。こうしたガタつきは、直した方がいいと思う。
作業の過程で、サイト内の様々な文書のパターンを認識することになります。そして試行錯誤の末に、何らかの形が定まり、サイト全部ではないけれど主要ページ全てに共通のデザイン要素が入ります。そのとき、これからの「基本デザイン」について構想が固まることでしょう。
続いて、スタイルシートの整理を行います。
表紙のリンク先（1段階のみ）から、インラインの装飾指定を排除し、それでいて CSS の数は2つに限定します。1つはヘッダーとフッターのみ、もう1つはそれ以外全部のスタイル設定を担当します。そして全体のシートにヘッダーとフッターのシートを @import で読み込むのです。
小説本文の装飾は、作品毎に変えると決まっていて、サイトの目次などとは全く別の見た目となっているわけですが、これはこれでありだと私は思う。だから各作品に固有のスタイルシートがあるのは構わない。
この設計にはいいところがあって、例えばサイトのリニューアルをする際に、最も多くのページ数を抱える小説本文はデザインを変更しないでいい。サイトの表紙のデザインと小説本文のデザインは対応させないというのがもともとの方針だし、そのことは読者にも一目瞭然だからです。
しかしひとつ困るのが、共通のヘッダーとフッターが小説の本文にも導入されているケースがあること。一部であれ共通のデザイン部品が入り込んでいるならば、その部分だけサイトのリニューアルから取り残されてしまうことは避けるべきです。
そこで、基本デザインの CSS からヘッダーとフッターの部分だけ取り出し、一部の小説本文の装飾用の CSS からも @import で読み込めるようにしておく、というわけ。
実態がどうなっているかは別として、同人系サイト界隈では Google などの一般向けの検索エンジンで同好の士を見つけたりはしないという文化があります。他文化の人はどうせ常連読者になどなりはしない、と考えるならば、同人系サイトは主要な読者層はみな表紙からくると仮定して設計できます。またそうした設計は、望まない読者層を静かに排除する機能も有します。
したがって、SEO を重視するような、幅広い層から流しの客をつかまえようとするタイプのサイトにおけるデザインの定石は、同人系サイトに当てはめる必要がない。小説本文とサイトの基幹部とで全く見た目が異なっていてもかまわないとしているのは、そのため。
では全てのページのデザインが異なっていてもよいだろうか? そういうことじゃないのですね。小説の多くは複数のページにまたがる長大な作品。前後のページへのナビゲーションリンクをどこかに用意すべきですが、その配置やデザインがバラバラだったら興を削がれてしまいます。それに配色や画像選択のセンスがハチャメチャであれば、作者のセンスが疑われることにもなります。
では着地点はどのあたりか。私は、雑誌の紙面デザインが参考になると思っています。文庫や単行本ほどのデザイン統一を行わなくとも、雑誌の色は十分に作り出せるし、逆にそれができていない雑誌は、素人目にも野暮ったく見えるものです。
デザイン統一の度合いは編集長の方針次第。私にはその領域まで口を出すだけの経験も見識もありませんから、今回のアドバイスでもそこは突っ込まない。ただ、現状から最低限の手直しをしていくとすれば……というアプローチは、デザインを考えるヒントを提供する上では有用なんじゃないかな、と思っています。
また「ひまわり畑」は表紙・目次・本文の構成となっており、私は表紙と目次をサイトの基幹部分としてデザインの共通性を高めることを勧めています。圧倒的にページ数が多いのが本文であり、目次まで作品別デザインとしてしまうと、サイトとしての一体感があまりに希薄になってしまうだろう、また日向さんも目次までは共通のナビゲーションを提供しようと努力されている、といった理由によります。
目次についてある程度の自由度を持たせてよいといっているのは、逆に表紙と目次が全く同一のデザインだとすると、今度は目次と本文のつながりがデザイン上、遠くなりすぎてしまうだろう、と。だから例えば本文と同じ背景画像やイラストなどを目次に配置できるよう、一定の自由度がほしいと思うのです。
さて、文書内での場当たり的な装飾指定を廃止しつつ、外部スタイルシートも2つきりとするのは、実際にやってみると大変な重労働となります。だから表紙＋リンク先1段階だけでも全部は無理かもしれない。でも2～3ページだけでも、やってみてはいかがでしょうか。
今後、新しくページを作るときから新しい更新スタイルに移っていけばいい、ということを書いたけれども、その練習は古いページのリニューアルが最適だと思います。
アドバイスは以上です。