レスポンシブデザインのサイトを作るにはどうすればよいでしょうか。
- 更新日: 2025-02-25 09:05:52 UTC
コマースクリエイターご利用店舗様専用の記事です
※スタートアップテーマで構築する店舗様向けのご案内です。
コマースクリエイターの初期設定では、
スマートフォン表示とPC/タブレット表示時のデザインを切り替える設定になっております(=アダプティブデザイン)。
レスポンシブデザインに変更するには、commerce creator>テーマ の右下の「デバイス設定を変更する」より、
スマートフォン・タブレット・PC(その他)すべてを同じテーマに変更することで可能です。
なお、デフォルトでは「スタートアップテーマ(PC/タブレット)」と「スタートアップテーマ(レスポンシブ/スマートフォン)」をご用意しておりますが
(スケルトンテーマもございますが、こちらはcommerce creatorに慣れた制作担当者様向けのテーマです)
PCでは2カラム、スマートフォンでは1カラムと切り替えたい場合は「スタートアップテーマ(PC/タブレット)」を
全てのデバイスで1カラムで表示させたい場合は、「スタートアップテーマ(スマートフォン)」もしくは「スタートアップテーマ(レスポンシブ/スマートフォン)」を
選択してください。
なおレスポンシブで構築しますと、各デバイスごとに出力内容を大きく変える際に、
メディアクエリなどレスポンシブサイト構築用のCSSの知識が必須となります。
またデバイスごとに表示を大きく変えるには、各デバイスごとのHTMLやCSSの出力が必要となりますので、
そのコード量によってはページの表示速度に悪影響を及ぼす可能性がございます。
制作会社が付いていない場合、
あるいは社内にHTMLやCSS、JavaScriptに詳しい制作担当者がいない場合には、
レスポンシブではなくアダプティブで構築することをおすすめします。