ノーコードでレスポンシブ対応するには、画面幅ごとのレイアウトを設定し、パソコン・タブレット・スマートフォンで表示を確認します。多くのノーコードツールでは、画面幅に応じて要素の幅、並び方、文字サイズ、余白などを調整できます。
ただし、パソコン用の画面を作るだけでは自動的に見やすくなるとは限りません。最初からレスポンシブを意識して構成し、各画面サイズで崩れがないか確認することが重要です。
ノーコードのレスポンシブ対応とは
レスポンシブ対応とは、パソコン、タブレット、スマートフォンなど、画面の幅に合わせてWebページのレイアウトを変える仕組みです。画面が狭くなったときに、横並びの要素を縦並びにしたり、画像や文字の大きさを調整したりします。
ノーコードでは、HTMLやCSSを直接書かずに、管理画面の設定やドラッグ操作で次のような調整を行います。
- 要素の幅を画面に合わせて伸縮させる
- 2列や3列のレイアウトをスマートフォンでは1列にする
- 文字サイズや行間を画面幅に合わせて変更する
- 画像を親要素の幅に合わせて縮小する
- メニューを横並びから折りたたみ式に変更する
- スマートフォンでは不要な要素を非表示にする
ノーコードでレスポンシブ対応する基本的な方法
基本的には、レイアウトを作成し、画面幅ごとの設定を行い、実機やプレビューで確認するという順番で進めます。
-
パソコン用とスマートフォン用の構成を決める
最初に、どの情報を必ず表示するか、画面が狭くなったときに何を縦並びにするかを決めます。たとえば、パソコンでは「画像と説明文」を横並びにし、スマートフォンでは画像の下に説明文を配置します。
-
固定幅ではなく、画面に合わせて変わるレイアウトを使う
要素の幅を常に同じ数値に固定すると、スマートフォンで画面からはみ出すことがあります。可能な場合は、親要素の幅に合わせる設定や、画面幅に応じて伸縮する設定を使用します。
-
横並びの要素を画面幅に応じて切り替える
カードやボタンを横に並べる場合は、画面が狭くなったときの列数を設定します。パソコンでは3列、タブレットでは2列、スマートフォンでは1列という形にすると、内容を読みやすくできます。
-
文字サイズと余白を調整する
パソコン用の大きな見出しや余白をそのままスマートフォンに使うと、画面の大部分を占めたり、文章が読みにくくなったりします。見出し、本文、ボタンの文字サイズと、上下左右の余白を画面幅ごとに見直します。
-
画像と動画を親要素の幅に合わせる
画像は表示領域より大きくならないように設定します。画像の横幅を固定するのではなく、親要素に合わせて縮小できる設定を選ぶと、画面からのはみ出しを防ぎやすくなります。
-
ナビゲーションの表示方法を変更する
パソコンで横一列に表示しているメニューは、スマートフォンでは項目が入りきらないことがあります。画面が狭い場合は、メニューを折りたたむボタンや、縦並びのメニューに切り替えます。
-
複数の画面幅で表示を確認する
ノーコードツールのプレビューで、パソコン、タブレット、スマートフォンの表示を確認します。確認できる場合は、実際のスマートフォンでも操作し、横スクロールやボタンの押しにくさがないかを調べます。
画面幅ごとに設定するときの考え方
レスポンシブ対応では、特定の端末名だけでなく、コンテンツが見づらくなる幅を基準に設定します。ツールによって、ブレークポイント、デバイス設定、レスポンシブ設定など名称は異なります。
| 画面幅の例 | 主な調整内容 |
|---|---|
| 広い画面 | 複数列のレイアウト、横並びのメニュー、大きめの余白 |
| 中程度の画面 | 列数の削減、画像と文章の幅の調整、メニューの整理 |
| 狭い画面 | 1列表示、縦並び、文字サイズと余白の縮小、メニューの折りたたみ |
重要なのは、すべての要素を画面幅ごとに作り直すことではありません。共通のレイアウトを使いながら、並び方、幅、余白、表示・非表示だけを必要に応じて変更すると、管理しやすくなります。
レスポンシブ対応で崩れやすい部分
固定幅の画像やボタン
画像やボタンの横幅を大きな数値で固定すると、スマートフォンの画面に収まらない場合があります。画面幅に合わせて縮小できる設定にし、ボタンの文字が2行になっても操作しやすい大きさを保ちます。
横並びにしたカード
複数のカードを横一列に固定すると、カード内の文章が極端に狭くなることがあります。画面が狭くなったら列数を減らすか、カードを縦に並べます。
長い見出しやURL
長い見出し、商品名、URLなどは、画面幅が狭いとレイアウトを押し広げることがあります。見出しの改行や文字サイズを確認し、必要に応じて短い文言に変更します。
表や埋め込みコンテンツ
横幅の大きな表、地図、動画、外部サービスの埋め込みは、通常の文章よりもスマートフォン対応が難しいことがあります。横スクロールにする、項目を減らす、縦型の表示に置き換えるなど、コンテンツの形式自体を見直します。
表示確認でチェックする項目
レスポンシブ対応が完了したかは、見た目だけでなく操作できるかも確認します。次の項目を画面幅ごとにチェックしてください。
- ページの横幅から画像や文章がはみ出していないか
- 横方向の不要なスクロールが発生していないか
- 見出しや本文が小さすぎないか
- ボタンやリンクを指で押しやすいか
- メニューを開閉できるか
- フォームの入力欄が画面内に収まっているか
- 画像の重要な部分が切れていないか
- ポップアップや固定表示が本文を隠していないか
- 横向き表示にした場合も内容を確認できるか
プレビューで問題が見つかったら、まず原因となっている要素を特定します。画像や外部埋め込みだけがはみ出しているのか、親コンテナ自体の幅が固定されているのかによって、修正方法が変わります。
ノーコードだけで対応しにくい場合
ノーコードツールの機能だけで対応できる範囲は、使用するサービスやテンプレートによって異なります。細かなブレークポイントの指定、特殊なアニメーション、複雑な表、外部サービスの埋め込みなどは、標準設定だけでは調整しにくいことがあります。
その場合は、次の順番で対応すると判断しやすくなります。
- 不要な要素や装飾を減らす
- 横並びを縦並びに変更する
- 固定幅を画面に合わせて変わる幅に変更する
- 別のブロックやテンプレートに置き換える
- ツールが提供するカスタムCSSなどの機能を確認する
カスタムCSSを使えるかどうか、使用できる範囲、プランによる制限はツールごとに異なります。利用するサービスの設定画面や公式のヘルプで確認し、分からない仕様を前提に作り込まないことが大切です。
ノーコードでレスポンシブ対応するコツ
先に情報の優先順位を決め、横幅の狭い画面から確認することがポイントです。スマートフォンでは表示できる情報量が限られるため、すべてをパソコンと同じ並びで残そうとすると、文字やボタンが小さくなりやすくなります。
また、最初から多くの固定値を設定せず、コンテナ、グループ、セクションなどの親要素を基準にレイアウトを組むと、画面幅が変わっても調整しやすくなります。
ノーコードのレスポンシブ対応は、画面幅に応じて「幅」「並び方」「文字サイズ」「余白」「表示状態」を調整し、複数の端末で確認する作業です。まずはスマートフォンで横スクロールや操作しにくい箇所がないかを確認し、固定幅の要素や横並びのブロックから修正すると効率的です。
