Web小説レイアウトのすゝめ

メモ

いや、すすめっていうか、こうしたらどう？くらいのノリです…。好みがあるので参考までに。
どんなレイアウトが良いのか検索をかけると、何故か古い情報しか出てこなかったので、個人的にこうすると良いのではという例をあげていきます。

個人的にこうだといいなの例

文字
  • 色は黒系(#333333〜#666666程度)
  • 文字サイズを固定にしない。
    もしくはサイズが選べる (ツールやテンプレートがあります)
    ⇒例：文字変更サイズボタン(小説HTMLの小人さん)
  • 固定の場合は、ブラウザのデフォルトサイズを16pxとした場合、
    • 14px〜18px
    • 10.5pt〜16pt
    • size="3"かsize="4"
    • 88%〜113%
  • 行間を必ず指定する(160〜180%程度)
  • 字間は16px以上の文字が大きい場合は、1pxあっても読みやすい
    (指定した場合、IE改行バグを回避するには、br { letter-spacing: 0;} を指定するといい)
背景
  • 白系が鉄板。背景に柄や写真はなし。
  • 黒背景の場合は白文字
レイアウト
  • ボックスはセンタリング(文字は左寄せ)が基本
  • 半固定の横幅を推奨。　
    目安としては、半固定・固定共に幅が700px〜800px程度だと嬉しい
    70%〜80%指定の場合は"max-width"や"min-width"で最大最小指定をする(IE6.0には未対応)

最近のモニタの画面は横幅が最低1000px以上、ハイビジョンテレビに対応し16：9が広まっているので、それを考慮するとこうなります。あとスマートフォンで閲覧すると全体が1/3程度に縮小されますので、文字もちょっと大きめのほうが良いんじゃないかと思います。
本当に自分の好きなように小説を読みたい！って人は、ブラウザ自体のCSSで調節していたりするんでしょうが、管理人さんも少しだけフレンドリーになって頂けると、｢読みたい意欲｣が沸くので嬉しいです。
また、閲覧者も好みに沿わない場合は、ブラウザで縮小拡大([Ctrl]+[+],[-]、Operaだと[+],[-])すると楽しく読むことができると思います。