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

■読みたくなくなる原因は?

◆まず、文章(主に小説)を読む気にさせないページデザインにはどんなものがあるでしょうか? 例えば、私の場合ですが……

……等々の条件がいくつか重なると、途中で読むのを断念してしまいます。また、他の読者の方にとっての「読みづらい条件」は、上記のもの以外にもたくさんあることでしょう。

◆「じゃあ、見た目で読んでもらえなければ、見た目をすっきりリフレッシュしちゃえ!」ってなモンですが、フォントの表示方法に関してはhtmlとスタイルシート(css)の知識がちょっぴり必要で、慣れていない方にとっては、とっつきにくいかと思われます。でも背景色と文字色の操作ぐらいなら、基本中の基本なので何とかできますよね?

◆てなワケで! この【Nove.カラ】では、まずページを開いたとき真っ先に目に飛び込んでくる「色」について研究してみたいと思います。

■敬遠される配色って?

◆読みやすい配色といっても組み合わせは無数にあるわけで、一概に「コレがイイ!」とは言えません。それに、人それぞれの配色センスというものもありますし、色の組み合わせ方で作品の雰囲気や執筆者の個性も出せますもンね。

◆そこで、一般的に小説などの長文メインのページで敬遠されがちな配色を知っておけば、「色の選択ミスのせいで、最後まで読んでもらえない」という事態を防げるかと思います。以下に小説サイトを回っていてしばしば遭遇したり、「これはどーかと……(汗)」と思われる例のいくつかを挙げてみます。

■ハイ・コントラスト

◆ある意味、究極のハイコントラスト「白(#FFFFFF)背景に黒(#000000)文字」。
シンプルなのでついやってしまいがちですが、閲覧者のモニタの設定や種類(CRTや液晶)によっては真っ白背景が眩しくなるため、長時間の閲覧にはちと辛いと思われます。

◆今度は逆に「黒背景に白文字」。
ブラウザが真っ黒背景で覆われているので背景に関しては眩しくないですが、純白の文字がチラチラして、これも長時間見ているのは厳しいですね。

■ハイ・コントラスト&Vivid鮮やか

◆日記系テキストサイトでありそうな、「赤(FF0000)背景に黒文字」。これはピュアな赤に目を奪われて、黒文字を識別しづらいっすね。

◆ついでに「赤背景に黄色(FFFF00)文字」。これもコントラストが高すぎて、目がチカチカ〜☆

◆ホラーやダーク系でありがちな「真っ黒背景に赤文字」。赤と黒は「明度」としては近いのですが、この赤では「彩度」が高いため、チカチカ感が拭えません。

◆「黒背景に黄色文字」。これは白文字ほどではナイですが、やっぱりコントラストが高く、ブラウザ一面をこの色の文字で表示するとチカ……(以下略)

◆もひとつ「黒背景にシアン(00FFFF)文字」。これも眩しいかな。それに、黒地に青または緑の組み合わせは、人によっては認識しづらかったりします。夜の青信号って見づらいんですよねぇ……。
◆また、たまに黒背景なのにリンク色を指定していないサイトに出くわすことがあります。デフォルトでは「未訪問リンク」の色がブルー(0000FF)になるのですが、この青は明度が低いため、大変見づらかったりします。→黒背景を使う場合は、リンク色を設定してください〜〜っ!

◆「シアン背景に赤文字」。いや、さすがにこの組み合わせ方はあまり見ませんね。 高彩度+近補色のダブルパンチで、非常に見づらいっつーか、かなりの破壊力がありますね(汗)

◆思い切り補色で「シアン背景にオレンジ文字」。うーん、強烈さは上↑の「シアン+赤」の勝ちかな。読めないことには変わりはないですが。

◆「シアン背景に黒文字」。これはまだ読める範囲でしょうか。でも、基本的に原色などの彩度の高い色や真っ黒(000000)の組み合わせは、アクセントとして用いる分にはイイですが(イイんかっ!?)、目に優しいとは言い難いため長文を読ませる場合には使用しない方がいいでしょう。

■ロー・コントラスト(↓読みづらい場合は選択で反転して読んでください)

◆「WhiteSmoke(F5F5F5)背景にDarkGray(A9A9A9)文字」。確かにコントラストは高くないですが、文字が背景に溶け込んでしまい、モニタに目を近づけないと読みづらいっす。

◆「濃灰色(333333)背景にGray(808080)文字」。これも文字が背景に溶け込んでますねぇ。文字を読み取るのに神経を使うため、ストーリーに集中できなくなる恐れあり。

■まとめ

◆以上の例でもうお判りかと思いますが、ズバリ配色する上でまず避けるべき点は、「コントラストが強すぎ」、逆に「コントラストが弱すぎて字が読めねーよっ」、「うおっ、原色が眩しいっ!」の三点に尽きると言えるでしょう。
◆つまりその点さえ注意して配色すれば、もう「三行でbackされちゃうよ〜」なんてコトはなくなるはず。あとはガンガンいい作品を書いてください。

■とはいえ……

◆実際に配色する段になって「この背景色にこの文字色って、ホントに大丈夫?」と、おっかなびっくりになる方もいらっしゃるでしょう。そこで次は「配色のコツ」について語ってみたいと思います。

◆またボチボチとではありますが、私めの拙い配色センスを駆使した「これなら読みやすいかな?」な配色の具体例を【研究成果】にて挙げております。

■こちらも参考にどうぞ

◆小説サーチ「Chaos Paradise」さまでは、web小説に関するアンケートを実施されております。その中に「読み見やすいと思う組み合わせは?」&「読み辛いと思う組み合わせは?」という小説ページの色の組み合わせに関したアンケートがあります。読者の生の声を知ることができるページですので、こちらもぜひ参考になさってください。→【カオパラアンケート】