カラーミーショップのテンプレートをカスタマイズする方法

Pocket

カラーミーショップのカスタマイズ方法
誰でも簡単にネットショップはじめることができるカラーミーショップ。非常に低コストで導入でき、サイトのデザインもある程度自由に変更可能で、販売する商品やブランドに合わせたデザインにカスタマイズすることができます。

しかしながら、HTMLやCSSだけでなくワードプレスのように独自タグを使うことになるので少し敷居が高いかもしれません。なのですでに用意されているテンプレートのカスタマイズからはじめて徐々にオリジナルのECサイトを構築していくのが効率の良いカスタマイズ方法になるのではないでしょうか。

そこでこの記事では数回に分けてカラーミーショップのテンプレートをカスタマイズする方法を紹介していきます。デフォルトのテンプレートをカスタマイズしながら、最終的にはオリジナルテンプレートの作成方法まで紹介していこうと思います。

カラーミーショップとは?

まずはじめに、カラーミーショップではどんなことができるのか簡単に確認しておきたいと思います。

カラーミーショップでできること

サービス内容は公式サイトのこちらから確認できます。簡単にまとめるとこんな感じ。中でもスマートフォンの画面をカスタマイズできるのは大きなポイント。スマホサイトに完全対応できているショップはまだまだ少ないので是非導入しておきたいところです。

  • 商品登録無制限
  • デジタルコンテンツの販売に対応
  • 無料で取得&使用できる独自ドメイン
  • 大手ショッピングモールとの連携
  • カード、銀行、コンビニなどの決済サービスの利用
  • スマートフォン画面のカスタマイズに対応

また先ほどのリンク先にあるページの左サイドからは、登録する前に管理画面やテンプレートのカスタマイズ画面を確認できるようになっています。
カラーミーショップのカスタマイズ方法2

利用料金は?

気になるのが利用料金。大手のモールなら年間契約で数十万円、月額数万円。そこからさらに商品が売れるごとに数%の手数料を引かれるというのが一般的でしたが、カラーミーショップではかなり安く設定されています。

カラーミーショップの料金設定はこちらに詳しく載っていますが簡単にまとめるとこんな感じ(2017年5月時点)。料金以外の違いはアップロードできる容量やアクセス解析の利用などがあります。

  • エコノミープラン: 900円
  • レギュラープラン: 3,240円
  • ラージプラン: 7,800円

サーバーをレンタルする程度の金額で利用できるのでとにかく安く簡単にネットショップを開きたいという方にはおすすめできます。さきほども言ったように初期費用に数十万円必要な大手のモールに比べれば非常に安い金額で開設できますね!

興味のある方はこちらからお試し契約ができるので、中身をチェックしてみて下さい。
カラーミーショップ

カラーミーショップに登録しよう

カラーミーショップの紹介が終わったところで、ここからカスタマイズの方法を紹介していきたいと思います。スマートフォンサイトまでカスタマイズできるなど、かなり自由な設定が可能です。

カラーミーショップのテンプレート構成

個別のテンプレートに関する解説は次回以降に回しますが、ここではショップ全体のテンプレート構成を確認したいと思います。

基本的には共通エリア内に各ページが読み込まれる構造になっています。なのでヘッダーやサイド、フッターは共通となります。オプション・在庫ページのみポップアップ表示となっています。

CSSのみ編集可能なページでは共通エリアは表示されません。

HTMLとCSSを編集可能なページ

  • 共通エリア(ヘッダー、サイド、フッターなど)
  • トップページ
  • 商品一覧ページ
  • 商品詳細ページ
  • 特定商取引法ページ
  • 商品検索結果ページ
  • オプション・在庫・値段表ポップアップ
  • プライバシポリシーページ

カラーミーショップのページ構成

CSSのみ編集可能なページ

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

テンプレートカスタマイズのリソース

カラーミーショップ公式オンラインマニュアル

テンプレートカスタマイズのリソースとして、公式サイトで独自タグ一覧や管理ページの使い方を確認できるオンラインマニュアルが用意されています。

公式オンラインマニュアル
カラーミーショップのオンラインマニュアル
テンプレートのカスタマイズ方法は次回以降の記事で紹介するのでそちらをご覧下さい。

HTMLを編集するテキストエディター

少しの変更ならHTML編集ページにあるテキストエリア内でカスタマイズすることもできますが、HTMLの編集はテキストエディターを使用することをお勧めします。エディターを使えば画面サイズも広く使え、タグのカラーリングなどもされて見やすくなるので作業効率が断然違います。

以下にオススメのテキストエディターを紹介します。どれも無料で高機能で日本語対応なのでオススメ。

関連記事: HTMLファイルの正しい開き方

windows用
Brackets
bracketsでHTMLファイルを開いたり編集できる

Notepad++
HTMLおすすめテキストエディター

Mac用
CotEditor
CotEditorでHTMLファイルを開く

ショップサイトのデザインをチェックしよう

気になるのが、他のECサイトですよね。制作者としても、ショップオーナーとしてもどんなデザインが良いのか迷ったときに参考になる、ECサイトギャラリーを紹介します。やはり海外のサイトはクオリティが高く、参考になるデザインが多いですね。

io3000.com
ECサイトのギャラリー

CartCraze
ECサイトギャラリー

site inspire
ECサイトのインスピレーション

このようなデザインを参考にしながら、他とはひと味違うネットショップを作ってみてはいかがでしょう。

カラーミーショップカスタマイズまとめ

ここまでカラーミーショップのテンプレートカスタマイズの概要を紹介してきました。非常に簡単に低コストで導入できるのが魅力的ですが、テンプレートをカスタマイズするには独自タグの使い方を理解する必要があるのでやや難しいかもしれません。

この後の記事では各ページのカスタマイズ方法を紹介していくので、がんばってカスタマイズしていきましょう!