参考にしたいカラーミーショップ 7

「カラーミーショップ大賞2016」 のノミネート一覧が発表（約840店舗）されてから随分経ってしまいましたが、今年もわりと丁寧にチェックしてきました（遅ればせながら）。

今年のノミネートショップから気づいた点は、

レスポンシブが増えてきている
お知らせ欄があまり使われなくなった
CSS3のアニメーション効果が増加
www.をつけないURLが増えた
画像にPinterestのボタンがやや増えてきた
グローバルナビゲーションが減ってきてるかも
3カラムが減ったかも

比較的新しい機能も実装されてたりで、いずれも時代の移り変わりのような流れを感じます。游ゴシック、游明朝をみかけるようになって、プッシュ通知がついていたところもありました。

トップページをカラーミー以外で作っているサイトも多く、カラーミーショップのカート部分だけをどこでもカラーミーでつけていることも多かったです。
サイト構成を凝った感じにできますし、一見するとネットショップらしくないデザインにできるので、おっという感じになります。

見て楽しそうなのを選びましたので、お楽しみください。

1カラム

カメラケース・カメラバッグ通販の静岡日和ストア

商品数が少ない場合には1カラム。広く使えるので、お店のイメージを全面に押し立てる感じに。
トップページを綺麗に作ってありますし、他ページも細部まで丁寧。

鳥さんのオリジナルグッズ・鳥柄雑貨 BIRDSTORY SHOP

愛らしさが存分に伝わる、広々としたトップページ。
トップページ以外は2カラムで、サイドバーに機能を配置。うぉって感じです。

2カラム

パンと日用品の店　わざわざ

ヘッダーに大きいスライダー。かなり印象的。
大部分がカラーミー以外なので、デザインの自由度もかなり高め。

光浦醸造｜公式ホームページ・オンラインショップ｜

3カラムっぽい2カラム。カラーミー以外の部分もあって、複雑な構造。
フォント（游ゴシック体）の雰囲気が合っています。

3カラム

新潟Ｔシャツ委員会

ショップサイトなのに、別もののコンセプトを感じます。
商品詳細ページにFacebook Comments Pluginでコメント欄を設置（他ショップでもまれにあり）。

のぼり旗の反応率がダントツ！【デザインのぼりショップ】

3カラムらしい、詰まった感じが好きです。
共通部分にバナーをいっぱい貼りたい場合はやっぱり3カラム必要。

おわりに

レスポンシブの有料テンプレートをベースにしているサイトも、結構多かったように思います。

CSS3のセレクタとCSSの画像置き換えを使って、カート画面（SSLページ）の画像を差し替えているお店がありました（いま現在、カラーミーショップの店舗は閉店されていました）。これはちょっと使えるなと。いつかご紹介させていただきます。

去年の記事「参考にしたいカラーミーショップ 1～6」も、結構面白いので、ぜひどうぞ。

カラーミーショップにおけるレスポンシブ入門編

【仕事サイトにレスポンシブ関連記事を書きました】
カラーミーキットの中を見て、レスポンシブ対応について学ぶ


2012年頃からちらほら見かけるようになりました、レスポンシブ・ウェブ・デザイン（Responsive Web Design, RWD）。
昨年の「カラーミーショップ大賞2015」にノミネートされたショップを拝見していても、ずいぶんと使われています（とはいっても、全体からすると半分にも満たない、まだ少数派ですが）。

カラーミーショップは今年で11周年だそうで、その時代の環境に合わせて、機能拡張されています。
スマートフォンショップ用のデザイン・商品説明欄も、後に追加された機能ですし、レスポンシブ対応についても、後からなされました。

今回は、カラーミーショップにおけるレスポンシブ入門編として、導入部分についてご説明いたします。

1. カラーミーショップの設定箇所について

カラーミーショップにおける、レスポンシブ対応の設定は、唯一ここだけ。
管理画面の、ショップ作成＞スマートフォンショップ＞表示モード設定のドロップダウンメニュー「スマートフォン表示モード設定　PC版表示」です。

とはいっても、このページの設定、後から追加されているので、案外気づきにくいです。ということで、いまはデザインのページにもリンクが張ってあります（下図の下部参照）。
スマートフォンでレスポンシプテンプレートを利用する時の注釈が付いています。

スマートフォンでレスポンシプテンプレートを利用の場合は「PC版表示」に設定してください

ということで、レスポンシブ対応のテンプレートを使用する場合などは、グレーの網掛け部分の、「スマートフォンでの表示状態」を「【PCテンプレート】 が設定されています」としておく必要があります。

 

2. カラーミーショップのテンプレート

カラーミーショップ公式にテンプレート一覧がありますので、レスポンシブ対応テンプレートを見てみましょう 。レスポンシブ | ショップ デザイン テンプレート
4つが無料（WASHI、nano、Bit、カラーミーキット）。いずれもミニマルデザイン調で、利用ショップを選びそうな印象。

一方、有料テンプレートは6つあり、どのようなタイプの商品でも合いそうなテンプレートが見つかる感じで、デザインの選択肢が多い。そしてお値段するだけあって（といっても、人に頼むともっとする）、見た目の完成度も高いです。
綺麗に撮った商品写真があれば、即オープン可能じゃないですかね。

それ以外にも、Bootstrap風のCSSフレームワーク「カラーミーキット」というのも用意されています。完全自作派の方の作業効率アップ。
CSSフレームワーク - カラーミーショップ ネットショップ運営サービス

3. レスポンシブの一般的な説明

カラーミーショップ公式の読み物コーナーに、簡単な説明が載っていました。
Webデザイナーが詳しく解説！流行りの「レスポンシブ対応」のメリットって？ | ECお役立ち情報 – ネットショップ運営サービス【カラーミーショップ】

レスポンシブ対応のざっくりとした概要。
・ブラウザの横幅に対応して、段組が変化する
・ブラウザの横幅に対応して、画像の大きさが変化する
・ブラウザの横幅が狭いときは、メニューが変化し、内容の一部が非表示になる
・PC～スマートフォンまで、ひとつのWebサイトで表示できる

その多くがCSSで実装されていて、一部JavaScriptも使っています。
ブラウザの横幅の取得にはメディアクエリ（CSS3）を使用しますので、対応ブラウザはIE9以降となります（IE8の対応はもういいかなと個人的には思います）。

レスポンシブ・ウェブ・デザインは、デザインを厳密にコントロールできないので、趣味じゃない人もいらっしゃると思いますが、昨今そんなことも言ってられません（私もその一人なのですが）。

2016年になり、最早「流行り」と呼ぶ時期ではなくなっていますので、リニューアルを考えていらっしゃる方は、メリット・デメリット を含めて検討されてはいかがでしょうか。

4. おわりに 

入門的な内容に終始しましたので、機会があれば、実践的な内容で続きをやりたいと思います。

前回記事の再掲。
日頃のご愛顧に感謝して、カスタマイズのサービスをココナラに出品しました。
料金は無料（限定）となっておりますので、手伝いやらご質問があればこの機会にどうぞ。
ココナラの登録は、Yahoo ID、facebookアカウント、メールアドレスが利用できます。

参考にしたいカラーミーショップ 1

4月に「カラーミーショップ大賞2015」のノミネート一覧が発表（約1100店舗）され、5月に大賞が発表されました（2ヵ月ほどかけて、まめにチェックしました）。

あまりカスタマイズできないというイメージを持たれがちのカラーミーショップですが、手間とアイデアで次第でもっとやれるはず。多くのサイトを見て、そう感じました。
カラーミーいじりたおし的には、その中から「デザイン」と「カスタマイズのアイデア」の面白いものを選んで紹介させていただきます。

定番～めずらしいサイトデザイン、面白パーツなどを中心に、何回かに分けてご紹介いたします。ごゆっくりお楽しみください（次回以降、参考にしたいカラーミーショップ ラベルをつけます）。

1. ここまでやったカート画面は他にない

犬服・ドッグウェア・犬用雑貨の販売　WANKOショップ

ページ全体を通して、ボタン・配色と細部まできれい作りこんであります。

特筆すべきはカート画面。
CSSのみでここまでやっているところは、私が見たなかではありませんでした。
注文の流れ(#shipping_step)では、「text-indent: -9999px;」で元画像を外に飛ばして、背景に差し替える画像を表示していました。

そのうえレスポンシブデザインなんですよね、これ。

2. これ以外のページはちょっと思い浮かばない

キュレーション通販サイト - HATCH（ハッチ）

それくらいぴったりときました。
キュレーション通販サイトの意味がわかっていませんでしたが、各ページをみていると、たしかにこう作らなければいけないような気になってきます（錯覚だとは思うんですが、作りに納得してしまう）。

商品一覧ページ（アイテム一覧＞暮らす）では、グループを細かく分けて「さらに絞り込む」ことをしたり。グループを階層化して使うところもあまり見かけません。

トップページで商品を見せないショップはちらほらありますが、ここも含めてほぼカラーミーショップのトップページは必要がないので使っていません。

一般向けではありませんが、ユニークなサイトです。
白基調のショップが多いなか、黒背景も貴重（蜂モチーフ）。

「カラーミーショップ大賞2015」の受賞ショップを見てきました

前回からの引き続きです。
ノミネートショップや制作会社については前記事のURLを参照してください （つらつらと眺めていたら、秋田書店のオンラインショップがカラーミーだったのにはびっくりしました）。

さて。
5/17に「カラーミーショップ大賞2015」の発表がありました。
私もショップデザインの研究をするべく、受賞されたショップ（約30店）のサイト作りを見学してきました。
そのなかでよく見かけた、鉄板パターンをピックアップしてみました。
もし貴方がサイト作り初学者であるなら、下記ポイントをチェックされてみてはいかがでしょうか（数を見るのは大変ですからね）。

1.「カートに入れる」ボタンは商品詳細ページの上のほうに
スクロールしなきゃ「カートに入れる」ボタンがない、というショップは昨今珍しいです。
ページの一番上に、左に商品画像、右に価格と「カートに入れる」ボタンという配置がパターンになっています。
長い説明文はその後で。

2.「上へ戻る」ボタンがある
「カートに入れる」ボタンを上に配置しているから、ということも理由のひとつでしょうか。
右下に固定で表示させる、スクロール下限にボタンを配置する、など。
多くのショップが採用していますし、実際のところ、ないと（私は）不便に感じます。

3.価格帯グループ分け
カラーミーショップでグループ管理ができるようになった頃から、ちらほら見かけるようになりましたが、これも採用しているショップが多いです。
商品点数などショップの実情にもよるのでしょうが、グループ分けを細かくして探しやすくする工夫をしているショップをよく見かけました。

4.電話番号、送料無料バナーは一番上 
もしそれが必要な情報なら、最初に目に付くところに配置しておきます。
あるべきところに配置することは、お客様に対して親切だと思います （デザイン性に重点を置いたショップの場合は、あまりやりませんけれども）。

5.「スマホ版へ」ボタン
スマホ用の表示に切り替えるボタンですね。
これは、たまーに見かけました。 スマホで買いやすいショップ作りも、いま必要なことですよね。


デザインとは別に、機能的な話題としては。
・スライドショー（コンテンツ・スライダー）がちらほら
・メルマガ登録・解除欄がトップページにあった（ページ遷移がないのはGOODだ）
・スマホから電話かけるタグ（a href="tel:～"）があった（HTML5なのね）
・商品一覧ページに「カートに入れる」ボタンがついていた（商品詳細ページを使わないお店があった）
・ギガプランの名入れ機能の入力エリアを連絡欄代わりに使っていた
・注文速報なるものがあった（画像参照 カラーミーAPIかな）

と、こんな感じで。
ノミネートショップ（1000店以上）の中にはカラーミーAPIを使っていたりして、カラーミーいじりたおし的には面白そうなのが見つかりそうですが、なにせ量が多いので、空き時間に確認しながら話題をピックアップしていければと思います。

「カラーミーショップ大賞2015」ですってよ。春

17日まで「カラーミーショップ大賞2015」の投票が受け付けされています。
 どんなWebショップが選ばれるのか、楽しみに今年もチェックしています。
去年のレポートのリンクもあります（去年の大賞「北欧、暮らしの道具店」様のWebサイトもよく覗いた）。

一度にたくさんのページが閲覧しやすく、眺めながらでもWebサイト作りの参考になります。
どんなWebショップを作ろうか具体的なイメージが湧かないときは、他サイトの模倣（気に入った配色、必要な機能、商品配置の仕方、メニューのつけ方などの部品）からはじめるのが良いと思います。

4月はいろんなことに挑戦したくなる季節でもあります。 いじりたおし的にも、現在の仕事が一段落したら活動再開します。

カラーミーの話題 2012.5-2013.11

カラーミーショップ は日々進化していますが、興味の湧かない話題が多かったので、更新が一年半ほどあいてしまいました。お願い実装の方は順調に進んでいるのでしょうか。

ひさびさですが、お知らせ記事に目を通してきました。


■以下、お知らせから抜粋

2013/10/31 - お届け日時の設定がより柔軟に設定出来るようになりました
通販サイトでは必須ですよね。

2013/10/16 - 「カラーミーショップAPI」を 全プランで無料提供開始！
期待大。データを参照したり、書き込んだり、新機能を追加したり。
当サイトでも、使えそうなサンプルを作ったりしていければなぁと思います。

2013/09/30 - スマホもパソコンもデザインを統一 レスポンシブテンプレート公開！
昨今のスマホ普及率をみると、ＰＣユーザーに主眼においたショップ・デザインも再考の余地ありではないかと思います。興味のある話題なので、調べてまとめようと思います。

2013/09/20 - LINEボタン独自タグをリリース&ソーシャル活用術をこっそり公開 

2013/06/28 - 2013年前半のカラーミーショップ新機能・サービスをまとめました。
めぼしい機能なし。まとめてもらえると読むのが楽です。

2012/11/21 - 【お願い実装】headタグ内に入力できるフリースペースを用意しました 
外部のJavaScriptを読むのに、ここの過去記事では <body>部に記述していましたが、本来は必要ですよね。ＣＳＳも外部に置けるようになりますよね。

カートJS機能について

【仕事サイトにカートJS関連記事を書きました】
 カラーミーショップのどこでもカラーミーについて実践的に学ぶ


 カラーミーショップで７月末にリリースされた新機能「カートJS機能」について。
ごく簡単に紹介すると、「カートに入れる」ボタンを好きなところに貼れるjavascriptソースを作成してくれる機能です。マニュアルはこちら。
ブログに商品紹介とカートに入れるボタン貼ることを想定していると思われます。

写真1.カートJS機能の画面　
もっともシンプルな表示の場合

カートJS機能で作成したJSコードを貼り付けるだけ。

<script type='text/javascript' src='http://www.hogehoge.com/?mode=cartjs&pid=1234567&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n'></script>

URLの中身を見ると下記のようになっています（注：オリジナルのソースには改行は入っていません）。JavaScriptでHTMLを書いているという仕組みです。

以前「カートに入れるボタンを商品詳細ページ以外に設置する」で紹介した方法（この記事の元ネタは「カラーミーショップ - 助け合い掲示板」） とやっていることは変わりませんが、在庫なしの場合は表示しない分だけ、今回のカートJS機能の方が高級です（その他、売り切れ時の商品表示や掲載設定の条件などで表示・非表示の作り込みはされている）。

document.write("<!--cartjs basic-->
<div style=\"width:94%;margin:0 auto;padding:0;\">
<div class=\"cartjs_box\" style=\"margin:0;padding:0;\">
<form name=\"product_form\" method=\"post\" action=\"http://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width:100%;margin:0px;padding:0;\">
<div class=\"cartjs_product_table\">
<table style=\"border-top:1px solid #ccc;border-right:1px solid #ccc;border-collapse: collapse;width:50%;margin:0 auto 15px;\">
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<tr>
<th style=\"border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">購入数</th>
<td style=\"padding: 0px 5px 0 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">
<input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;\" />
</td>
</tr>
<!--オプション情報-->
</table>
</div>
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<div class=\"cartjs_cart_in\" style=\"margin-bottom:10px;text-align:center;\">
<input type=\"submit\" value=\"カートに入れる\" />
</div>
<!-- 特定商取引法リンク -->
<div class=\"cartjs_sk_link_other\"><a href=\"http://www.hogehoge.com/?mode=sk\">&raquo;& nbsp;特定商取引法に基づく表記 (返品など)</a></div>
<!--// 特定商取引法リンク -->
<div class=\"cartjs_product_info\">
<input type=\"hidden\" name=\"user_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"members_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"shop_id\" value=\"PA01234567\">
<input type=\"hidden\" name=\"product_id\" value=\"1234567\">
<input type=\"hidden\" name=\"members_id\" value=\"\">
<input type=\"hidden\" name=\"back_url\" value=\"http://www.hogehoge.com/?pid=1234567\">
</div>
</form>
<div style=\"display:block;text-align:right;font-size:10px;margin-top:10px;\">
<a href=\"http://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ</a>
</div>
</div>
</div>
<!--//cartjs-->");

ブログに貼る分には「特定商取引法に基づく表記」と「powered by カラーミーショップ」の表記が必要かもしれませんが、ショップページに貼る場合には、サイトデザインの点で邪魔に思います。
 Ajaxで「<script type='text/javascript' src="～」のURLを読み込んで、文字列操作して消すことも可能でしょうが、手間のわりにやっていることが地味で現実的ではないように思います。

【追記】
8/31の公式記事によると、評判の良くなかった上述の表示は選択制にしたとのこと。

「お願い!カラーミー」にて受け付けたご要望を元に、カートJS機能を利用した際に表示されていた「powered by カラーミーショップ」の削除および「特定商取引法に基づく表記」のリンクを選択可能にしました。

テンプレート共通部分を表示させない方法

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

カラーミーショップで、こんなことができたんですね。今まで気づきませんでした。
それもこれもSmartyを理解していなかったからで、「助け合い掲示板」にはいつも勉強させてもらっています。

<{if $file_name == "file:★/free☆.tpl"}>

<{include file = $file_name}>

<{else}>

ヘッダフッタ含む共通部分ソース

<{/if}>

ネタ元は助け合い掲示板のこちらの記事。
需要がありそうですので、私も備忘録としてリンクさせていただきました。
実際に試してみましたが、問題なかったです。
<{include file = $file_name}>がキモです（知っていれば、どうってこともないのでしょうが）。
記事のサンプル例は フリーページですが、もちろん、トップページをそうすることも可能。

それとは別に、「お願い！カラーミー」のほうも徐々に進展が見え始めています。
早速、ショップの検索がAND検索になってます（過去記事の修正をしました）。


【参考】
・Smarty includeの解説

購入数の↓ボタンの位置がずれる

普段、Firefoxを使用していると、 Internet Explorerのデザインのズレに気づかなかったりします。
どこを修正した際に生じたかわかっていれば、一旦元に戻したのち、チマチマと原因を探ることになります。
検討がつかないと、ひどい時間のロスになります。
テンプレートのバックアップはこまめにとりましょう（カラーミーショップ!プロでは、テンプレート5つまで保存できます）。

今日の本題。
最近手直ししたサイトの「商品詳細」の購入数の矢印ボタンがずれていました。
Firefoxでは問題なかったので気づきませんでしたが、IE7.0では 上矢印と下矢印の間に妙な隙間ができていました。
いつずれたのかさっぱりわからず、バックアップのテンプレートとの差分をみながら、チマチマ作業。
CSSが原因らしいと検討がついたのち、さらにチマチマ作業。

特定のフォントのときに隙間があくと判明しました。
そういえば、font-familyにメイリオを追加したんだったと、解決した後で思い出しました。

直近の<div>に、問題のでない「font-family:Courier」追加して修正完了。

<div style="width: 15px; margin: 0px;font-family:Courier;">

ためしに、別のテンプレートで再現するか確認しましたが、問題発生したフォントでも隙間はできませんでした。
テンプレートによるのでしょうか。今回の話は、こんなこともあるのかーくらいで。

サイト制作にかかせないツール類

カラーミーショップ!プロのテンプレートをいじるときもそうですが、「これだけは」というツールがあります。
それは、Firefoxアドオンの「Firebug」です。

サイトデザイン時に幅を調べたり、id名やclass名を調べたり（テンプレート修正にはかなり重要）、さらには、JavaScriptの構文エラー箇所を調べたり、機能は多岐にわたり、非常に強力なツールです。
よくある勘違いを先に書いておくと、このツールはサイト制作を補助してくれるツールであって、制作自体は別のところで行う必要があります。

はじめは、使い方がちょっと難しいですので、のちのち、紹介記事を書きたいと思います。


ついでに、Web制作における便利サイトも紹介します。

ショップを見にきてくれるお客様のブラウザが、Internet Exploror（以下、IE）であるとは限りません。IE用にデザインを組むと、他ブラウザで表示したさいに、がたがたになることはよくあります。

私のようにFirefoxを使用している方もいるでしょう。
Operaや、最近ですとGoogle Chromeもありますし、Macユーザーかもしれません。
勢いのある、iPhoneだって捨てておけません。
IEであってもバージョン6と7とでは、デザインが思っていたように表示できているとは限りません。

手間の面から、全ブラウザをインストールしてチェックというわけにもいかないでしょう。
さまざまなブラウザで、どのような表示がされているかをチェックするサイトがあります（スクリーンショットを撮って見せてくれます）。
それが「BrowserShots」です。
同じような機能を持ったWebサイトで日本語のところもありますので、気に入ったところを探してみてください。

ブラウザが異なることによるサイトデザインの崩れについては、別の機会にいくつかのパターンを紹介できればと思います。

カラーミーのデザイン設定 3

前回の「カラーミーのデザイン設定 2」 からのつづき。


テンプレートを使って、簡単にページを量産するということを前回書きましたが、もしテンプレート（雛形）がひとつしかなかったら、どうでしょう？

ネットショップをするにあたって、商品ページ以外にも、必要なページがいくつもあります。検索結果を表示するページもそうです。
そういう役割の違うページごとに、いくつかデザインを用意しなければいけません。
ゆえに「種類」という項目があるのです。

いじっているうちに、それだけでは足りないことに気づくと思います。
多くのショップで使用される基本的なページ（共通、トップ、商品一覧など）のテンプレートしか用意していません。

テンプレートに影響されないページを作成するために、フリーページという場所が用意されています（「フリーページ設定」ボタン）。テンプレート（雛形）もない、まっさらなページです。
「独自タグ」も（ほぼ）使えません。

HTML、CSS（スタイルシート） 、JavaScriptを使い、ショップ独自のページを作成することができます（量産する必要のないページ、たとえば、店舗情報ページなど）。

だとしたらトップページも、ショップにひとつあれば十分なので、「テンプレートではなく、フリーページで作れるのでは」と思われた方もいらっしゃるかもしれません（そして、まさにそのとおりです）。


ただ、そうしないのは、
・フリーページでは「独自タグ」が使用できない
・たとえば、http://www.hogehoge.com/をアドレス入力すると「種類」－トップ（テンプレート）を自動的に表示する
・ショップの顔でもあるトップページのURLがhttp://www.hogehoge.com/?mode=f1ではおさまりがよくない（フリーページのURLはこんなかんじです）

フリーページは、一年目は10ページで、翌年以降増量されます。
4年目以降は100ページまで作成可能。これくらいあれば十分でしょう。

カラーミーのデザイン設定 2

前回の「カラーミーのデザイン設定 1」からのつづき。

デザイン設定ページの「デザイン設定」ボタンをクリックすると、テンプレートを編集するページに移動します。
修正の場合は、現在使用中のテンプレートをコピーし、コピーした先を修正しましょう。
プレビューし、思い通りに変更ができれいれば、使用テンプレートを切り替えて移行完了です。

・「初級モード」配色を変えられる。HTMLタグ不要
・「上級モード」HTMLタグ、CSS（スタイルシート）必須

写真をみているだけでも、いじれそうなところが多いように思います。

「種類」は非常に重要です。テンプレートのイメージができていないと理解が進みませんし、「独自タグ」も理解しにくいでしょう。テンプレートガイドを参考にイメージしてください。

こんな疑問ありませんでしたか？
「ネットショップにテンプレート（またはテンプレートエンジン）ってどうして必要なんだろう」
HTMLだけでサイトデザインは可能ですもんね。　
サイトの外観をHTMLタグの知識なしにいじれることもひとつですが、これだけでは理解不十分です（むしろこちらはオマケ）。

ブログをお使いの方は、テンプレートで日記ページを量産していることをご存知かもしれません。商品ページも同様です。
テンプレート（雛形）を一個作って、手間すくなく、ページを量産するためです。

実際にいじってみることが理解への近道です。
くれぐれも、現在使用中のテンプレートでためしたりしませんように（ページを 行ったり来たりしているうちに、現在使用中のテンプレートをいじっていたなんてことが、結構あるんですよ）。


「カラーミーのデザイン設定 3」へつづく。

カラーミーのデザイン設定 1

カラーミーショップ!プロ、サイトデザインの第一歩目です。
何度もお世話になる「デザイン設定」ページ（メニュー「お店をつくる」＞「デザインを設定する」）。

テンプレートは5つまで保存可能で、最初は「新規追加」ボタンからオフィシャルテンプレートを追加するといいでしょう。

デザインするにしろ、カスタマイズするにしろ、ベースの部分は流用するほうが効率的です。

秀逸なのはプレビュー機能です（「Preview」ボタン）。
運営中のショップページのデザインに影響させることなく、テンプレートを手直しすることが可能です。
「Preview」ボタンをクリックすれば、イメージどおり作成できたか確認できます。
JavaScriptが一部動かない、ページ遷移中にプレビューから抜けてしまう、などありますが、非常に便利です。

デザイン（配色や配置など）は影響しませんが、たとえば、ショップバナーの画像をいま使っている画像に上書きした場合は、当然ながら、運営中ショップに影響が出ます。
もうひとつは、メニュー「お店をつくる」で設定した各入力項目も共通で使用していますので、運営中ショップの表記に影響がでます。

上記二点、注意が必要です。


「カラーミーのデザイン設定 2」へつづく

カラメルとGMOとくとくポイント共通ヘッダー

2009年9月にカラメル出店しているショップに対して、Webサイト上部に「GMOとくとくポイント共通ヘッダー」が強制的に表示されるようになりました。

「Color Me Shop! pro - 助け合い掲示板」をみていると、なかなか不評です（販売手数料のことも絡むので複雑な思いもあるかもしれません）。
当然ながら、サイトデザイン的にも大問題です。いくつか問題点をあげてみました。

・マイアカウントへのログインとまぎらわしい
はじめてショッピングカートを使用するお客様もいる、と想定するならば、アカウントへのログインがふたつあるのは非常にわかりにくい。
お客様は「GMOとくとく ID」に登録しないと購入できないように思われる（実際よく訊かれている）。

・サイトデザインの不自由さ
CSS（スタイルシート）で「display:none !important」を指定しても消せない。
ショップの表示よりも読込時間がかかることもあった。
iPhoneで表示させたとき、メニューがガタガタになった（ヘッダーを消したら直った）。

表示・非表示を選べればと思いますが、「助け合い掲示板」に出ていたペパボの返答を読んだかんじだと、今後もその予定はない、という印象でした。

カラメル出店登録、それ自体は無料ですし、自由に選択が可能です。
カラメル出店のメリット・デメリットはすでに記事として書きましたので、以下の関連記事も参考にしてみてください。


【関連記事】
・カラメルと販売手数料 1
・カラメルと販売手数料 2
・カラーミーにできること、できないこと