こういった疑問を解決します。

この記事を書いてる僕は、ブログ歴1年5ヶ月の副業ブロガーです。

今回は、スマホで見やすいブログを書くコツを紹介しています。

「読者の8割はスマホで見てるから、スマホで読みやすい記事を書くことが大事」って言われますが、「それはわかるけど、じゃあ具体的にどうすればいいの？」って思いますよね。

僕もそうでしたが、これまで200記事以上書いてきて”スマホで読みやすくするコツ”が掴めました。

結論を先に書いておくと、

これが5つのコツ。

なにも難しいことはなく、上記のコツをちょっと意識するだけで見やすいブログに変わります。

本文で詳しく解説しつつ、スマホで見づらくなる原因も解決してるので、サクッと読みやすいブログに変身できますよ。

スマホで見やすいブログを書くコツは5つ

記事冒頭にも書いたとおり、コツは下記の5つ。

1つずつ説明していきますね。

どれもすぐに取り入れることができる内容ばかりなので、チェックリスト代わりに使ってみてください。

①：「。」で改行する

句点「。」で改行しましょう。

読点「、」で改行したり、何もない文章の途中で急に改行してしまうと、

など、良くないことだらけ。

PCならそれほど違和感を感じなくても、スマホだと違和感だらけ。

具体的には、下記の文章をご覧ください。

上記の文章は句点「。」で改行しており、スマホで見ても違和感ないはず。

スマホだとこんな感じ。

続いて、同じ文章を読点「、」で改行してみました。

読点「、」で改行すると、なんか間延びしますよね。

スマホだとこんな感じ。

間延びしすぎて、シンプルに見づらいし読みづらい、、、。

句点「。」で改行した場合と、読点「、」で改行した場合を見比べてみましょう。

どっちが見やすいかは、一目瞭然ですよね。

スマホで見やすくするなら、句点「。」で改行しましょう。

②：1つの文章を長くしない

1つの文章は3行以内に収めます。

PCより横幅が狭いスマホ画面で、行数が多くなると読む気が起きません。

先ほどの『読点「、」で改行した文章』がまさにそのとおりで、「あっ、この文章読むのツライかも…」と感じたはず。

他の具体例を見るために、下記のようなPCだと3行で収まってる文章を書いてみました。

ブログで煮詰まった時は、近所の河川敷をひたすら散歩してます。体を動かすことで気持ちがリフレッシュできるし、机でじーっとしてるより圧倒的にアイデアが湧きやすくなりますね。煮詰まった時は5分でいいから、ぜひ散歩がいい感じです。

PC画面だとそれほど違和感ないかもですが、スマホだと下記のようになります。

スマホで見た場合

目の前に『文字の塊』が表れて、なんか読む気が失せますよね･･･。

なので、長くなるなら、下記のように改行して3行以内に収まるように調整すればOK。
コツは、句点「。」改行です。

3行以内を目安に、改行した場合

フォントサイズや画面サイズによりますが、スマホは1行20字ほどなので、目安としては60〜70字ぐらいに収めるとスマホでもいい感じに仕上がりますよ。

③：1画面に1装飾入れる

ブログを読んでるスマホ画面内に装飾が1つ入ると、文章にメリハリがでて見やすくなります。

ここでいう装飾とは、下記のとおり。

本記事をスマホで見るとわかりやすくて、常にスマホ画面内に1装飾が入るように気をつけてます。

文字だけがダーッと書いてあるだけだと読者的にはシンドイので、装飾をいれてメリハリをつけることが大事ですね。

④：見出しの下に画像を入れる

見出しの下に画像やイラストを入れましょう。
※WordPressだとH2見出しのことです。

先ほどの装飾と似てる部分があって、見出しの下に画像が入ることで読者の文字疲れを解消できます。

当ブログも見出しの下には画像が入れており、文字の中に画像が入ることでちょっとホッとできますよね。そして何より『シンプルに見やすい』と思います。

文字だらけの説明書より、イラストや画像が入ってる方が圧倒的に見やすいはず。

意識して見出しの下には画像を入れましょう。

ブログに使いやすいフリー素材や画像は下記記事にてまとめてるので、チェックしてみてください。
>> ブログにおすすめフリー素材・画像サイト１２選｜商用利用OK

⑤：文字まわりはシンプル・イズ・ベスト

上記のような感じでOK。
特に設定を大きく変えず、ブログ備え付けそのままがいいです。

奇抜なことをしすぎると、かえって見づらくなってしまいます。

例えば、下記テキストのどちらがリンクでしょうか？

きっと青色がテキストリンクだと思うはずで、『ググった時のテキストリンクとか青色だし、青色 ＝ リンクが普通だから』ですよね。

なので、テキストリンクを赤色にしたり、奇抜なことをするの逆にわかりづらくなるだけです。

色を使いすぎると「何色が大事か、わからなくなる」ので、文字まわりは普通が一番見やすい『シンプル・イズ・ベスト』です！

スマホで見づらくなる原因は『スマホ画面』で見てないから

PC画面では見やすいのに、スマホ画面だと見づらい記事になる原因は、ほぼこれ。

PC画面を見ながら記事を書くので、自動的に『PC画面に最適化』された記事になってしまうからです。

大きい画面で書きつつ、スマホサイズを想像しながら書ければこんなことにはなりませんが、そんなの上級者じゃないと無理ですね。

なので、スマホで見づらくなる原因は『スマホ画面』を見て記事が書ければ解決しますね。

その『スマホ画面』を見ながら書く方法は次の2つ。

スマホで記事を書く

スマホ自体で記事を書いちゃいましょう。

各ブログアプリやSafariやChromeブラウザで書くのもありですね。

タッチパネルだと効率悪いので、下記のようなワイヤレスキーボードがあればわりと快適に書けるんじゃないでしょうか。

とはいえ、スマホ画面は小さいので、オススメはできませんね。

実用的なのは次の方法です。

スマホサイズの画面で記事を書く

PCで記事を書く時に、画面サイズをスマホにすればOKです。

イメージはPC画面の中にスマホ画面で記事を書くということ。

スマホサイズの画面で記事を書くのは、

のいずれかの方法でスマホ画面での表示を見つつ、書くことができます。

ブログエディタのモバイルモード

上記画像はWordPressブログのエディタ写真でして、画面右上の「プレビュー」→「モバイル」にすることで、スマホサイズの画面で記事を書くことができます。

この方法が一番わかりやすくて、僕もよく使ってる方法です。

まずはデスクトップモードで普通に記事を書いて、あとからモバイルモードにして装飾したり、スマホで見やすいように調整する感じですね。

ただし、新エディターでしかこの機能が使えないので、クラシックエディターを使ってたり、WordPress以外のブログサービスを使ってる人は、次の方法をお試しください。

ブラウザのデベロッパーツール

SafariやChromeといったブラウザのデベロッパーツールを使うことで、PC画面をスマホ画面に変換することができます。

といった使い方ができるようになります。

この方法を知っておくとPCで「このサイト、スマホで見たらどんな感じ？」って時に、わざわざスマホを取り出さなくてもスマホ表示させることができて、けっこう便利ですよ。

デベロッパーツールでスマホ画面にする方法は、【Google Chrome／Firefox】でPCからスマホの表示をかんたんに確認する方法！やSafariでスマホページを確認する方法にて解説されてます。

動画だと下記がわかりやすいですね。

PCだと見やすいのに、スマホだと見づらくなる原因は、PCで書いてるがゆえに自然と『PC画面に最適化』されてしまうから。

なので、スマホで見やすい記事にするには、スマホ画面でチェックすることで解決できますよ。

ブログを見やすくするのにデザインセンスなんて不要です

なぜなら、デザイナーでもない限り「ゼロから生み出す必要」がないから。

きせかえ機能で簡単に見やすくできる

ブログによってはテーマやテンプレート機能といった『きせかえ機能』があって、誰でもかんたんにおしゃれなデザインにすることができます。

WordPressブログなら8,000種類以上のテーマがあり、FC2ブログなら5,000種類以上のテンプレートが最初から用意されてるので、あとは選ぶだけで完成。

きせかえ機能があるブログサービスは次のとおり。

テーマやテンプレート機能といった『きせかえ機能』を使うことで、デザインセンスがなくても見やすいブログになりますね。

ブログサービスについてはブログを始めるならココ！おすすめサービス8選【目的別に紹介】で比較してるので、気になる方はご一読ください。

当ブログはWordPressを使いつつ『SWELL』というテーマを導入しており、おかげで簡単におしゃれなデザインブログが作れています。

>> SWELLをチェックする

見やすいデザインを取り入れればOK

自分が「いいなぁ。」と思ったサイトを調べて、参考にしましょう。

ブラウザの拡張機能を使うことで、「このサイトのフォントサイズはいくつだろう？」といったことがサクッと調査できます。

拡張機能はアドオンとも呼ばれ、「ブラウザを便利にするワンポイントツール」のことで、個人的にデザインまわりでよく使う拡張機能は次の4つ。

以上の4つです。

WhatFont

WhatFontを使うとフォントサイズ、行間、フォント名、文字色などがワンクリックでわかります。

見やすいブログのフォントサイズや文字色を参考にしつつ、自身のブログも見やすく改善しましょう。

使い方：WhatFontの使い方を解説。使用フォントがすぐわかる

ColorPick Eyedropper

ColorPick Eyedropperは「この部分、何色？」がわかるツールです。

気になる部分カラーコード「#000やrgb(0,0,0)」がわかって超便利。

「この色いいなぁ！」って時は、すぐに調べて、すぐに取り入れましょう。

使い方：ColorPick Eyedropperの使い方。便利なカラーコード早わかり！

View Image Info (properties)

View Image Info (properties)を使うと画像の大きさやサイズ、拡張子が一発でわかります。

ロゴサイズを測ることもできるので、大きさの参考にできますね。

使い方：サイト上の画像サイズをワンクリックで計測できる拡張機能「View Image Info」

Page Ruler Redux

Page Ruler Reduxはウェブサイト上のサイズを測定できる便利ツール。

サイドバーの幅、囲み枠の大きさや「この長さはどれぐらい？」がピクセル単位でわかります。

使い方：サイト上のサイズを測る方法！Page Ruler Reduxで簡単！

デベロッパーツール

これまで4つの拡張機能を紹介してきましたが、ブラウザのデベロッパーツールなら1つで全部できます。

その分、ちょっと操作を覚えたりする必要もあるんですが、ブログの見た目をリアルタイムで変化させたりできてデザイン変更とか超便利になるので、覚えておいて損はないかと思います。

サルワカさんの記事がわかりやすいので、ぜひ参考にしてみてくださいね。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

まとめ：スマホでブログを見やすくしよう！

今回は、スマホで見やすいブログを書くコツを紹介してきました。

ざーっとまとめます。

以上、5つのコツでした。

アクセスの8割はスマホからなので、スマホで見やすくすることは超大事です。

どれも難しいことはなく、サクッと取り入れることができるのでやってみてくださいね。

とはいえ、見た目にこだわりまくるのはほどほどに。

いくら見やすくても内容がイマイチだと誰も読まないけど、役に立つ内容なら見た目はほどほどでも読まれるので。

ということで、今回は以上です。 これからも当ブログと一緒にがんばっていきましょうね。

それじゃあ、また！