スマホでも見やすい！レスポンシブデザインのホームページ作成ポイント

レスポンシブデザインの基本

PAGEKitのレスポンシブデザインは、一つのホームページで、パソコン・タブレット・スマートフォンなど、見る人の画面サイズに応じて最適なレイアウトに自動で調整する機能です。そのため、スマートフォン専用ページを別途作成する必要はありません。

スマホで綺麗に表示させるための4つの基本テクニック

1. 画像の幅を「100%」に設定する
画像がスマホ画面からはみ出ないよう、画像のプロパティで「幅」を「100%」に設定し、「高さ」は空欄にします。これにより、画面幅に合わせて画像のサイズが自動で調整されます。

2. 表（テーブル）の幅も「100%」に設定する
画像と同様に、表もプロパティで幅を「100%」に設定します。各列の幅も「%」で指定すると、全体のバランスが崩れにくくなります。

3. 位置調整に「スペース」や「改行」を多用しない
パソコンでの見た目だけを考えてスペースキーや改行でレイアウトを調整すると、スマホで見た際に大きく崩れる原因になります。位置調整は、編集機能の「左揃え・中央揃え・右揃え」やインデントを使いましょう。

4. レスポンシブプレビューで常に確認する
編集画面の右上にある「PC」「タブレット」「スマホ」の各プレビューボタンを押せば、編集中でも各端末での見た目を確認できます。こまめにチェックする習慣をつけましょう。

【重要】レスポンシブデザイン選択時の必須設定

レスポンシブデザインをご利用の場合は、スマートフォン専用ページへの「自動転送機能」が意図しない表示の原因になることがあります。必ず以下の手順で設定を「使用しない」に変更してください。

1. 「スマートフォンHP作成」へ移動
管理画面の左メニューから「スマートフォンHP作成」を選び、「高度な設定」（歯車マーク）をクリックします。

2. 機能を「使用しない」に変更
「スマートフォン機能」という項目を、「使用しない」に変更して保存します。

3. ホームページを公開
最後に「ホームページ公開」ボタンを押して、設定をサイト全体に反映させます。

よくある表示崩れと解決策

解決策： はみ出している部品の幅が、固定値（px）で指定されているのが原因です。幅の指定を「%」に変更してください。

よくあるご質問