【Webノウハウ】スマホで見づらい？公開前に必ず確認したい「レスポンシブ表示のポイント」

Webサイト訪問者の8割以上がスマートフォンから閲覧していると言われています。
パソコン画面ではきれいに見えていても、スマホ表示で崩れていては、せっかくの訪問者を逃してしまいます。

今回は、SiteCraftでページを公開する前に必ず確認しておきたい「スマホ表示の3大チェックポイント」をご紹介します。

PCで区切りの良い位置に改行を入れていると、スマホの狭い画面では一文字だけ改行されてしまう「不自然な改行」が発生しやすくなります。

＜ポイント＞

• PC用とスマホ用で無理に手動改行を入れすぎず、端末の画面幅に合わせて自然に折り返される設定・記述を意識しましょう。

PCの大画面で見せていた図解やバナー画像は、スマホ画面になるとキュッと縮小されます。

＜ポイント＞

• 画像内のテキストが小さすぎて読めなくなっていないか確認する。
• 縦長の画像になりすぎて、スクロールの邪魔になっていないかチェックする。

マウス操作と違い、スマホは指でタップして操作するため、押しやすいか確認しましょう。

＜ポイント＞

• お問い合わせや資料請求のボタンが小さすぎないか。
• 隣り合うリンクやボタンとの距離が近すぎて、誤タップを誘発しないか。
• 指一本分くらいの押しやすいサイズ・余白が確保されているか確認しましょう。

SiteCraftの管理画面 下部にある3つのアイコンボタンをそれぞれワンクリックで、PC・タブレット・スマホ表示を切り替えることができます。（ページ編集中の画面での確認となります。）
※各表示の確認後は、右下の「保存する」ボタンで保存をしてください。

↓　パソコンサイズのチェック（デフォルト）

↓　タブレットサイズのチェック

↓　スマホサイズのチェック

編集画面での表示確認＆保存後は公開されます。その後、実機に近い表示を各ブラウザで確認することもできます。
ブラウザの幅をぎゅっと狭めて、パソコンで簡単にスマホ表示の確認ができます。

１.  確認したいページを開く（Chromeなど）

２.  ウインドウの右上にある四角いボタンをクリックし、ウィンドウを最大化ではなく、少し小さくする（全画面表示を解除）

３.  ウインドウの横や角にカーソルを合わせ、「⇔」マークが出たら、ドラッグして横幅をぎゅーっと限界まで狭める（サイトのデザインが自動的にスマホ用に切り替わります）
 

テキストの変な改行や、画像・ボタンの収まり具合をサクッと確認したいときに一番手軽な方法です。
※最終チェックは、実機（実際のスマホ）で確認することをおすすめいたします。

公開前のわずか数十秒、スマホ表示をチェックするだけで、ユーザーの読みやすさや問い合わせ率（CV率）が大きく変わります。
ぜひ公開前の習慣にしてみてください！