せっかく一生懸命書いた作品なのに、ページを開いた瞬間閉じられたら悲しいですよね。
でも、悲しみに暮れている暇はありません。
どうして読者さんはページを閉じてしまったのでしょうか？
ここを改善しないと、いつまで経っても閑古鳥だけが鳴いてしまいます。
ズバリ、あなたのサイトを訪れた瞬間、何かしらの嫌悪感を抱いたから閉じてしまったのです。ストレスを感じてしまったんですね。
こうなると、もう一度訪れてくれる可能性は限りなく0になります。
ではどうすればいいかというと、簡単なことです。
自分や読者さんが嫌だと思うことをしなければいいだけ。
自分が嫌だなと思うようなサイトにしないのは前提として、相手の嫌がることはよりよくするために考えましょう。
ここは色々とリサーチするといいと思いますが、私が思う最低限のことをこちらに記しておきます。
目次
嫌われるサイトの要素。つまり逆をすればいいのです
ちなみに、私はこの嫌われる要素をほぼ捨てて、逆を取り入れています。
項目の最後に『どうすればいいか？』を書いておきますので、参考にどうぞ。
背景と文字色がイタい
黒背景に白文字、赤背景に黒文字、ショッキングピンクにブルーな文字など、目によろしくない組み合わせは完全アウトです。
黒は高貴な印象を抱くので、メインのカラーのトーンを落とすなどは効果的ですが、これは目がイタいですよね。
読むのが疲れます。
文字を白にしても、殺人的な印象は変わりません。
精神的にイタい組み合わせです。
オワタ……ってなりますよね。
そして、一番の問題は青文字。
青はリンク色と決まっているので、文字色に使うのはタブーです。
こうしよう！
背景色は『白に近いグレー（#fbfbfb）』もしくは『薄いクリーム色（#fefdfb）』です。つまり、紙のような色が一番好まれます。
文字色は『グレーよりの黒（#333333）』。決定です。
真っ白（#ffffff）に真っ黒（#000000）な文字も、実はよくありません。
コントラストが強すぎて目が痛くなってしまうのです。
文字色が#333333
の組み合わせです。
文字色が#333333
の組み合わせです。
この場合はさほどでもないかもしれませんが、全体的になると結構疲れます。
色覚検査なのだろうか……。近すぎる彩度は見えません
もう一つの背景と文字の色でNGな組み合わせがあります。
それが似たような彩度を使うということです。
わかりやすいイメージは、白や黒がどれくらい入ってるかということです。
原色に近い色は彩度が高いと言えます。
背景を薄いグレーにしても、それに近いグレーの文字色では読みにくいですよね。
イラストに使うとふわっとしたかわいい感じになりますよね。
こちらも、もう少しコントラストを強調してみましょう。
ただし、彩度の差があまりにも開きすぎているとデザインのバランス的に違和感を抱いてしまうので注意してください。
こうしよう！
彩度とは、色の鮮やかさを言います。
わかりやすいイメージは、白や黒がどれくらい入ってるかということです。
原色に近い色は彩度が高いと言えます。背景を薄いグレーにしても、それに近いグレーの文字色では読みにくいですよね。
パステル系の配色は、優しい印象を与えますが、コントラストに差がない（彩度が同じ領域）ため、背景と文字色に使うのはアウトです。イラストに使うとふわっとしたかわいい感じになりますよね。
このくらいの差であればキレイに見えると思います。
コントラストが強いからと言って、真っ白と真っ黒の配色もできるだけ避けて下さい。
急に音楽を鳴らすのはやめましょう
読者さんは、いつ作品を読んでくれているかはわかりません。
電車の中かもしれないし、職場かもしれないし、トイレの中かもしれません。
たとえイヤホンをしていたとしても、大音量に設定していたらどうでしょう？
鼓膜を破る気ですか？ せっかく読んでくれる方に対してすることではないですよね。
印象最悪で、もう二度と来てはくれないでしょう。
でも、サウンドノベルのようにシーンのイメージに合った音楽を流したい気持ちもわかります。
ですので、音楽を流すかどうかの選択は読者さんにお任せしましょう！
音楽が聴ける状態なら、かなりの高確率で聞いてくれます。
こうしよう！
音楽には『再生ボタン』をつけましょう。
htmlなら
|
1 |
<audio src="音楽のファイル名（〇〇.mp3など）" controls="controls"></audio> |
というコードを書きます。
WordPressなら「メディアを追加」→音楽をアップロード→挿入で。
WordPressでかつ『SWELL』テーマをお使いの方で、『Classic Editor』のテキストモードで書いている方は、以下のコードを参考にしてみて下さい。
|
1 |
<figure class="wp-block-audio"><audio controls="controls" src="音楽のURL"></audio></figure> |
ちなみに、当サイトでは注意書きと利用させてもらっているサイトへのリンクなども表示しています。
❚音楽と一緒にどうぞ（音量にはご注意ください）
楽曲提供｜音楽の卵｜旅のはじめ
レスポンシブ対応にしましょう
たまに、画像やコンテンツが途中で切れてしまっているサイトがあります。コンテンツの幅、どんだけ広いのー！ 切れてる切れてる！ となってしまいます。
レスポンシブ対応になっていないのか、横スクロールしないと続きが見えないというのは結構ストレスになります。
スマホ（モバイルも含む）・タブレット・PCの3タイプでの表示対応はしたいですね。
詳しくは以下のサイトをご覧下さい。私は読みやすくかつわかりやすかったです。
文字が小さい
パソコンで見る分には、まあちょっと小さいくらいかな～？ と思うような文字の大きさでレスポンシブ対応になっていないと、スマホなどで見たときの文字の大きさがえらいことになります。
虫めがねカモン！！ みたいな。
画像やコンテンツ幅などは「px（ピクセル）」で指定しますが、文字の場合ですと「pt（ポイント）」で指定します。
「px」と「pt」では大きさにかなりの違いが出ます。
なので、文字は「pt」で、行間は「em」で指定するようにしましょう！
こうしよう！
使っているWordpressテーマにもよりますが、私の場合文字の大きさは「%」で指定しています。
というのも、何年か前にデバイスによって「pt」の大きさもが違うと知り、そこからはデバイスに合う「%」で指定することにしました。
これだと、デバイスによる変化というのが抑えられます。
ちなみに、当サイトは本文の文字の大きさを「106%」にしてあります。
「104%」と悩みましたが、小説も載せているので文字と行間は大きめにとりました。
サイトを訪れてくれる方の年齢が20代であれば、少しだけ小さい方がいいですね。
50代以上の方を対象にした場合、文字の大きさは「106～108%」がいいかもしれません。
背景画像で文字が見えない！！
素敵な画像なのに、文字が見えない！！！
そのまま濃い画像を使う人はいないと思いますが、これでは最初の『コントラストが強い』と同じです。
今回は画像に白い部分があったりするので、白文字も使えません。
背景を薄くしてみるとこんな感じです。
このくらいなら読みやすくていいかもしれません。
また、コンテンツの背景を白っぽく設定するのもいいとは思いますが、そうするとスマホで見た時に結局背景が表示されていなかったりするので、背景画像はなくていいと思います。
その代わり、ロゴのデザインにこだわるなど、本文の邪魔にならない場所での装飾をキレイに鮮やかにするといいですね。
読み込みが遅い！！！
私個人としては7秒くらいなら待っていますが、3秒で遅いと言われています。
原因はいくつかありますが、大体画像の容量が大きかったり、JavaScript（アニメーションなど）の読み込みで時間がかかるそうです。
こうしよう！
TinyPNGで画像を圧縮してからアップロードするのがいいと思います。
というか、私はそうしています。
あと、すぐに出来ることが2つ。
- 動画はなるべく入れない（トップページは避ける）
- WordPressを使っているなら、ページ読み込み速度の速い有料のテーマを使う！
以上のことを最低限修正していきましょう。
ネットでは顔が見えない分、相手も見えにくくなります。
人が書いている・読んでいるとあまり意識できません。
好かれるサイトにしたいなら、相手がいるということをガンガン意識していきましょう！
最後、要点をまとめます。
まとめ
- 背景は淡い色（出来るだけ白に近い色）にし、文字色は黒に近いグレー（コード#333333）にする
- 文字色と背景色のコントラストははっきりさせる（画像の文字入れなども同様）
- 音楽を流したいのなら再生ボタンをつける
- レスポンシブ対応にしましょう
- 文字は100~106%にする（小さすぎるものはダメ）
- 背景画像はつけないのが無難（フッターやヘッダーはOK）
- 読み込みを早くさせる工夫を！
読んでくれてありがとうございますヾ(*´▽`*)ﾏﾀﾈｰ♪
