第3研究室  小説サイトの作り方 | トップへ戻る |

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

目次
はじめに
壁紙を張らない
新しいウィンドウを表示させない
文字を小さくしない
行間を開ける
背景色と文字色の組み合わせは、白と濃灰色にする
文章は縦書きにしない
ナビゲーション機能を充実させる
お役立ちHTMLソース
利用者からの意見投稿
情報提供お願いします!


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

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

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

ページの先頭へ
新しいウィンドウを表示させない

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

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

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

ページの先頭へ
文字を必要以上に小さくしない

 大きい文字と小さい文字、どちらが見やすいでしょうか?

 答えは、当然ながら大きい文字のほうです。

 特に、パソコン画面に映る文字を追う場合、文字が小さいと目が疲れてしまいます。
 なのに、なぜか文字を通常より小さくしているサイトが多々あります。
 読者に不親切なので、これもやめましょう。
 無論、文字はデカければ良いというものではありませんので、基本設定のまま放っておくのが吉です。  

ページの先頭へ
行間を開ける

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

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

ページの先頭へ
背景色と文字色の組み合わせは、白と濃灰色にする

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

 <BODY text="#333333">

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

ページの先頭へ
文章は縦書きにしない

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

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


 また、縦書きの文章スタイルにすると、横スクロールしなければならなくなります。
 縦スクロールと横スクロールを比べた場合、横スクロールの方が、
 内容を読むために2倍以上の労力を必要とするのです

 
 人間誰しもめんどくさいことをさせられるのは嫌いですから、
 余計なマウス操作をさせるページは敬遠されます。

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

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

ページの先頭へ
ナビゲーション機能を充実させる

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

 
 すべてのページをトップページと考え、ナビゲーションを作りましょう。
 訪問者がそのページから、サイト内のどこへでも行けるように配慮するのです。

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


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

ページの先頭へ
お役立ちHTMLソース

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

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

●注意点

 確かにルビは小説サイト作成の強力な助っ人になりますが、
 Internet Explorerのみでしか、表示は出来ません。
 他のウェブブラウザでは、漢字の上にあった振り仮名が、
 揶揄(やゆ)のように隣に書かれてしまいます。
 Internet Explorerは、ウィンドウズパソコンに最初からインターネット用にインストールされているため、
 日本では絶大なシェアを占めているので、ほぼ問題ありませんが、一応、注意してください。
利用者からの意見投稿

兵藤さつきさんからの意見

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

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


 この二つについてです。

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

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

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

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

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

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


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

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

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

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

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


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

■ 情報提供お願いします!
 小説サイトの作成についての意見・情報提供を募集します。
 また、このページに乗っている情報が古くなっていたり、間違っていたりしたら教えていただけるとありがたいです。
 情報提供してくださる方は、こちらのメールフォームよりお願いします。


ページの先頭へ  メールフォーム(管理人への連絡)
▼第3研究室 小説サイトの作り方
魅力的な小説サイト
失敗しない小説ページの作り方
小説サイトアクセスアップ大作戦!!
掲示板運営のコツ
ネット作家の体験談

HOME|  第1|  第2|  第4|  第5|  鍛錬室|  高得点|  CG|  一押|  資料| 掲示板|  管理人|  免責|  リンク|