カラーミーテンプレート「MODE」は初心者におすすめ!カスタマイズ方法を解説

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

中川
カラーミーのテンプレート「MODE」のカスタマイズ方法ついて知りたい
という方のために、カラーミーのテンプレート「MODE」のカスタマイズ方法について解説をします。

この記事を読むことで、

  1. MODEのおすすめ理由がわかる
  2. MODEのカスタマイズ方法がわかる
  3. MODEのカスタマイズ例を知ることができる

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

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

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

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

それではカラーミーのテンプレート「MODE」のカスタマイズ方法について解説していきます。

 

カラーミーのテンプレート「MODE」の特徴

カラーミーのテンプレートとして販売されている人気の「MODE」は、有料のテンプレートです。

ショップページのデザインや見え方で他店との差別化を図るため、

「MODE」を上手く使いこなすことがキーポイントとも言えます。

カラーミーのテンプレート「MODE」の特徴について詳しくみていきましょう。

左サイドバーが使いやすい

カラーミーのテンプレート「MODE」の特徴は、

左サイドバーにあるカテゴリーメニューがあることです。

左サイドバーにカテゴリーメニューがあると、

訪問するユーザーにとって非常に使いやすいでしょう。

商品カテゴリーメニューがわかりやすいレイアウトというのは、

ユーザーにとってプラスのポイントです。

左サイドバーでメニューがわかると、ユーザーをスムーズに誘導できます。

ユーザー滞在時間も延びるため、購買意欲につながる大事なポイントとなります。

バナーエリアが多い

バナーエリアが豊富なことが「MODE」の特徴です。

バナーが豊富にあるというのは、ユーザーの目的に誘導しやすいメリットです。

ユーザーの興味を引きやすくなり、ページ滞在時間を延ばす効果があります。

バナーの場所もわかりやすい左サイドバーやフッターの上などにあるため、

ユーザーの目を引くポイントです。

「MODE」は初心者のユーザーに対してもわかりやすく、

楽しめる内容で構成できることが強みだと言えるでしょう。

情報を多く盛り込める

「MODE」をカスタマイズすることで、

ショップページにさらに多くの情報を盛り込むことが可能です。

カスタマイズでスペック表などを作り、

補足の情報をわかりやすいレイアウトで足すこともできます。

商品説明は非常に大事なポイントなので、

ユーザーに対してできるだけ情報を与えることができれば売上げアップへつながるでしょう。

もし、アイテムの商品説明が長文になってしまっても、カスタマイズによって変更できます。

テンプレート「MODE」のカスタマイズ方法

カラーミーのテンプレート「MODE」のカスタマイズ方法について、解説します。

MODEを利用していてもカスタマイズを加えないと、

似たようなページが多くなってしまうかもしれません。

他店との差別化ができず集客しづらいことも考えられます。

ショップのイメージを高めるテンプレート「MODE」のカスタマイズ方法について、

みていきましょう。

カラーを変える

ショップページの印象は、カラーによっても大きく異なります。

自分がイメージするページにするために、カラーを変えるカスタマイズを行ってみましょう。

特に、ポイントとなるヘッダーやフッターエリアのカラーは、

ユーザーを惹き付ける大きなポイントです。

カラー変更をする場合は、テンプレート編集からCSS編集の一番下の部分に追加して

保存してください。

この操作によって、自分が選んだカラーに変更することが可能です。

画像を大きくする

「MODE」のカスタマイズ機能を使って画像を大きくすることで、

ユーザーに商品やイメージをわかりやすく伝えることができます。

画像サイズの変更をする場合は、

ショップ作成からデザイン設定で画像サイズ設定を選んでください。

画像サイズ設定一覧の中から、自分が変更したい画像を選んでサイズを入力しましょう。

サイズ変更が難しい正方形の画像を変更したい場合は、

縦横のバランスを3:2にして行うとバランスがよくなります。

スライドショーを大きくする

「MODE」は、センター部分にスライドバナーが設置されていることが特徴です。

既存のサイズからスライドバナーを大きく表示したい場合は、画像を大きくすることが可能です。

アイキャッチ力を高める効果として、スライドバナーを大きくすることは重要と言えます。

スライドショーを表示しているコードを確認するために、

テンプレート編集からトップにあるHTML編集エリアのをチェックします。

その部分をメモなどに貼り付けておき、

テンプレート編集から共通を開いてメモに保存したコードを貼り付けてください。

貼り付ける場所は<div class=”main row”>で、保存して完了です。

横幅を広げる

画像を大きくするために横幅を広げる作業を行いますが、

「MODE」の横幅の限界は980pxです。

それ以上のサイズ変更は余白が増えてしまいます。

このサイズを変更するために修正する箇所は、

header_top_inner・header_mid_inner・header_btm・main・footer_innerです。

余白部分が増えているので、自分の判断でサイズを変更していってください。

デベロッパーツールのカーソルをサイドバーにあてることで、余白の原因がわかります。

HTMLやCSSの知識は必要?

HTMLやCSSの知識があれば、

さらにカラーミーショップページの簡単なカスタマイズも行えます。

なぜなら、カラーミーのテンプレートはHTML、CSS、Smartyで主に成り立っているためです。

そのため、HTMLやCSSの知識があったほうがカスタマイズしやすくなります

カラーミーキットというフレームワークが使われているので、

カラーミーキットを理解しておくとより幅広いカスタマイズができるのでよいでしょう。

表示が崩れてしまった

カラーミーのショップページをカスタマイズしていると、

ときどき表示が崩れてしまっていることもあります。

記述ミスなどによって、動かなくなってしまうと焦ってしまうでしょう。

しかし、こんなときは焦らずに保存ボタンの横にある戻るボタンで戻れば問題ありません。

また、メモ帳でこまめにバックアップを取っておくこともおすすめです。

コピーを取っていれば、表示が崩れてしまった場合でもすぐに対応できます。

テンプレート「MODE」のカスタマイズ例

実際に、カラーミーのテンプレート「MODE」を使ってカスタマイズしている人を、

見てみたいという方もいるのではないでしょうか。

既存のテンプレートからよりイメージを高めて集客を増やすためには、

さまざまなポイントがあります。

実際に集客アップにつながる「MODE」を使ってカスタマイズした例について、

みていきましょう。

女性向けのデザインに変える

男性向けのイメージがあるテンプレートを、女性向けのデザインに変えることもできます。

女性向けの商品を扱う場合、

女性が好むテンプレートに変えることでユーザーを集まりやすくなるでしょう。

配色やバナーをターゲットとする女性に向けたものに変え、

ターゲットユーザーが好むような画像を選ぶことがポイントです。

感覚で入りやすい女性をターゲットとする場合、

スライドショーを大きくしてイメージをわかりやすくする方法も有効です。

高齢者でも見やすいデザインに変える

高齢者の方の利用もある場合、見やすいデザインにすることが大切です。

シンプルにわかりやすくすることが特に重要と言えます。

スライドショーのサイズを大きくすることよりも、

左サイドバーのメニューに簡単なイラストをつけるなど、パッと見てすぐにわかるようにします。

文字を大きくする、統一感のあるカラーにするなど、

見やすくわかりやすいということを心掛けてカスタマイズするとよいでしょう。

アイテムを見やすく変える

取り扱う商品によっては、全体がよくわかる画像が重要となります。

たとえば、家具などのように大きなアイテムは画像が小さいとわかりづらいという

ケースもあるので注意しましょう。

この場合、スライドショーを最大限に大きくして商品をわかりやすく

表現することがおすすめです。

イメージがわかりやすくなり、

商品だけでなく実際に使用するイメージも伝わるため購買意欲をかきたてる効果があります。

商品だけの画像だけではなく、コメントなども加えてカスタマイズすると効果的です。

テンプレートの「MODE」はカスタマイズが大事

カラーミーのテンプレート「MODE」のカスタマイズについて紹介しました。

カラーミーショップの多くの人が利用している「MODE」は、

カスタマイズによる工夫で集客アップの実績を出しているケースが多くあります。

手間がかかると敬遠せずに、

カスタマイズ方法を少しずつ習得してショップページのクオリティを高めることが大事です。

カラーミーのテンプレート「MODE」を利用して効果的なカスタマイズで、

より多くの集客を目指していきましょう。

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

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