リュージ、「レスポンシブデザイン」ってよく聞くけど、結局何のことなの？

簡単に言うと、1つのページのデータで、パソコンで見てもスマホで見ても、画面の幅に合わせて自動的にレイアウトが組み変わる仕組みのことだよ。PC用とスマホ用を別々に作らなくていい、というのが最大のポイントなんだ。

別々に作る方が、それぞれきれいに見えそうな気もするけど？

その分メリットも大きいんだ。お知らせを1本更新する時も、レスポンシブなら1回の更新で済む。別々に作ると、PC版だけ直してスマホ版を直し忘れる、みたいな事故も起きやすい。それに今はGoogleがスマホ版の内容を基準にサイトを評価する仕組みになっているから、レスポンシブが実質的な標準になっているよ。

ノーコードツールを使っていれば、そこは自動でやってくれるんじゃないの？

基本の仕組みは自動でやってくれるよ。ただ「自動でレイアウトが変わる」のと「自動できれいに見える」のは別問題なんだ。特に文字数が多い要素やボタンまわりは、自動調整だけだと崩れやすい。ここからは実際によくある崩れパターンを見ていこう。

前回作ったLPで、丸いバッジがスマホだと窮屈に見えたのも、これが原因？

まさにそれ。PCの横幅がある画面なら3つ並べても余裕があるけど、スマホの細い画面幅に同じ文字量を押し込むと、文字がぎゅっと詰まって窮屈に見える。これが「文字がはみ出す・詰まる」の典型パターンだよ。

ボタンの中の文字がはみ出しちゃう、みたいなこともある？

あるある。PCで「無料相談はこちら」と1行に収まっていたボタン文言が、スマホの幅だと2行に折り返されて、ボタンの高さまで変わってしまうことがある。対策としては、ボタンの文言をできるだけ短くしておくこと。「無料相談」だけにするとか、長い文言を使うなら、あらかじめスマホ表示でどう見えるか必ず確認する習慣が大事だよ。

画像の中に文字を入れてる場合はどうなるの？

それが一番厄介なパターン。画像に直接焼き込んだ文字は、画像ごと縮小されるから、スマホだと文字が小さすぎて読めなくなることがある。キャッチコピーのような重要な文字は、画像に埋め込まずに、テキストとして別に配置するのが安全だよ。

見た目はきれいでも、実際にスマホで操作すると押しにくい、みたいなこともある？

すごくよくある。PCだとマウスのポインタは1点だから小さいボタンでも正確にクリックできるけど、スマホは指でタップするから、ボタンが小さいと隣の要素を誤タップしてしまうんだ。見た目のデザインを優先してボタンを小さくしすぎると、この問題が起きやすいよ。

どれくらいのサイズがあればタップしやすいの？

目安として、ボタンの縦幅は44px前後以上を確保するのが一般的な基準とされているよ。ノーコードツールを使う場合は、細かいピクセル数を自分で計算する必要はなくて、スマホのプレビューで実際に自分の指でタップしてみて、「押しにくいな」と感じたら大きくする、くらいの感覚で十分だよ。

ボタン同士が近すぎて隣を押しちゃう、みたいなこともありそう。

その通り。「詳しくはこちら」と「お問い合わせ」のボタンがぴったりくっついていると、指の太さのぶん誤タップが起きやすくなる。ボタン同士の間には、指1本分くらいの余白を意識して空けておくと、操作ミスをかなり減らせるよ。

実際に公開する前に、崩れていないか手軽にチェックする方法ってある？

一番手軽なのは、パソコンのブラウザでウィンドウの幅を実際に狭めてみること。狭めていく過程でレイアウトがちゃんと1カラムに組み変わればひとまず問題ない。横スクロールが出てきたり、表示が崩れたりしたら、その幅で何か問題が起きている証拠だよ。

ノーコードツールならプレビュー機能があるから、それでも十分？

十分だよ。前回のLP制作でも使ったけど、PC表示とスマホ表示を切り替えられるプレビュー機能は、多くのノーコードツールに標準で付いている。ただプレビューで見るだけじゃなく、実際に自分のスマホでも一度は開いて、指で触って確認する一手間をかけると安心感がぐっと違うよ。

iPhoneとAndroidで見え方が違う、みたいなことも気にした方がいい？

厳密に全機種を確認するのは難しいけど、少なくとも自分と周りの人が持っている端末で1回ずつ見てもらうだけでも、気づける崩れは多い。完璧を目指すよりも、「主要な崩れパターンを知った上で最低限チェックする」くらいの心構えで十分だと思うよ。

「自動で対応してくれるから安心」じゃなくて、最後は自分の目と指で確認するのが大事なんだね。

その通り。今回のシリーズで作ったLPも、公開前にもう一度この早見表を見ながらチェックしてみるといいと思うよ。