【初心者必見】カラーミーショップのカスタマイズ性は高い？

update : 2021/02/16（火）

カラーミーショップは、ネット通販の経験がなくてもはじめやすいネットショップ運営サービスです。しかし、運営に慣れてきたショップオーナーやEC担当者のなかには、「テンプレートを選んだだけのデザインではものたりない」と感じている人もいるのではないでしょうか。

ショップの特徴をより魅力的にアピールできるデザインにするには、カラーミーショップのカスタマイズ機能が役立ちます。今回は、その仕組みや使い方について詳しく紹介します。

カラーミーショップには【初級モード】と【上級モード】がある

カラーミーショップのカスタマイズ機能には、初心者でも使いやすい「初級」と、より上級者向けで自由度が高い「上級」の2つのモードがあります。まずは、それぞれのモードについて説明します。

初級モード

初級モードは、テンプレート中で使われているフォントサイズや色を簡単に変更できるモードです。カラーミーショップの管理画面から「デザイン設定」に進むと、現在利用中のテンプレートの情報が確認できます。

この画面で「テンプレート編集」ボタンを押すと、編集可能なページの種類が一覧表示されます。利用中のテンプレートによって編集できるページの種類は異なりますが、「初級モードで編集」カラムに「項目編集」というリンクが表示されているものが編集できるページです。主に以下のようなページがあります。

・共通
・お問合せ
・マイアカウント・会員ログイン
・友達に教える
・メルマガ登録・解除
・レビュー

リンクをクリックすると、項目編集画面になります。フォントサイズは「フォント見本」、色は「色見本」から選ぶこともできるので、HTMLやCSSの知識に自信がなくてもカスタマイズできるでしょう。

設定可能な項目は、ページの種類によって変わります。「共通」については、ほかのページと少し意味が異なるので特に注意が必要です。

ここには、各ページに表示されるヘッダーやフッター、メニューなどの共通部分が含まれています。ショップタイトルのフォントサイズやメニューの背景色、ページ全体のベースとなるフォントサイズなどが変更できます。そのほかのページでは、共通部分を除いたメインエリアにはめ込まれる部分がカスタマイズ可能です。

上級モード

上級モードは、テンプレートのHTMLやCSSを直接編集することでデザインをカスタマイズできるモードです。これらの知識がある人なら、ページ内の各部をより自由にデザインできるでしょう。編集するには、初級モードと同様に「テンプレート編集」ボタンでページの種類を一覧表示したあと、「上級モードで編集」カラムのリンクをクリックします。

以下は、「HTML・CSS編集」が可能なページです。HTMLについては「入力支援ツール」も利用できます。これは、テキストの装飾やリンクの挿入などで必要になる各種HTMLタグの入力をサポートしてくれる機能です。

・共通
・トップ
・商品一覧
・商品詳細
・特定商取引
・商品検索結果
・オプション在庫・値段表
・プライバシーポリシー

以下のページでは、「CSS編集」のみが可能です。これらは「SSL対応画面」となっており、カラーミーショップではHTMLの編集が行えないように制限されています。とはいえ、いずれも一般的な形式が決まっているページなので、CSSで指定可能な範囲である程度満足のいくデザインにできるでしょう。

・決済
・お問合せ
・マイアカウント・会員ログイン
・友達に教える
・メルマガ登録・解除
・レビュー

また、上級モードでは編集履歴を5回分まで保存しておくことが可能です。「もとに戻す」ボタンで、「保存」ボタンを押したひとつ前の状態に戻せます。

カラーミーショップのカスタマイズの特徴

カラーミーショップのカスタマイズ機能には、以下のような特徴があります。

・テンプレートごとに使える機能が決まっている
・フリーページ機能で自由にページが作成できる
・カラーミーショップ独自のタグがある

本格的なカスタマイズにとりかかる前に、よく理解しておくとよいでしょう。

テンプレートごとに使える機能が決まっている

カラーミーショップにはさまざまな機能がありますが、各機能が実際に利用できるかどうかはテンプレートによって異なります。そのため、テンプレートはショップに必要な機能に対応しているかという点に気をつけて選びましょう。以下は、テンプレートによって対応状況が異なる機能の一例です。

・レスポンシブ：PCとスマートフォンの両方に対応
・スライドショー：トップページにスライドを表示
・レビュー：商品ごとにユーザーレビューを表示
・店長情報：ショップオーナーからのコメントなどを表示

最初からスマートフォン表示に対応している「レスポンシブ」タイプのテンプレートは、特におすすめです。また、目標とするデザインになるべく近いテンプレートからはじめるとカスタマイズがしやすくなります。
「スライドショー」や「レビュー」のような機能はあとから追加するのが大変なので、利用する予定があるのならあらかじめ対応したものを選んでおきましょう。

フリーページ機能で自由にページが作成できる

カラーミーショップには、デザインも内容も自由に作り上げることができる「フリーページ」機能が備わっています。フリーページは商品ページや決済ページのように形式が決まっておらず、どのような用途にも使うことができます。新商品のお知らせを掲載したいときや、イベントやキャンペーンの告知などに活用できるでしょう。

メルマガやSNSを活用している場合は、ランディングページをフリーページ機能で作るのもおすすめです。写真や文章で商品を訴求し、商品詳細ページに誘導しましょう。このとき「どこでもカラーミー」と併用すれば、ランディングページに「カートに入れる」ボタンを設置して、決済までのスムーズな導線を確保できます。

カラーミーショップ独自のタグがある

カラーミーショップのテンプレートには、「独自タグ」と呼ばれる特殊なタグが埋め込まれています。これは、各種設定項目や機能を呼び出して出力するためのものです。以下は、独自タグで呼び出せる項目の一例です。

・ショップタイトル
・ショップのロゴ
・カテゴリーの名前とリンク
・商品情報（商品ID、商品名、価格など）
・フリーページのタイトルとリンク
・「マイアカウント」や「メルマガ登録・解除」ページへのリンク

これらは上級モードの編集画面から書き換えたり、自分で追加したりすることが可能です。例えば、ショップタイトルを入力したい場所には、次のように書きます。

<{ $shop_name }>

この例ではタグの内側にある「shop_name」の部分がショップタイトルを意味しており、ブラウザで表示したときには実際のショップタイトルに置き換わります。

次は、商品IDを挿入する例です。「product」の部分が商品情報を指しており、そこに含まれるIDを「.id」の部分で指定しています。

<{ $product.id }>

独自タグは種類が豊富なので、うまく活用すればテンプレートをより柔軟にカスタマイズできるようになります。しかし、HTMLタグと比べると難易度が高く、理解して使いこなせるようになるまでには少し時間がかかるかもしれません。

デザインにこだわりたい初心者は、ネットショップの制作代行サービスの利用がおすすめ

カラーミーショップでは、初級モードを使えば初心者でもある程度デザインをカスタマイズすることが可能です。しかし、よりこだわりたい場合には上級モードでHTMLやCSSを使う必要もでてきます。上級モードはカスタマイズ性が高い一方、ある程度の知識とスキルが求められるため初心者にとってはハードルが高いものです。また、カラーミーショップの機能を使いこなすには、独自タグについても学習する必要があります。

「スキルを身につけるための十分な時間がとれない」という場合には、ネットショップ制作代行について検討してみるという方法もあります。株式会社これからが運営する「Colorme Factory」は、カラーミーショップ専門の制作代行サービスです。「カラーミーショップ公認エキスパート」として、さまざまなジャンルにわたりこれまでに450社以上のショップを支援しています。

デザインをカスタマイズするのはもちろん、カラーミーショップの機能を活用した「売れる」ネットショップを本気で目指したいというショップオーナー様にもおすすめです。