これだけは避けたい！　速攻閉じられるサイトにならないためには？

せっかく一生懸命書いた作品なのに、ページを開いた瞬間閉じられたら悲しいですよね。
でも、悲しみに暮れている暇はありません。

どうして読者さんはページを閉じてしまったのでしょうか？

ここを改善しないと、いつまで経っても閑古鳥だけが鳴いてしまいます。

ズバリ、あなたのサイトを訪れた瞬間、何かしらの嫌悪感を抱いたから閉じてしまったのです。ストレスを感じてしまったんですね。
こうなると、もう一度訪れてくれる可能性は限りなく0になります。

ではどうすればいいかというと、簡単なことです。

自分や読者さんが嫌だと思うことをしなければいいだけ。

自分が嫌だなと思うようなサイトにしないのは前提として、相手の嫌がることはよりよくするために考えましょう。
ここは色々とリサーチするといいと思いますが、私が思う最低限のことをこちらに記しておきます。

嫌われるサイトの要素。つまり逆をすればいいのです
まとめ

嫌われるサイトの要素。つまり逆をすればいいのです

ちなみに、私はこの嫌われる要素をほぼ捨てて、逆を取り入れています。
項目の最後に『どうすればいいか？』を書いておきますので、参考にどうぞ。

背景と文字色がイタい

黒背景に白文字、赤背景に黒文字、ショッキングピンクにブルーな文字など、目によろしくない組み合わせは完全アウトです。

マーケティングの本にもありますが、広告としても、あまりよろしくないとされている組み合わせです。
黒は高貴な印象を抱くので、メインのカラーのトーンを落とすなどは効果的ですが、これは目がイタいですよね。
読むのが疲れます。

続いて、殺人事件などサスペンスもののゲーム画面で、バッドエンドになった時のような鮮血色です。
文字を白にしても、殺人的な印象は変わりません。
精神的にイタい組み合わせです。
オワタ……ってなりますよね。

最後。カラフルはカラフルですが、やはり原色に近い彩度の高すぎる色はドギツいイメージをもたれてしまいます。
そして、一番の問題は青文字。
青はリンク色と決まっているので、文字色に使うのはタブーです。

こうしよう！

背景色は『白に近いグレー（#fbfbfb）』もしくは『薄いクリーム色（#fefdfb）』です。つまり、紙のような色が一番好まれます。
文字色は『グレーよりの黒（#333333）』。決定です。
真っ白（#ffffff）に真っ黒（#000000）な文字も、実はよくありません。
コントラストが強すぎて目が痛くなってしまうのです。

背景色が#fbfbfb
文字色が#333333
の組み合わせです。

背景色が#fefdfb
文字色が#333333
の組み合わせです。

意外と目が疲れるのが真っ白と真っ黒。
この場合はさほどでもないかもしれませんが、全体的になると結構疲れます。

ちなみに、このサイトでは『背景色は#fffefc』で『文字色は#333333』です

色覚検査なのだろうか……。近すぎる彩度は見えません

もう一つの背景と文字の色でNGな組み合わせがあります。
それが似たような彩度を使うということです。

彩度とは、色の鮮やかさを言います。
わかりやすいイメージは、白や黒がどれくらい入ってるかということです。
原色に近い色は彩度が高いと言えます。

背景を薄いグレーにしても、それに近いグレーの文字色では読みにくいですよね。

パステル系の配色は、優しい印象を与えますが、コントラストに差がない（彩度が同じ領域）ため、背景と文字色に使うのはアウトです。

イラストに使うとふわっとしたかわいい感じになりますよね。

こちらも、もう少しコントラストを強調してみましょう。
ただし、彩度の差があまりにも開きすぎているとデザインのバランス的に違和感を抱いてしまうので注意してください。

こうしよう！

先程のは見えない（読むのが嫌になった）方のために、同じことを書きます。
彩度とは、色の鮮やかさを言います。
わかりやすいイメージは、白や黒がどれくらい入ってるかということです。
原色に近い色は彩度が高いと言えます。背景を薄いグレーにしても、それに近いグレーの文字色では読みにくいですよね。
パステル系の配色は、優しい印象を与えますが、コントラストに差がない（彩度が同じ領域）ため、背景と文字色に使うのはアウトです。イラストに使うとふわっとしたかわいい感じになりますよね。

このくらいの差であればキレイに見えると思います。
コントラストが強いからと言って、真っ白と真っ黒の配色もできるだけ避けて下さい。

コンテンツ（文章が書いてある部分）の背景色は白に近く、文字色は#333333です。

急に音楽を鳴らすのはやめましょう

読者さんは、いつ作品を読んでくれているかはわかりません。
電車の中かもしれないし、職場かもしれないし、トイレの中かもしれません。
たとえイヤホンをしていたとしても、大音量に設定していたらどうでしょう？
鼓膜を破る気ですか？　せっかく読んでくれる方に対してすることではないですよね。
印象最悪で、もう二度と来てはくれないでしょう。

でも、サウンドノベルのようにシーンのイメージに合った音楽を流したい気持ちもわかります。

ですので、音楽を流すかどうかの選択は読者さんにお任せしましょう！

音楽が聴ける状態なら、かなりの高確率で聞いてくれます。

こうしよう！

音楽には『再生ボタン』をつけましょう。

htmlなら

<audio src="音楽のファイル名（〇〇.mp3など）" controls="controls"></audio>

1	<audio src="音楽のファイル名（〇〇.mp3など）" controls="controls"></audio>

というコードを書きます。

WordPressなら「メディアを追加」→音楽をアップロード→挿入で。

WordPressでかつ『SWELL』テーマをお使いの方で、『Classic Editor』のテキストモードで書いている方は、以下のコードを参考にしてみて下さい。

<figure class="wp-block-audio"><audio controls="controls" src="音楽のURL"></audio></figure>

1	<figure class="wp-block-audio"><audio controls="controls" src="音楽のURL"></audio></figure>

ちなみに、当サイトでは注意書きと利用させてもらっているサイトへのリンクなども表示しています。

下のような感じです。ループ再生します。

❚音楽と一緒にどうぞ（音量にはご注意ください）

楽曲提供｜音楽の卵｜旅のはじめ

レスポンシブ対応にしましょう

たまに、画像やコンテンツが途中で切れてしまっているサイトがあります。コンテンツの幅、どんだけ広いのー！　切れてる切れてる！　となってしまいます。
レスポンシブ対応になっていないのか、横スクロールしないと続きが見えないというのは結構ストレスになります。
スマホ（モバイルも含む）・タブレット・PCの3タイプでの表示対応はしたいですね。

詳しくは以下のサイトをご覧下さい。私は読みやすくかつわかりやすかったです。