失敗しない小説サイトの作り方

　第３研究室　　小説サイトの作り方

| トップへ戻る |

失敗しない小説ページの作り方

目次
はじめに

壁紙を張らない

新しいウィンドウを表示させない

文字を小さくしない

行間を開ける

背景色と文字色の組み合わせは、白と濃灰色にする

文章は縦書きにしない

ナビゲーション機能を充実させる

お役立ちＨＴＭＬソース

利用者からの意見投稿

情報提供お願いします！

はじめに
　今回は重要な小説ページの作り方を紹介します。
　小説サイトは、小説ページがメインですから、ここをおろそかにするわけにはいきません。
　せっかくおもしろい作品を作っても、読者にとって不親切なページだったら、
　まともに読んでもらえないのです（涙）。
　そんな事にならないように、読者にとって親切なページ作りを心がけましょうね。

壁紙を張らない

　ページの背景に壁紙が貼ってあると、文章が非常に見づらくなります。

　壁紙が手前の文章を押しのけ、否応なしに自己主張してくるため、目がチカチカして痛いです。
　コレでは例え小説がおもしろくても、続きを読む意欲がガンガン低下します。
　文章を読むという行為は、楽しいことである反面、頭を使う疲れる作業でもあります。
　ただでさえ、疲れる作業をさらに疲れるようにしてしまってはいけません。
　そんなことをすると、「さよらなら、ピュー」と訪問者は逃げてしまいます（涙）。

▲ページの先頭へ

新しいウィンドウを表示させない

　リンクをクリックすると、新しいウィンドウが増えるような仕掛けは作らないほうが良いです。
　新しいウィンドウを表示すると、ブラウザの『戻る』機能が無用の長物化します。
　しかも、ウィンドウがドンドン増えてくると、うざったくなってきます。
　そうなると、いらなくなったモノから消さなければなりません。
　この際、間違って訪問者が最初に表示していたウィンドウを消してしまうような事故も起きてきます。
　いや、暴露すれば、私も良くコレをやってしまうんですよ(笑)。
　そんなことになれば、訪問者があなたのサイトまで来た足跡が、消えてしまいます。

　他のサイトへと飛ぶリンクなら、新しいウィンドウを表示させるのは有効な方法ですが、
　小説コンテンツ内でコレをやると読者のひんしゅくを買うことになるでしょう。　　

　どうしても小説コンテンツページ内で新しいウィンドウを表示したいのなら
　「このリンクをクリックすると、新しいウィンドウが表示されます」
　などというコメントを入れておくことをオススメします。　

▲ページの先頭へ

文字を必要以上に小さくしない
　
　大きい文字と小さい文字、どちらが見やすいでしょうか？

　答えは、当然ながら大きい文字の方です。
　特に、パソコン画面に映る文字を追う場合、文字が小さいと目が疲れてしまいます。
　
　文字は小さい方が一画面の中にたくさんの情報を詰め込むことができ、見た目もクールになります。
　しかし、読むのに時間がかかる長編小説を掲載するのであれば、読者の疲労を考慮し、
　文字の大きさには下手に手を加えず、基本のままにしておいた方が無難です。

　また、スタイルシートを使って、文字の大きさを固定する場合は注意が必要です。
　例えば、

　font-size:11px;
　
　のようにピクセルで固定してしまうと、ブラウザで文字の大きさを変更することができなくなります。
　
　あなたにとっては見やすい大きさだとしても、
　視力やパソコン画面の大きさ、ブラウザの環境の違う他者にとっても、同じとは限りません。
　スタイルシートを使う場合の文字の大きさの指定は「%」ですることをお勧めします。
　
　パーセンテージであれば、文字の大きさをブラウザの機能を使って変えることができ、
　読者が読みたい環境で小説を読むことができます。
　基本より文字を小さくするのであれば、

　font-size:100%

　これ以下のサイズには設定しない方が、小説ページには適切だと思います。

スタイルシートについて補足
　スタイルシートとは、Ｗｅｂサイト上の文書の表示を変え、見栄えを良くするための技術です。
　簡単な使い方として、<DIV style="font-size:90%">と</DIV>のタグに挟まれた文字の大きさが、
　指定した数値によって変化します。
　この場合なら通常の90%の大きさに設定されます。

▲ページの先頭へ

行間を開ける

　行間が通常のままだと、かなり狭くなっているので文章が読みにくいです。

　そのため、行間を開ける必要がでてきます。
　これはスタイルシートを使えば簡単にできます。
　ホームページビルダーのスタイルシートの行間の設定を選んで、数値を選択するだけでＯＫです。
　どれくらい行間を開けるかは、あなたのお好みです。
　いろいろ、試してみて、一番見やすいと思った設定にしてみると良いでしょう。　
　ちなみに私は、この研究所内の行間を６ミリに統一して設定しています。　

▲ページの先頭へ

背景色と文字色の組み合わせは、白と濃灰色にする

　まれにネットサーフィンをしていると、背景が黒で文字が赤などという、
　凶悪な組み合わせのサイトに出くわします。
　文字が見づらいです。おどろどろしいです。やめて欲しいです。
　また、薄いグレーの背景に濃いグレーの文字というコントラストのページもあったりします。
　これは色盲検査かなにかか？　と頭が痛くなってしまいます。
　
　背景色と文字の組み合わせは、白と濃灰色にしておくのがベストです。
　
　ウチのサイトは全ページ、この組み合わせにしてありますでしょう？
　いろいろ研究した結果、これが、一番目にやさしく、読みやすいという結論に達しました。
　ちなみに濃灰色文字はＨＴＭＬソースを表示した際、上の方にある<BODY >タグの中を

　<BODY text="#333333">

　このように変えれば表示できます。

●時世さんの意見
　背景色と文字色のことなんですけど、ネットで小説を読むとき、
　背景が白だと確かに読みやすいのですが、長時間読んで入ると、白色はまぶしく感じます。
　ですので、背景は白より、薄い緑（薄い黄緑）などのほうがいいと思います。

▲ページの先頭へ

文章は縦書きにしない

　市販されているライトノベルは、すべて縦書きで書かれています。
　しかし、これをネットでやると、非常に見づらく、ひんしゅくを買うことになるでしょう。
　紙とディスプレイは質が違うのです。

　ディスプレイを長時間見ていると、紙の場合より目が疲れます。
　それが、縦書きの文章になると、さらに拍車がかかるのです。

　また、縦書きの文章スタイルにすると、横スクロールしなければならなくなります。
　縦スクロールと横スクロールを比べた場合、横スクロールの方が、
　内容を読むために２倍以上の労力を必要とするのです。
　
　人間誰しもめんどくさいことをさせられるのは嫌いですから、
　余計なマウス操作をさせるページは敬遠されます。

　また、ディスプレイ上の文章を読む場合は、左右に余白を作っておくと、読みやすくなります。
　このページも、文章をテーブルで囲って、左右に余白を生み出しています。

　サイトの文章は横書き、縦スクロールを基本とし、
　左右に余白を持たせるようにしましょう。

▲ページの先頭へ

ナビゲーション機能を充実させる

　訪問者に親切なナビゲーション機能は、小説サイトにとって必須です。
　あなたも経験ありませんか？
　目次に戻らないと、次のページに進めない小説サイトや、
　ブラウザの戻る機能を使わなければ、前のページに戻れないサイト。
　こういったサイトに出くわすと、本当にイライラします。
　前にも言いましたが、
　
　訪問者はページを見るために余計な作業をすることを嫌う傾向があるのです。
　無駄にクリックさせたり、どこがリンクであるかわからないと、
　あなたのサイトから逃げてしまいます。
　
　すべてのページをトップページと考え、ナビゲーションを作りましょう。
　訪問者がそのページから、サイト内のどこへでも行けるように配慮するのです。

　具体的には、
　『次のページに進む』
　『前のページに戻る』
　『目次に戻る』
　『トップページに戻る』
　のリンクを、すべてのページの一番上と、一番下に置いておくのです。

　リンクは、わかりやすいようにテキストリンクにするか、矢印の画像にしておくと良いでしょう。
　また、矢印画像には、代替テキストで、画像にカーソルを合わせると、
　次に行く、前に戻る、などの文字が出るようにしておくと、さらに便利です。

▲ページの先頭へ

お役立ちＨＴＭＬソース

　小説サイト作りで役に立つであろうＨＴＭＬソースを紹介します。
　漢字にふりがなを振ることができるソースです。
　市販されているライトノベルには、ほとんどの漢字にふりがなが振ってありますよね。
　漢字が読めなくて困る人が出ないように、配慮しているのです。
　あなたも、これをマネしてみてはいかがでしょうか？
　
　<ruby><rb>揶揄</rb><rp>（</rp><rt>やゆ</rt><rp>）</rp></ruby>　
　
　彼は揶揄（やゆ）するような口調で、告げた。　　

　ただし、ふりがなを入れた分、段落がズレてしまうのが難点です。
　さらに、全部の漢字にルビを入れようとすると、非常にめんどくさくて大変で、
　『彼は揶揄（やゆ）揶揄するような口調で、告げた』
　のような失敗をすることもあります。
　だから、ちょっとこれは読めないかもと思った漢字にだけ、使うと良いと思います。　
　例えば、薔薇とか猖獗を極める、とかです。

利用者からの意見投稿

兵藤さつきさんからの意見
　「失敗しない小説サイトの作り方」を読んでいて、
　ひとつ思ったこと（情報提供になるのかは微妙ですが）を書かせていただきます。

・文字を必要以上に小さくしない
・行間を開ける

　この二つについてです。

　うっぴー様もスタイルシートについて言及されておりますが、CSSは大変便利なものですよね。
　でも、時々そのせいで損なサイトを作っている方を見かけます。

　小説の本文でもスタイルシートを使っている方に多いのが、
　文字の大きさをピクセルで固定しているケースです。
　font-size:9px;
　とかですね。

　同じく行間も固定されている方がいます。

　ピクセルで固定してしまうと、ブラウザで文字の大きさを変更することができなくなります。
（ブラウザ全体の表示を拡大することによって、文字を拡大することは可能です。
　ただし、画像なども引き延ばされて表示され、画面からサイトがはみ出して見づらくなります）

　管理人は「この大きさで見えるだろう」「この行間で十分だろう」と思っていても、
　読者がそうとは限りません。
　ものすごく大きくしないと見づらいって人もいるでしょう。今は多種多様なブラウザもあります。
　ブラウザによっては、文字や行間の固定がマイナスに働きます。

　もちろんデザインの問題で固定したい場合もあるかと思います。
　でも、最低限小説の本文ページは固定を解除させた方が親切です。

　固定を解除させる方法として、「%」を使うことをオススメしたいです。
　パーセンテージだと、ブラウザに左右されることなく、
　読者が読みたい環境で、小説を読むことが出来ます。

　また細かい部分になってしまいますが、背景は真っ白にしない方が無難です。

　最近のPCは液晶画面が多いので、背景色を真っ白（#FFFFFF）にしてしまうと、
　背後のバックライトの相乗効果もあってブラウン管で見るよりも目が疲れるそうです。
　これにプラスして、文字が真っ黒（#000000）だと数倍疲れます。

　白は白でも、もう少し色を落とした位（#FAFAFAあたり）が背景として望ましいと思います。

　小説サイトのアクセスアップは、内容の充実は勿論のこと、
　いかに訪問者に気持ちよく過ごしていただけるかというのが、
　お気に入りボタン追加の決め手になる気がします。

　長文になってしまい申し訳ありません。
　何かお役に立つと幸いです。