いろはちゃん ふ〜ん、なるほど…
よこちゃん 何やら熱心にスマホ見てるね！
いろはちゃん 次に書く記事について、ちょっと調べものしてたの。
よこちゃん おっ、頑張ってるね。
そういえば、いろはちゃんは普段パソコンって使ってる？
いろはちゃん う〜ん。画像を作るときやブログの更新で使うことはあるけど。
InstagramもYouTubeもネットショッピングも…
今はスマホで何でもできちゃうから、そんなには使わないかな。
よこちゃん やっぱそうだよね。
いろはちゃん 調べものだって、今みたいに基本的にはスマホで完結しちゃうじゃない？
だから9割くらいのことは、全部スマホでやっちゃってるね。
よこちゃん 実はブログ記事もSNSも、9割がスマートフォンからアクセスされているって言われているの。
いろはちゃん そんなに多いんだ！
よこちゃん つまりこれからは、Instagramもブログもメルマガも…
私たちが作るコンテンツは、すべてスマートフォンから見られることを意識して作らなきゃダメってこと。
いろはちゃん そうなのね。
でもパソコンから見るのと、スマホから見るのってそんなに違うもの？
よこちゃん 大違いだよ。
しかも「スマホからだと読みづらいな…」と思われた時点で、みんな記事を読まなくなっちゃうんだから。
いろはちゃん えっ、そりゃ大変だわ！
よこちゃん でしょ？
だから今日は「スマホ優先で考える理由」と「見やすくて読みやすい記事の書き方」について教えるね。
スマートフォンからのアクセスが9割以上の今！スマホ優先で考えるのが大前提
いろはちゃん それにしてもインターネットの進化って、本当にすごいよね。
今は、おじいちゃんおばあちゃんでもスマホを持つ時代だもん。
よこちゃん ほんとほんと。
しかも昔は、ホームページやブログといえば、パソコン向けサイトだったじゃない？
いろはちゃん うん。調べものもパソコンからが普通だった。
よこちゃん でも今はホームページへのアクセスの9割が、iPhoneやiPadなどのスマートフォンやタブレットからになって…
パソコン優先で作っても見てくれる人は少ないし、スマホから見づらいなど効率悪いんだよね。
いろはちゃん うんうん。
よこちゃん だから最近では多くの企業が、はじめからスマートフォン優先のホームページやブログのコンテンツ作りに切り替えてるんだよ。
いろはちゃん そうなんだ！
よこちゃん そんなスマートフォンから見るお客さまを優先したコンテンツ作りをスマートフォンファースト（通称スマホファースト）というの。
いろはちゃん スマホファースト？はじめて聞いた！
でも普通のパソコンサイトでも、スマホ対応に切り替えられるよね？
それじゃダメなの？
よこちゃん 確かにできるんだけど…
やっぱり横画面のパソコンをベースに作られたサイトや記事は、縦画面のスマホからだと、読みづらかったりするのよ。
いろはちゃん なるほど。
よこちゃん だから、スマホからのお客さまが9割ってわかってるなら…
最初からスマホファーストでコンテンツを作れば、当然スマホユーザーにやさしいコンテンツになるよねってこと。
いろはちゃん お客さまのためのスマホファースト。
覚えとこうっと！
スマホの普及率は94%！スマホ優先で考えないと時代に遅れる
よこちゃん いろはちゃん知ってた？
NTTドコモモバイル社会研究所が2022年に発表した調査結果によると…
2022年の時点でスマホを持つ人の割合は、なんと94％を超えたんだよ。
引用：いろはちゃん すごいなぁ。
子どもから高齢者まで、1人に1台スマホやタブレットがあるのは当たり前の時代なんだね。
よこちゃん つまりアクセスは9割以上、スマホの普及率も9割以上ってこと。
これってもはや、スマホだけを意識してコンテンツを作ってもいいレベルだよ。
いろはちゃん ほんとだね。
私も仕事のときくらいしかパソコン使わないから、サイトの見やすさはスマホを重視してくれたほうが嬉しいもん。
よこちゃん でしょ？
実際にスマホファーストで作られている企業のサイトを見てみない？
いろはちゃん 見たい見たい！
よこちゃん 例えば ヘアアイロンやドライヤーで有名なSALONIAのWebサイト。
コンテンツの幅を狭くして、スマホでスクロールしやすいように作られているの。
引用：SALONIA公式サイト
いろはちゃん ほんとだー。
しかもパソコンから見ても、背景の色やデザインが統一されてるから違和感ないね。
よこちゃん そうなの。
スマホファーストなんだけど、パソコンからでも見やすいよう工夫が凝らされててステキだよね。
いろはちゃん うんうん。
よこちゃん 他にも、HondaハートのWebサイトも、とっても見やすくてオシャレだよ。
引用：Hondaハート
いろはちゃん カラフルで可愛い～。
コンテンツが真ん中に集中していても、余白がイラストになってるから寂しく感じないね。
よこちゃん しかもこのサイトには、PCサイトにはない、スマホファーストならではの大きな特徴があるの。
わかるかな？
いろはちゃん なんだろう？
えーと、文字がくっきりはっきりしてる…？
よこちゃん そう！スマホの小さい画面からでも見やすいように、あらかじめテキストサイズも大きくて、太めのフォントを使ってるよね。
いろはちゃん それが言いたかった。
よこちゃん パソコンでは不自然に感じなかったフォントの大きさや太さも…
スマホから見ると、文字が小さすぎて見にくかったりするの。
いろはちゃん 経験あるよ。
見やすいように画面を拡大すると、今度はサイトの端が見えなくなって横に画面動かさなきゃいけなかったりね。
面倒くさくて「もういいや、見ない！」ってなる(笑)
よこちゃん なるなる(笑)
でもスマホファーストにしていないばっかりに、自分のサイトや記事まで「もういいや見ない」って思われたら大変でしょ？
いろはちゃん それだけは阻止せねば…
よこちゃん だから、いろはちゃんも記事やサイトを作るときは…
スマホからでも見やすくてわかりやすく表示されるよう、工夫する必要があるんだよ。
いろはちゃん わかった！
どうやって工夫したらいいの？
よこちゃん 次の5つのポイントをおさえてね。
具体的に何をする？スマホファーストでおさえるポイント5選
① 読みやすくて大きなフォントを使う
よこちゃん まずは、基本中の基本。
スマホの画面って、パソコンよりも小さいじゃない？
いろはちゃん だね。
私のノートパソコンと比べても、3分の1くらいの大きさだわ。
よこちゃん だからパソコン基準で文字の太さや大きさを決めちゃうと、「読みづらい」といった問題が起こりやすいの。
いろはちゃん 確かに、小さくて線の細いフォントは、読むのイヤになるよね。
よこちゃん スマホファーストで選ぶべきは、ズバリ読みやすくて大きなフォント。
「たかが文字でしょ？」は大間違い！フォント選びで受ける印象は180度変わると合わせて、自分にピッタリのフォントを選んでね
② 文章のブロックとブロックの間の余白を大きくとる
よこちゃん スマホって横幅がせまくて、縦に長いじゃない？
いろはちゃん そうだね。
しかもどんどん下にスクロールするから、縦長の文章を読んでいる感じ。
よこちゃん でしょ？
だからスマホは、パソコンよりも１行に表示できる文字数がとっても少なくなるんだよ。
いろはちゃん しかも、フォントも大きめにしたほうがいいんだもんね。
よこちゃん そこでとっても大事になってくるのが、文章のブロックとブロックの間の「余白」なの。
いろはちゃん 余白？
よこちゃん 例えば、この文章を読んでみて。
どんな印象をもったかな？
よこちゃん なんか画面中が文字だらけで、ごちゃごちゃしてる。
読みづらくて、読む気失せるわ…
いろはちゃん じゃあ、こっちはどう？
いろはちゃん あれ？同じ文章なはずなのに、こっちならスラスラ読める…
よこちゃん でしょ？
間をあけずに文章を書き続けると、すぐにスマホの縦長の画面が文字でいっぱいになって…
読んでいて息苦しく感じちゃうの。
いろはちゃん ほんとだね。
余白がないと、息つぎができないまま一気読みしている感じになっちゃう。
よこちゃん でも文章のブロックとブロックの間に余白をつくってあげると…
読みながら、ちゃんと呼吸ができる感じがしない？
いろはちゃん うん！それに見た目もスッキリして気持ちがいいし、内容もちゃんと頭に入ってくる！
よこちゃん だからスマホファーストの文章作りでは、「余白」がとっても大事なんだよ。
③ 画像の文字は大きめにしておく
いろはちゃん さっそくよこちゃんに言われたとおり、文字も大きくして、余白もしっかり入れてみたよ。
これで、お客さまがスマホからでも快適に記事を読んでくれるね。
よこちゃん 実は、スマホファーストで気をつけなくちゃいけないことは文字や余白だけじゃないの。
いろはちゃん えーっ、そうなの？
よこちゃん サイトや記事に挿入する「画像」にも、気を配る必要があるのよ。
いろはちゃん そっか！
どうすれば、スマホからのお客さまが快適に見られるようになるかな？
よこちゃん まずは画像に書いてある文字の大きさ。
パソコンでは大きく見えていた画像の文字も、スマホで見ると読めないくらい小さくなることもあるの。
いろはちゃん うんうん。
よこちゃん だから文字のある画像を使う場合は、パソコンだと読みにくいことも考慮して、スマホでも読めるような大きめの画像を使うといいよ。
いろはちゃん オッケー！
自分で画像に文字を入れる場合も、文字を大きめにしたほうがいいよね？
よこちゃん もちろん。
文字を大きくすると、必然的に画像に載せられる文字数も少なくなるじゃない？
だから入れるキャッチコピーも、短くまとめてね。
いろはちゃん まかせてー。
よこちゃん あとは画像のなかのイラストなども、ちゃんと見せたいならスマホで見ることも意識して大きめに作っておいてね。
もしくはスマホ用にパソコン用とは別の画像を用意して表示を切り替えるとか…
いろはちゃん なるほど！
そういう風にすれば、画面の小さなスマホでも画像が見やすくなるんだね。
④ 画像サイズ(容量)を小さくする
よこちゃん 画像に入れる文字は大きめにするんだけど、画像のサイズ自体は小さくしてね。
いろはちゃん えっ、なんで？
それも大きいほうが良いんじゃないの？
よこちゃん いろはちゃんはスマホでサイトを見ていて「表示が遅いな～」って感じることはない？
いろはちゃん あるよ～。
電車やビル街に入ると、電波悪くなりがち。
画像が表示されなかったり、画面が真っ白になってイラっとしちゃう。
よこちゃん だよね。
スマートフォンはパソコンよりも、ネット環境が悪い場所で使うことも多いよね。
だから画像の容量が大きすぎると、画像を読み込めなくなっちゃうの。
いろはちゃん そうだったんだ…
よこちゃん ページが開きにくいと、そのまま離れていかれてしまう可能性が高いから…
通信が不安定になっても画像が表示されてページが読み込まれるよう、画像を圧縮してなるべくサイズを小さくしてみてね。
いろはちゃん せっかく見に来てくれたのに、画像サイズが重くて表示されないという理由で、離脱されてちゃもったいないもんね。
サクサク見られるように、画像のサイズには気をつけるよ。
⑤ 画像は正方形で作る
よこちゃん いろはちゃんは、普段どんな形の画像を載せてる？
いろはちゃん 形って…
普通の写真と同じ長方形だけど。
よこちゃん だよね。
パソコン優先で考えると、横幅のある画像のほうが読みやすいし、見た目もサイトになじむよね。
だけどさっきも言ったように、スマホから見ると、文字サイズが小さくなりすぎることもあるの。
いろはちゃん そっか…じゃあ縦長の画像のほうがいいってこと？
よこちゃん そうだね。縦長の画像はスマホには向いてるよ。
もしくはこのマママーケのように、正方形サイズで作るのがおすすめだよ。
いろはちゃん 縦長や正方形の画像なんて斬新～！
よこちゃん そう？
横幅がせまくなって、スマホから格段に見やすくなるし…
ブログのアイキャッチにもそのまま使えるから、マママーケでも正方形サイズの画像を使ってるよ。
いろはちゃん すごい便利じゃない。
よこちゃん天才～！
よこちゃん ふふふ、でしょ。
スマートフォンファーストはお客様のため
- Webサイトやブログへのアクセスの9割以上がスマートフォンから
- 2022年現在、スマートフォンの普及率も9割以上となった
- パソコンで見ることをベースに作られたコンテンツは、スマホからは読みづらいことも多い
- スマホファーストでおさえるポイントは大きな文字、余白、画像の文字、画像サイズと形の5つ
- スマートフォンを使うお客さまのためのコンテンツ作り（スマホファースト）が必要
いろはちゃん 見やすくて読みやすくて、使いやすいコンテンツのほうが、誰だって嬉しいよね。
よこちゃん そうだね。
だけどスマホファーストは、ただスマホ対応を最優先にすることじゃないの。
いろはちゃん …というと？
よこちゃん 私たちのサイトやブログに来てくれるお客さまが快適な時間を過ごせるために、私たちができるおもてなし…
それが、スマホファーストなんだよ。
いろはちゃん その考え方、とってもステキ。
よこちゃん 忘れちゃいけないのは、お客さまの求めていることを意識して作ることだからね。
いろはちゃん うん！そのために大切なのが、以下の5つのポイントでしょ？
- 読みやすくて大きなフォントを使う
- 文章のブロックとブロックの間の余白を大きくとる
- 画像の文字は大きめにしておく
- 画像サイズを小さくする
- 画像は正方形で作る
よこちゃん そのとおり！
いろはちゃん 私も、大切な自分のお客さまのために、積極的にスマホファーストを実践しようっと。
＼どんどんお客様が集まる！／
「ファン集客チェックリスト」プレゼント
