| テーブル＆マージン 検索エンジン用のタグ オンライン独自の表現方法 配色 文字サイズ サイト情報その他 |
見やすいFONT 重いページは嫌われる？ ダウンロード（テキスト）版の作り方 強制「〜」 階層 振り仮名について |
テーブル・マージン
文字がびっしり詰まった文章は、なかなか読み手が読む気になれません。そこで、スタイルシートで行間を空けたり、画面の端からの間、マージンをとると読みやすくなります。
※例（段落<p>に指定する場合）、<head>から</head>の間
<style type="text/css">
<!--
p{
line-height : 150%;
margin : 3%;
}
-->
</style>
※ページ内にいくつも<p>タグがあり、特定の<p>タグに入れる場合、body内
<p style="line-heifht : 150%;margin : 3%;">
〜本文〜</p>
※クラスで指定
//１<head>〜</head>
<style type="text/css">
<!--
.Classname{
line-height : 150%;
margin : 3%;
}
-->
</style>
//２<body>内
<p class="Classname">
〜本文〜</p>
例は段落間150パーセント、マージン３パーセントです。文字の大きさに合わせて調節しましょう。
また、同じ効果をもつものにテーブルがあります。テーブル内に文章を入れることでマージンと同じ効果を得ます。
※ただし、テーブルは全体を読み込むまでテーブル内の文章も表示しないため、長い文章には向いていないと言われています。
▲
検索エンジン用のタグ
小説公開ページに限りませんが、ロボット型検索エンジン用に、<HEAD>の後に次のようなタグを入れましょう。
<meta name="description" content="ページの紹介文">
//あなたのページやサイトの紹介文です。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３">
//キーワードはさらに多く追加できます。半角カンマで区切ってください。
逆に検索に引っかかって欲しくないページには、次のタグを入れます。
<meta name="robots" content="noindex,nofollow">
ただし、検索エンジン側の設定によっては無効になるので注意。詳しくはそれぞれの検索エンジンのヘルプやＱ＆Ａのページを参照してください。
▲
オンライン独自の表現方法
一文終わるごとに一行空けたり、「……」を「・・・」と書いた小説を見たことはないでしょうか。
これは、画面で見る読者に配慮した書き方です。見やすいようにという作者の心遣いがあります。
ただし、読者にはこの表現を良く思わない方がいたり、印刷してオフラインで読むのには適さなかったりするので、こういった表現を使う場合は別にダウンロード版を作っておくなど、注意が必要でしょう。
▲
見やすいFONT
普段、私たちが見慣れているのは明朝体ですが、オンラインで見やすいとは限りません。
太さやサイズも、ページに合わせて選びましょう。
| オンラインにおける小説 | オンラインにおける小説 | オンラインにおける小説 | ゴシック |
| オンラインにおける小説 | オンラインにおける小説 | オンラインにおける小説 | UI Gothic |
| オンラインにおける小説 | オンラインにおける小説 | オンラインにおける小説 | 明朝 |
▲
重いページは嫌われる？
ただでさえ文字ばかりになりがちな小説ページの読み込みに時間がかかったら……。読者は読むのをあきらめてしまうかもしれません。
長い小説のページにはできる限り画像などはおかず、テキストリンクで済ませるようにしましょう。しかし、じっくり読んでもらいたい物は、ダウンロード版を用意しておいたほうがいいかもしれません。
▲
ダウンロード（テキスト）版の作り方
できればHTML版も用意しておくとよいですが、印刷してオフラインで読みたい方や好きなサイズで読みたい方のため、ダウンロードはテキスト版が良いでしょう。拡張子*textのファイルです。それを圧縮してページからリンクするだけなのですが、圧縮にも何通りか用意しておくといいでしょう。
一般的なのはLZH形式のようです。圧縮・解凍ソフトは無償でダウンロードできますので、窓の社やVectorなどで探してみてください。
▲
配色
背景と文字の色が近すぎたり、背景が画像の場合、読みにくくなることがあります。小説の雰囲気に合わせたつもりの画像でも、文が読みにくければ意味がありません。
また、見難くなくとも、目が疲れるような色は特に長い小説では敬遠されます。
配色についてはこちらのサイト、Nove.カラが詳しいです。是非参考にしてください。
| 長文には向かない色です。もっと茶色っぽいといいかも | 淡い背景に濃いめの文字色が無難です | これは少しはマシですが |
| これが基本 | やはり黄色背景は目が痛いです…… | これも目が痛いですね |
| 一番目立つ組み合わせがいいとは限りません。 | 信号に使われているような色はやめましょう。 | 鮮やかな赤は嫌われます |
| 見やすく…… | 濃いめ | あまりいい例ではないんですが…… |
| コテコテの壁紙その１ | コテコテの壁紙その２ | 動画は後ろが気になって文章に集中できない…… |
| 容量も軽いですし、落ち着きます。 | 文章を読みたいのに壁紙が重いと帰りたくなるという方も多いです。 |
▲
強制「〜」
ページを開くと強制的に音楽が鳴ったり、ＦＬＡＳＨやＪａｖａアプレットが開始したり……ブラウザや見ている方の環境を考えない動作をさせるのは嫌われます。トップページや検索エンジンからのリンク先のページでは、極力そういった動作をさせないようにしましょう。また、そういったページへの入り口には、注意書きを書いておくのが礼儀です。
小説ページに音楽などを付けている場合、ダウンロード版か音楽なしのページを別に用意しておくことをお勧めします。
▲
文字サイズ
固定フォント（size=4、size=5など）は相対フォント（size=-1、size=-2など）と違い、ブラウザの文字サイズを大に設定しても文字の大きさが変更されません。できるだけ相対で設定するようにしましょう。文字サイズも-1以上が見やすいと思います。サイトデザインのためにどうしても文字を小さくしたい場合、ダウンロード版や、別窓で開く小説専用ページを用意しておくといいでしょう。
▲
階層
サイトトップから何回クリックすると小説ページに飛べるか、数えてみましょう。大体３回以下だとストレスを感じないといわれています。もし階層が深い場合は、掲載作品の一覧や、詳しいサイトマップを作っておきましょう。
▲
サイト情報その他
Javaスクリプトの有無、対応ブラウザなど通常のサイト情報の他、小説公開サイトであったほうがいい情報がいくつかあります。
プロフィールに好きな小説、小説のジャンル、作家などを書いておくと、サイトの訪問者が小説の傾向を判断する助けになります。また、（どこまでの）批評・感想が欲しいかどうか、登録している検索エンジン、改訂するかどうかなどがあると良いでしょう。
オンライン上の物にも著作権があります。サイトトップや小説の目次ページに著作権表示を心がけておきましょう。
▲
振り仮名について
Ａ：ルビの
Ｂ：ルビの実験（じっけん）です。
Ｃ：ルビの実験です。
※タグ
Ａ：ルビの<RUBY><RB>実験<RT>じっけん</RUBY>です。
Ｂ：ルビの実験（じっけん）です。
Ｃ：ルビの<span title="じっけん">実験</span>です。
小説内に難しい漢字を使用しているとき、特別な読み方をさせたいとき、振り仮名を振りたいときがあります。ここでいくつか、振り仮名を付ける方法として例をあげておきます。
Ａは、振り仮名、ルビのためのタグを使用した正攻法的な方法ですが、ネスケなど、ブラウザによっては対応していない場合があります。
Ｂは、簡単で基本的な方法です。ブラウザも無関係に表示できますが、視覚的に注目をひきやすく、読むときに文章のテンポを崩す恐れもあります。
Ｃは、カーソルを指定した単語の上にのせるとポップアップメッセージが表示されます。わからない漢字だけ見たいときに読みを見れるなどの利点がありますが、書くほうは手間がかかる上、Ａと同様、未対応のブラウザもあります。
どこまで雰囲気を出すか、漢字の難易度をどのレベルまでにするか、対応ブラウザをどの範囲にするか、読者層を考えて決めましょう。ただ、万人向けにしたいのなら、できるだけ漢字は平仮名やカタカナで妥協し、振り仮名は避けたほうがよいかもしれません。
▲