カラーミーでレスポンシブ設定をして管理しやすいサイトへ!

こんにちは。中川瞬(@shun01224)です。

中川
カラーミーのレスポンシブについて知りたい
という方のために、レスポンシブ設定について解説をします。

この記事を読むことで、

  1. レスポンシブの基本がわかる
  2. カラーミーでのレスポンシブ設定ができる
  3. カラーミーのレスポンシブ設定の注意点がわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それではカラーミーのレスポンシブについて解説していきます。

 

レスポンシブとは?

まずは、レスポンシブについて簡単におさらいしていきます。

レスポンシブは注目されていますが、なぜショップ運営で重要なのかと疑問に思うかもしれません。

必要性を理解しておくと、レスポンシブ設定を手間だと感じなくなるでしょう。

メリット・デメリットを確認して、

ショップでレスポンシブデザインを取り入れるべきなのか判断してみてください。

メリット

レスポンシブ向けテンプレートを選ぶと、端末での切り替えが不要になります。

ショップの多くは、パソコン・スマホ・タブレットなど複数の端末からのアクセスがあるでしょう。

端末により表示範囲が異なるため、従来の方法では1つずつ作成しなければなりません。

パソコンとスマホ向けサイト作成なら2種類のデータが必要で、

さらにタブレット対応にするとなれば3種類のデータの管理が必要です。

しかし、レスポンシブテンプレートなら、端末に合わせて自動的に調節されるため、

ショップ運営者の管理する手間が少なくなります。

1種類のデータのみで複数の端末に対応できれば、作業が圧倒的に楽になります。

また、レスポンシブなら端末でURLが変わることがなく、SEO的にも有利です。

URLが分散されず、1つのURLに対する被リンクが評価されるためです。

デメリット

レスポンシブテンプレートを選ぶデメリットは、どの端末でも同じデータ量になることです。

パソコンなら、大量のデータでも短時間で処理ができるでしょう。

しかし、スマホだとデータ処理に時間がかかる可能性が高くなります。

とくに、ネットショップは画像を多用するため、画像ファイルが大きくなり、

スマホでアクセスした場合に表示速度が遅くなる恐れがあります。

また、自分でレスポンシブ対応にするには、CSSの知識が必要です。

記述に慣れていない人は、自分でレスポンシブに対応させるのは難しいかもしれません。

カラーミーなら、レスポンシブ対応のテンプレートを選ぶことが可能です。

しかし、テンプレートによっては表示が崩れる恐れがあります。

また、自社向けに開発されたオリジナルテンプレートではないため、

希望のレイアウトとは違う場合があります。

カラーミーのレスポンシブテンプレートについて

レスポンシブ対応のテンプレートは、無料と有料の2種類があります。

無料でもレスポンシブ対応のものがあるため、

まずは無料テンプレートを使って試してみてください。

デザインにこだわりたい人は、有料テンプレートの導入を検討してみましょう。

無料テンプレート

カラーミーで使える無料のレスポンシブテンプレートは、4種類程度です。

数は少ないのですが、ショップを立ち上げたばかりなら無料でも十分な場合が多いです。

無料のテンプレートの多くは、デザインがシンプルです。

シンプルなデザインでは、商品画像が際立ちやくなります。

商品画像に自信があるなら、シンプルなデザインのものでも十分に活用できます。

また、無料のテンプレートのレスポンシブ機能は、簡易的なものです。

簡易的といっても、スマホやタブレットでの表示が崩れる心配は少ないでしょう。

よりデザインをオリジナルにしたい場合は、カスタマイズを考慮してみてください。

スマホでの表示が気になるなら、サンプルショップの表示を確認しましょう。

カラーミーテンプレート一覧から「レスポンシブ」に絞り込み、

無料のテンプレートのサンプルを確認することができます。

有料テンプレート

レスポンシブ対応無料のテンプレートに比べると、有料テンプレートは数が多めです。

たくさんのテンプレートから比較したいなら、有料のものを選ぶといいでしょう。

レスポンシブ対応有料テンプレートの多くは、デザインも機能も優秀です。

価格帯は、3~4万円程度ですが、買い切りのため安心です。

なかでも「MODE」はスライドショー搭載で人気があります。

また、「MONO」は商品数が少なくても充実したコンテンツに見える工夫があるため、

商品の魅力を伝えたいショップにおすすめです。

有料テンプレートを選ぶ場合は、自社のデザイン力に注意してください。

サンプルショップはロゴや商品画像を工夫しているため、オシャレなショップに感じます。

自社にデザイン力が低い場合は、有料テンプレートの魅力を活かしきれないことがあるため、

デザインやカスタマイズの外注を考えてみてもいいかもしれません。

カラーミーのレスポンシブ設定方法

カラーミーショップをレスポンシブ対応にする方法を紹介します。

レスポンシブ対応のテンプレートを選んだら、「管理画面」で設定してみましょう。

また、レスポンシブは自分でも設定ができるため、

記述の知識がある人はチャレンジしてみてください。

テンプレートをダウンロード

カラーミーでは、

「エコノミー」「スモール」「フリー」の3プランなら5個までテンプレートが保存できます。

また、「レギュラー」「ラージ」「プラチナ」の3プランは10個まで保存が可能です。

新たにレスポンシブテンプレートをダウンロードする場合は、保存数に注意してください。

テンプレートの追加は、「ショップ作成」から「デザイン」に移動します。

「テンプレート追加」ボタンから、新しいテンプレートをダウンロードしましょう。

無料テンプレート・有料テンプレートのタブから、テンプレートを購入できます。

テンプレートの追加が完了すると、「戻る」ボタンがあるのでクリックし、

デザイン設定画面に戻ることができます。

「追加済テンプレート」にテンプレートが追加されました。

使いたいテンプレートの「利用する」を選択してください。

viewportを指定

自分でレスポンシブ対応サイトを作るときは、viewportを指定します。

viewportをとは表示領域のことで、表示領域が狭いスマホやタブレットに対応させるため使います。

きちんと領域を指定することで、

スマホで見たときに文字や画像が小さすぎて見えづらい問題や、

表示領域からコンテンツがはみ出るのを防げるでしょう。

viewportの指定は、「検索エンジン対策」の項目から設定できます。

カラーミーにログインしたら、「集客」から「検索エンジン対策」へと進んでください。

「headタグ内フリースペース設定」にviewportのメタタグを記述します。

レスポンシブ未対応のテンプレートで、viewportを指定してください。

PCテンプレートを選ぶ

レスポンシブ対応のテンプレートを選んだら、「PC版表示」を選んでください。

スマホでサイトを見る場合に、自動的に最適化された表示になります。

管理画面のショップ作成から「デザイン」へ移動し、

スマートフォンの表示状態を確認してください。

「【スマートフォン専用テンプレート】が設定されています」となっている場合は、

PC版表示に変更が必要です。

PC版表示を選択すると、「【PCテンプレート】が設定されています」になります。

なお、問い合わせページはスマートフォン用テンプレートが適用されます。

PC版表示になった状態で、スマホ用の問い合わせページをカスタマイズしたい場合は、

「管理ページ」の「デザイン」から「スマートフォンショップ」へ

移動しデザインからCSSを変更してください。

カラーミーのレスポンシブQ&A

カラーミーショップをレスポンシブ対応にしていると、様々な疑問が出てくるかもしれません。

よくある疑問を2つ紹介します。

テンプレートを変更する前に、確認しておくと安心です。

スマホURLは?

レスポンシブテンプレートを採用している場合は、パソコンURLとスマホURLは同じです。

テンプレートは端末に合わせた表示領域へ調節するだけだからです。

端末によってURLは変わらないため、SEO観点からも不利になることはありません。

また、スマホURLが同じなら、1つのURL管理だけで済みます。

誰かにショップURLを伝えるときも、1つだけだと便利でしょう。

テンプレートを編集したい

レスポンシブ対応では、共通とトップなど複数の編集が必要になります。

たとえば、レスポンシブ対応の有料テンプレート「MODE」でバナーを差し替えるためには、

管理ページのデザインからテンプレート編集へ移動します。

「共通>HTML・CSS編集」と「トップ>HTML・CSS編集」の

合計4か所にバナー記述があるため、それぞれ変更してください。

PC用に表示されるバナーと、スマホ用に表示されるバナーの画像URL設置をしましょう。

レスポンシブテンプレートの詳しい編集方法は、

それぞれのテンプレートの説明を確認してください。

カラーミーでレスポンシブ対応にしよう

ショップへ複数の端末でアクセスがあるなら、レスポンシブ対応にしましょう。

スマホのように表示幅が狭い場合でも、レスポンシブなら見やすく表示されます。

導入方法は、レスポンシブ対応のテンプレートを利用するだけです。

無料テンプレートも選べるため、スマホ用にショップを最適化してみてください。

また、有料テンプレートは料金がかかるだけあって、デザインや機能も充実しています。

余裕があるなら、有料テンプレートの導入を視野に入れても良いかもしれません。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。