読みづらいサイトになっていませんか？直帰率が高い方はひょっとしたら…。

いい記事を書いたのに、直帰率は高いし、サイト滞在時間も短い…とお悩みではありませんか？

それはもしかすると、「読みづらいがために読まれていない」サイトなのかもしれません。

あ、申し遅れました、私、餅太郎と申します。

最近はスプラトゥーンというゲームにハマっております。

本職はSEO、デザイン、アフィリエイトです。

今回は、読まれやすい文字間隔、行間隔について書いていきたいと思います！

読みづらいサイトはみんなギッチギチ！直帰率が高くなる大きな原因になっています。

なぜか多い、文字がギチギチに詰めこまれているサイト

例文：

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。

しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

------------------------------------------------

この文章は割と、PCで見てもスマホで見ても読みやすいと思います。

これが例えば、

こんな感じでギチギチにつめこまれたら、ちょっと読む気をなくしてしまいませんか？

意外とこういう感じのサイトってまだまだ多いんですよね。

キャプションなどのちょっとした説明文なら多少間隔が詰まっててもいいとは思いますが、メインのテキストがこんな感じでみっちりしてたらかなりの人はパッと見て離脱してしまいます。

文字間隔、行間隔の目安

文字間隔も行間隔も、実際に読みながら調整していけばそれほど大きくハズすことはないと思います。

とはいうものの、一応の目安はあったほうが良いと思うので、表にしてみました。

コーディングは、行間隔は「line-height」で、文字間隔「letter-spacing」で調整してみてください。

行の間隔は、0.5文字分くらい開けると読みやすくなります。

文字間隔はデフォルトのままですとかなり狭めな設定になっていますので、ちょっとだけ文字同士の間隔を空けてあげると良いと思います。

あとは好みやデザインによって調整してみてください。

文字の大きさの決め方

文字の大きさを決めるときは、かならずPCとスマートフォンの両方で見るようにしてください。

絶対に、PCのスマホシミュレーターで確認するだけ、とかはダメです！

できればAndroid、iosともに現在の主流機種と前世代機をいくつかで検証することをおすすめします。

Android機の大きいディスプレイだけで確認していたら、iPhoneでは文字がちょっと小さすぎた、なんてことになってしまっては目も当てられません。

「font-size」をいい感じに調整してみてください。

もし、自分の持ってるサイトが読みづらいかも、と思い始めたら、一回調整してみるのも良いと思いますよ！