趣味Web 小説 2005-07-21

Advice339 羽根の折れた天使の行方

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

「NORA」の同人サイトです。二次創作の小説、とくに夢小説が中心。NORA といっても音楽家の NORA さんではありません。筧一成先生が月刊少年ジャンプで連載中の「人間界で暮らす悪魔」を描く人気漫画「NORA」のことです。第2巻第3巻まで発売中。

管理人の静香さんは、私立高校2年生。気になる気になる男子を発見したので、サイトをどうしようか悩んでいるのだそうな。恋をしたい、そして素敵になりたい。とのこと。ぜひぜひ楽しく頑張ってください。

本当は5月24日の誕生日までにアドバイスできたらなあ、と思っていたのですが、もうすぐ7月の24日……。もう高校生は夏休み目前じゃないか。ということはもう梅雨明け? 月日の経つのは早いものですね。アドバイスが遅れてごめんなさい。

ご相談の内容

全体的に見たイメージ。文章は読みやすいかどうか。何かしら目に付くところはあるか。

客観的なアドバイスが欲しいと思いまして、御依頼をしました。二次創作という、見るのにとても微妙な代物ではありますが…どうぞよろしくお願い致します。

客観的なアドバイスというご依頼はよく見るのですが、それは無理です。発言のひとつひとつに、客観的データの積み上げによる根拠を明示することは、私には出来ません。それはあらかじめご了解をいただきたい。規約の方にも疑問、ご相談をいただいた件について私見を述べますと書いております。あくまでも、私見。独断と偏見によりアドバイスの文言をチョイスしているのが実情です。

アドバイスいろいろ
1.全体的に見たイメージ

最初にはっきり書いておきますけれども、静香さんのウェブサイトはよくまとまっており、とくに文章が読みにくい箇所もなく、したがって現状維持で構いません。

このサイトの問題点は一見して明らかです。あまりにも華がない。

ただ、それで誰か困るかといったら、おそらく誰も困らない。だから、現状維持で構わないのです。

となると、「華がない」ことは「問題」なのか? というあたりが問われましょう。ここが微妙なところでしてね。アクセス数に華のあるなしはほとんど関係ない。だから、ある閲覧者がリピーターになるかどうかということを基準に考えるなら、「それは問題じゃない」という答えは正解です。結局のところ、パッと見の印象なんてのは、少なくとも趣味のウェブサイトにおいて気にする必然性がない。

……と、こう書いてしまうと、もう私には何もアドバイスすることがないのですが、でも本当のことなんだから仕方がない。とてつもなくひどいデザインのサイトなら、さすがに私も「ちょっとこれは……」という。静香さんのサイトの「華のなさ」は一目瞭然だし、それはたしかに少し気になるのだけれども、これは閲覧者が逃げる性質の「問題」じゃないんだなあ。

多分、よそのサイト批評掲示板や、アドバイスサイトなどで意見を求めると、きっと問題視されると思うのです。やっぱり、これでいいのかなあ? という感じがするから。「これでいいんだよ」と私は何度でも強調しますが、その私でさえ、「経験的にはわかっているけど、わかっているんだけどさ……」というもやもやを抱えてる。そうでなかったら、当サイトが読者サービスで用意しているスタイルシートを、もっと単調なものにしているはずなんですよね。

このあたりがデザインの魔というか、ずぶずぶはまっていくとどうしようもなくなる領域なんです。私の希望を述べるならば、静香さんにはぜひ、今後も飄々とシンプルデザインを貫いていただきたいです。

2.文章は読みやすいかどうか

まずデザイン面からいいますと、読みやすさに問題ありません。いや、どんなデザインにしたって文句は出るんですよ。改行が多いのがいいとか少ないのがいいとか、どっちの意見だってあるわけですし。

で、私が静香さんのサイトの読者層というものを想像するに、静香さんの選択は間違っていないと判断した、ということです。

おそらく、静香さんのサイトの読者は、改行が多目の方が好みでしょう。すると、多くの人が犯す誤りは、一文の途中で改行してしまうこと。これがなぜ間違いなのか、ということは、ブラウザの表示領域を小さくし、逆に文字サイズを大きくしてみればすぐにわかります。で、「これは嫌だ」と思って文中改行をなくすのかと思いきや、文字サイズを固定したり、やたらと小さくしたりする。文章をテーブルに入れて、文字サイズとテーブルの幅を固定するところまで突っ走る方も少なくない。

そうやって、どんどん閲覧環境を狭めていくことが、一概に誤りだというつもりはありません。1行字数にもこだわるといえばほぼ日刊イトイ新聞という大成功例が存在しますからね。文中改行したって1日100万人が読むウェブサイトを作ることは可能なんです。

ただ、私は推奨しません。糸井重里さんは、明確に1行27字(くらい)が一番読みやすいのだというビジョンを持っており、後からそれをひっくり返すことを考えていないし、おそらく実際、少なくとも過去の記事について1行字数を変更しようとは決して思わないでしょう。けれども、たいていの個人サイトはそうではない。なんとなく気分で、デザインがころころ変わってしまう。1行字数について、一家言あるわけでもない。自分が読みやすいと思う見た目であれば、何だっていいだろうと思うわけです。

一文の途中で改行してしまったら、それはもう全くどうしようもないというか、後から1行字数を変えようと思ったって、どうにもなりはしない。ひとつひとつ改行し直す? やってられないですよね、そんなこと。

というわけで、静香さんの選択はエレガント。基本的に、一文の長さを短くする。そして句点で改行。ときどき長い文も出てくるけれど、それも句点で改行する。万一、長い文が連続しても画面を文字が埋め尽くすことがないよう、スタイルシートで行の高さを文字の1.8倍にする。さらに左右に余白を作る。

静香さんのデザインは巧みで、シンプルな画面の中に、うるさくない形で工夫が織り込まれています。「どう? すごいでしょ」と自慢しない。「いわれてみれば、読みやすいね。気付かなかったなあ」という境地。これって、理想的ですよね。

続いて文章そのものの読みやすさについても何か書こうかと思いましたが、とくに気になる欠点がない。かといって、文章を誉めるうまい言葉も持ち合わせていないことに気付いたので、この項は省略。

3.何かしら目に付くところはあるか

「シンプルで読みやすい、素晴らしいサイトですね。何も問題ないです」という話を延々としてきたわけですけれども、せっかくなのでいくつか、「改善」につながる話もしてみたいと思います。まあ、瑣末なことばっかりなので、暇があればという感じで読んでください。

一番、気になったのは、夢小説のデータ登録です。男性名を入れるべきか、女性名を入れるべきか。結果的には女性名を入れるべきだったんですね。まあ、これは静香さんが女性で、リンク先も基本的に女性管理人のサイトであり、そもそも夢小説が主に女性に人気のあるコンテンツだということを考えれば、常識でわかることだったのかもしれませんけれども……一概に女性名を入れるのが当たり前、と片付けていいのかな、と。

次に、連作(または連載)小説の目次での扱い。「01-02-03-...」と並んでいるので、連作だということはわかるのです。別に何か混乱するわけでもなんでもないのですが、単発の小説はひとつひとつタイトルが目次に記されているわけで、おそらく最も時間がかかっているであろう連作が、目次では最も寂しい扱いになっているのは残念な気がしました。シリーズ名のようなものを、小見出し風に表現できるといいんじゃないかな、と思います。

3番目、これも現状維持で不都合はないのですが、表紙の一番目立つリンクが他サイトへのリンクなんですよね。まあ、なるほどという感じのリンクなのですが、それでもちょっと私はもやもやします。

私なら、例えば右上に飛ばします。とりあえず一番上にあれば、最初に読んでほしいという意図は伝わります。それでいて、目立たなくなりますよね。肝心な目次などはみな左にあるわけですから。ただ、現在の文字数では、ちょっと重い。文言を工夫して、字数を減らした上で右上に配置する手順となります。(注:多分これでうまくいく、と予想しているだけなので、実際にはうまくいかないかもしれません)

4.スタイルシートの使い方

7月20日のリニューアル、お疲れ様でした。

大きくレイアウトを変えるわけでもないのに、けっこう面倒だったろうと思います。小説本文のリンク色が以前のままとなっているのは、おそらくファイル数が多すぎて、リニューアルが面倒だったからでしょう。

スタイルシートについて、もう少しだけお勉強されると、次回のリニューアルが非常に楽になるはずです。正確にいえば、次々回のリニューアルから楽になるのであって、次回だけはちょっと苦労していただく必要があるのですが……。具体的には、「外部スタイルシート」の使い方を学んでいただきたいのです。難しい話ではないので、下記の易しい解説サイトなどご覧ください。

外部スタイルシートを使えば、ひとつのスタイルシートを書き換えるだけで、サイト全体のデザインを改変できます。いくつかのファイルだけリンク色を書き換え忘れた、といった問題が根本的に解消されます。

当サイトをデフォルト設定(アクティブスクリプト有効)の Windows 版 IE などで閲覧しますと、画面上部にスタイルを選択するセレクトボックスが出現いたします。もし現在、セレクトボックスが出現していたなら、ぜひスタイルを切り替えてみてください。外部スタイルシートにデザインをお任せするということは、HTML を触らなくともスタイルシートを切り替えるだけでリニューアルできるということです。これは楽しいですよ。

このように外部スタイルシートの活用には利が多いのですが、多少の準備が必要です。まず全部のファイルに外部スタイルシートへのリンクを作らねばなりませんし、また現在 body 要素に書き込んでいるリンク色の設定などは消しておくべきです。そのあたりが、面倒だろうな、とは思います。

多くのファイルを一気に書き換えるサイに便利なのが、Speeeeed のような検索置換ツールです。こうしたフリーソフトを使いこなすことができるなら、面倒な作業も短時間で終了します。興味があればお試しください。よくわからなければ、忘れてくださってけっこうです。

5.サイトの構成

シンプルなサイトですし、構成を変えねばならない必然性はありませんが、私なら、少しだけサイトの構成を変えます。

夢小説のキャラ登録を表紙に置き、目次に NORA 小説とその他の小説へのリンクを置きます。つまり、story.html を省略するわけです。メインコンテンツへのクリック数はひとつでも減らしたい。そこで、更新履歴には新作小説へのリンクも含めます。

0720.改装終了。氷室VS古董夢削除。エヴァンゲリオン連載開始

といった感じ。静香さんのサイトを訪問した読者は、表紙でキャラ登録して、そのまま更新履歴から最新作へ移動。これなら1~2クリックで読みたいコンテンツに到達できますよね。

なるほど、よさそうだな、と思ったらご検討ください。

アドバイスは以上です。

追記(2005-07-24)

アドバイスをもとに静香さんが作成された新デザインに、私が手を加えた改善(?)案を提示します。本当に改善されているのかどうか、いまひとつハッキリしないのでクエスチョンマーク付。参考になりそうだな、と思われたら、コピーも改変もご自由にどうぞ。

この改善(?)案では mark.png という画像を使っています。HTML と CSS の記述は以下に示しますが、画像も合わせてダウンロードしないと再現できませんのでご注意ください。

改善(?)案の HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta name="robots" content="index,nofollow">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="author" content="http://homepage1.nifty.com/mystaff/dream/">
<link rel="stylesheet" type="text/css" href="mh1192.css" media="screen,tv">
<title>羽根の折れた天使の行方</title>
<script language="JavaScript">
<!----Cookie使用
var CookieID = "Dream5";
function getCookie(key) {
if (document.cookie){
index = document.cookie.indexOf(key, 0);
if (index != -1) {
val_start = (document.cookie.indexOf("=", index) + 1);
val_end = document.cookie.indexOf(";", index);
if (val_end == -1){
val_end = document.cookie.length;
}
return(unescape(document.cookie.substring(val_start, val_end)));
}
}
return(null);}

function setCookie(key,value,expires){
var cook_data = "";
cook_data = key + "=" + escape(value);
if (expires){cook_data = cook_data + "; expires=" + expires.toGMTString();}
document.cookie = cook_data;}

function set_name(set_name_value){
var expires = new Date();
value = set_name_value;
if ( value == "" ) value = "null";
expires.setTime(expires.getTime() + (12 * 30 * 24 * 60 * 60 * 1000));
setCookie(CookieID,value,expires);}

function JSset(){
item1 = document.dream.name1.value;
item2 = document.dream.name2.value;
item3 = document.dream.name3.value;
item4 = document.dream.name4.value;
item5 = document.dream.name5.value;
set_name(item1+","+item2+","+item3+","+item4+","+item5);
document.dream.submit();}

function DeleteCookie(key){
var value = "";
var expires = new Date();
expires.setTime(expires.getTime() - 3600);
setCookie(key,value,expires);
location.reload();}
//END ---></script>
</head>
<body>
<h1>羽の折れた天使の行方</h1>
<div class="menu">
<p><a href="http://www.mh1192.com/00.html">お知らせ</a></p>
<dl>
<dt>最終更新</dt><dd>0724.リンク追加</dd>
</dl>
<ul>
<li><a href="http://www.mh1192.com/log.html">更新履歴</a></li>
<li><a href="http://www.mh1192.com/first.html">最初に</a></li>
<li><a href="http://www.mh1192.com/ss1.html">【NORA -ノラ-】</a></li>
<li><a href="http://www.mh1192.com/ss2.html">【そのほか】</a></li>
<li><a href="http://www.mh1192.com/links.html">別の道</a></li>
<li><a href="http://www.webclap5.com/cgi-bin/clap3/clap.cgi?3-mh1192">WEB拍手</a></li>
</ul>
</div>
<div class="data">
<script language="JavaScript">
<!---Cookie Read
var getvalue = getCookie(CookieID);
if (getvalue == null || getvalue == "null") getvalue = ",,,,";
names = getvalue.split(",");
//END ---></script>
<!--ユーザーが自由にデザインする場所 ここから-->
<p><a href="http://2style.jp/dream/">夢小説を扱っています</a></p>
<p>主人公の名前を決めてください。</p>
<form name="dream">
<p><script language="JavaScript">
<!---
document.write(names[0]);
//END --->
</script>
<script language="JavaScript">
<!---
document.write(names[1]);
//END --->
</script>
/<script language="JavaScript">
<!---
document.write(names[2]);
//END --->
</script>
<script language="JavaScript">
<!---
document.write(names[3]);
//END --->
</script>
/<script language="JavaScript">
<!---
document.write(names[4]);
//END --->
</script></p>
<dl>
<dt>苗字</dt>
<dd><input type="text" size="10" name="name1"></dd>
<dt>名前</dt>
<dd><input type="text" size="10" name="name2"></dd>
<dt>ミョウジ</dt>
<dd><input type="text" size="10" name="name3"></dd>
<dt>ナマエ</dt>
<dd><input type="text" size="10" name="name4"></dd>
<dt>一人称</dt>
<dd><input type="text" size="10" name="name5"></dd>
</dl>
<p><input type="button" value="登録" onclick="JSset()"> <input type="button" value="削除" onclick="DeleteCookie(CookieID)"></p>
</form>
<!--ユーザーが自由にデザインする場所 ここまで-->
<p><script language="JavaScript">
<!---フォームへ書き込み
document.dream.name1.value = names[0];
document.dream.name2.value = names[1];
document.dream.name3.value = names[2];
document.dream.name4.value = names[3];
document.dream.name5.value = names[4];
//END ---></script></p>
</div>
</body>
</html>
改善(?)案の CSS
*
{margin:0; padding:0; font-size:100%; font-weight:normal; line-height:1.6;}
body
{margin:80px 0 3em 100px; color:#000; background:#ececec;}
.menu
{width:17em; float:left;}
.data
{width:17em; float:left;}
h1
{margin:0 0 2em; color:#036; font-size:120%; font-weight:bold; border-bottom:1px solid #fff;}
p,ul,dl
{margin:1em 0;}
li
{padding-left:16px; background:transparent url(mark.png) no-repeat 0% 47%; line-height:2; list-style:none outside;}
form dt
{width:4em; float:left; clear:left;}
form *
{line-height:1.2;}
a
{color:#036; text-decoration:none; border-bottom:1px solid #036;}
a:visited
{color:#c66; border-bottom:1px solid #c66;}
a:hover,a:active
{color:#36c; border-bottom:1px solid #36c;}
余談・アフターサービス

Information

注意書き