* STUDIO DRAGON-web *【Nove.カラ】

■小説ページにおける配色のコツ

◆コツ……というか、普段私自身がwebページ作成の際にちょこっと頭の片隅に置いてることをご紹介したいと思います。「小説ページの配色」が前提となっていますが、まあそれなりに応用が利く……かも。

■まず、小説の内容に合った色をイメージしておこう

◆まあ、皆さんある程度のカラーイメージを持っていらっしゃるでしょうから、あらためて言うまでもナイとは思います。が、それでも配色の際、ただ行き当たりばったりに色を置いていくのではなく、一番初めに「こういった色をメインに使おう」と確固たる信念をもって挑むと、色の選択に困ったり、失敗するということは少なくなると思います。

■色数は必要最低限に

◆ただでさえモニタに表示された文字を読むのは疲れます。長文を読んでもらうために気をつけなければならないのは、「目が疲れず、落ち着いて読める」こと。かくいう私も、どちらかというとカラフル配色したがる方でして、つい派手な色を使ったりするんですが(汗)

◆でも、さすがに文字がずらずらと並ぶページで本能の命じるままにやってしまうと、「敬遠される配色」を実践することになりかねません。カラフル好きな方は、意識的に落ち着いた色を使った配色を心がけるようにした方がいいでしょう……と自戒を込めてここに記します。

◆かといって落ち着いた色でも、色相(色味)の違う色を数多く使うことはお勧めできません。いや、絶対ダメというわけではナイです。ただ全体的に同じような比率で多数の色を使用すると、色同士がケンカして煩わしく感じます。コツを掴むまでは、「背景色、文字色、そして(必要ならば)アクセントorコンビネーションカラーを1色+リンク色」程度に抑えた方が、見た目もすっきりして文章も読みやすいと思います。

◆また、同系色ならケンカするということも滅多にないので、多少色数が増えてもいいでしょう。配色の奇抜さを見せるのが目的ではないので、シンプルを目指すならコンビネーションカラーを使って「同系色で揃える」のが色の選択もラクですね。

■リンク&タイトルの色

◆画像ボタンを使うなら関係ありませんが、「文字リンク」の場合、次のページに移りたいとき文字色が全体に溶け込んでしまっていると、どれをクリックしていいのか判りにくかったりします。本文の色と同じというのもちょっと……(汗)

◆そこでリンクの色――特に「未訪問リンク」の色だけは、ちょっと目につくぐらいにしておくと、ユーザビリティ度UPです。とはいえ、一度リンクの位置が判ると目につく必要もないので、「訪問済みリンク」の色は全体に馴染む色にしておいてイイでしょう。間違っても「未訪問」と「訪問済」を同じ色にするのは避けてくださいね。だって、ドコまで読んだか判らなくなっちゃうじゃないですか〜っ!

◆あとタイトル文字の色ですが、これはページ全体を占める面積も少ないことですし、多少目立つ色を使っても構わないと思います。

■文字の太さによる違い

◆同じサイズ&色の文字でも、太さによって色の感じ方が違います。

上を見比べていただくと判るように、この場合太い方がより濃く見えます。もし暗色背景+淡色文字だと、太字にするとより明るく見えるわけです。

◆この特性を使って、「タイトルは本文より太く」もしくは「1段階大きく」すれば、1色減らすこともできそうですね。

■カラーリングのプロセス

◆私の場合で恐縮ですが、当サイトの小説本文ページの色が決まるまでのプロセスを紹介します。

◆普段、小説はブラウザに表示される状態を確認しながら書いています。推敲時は特にブラウザで読みながら行うため、色を決める際には「自分の目が疲れない色を使う」ということが重要でした。

■まずメインとなる背景色とコンビネーションカラーを決める

◆そこでまず初めに、はっきりと色が着いていると判る程度の明るさ&落ち着いた色調の背景色を決めました。次にその色1色だと明るすぎる&殺風景なため、背景よりちょい濃色の同系色(コンビネーションカラー)のボーダーで周囲を囲みました。色調の統一感を出すためナビバーにもこの色を採用。

■文字色を決める

◆文字色は「当サイト内基本文字色・淡色背景用」である濃緑色を使用しました。

■リンク&タイトルの色を決める

◆未訪問リンクや章タイトルの色は、色相を変えたアクセントカラーで若干目につきやすい色にしました。しかし訪問済のリンク色は、ボーダーよりさらに濃い同系色にして、目に馴染むようにしました。

■その結果

◆この配色の結果、ページを開いたときの第一印象としては、全体的に同系色2トーンであるという印象を受けるはずです。ちなみにこんな感じ↓(リンク色を全部表示してるので、ちょっと雰囲気違うけど)
ちなみに実際のページはこちら→【エビネくんとグレムリン】

  • link:#FFD700
  • visited:#336699
  • hover:#CCFF99
  • active:#F0F8FF
  • ■「Chap.」の色:#DB7093(PaleVioletRed)
  • ■文字色:#113311
  • ■背景色:#F0F8FF
  • ■ヘッダ&フッタ:#336699
  • ■ナビバー&ボーダー:#B0C4ED

▼このページにはこれだけの色が使われております(↑サンプル除く)▼

    link:#8B0000 visited:#FFFACD
    hover:#CCFF99 active:#FFE4E1
  • ■背景:#FFEFD5(Papayawhip)■
  • ■文字A(通常):#224422
  • ■文字B(強調):#CC3333
  • ■タイトル:#CD5C5C(IndianRed)■
  • ■アクセントカラー:#F4A460(SandyBrown)■