カラーミーショップのカスタマイズ方法！おすすめのテンプレートもご紹介

カラーミーショップを利用して、自社のECサイトをさらにオリジナリティのあるデザインにしたいと考える企業は多いのではないでしょうか。カラーミーショップのカスタマイズ方法は、初級から上級までさまざまな難易度が用意されているため、自社の技術に適した方法を選択しなければなりません。

この記事では、カラーミーショップのデザイン設定の仕方からカスタマイズするときに意識したいポイントまで、具体的に解説します。

1.　カラーミーショップのデザイン設定は2種類

カラーミーショップのデザイン設定には、「初級モード」と「上級モード」の2つが用意されています。

初級モード

初級モードによるデザイン設定では、テンプレートの文字サイズや色など、サイト内の基本的な部分の編集が可能です。例えば、カラーミーショップが用意しているテンプレート「Bit」では以下の項目がカスタマイズできます。

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

初級モードの場合、上級モードとは異なり専門的な知識を必要としないため、簡単なデザイン編集をするときにおすすめです。

上級モード

上級モードによるデザイン設定は、初級モードとは違い、HTML・CSSによって編集を行います。そのため、HTML・CSSの編集技術がないとカスタマイズは難しいでしょう。

上級モードの場合、より詳細な設定が可能になるため、自社カラーを全面に出したECサイトを構築して、ブランディングしたい企業にはおすすめです。初級モードで編集できる項目に加えて、以下のページの編集が可能になります。

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

2.　カラーミーショップのカスタマイズポイント6つ

カラーミーショップの上級モードを活用してカスタマイズするときには、以下の6つのポイントを意識すると効果的なデザイン設定ができます。

HTMLとCSSでカスタマイズする

上級モードではHTML・CSSを編集して細かいカスタマイズを行います。ただし、カラーミーショップにはコードエディタが実装されているため、外部ツールを導入する必要はありません。

HTMLタグを知らない場合でもカスタマイズできるように、入力支援ツールが用意されていますので、状況に応じて使い分けましょう。

以下はHTML・CSSで編集できるページの具体例です。

ページごとに使える独自タグが決まっている

カラーミーショップでは、ページごとに決まった独自タグを使えるようにすることで、簡単にカスタマイズできます。例えば、HTML内にショップタイトルを表示するときは、【<$shop_name>】というタグを入力するだけです。

ちなみに、この独自タグは「Smarty」というPHPのためのテンプレートエンジンを活用しており、本来PHPを編集しなければならない箇所を専門知識なしで編集できるようになっています。ただし、カラーミーショップで決められている独自タグ以外は、正しく表示されない可能性が高いです。下記HPに記載されている、「独自タグ一覧」を確認してから使用するようにしてください。

【参考】カラーミー-独自タグ一覧ページ

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

上級モードで編集できるページは、テンプレートごとに異なります。そのため、上記で例に挙げた「Bit」というテンプレートでは編集できなくても他のテンプレートでは編集できる場合もあります。

テンプレートの詳しい解説は後述しますが、カラーミーショップのテンプレートを導入するときは、事前に搭載されている機能やカスタマイズ可能なページを確認しておきましょう。

フリーページを自由に作成できる

カラーミーショップでは、テンプレート内にフリーページを作成・編集できます。具体的な方法は、以下のとおりです。

• 編集するテンプレートを選択し、「フリーページ編集」をクリック
• フリーページ一覧の中にある「新規作成」をクリック

ただし、フリーページの作成は契約しているプランによって数が制限されているため、あらかじめ自社の契約状況を把握してから作成するようにしましょう。

外部CSSやJavaScriptも使える

カラーミーショップのカスタマイズには、CSSファイルやJavaScriptファイルを読み込ませるFTPオプションも用意されています。このFTPオプションを活用することで、CSSやJavaScriptの編集が簡単かつ効率よくできるようになり、より細やかなカスタマイズが可能です。

とくにCSSやJavaScriptの編集を複数人で行うときは、外部ファイルで作成および編集することが多いため、外部ファイルを読み込んでサイトに反映させるFTPオプションは重宝します。

自社での対応が難しい場合は、外注がおすすめ！

ここまでカラーミーショップの上級モードでのカスタマイズ方法を解説しましたが、HTML・CSS・JavaScriptなどの対応が自社では難しいと感じる企業も多いでしょう。その場合は、無理に編集するのではなく、専門の企業への外注を検討してみてください。

カラーミーショップのカスタマイズを外注することで、ECサイトの構築をゼロから依頼するよりもコストを抑えられます。また、カラーミーショップを利用している他のECサイトよりも、オリジナル性の高いサイトにできます。

したがって、カラーミーショップを利用したECサイトをこだわって運用していきたいという企業は、外注も視野に入れてみてください。

3.　【有料】カラーミーショップのカスタマイズにおすすめのテンプレート

カラーミーショップのカスタマイズにおすすめしたい有料のテンプレートは、以下の4つです。

MODE

価格：¥31,574
特徴：小カテゴリー表示やスライドショーなどを搭載
MODEは、細かいカテゴリー表示やスライドショー機能によるスタイリッシュなデザインが特徴です。とくにスマートフォンでの操作性が高く、商品力をアピールしたい企業におすすめ。

MONO

価格：¥31,574
特徴：モノの魅力とコンテンツ内容を伝えられる構成
MONOは食品やインテリア、雑貨などさまざまなジャンルの商品の魅力を伝えられる構成になっているテンプレートです。お気に入り機能も搭載しているため、ユーザー目線を意識したサイトデザインを目指す企業に適しています。

Panorama

価格：¥31,574
特徴：大きなスライドショーなどダイナミックなイメージが映えるデザイン
トップページなどにダイナミックなスライドショーを設定できるため、ユーザーの心をつかむデザインが可能。商品のイメージ写真を全面にアピールしたい企業におすすめです。

Tetra Themes（外部）

価格：¥9,800
特徴：カラーミーショップに対応してオシャレなデザインテンプレートが豊富
Tetra Themasは、カラーミーショップに対応したオシャレなデザインテンプレートを購入できるサイトです。リーズナブルな価格設定と販売商品に合わせたデザインを選択できます。

4.　【無料】カラーミーショップのカスタマイズにおすすめのテンプレート

最後にカラーミーショップで導入できる、無料のテンプレートを紹介します。

Bit

価格：無料
特徴：シンプルかつミニマムデザインで初心者でも利用しやすい設計
公開する商品数が少ないなど、初心者ユーザー向けに設計されているテンプレートです。シンプルなデザインを希望する企業に適しています。

SHELF

価格：無料
特徴：大きなスライドショーと2カラムのサイト構成
大きなスライドショーと2カラムのサイト構成で、見やすくインパクトのあるデザインが可能です。ただし、一部機能を利用するには有料版にアップグレードが必要になります。

Organi

価格：無料
特徴：2カラムの構成で商品情報などをスッキリまとめられる設計
シンプルなサイト構成である一方で、商品情報もまとめられる設計となっているテンプレートです。ランキング機能も搭載されているため、ユーザーにもわかりやすい構成が特徴です。

5.　まとめ

カラーミーショップのカスタマイズは、初級モードと上級モードの編集方法がありますが、自社が運用するECサイトの販売目的に沿った方法を選択することが重要です。しかし、細部までカスタマイズするには、HTML・CSS・JavaScriptなど専門的な知識が必要になります。したがって、目的に合わせたカスタマイズが技術的に難しい場合は、専門の制作会社への外注を検討しましょう。

外注先を効率よく探せる「リカイゼン」であれば、自社の目的に適した外注先を無料で探せます。