キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

デバイス設定

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

デバイスとは

スマートフォン、タブレット、PC・その他の3種類のデバイスで、表示するテーマを変更できます。

初期状態(スマートフォン最適化サイト)

スマートフォンに表示するテーマ、タブレットとPCに表示するテーマが設定されています。
スマートフォン、PC・タブレットのそれぞれに最適化されたECサイトを構築できます。

デバイス最適化サイト

スマートフォン、タブレット、PC・その他の各デバイスごとに別のテーマを設定します。デバイスに最適化されたレイアウトを構築することで、デバイスごとに最適なECサイトを表示できます。
タブレットとPCそれぞれにテーマを構築するには、テーマを複製します。

レスポンシブ対応サイト

全デバイスに同じテーマを設定し、1つのテーマに、全デバイスに対応できるレイアウトを構築することで、レスポンシブ対応が可能です。詳しくはこちらをご覧ください。

デバイス判別とテーマとレイアウトについて

スマホ、タブレット、PC・その他の3種類のデバイスのいずれに該当するかをシステムで自動判定し、設定されたテーマを表示します。

各テーマではページごとの表示内容をレイアウトとして設定できます。レイアウトでは、HEADタグの内容(CSSやJavaScriptを設定)、BODYタグの内容(表示するコンテンツをパーツとして設置)を設定できます。表示するデバイスに最適な表示内容をレイアウトに保存してください。

ページに対する表示デバイスごとの表示内容をページに対応するレイアウトとして構築します。消費者がECサイトにアクセスすると、デバイス判定が行われ、デバイス設定されているテーマのレイアウトが表示されます。

設定

デバイス設定で、どのデバイスにも指定されていないテーマは、テーマで「未利用」になります。

スマートフォン

スマートフォンでECサイトを表示する場合に表示するテーマを変更できます。

タブレット

タブレットでECサイトを表示する場合に表示するテーマを変更できます。

PC(その他)

PCおよびその他のデバイス(スマートフォン・タブレットと判定されなかったデバイス)でECサイトを表示する場合に表示するテーマを変更できます。

保存する

デバイス設定を保存します。

戻る

未保存の作業内容を破棄します。

レスポンシブ対応にする

レスポンシブ対応とは、すべてのデバイス(PC・スマートフォン)で表示されるコンテンツを一つにする、という対応になります。
ここでは、ECサイトにアクセスされた場合に、どのデバイスでも同じテーマが表示されるように設定を変更します。

管理画面メニューよりテーマを表示します。
テーマ一覧の画面右下にある「デバイス設定を変更する」ボタンを押下します。

デバイス設定

初期設定では以下の状態になっています。

項目 選択
スマートフォン スタートアップテーマ(スマートフォン)
タブレット スタートアップテーマ(PC)
PC(その他) スタートアップテーマ(PC)

スマートフォンの設定を変更し、「スタートアップテーマ(PC)」を選択します。
スマートフォン・タブレット・PC(その他)のすべてが「スタートアップテーマ(PC)」となるように変更します。

項目 選択
スマートフォン スタートアップテーマ(PC)
タブレット スタートアップテーマ(PC)
PC(その他) スタートアップテーマ(PC)

画面右下の「保存する」ボタンを押下します。これで、スマートフォン・タブレット・PCでECサイトを表示すると、「スタートアップテーマ(PC)」が表示されるようになりました。

ECサイト独自のシステム制御部分(システムパーツ)について

スタートアップテーマ(PC)は、あらかじめレスポンシブコーディングとなるように設定されています。ただし、ECサイト独自のシステム制御部分(システムパーツ)については、閲覧デバイスでの動作を保証するため、デバイス設定に関わらず、HTMLタグやJavaScript・CSSが変更される場合があります。

レスポンシブ対応を行う場合の注意

スタートアップテーマについて

スタートアップテーマは、「スマートフォン」と「タブレット・PC(その他)」を分けた「デバイス最適化」デザインで作成されています。
スタートアップテーマ(PC)は、PCからタブレットまでを想定し、画面サイズにあわせて最適となるよう、レスポンシブデザインを採用しています。
スタートアップテーマ(スマートフォン)は、スマートフォンの画面サイズにあわせて最適となるよう、レスポンシブデザインを採用しています。

スマートフォンは、コンテンツの表示やECサイトの操作方法、または閲覧される場所が、PCとは違います。
スマートフォンは、外出時に使用する場面がPCに比べて多く、操作方法もマウスやタッチパッドによるポインタの操作ではなく、「指」による操作が主体です。 画面サイズは大きいものでも6インチ程度で、一度に表示される情報量が少なくなる、などが特徴として挙げられます。

こうした違いを考えると、ECサイトの閲覧・操作などがスムーズに行えることを重要視するなら、スマートフォンでは「レスポンシブデザイン」を採用するより、「デバイス最適化」デザインを採用したほうがよい考えられます。

「スタートアップテーマ(PC)」をご利用いただき、全デバイスに適用するレスポンシブデザインECサイトを構築する場合、様々な点に注意する必要があります。(下記「レスポンシブ対応サイトを構築する場合の注意」をご覧ください。)構築いただくサイトにあわせて、適宜デザインを修正してください。

レスポンシブ対応サイトを構築する場合の注意

レスポンシブ対応サイトを構築する上での注意点です。(一般的な内容となります。)

  • (フリーパーツやフリーページの本文など)HTMLタグを直接入力する場合や、個別にCSSデザインを行う場合は、文字サイズに注意してください。スマートフォンで表示した場合に、適切なサイズとなるように調整してください。
  • バナーなどの画像を表示する場合は、画像サイズに注意するか、画像に文字を書き込まないようにしてください。スマートフォンでは画面サイズに応じて、画像が縮小表示されるため非常に小さな文字となる懸念があります。スマートフォン実機で確認するなど、文字の大きさに留意してください。
  • フリーパーツやフリーページの本文などで、テキストリンクを記述する場合は、スマートフォンで表示させた際にタップする領域が確保されていることを確認してください。
    リンクを設定する場合は、コラムパーツを利用し、かつ画像を使用するか、本文の文字量を適切に入力してください。コラムパーツでリンクを設定すると、画像・見出し・本文を含むコラムパーツ全体がタップ領域(リンク)となります。
  • 構築したサイトについては、スマートフォン・タブレット・PCそれぞれの実機(実際の端末)を使用してテストしていただくことを強く推奨します。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。