カラーミーテンプレート02. Sidebar
naeco.jpオリジナル制作の既製テンプレートの販売と設置を始めました。
既製テンプレートの利点は、オーダーメイドより比較的安価・短時間で設置可能です。
共通するコンセプトは、ストーリーと機能。
昨今のネットショップでは情報発信が重要になります。
お店・商品のストーリーを書くことを意識して、サイトデザインしています。
カラーミーショップの構築に長く携わってきた経験を生かして、従来のテンプレートの不足を補う機能を実装しています。
また追加でショップに応じたカスタマイズも可能です。
【デモサイト】を用意しましたので、ご確認ください。
ご不明な点などございましたら、「お問い合わせ」からご質問ください。

テンプレートの概要
昨今はほぼ必須になっているレスポンシブテンプレートです。
ブレイクポイントは、767px以下(スマホ)、768px以上(タブレット、パソコン)に設定してあります。
回遊性を重視した2カラムのテンプレートで、商品点数やカテゴリーが多いショップに向いています。
制作依頼がよくあるショップオーナー様からの需要を反映したオーソドックスなレイアウトです。機能面では今風に使いやすくなっています。
機能について
- 大きめのスライドショー
- INFORMATIONをスライドショー下に配置(欄内はスクロールします)
- トップページに商品をたくさん並べて見せる
- BLOG欄はフリーページで記事を書いて、記事一覧ページを表示
- サイトバー(右サイドメニュー)を表示する
幅広い層に使ってもらえるテンプレートになっていると思います。
機能面でもっとも便利なものは、フリーページで作るBLOG欄と記事一覧になります。
通常、外部サービス(WordPressなど)で記事を書いて情報発信することが多いですが、カラーミーショップのフリーページで記事を書くことによりドメイン面でのSEO効果が期待できます。
また、サイト内での回遊性も上げやすくなります。

閲覧環境について
全デバイス・全ブラウザで完全な動作を保証するものではありませんが、一般的なモダンブラウザとInternet Explorer11での動作確認を行っています。ただし閲覧環境で表示が一部異なる場合があります。
個別に対応が必要な環境がある場合は別途ご相談ください。
費用と初回設定の内容
テンプレート購入費+初回設定費用(※) 66,000円(税込)
設置がむずかしいため、テンプレートのみの販売はしていません。
買い切りになりますので、月額費用はかかりません。不具合を除き、テンプレートの更新もありません。
※naeco.jpで行う初回設定は
- トップページに並べている画像の設置
- トップページのテキストの設置
- タイトル行、リンク行、バナーの文字変更
- SNSへのリンク設置
- 使わない項目の削除、セクションの非表示
- ページ更新時の修正箇所の説明(実作業は伴わない)
- カラーミー管理画面の設定の相談
上記以外は作業の大小にかかわらず要相談になります。作業に際して費用が発生する場合があります。
機能追加も同様に費用が発生します。あらかじめにご相談ください。
初回設定以外の作業について
テンプレートプラスの機能「新着商品・イチオシ商品」については表示するように作っていません。必要な場合はあらかじめご相談ください。
お買い物ガイド、プライバシーポリシー、フリーページについて凝ったページを作りたい場合は、別途費用が発生します。ご相談ください。
ご用意いただくもの
テンプレートプラスのインフォメーション登録と、営業日カレンダーを利用しています。レギュラープラン以上かテンプレートプラスの契約が必要です。プラン不足の場合は非表示にすることは可能です。
設置する画像、文章はお客様がご用意してください。
商品データはお客様が登録してください。
テンプレート設置に関係ある部分に限ってnaeco.jpが設定を行います(設定範囲がご不明でしたらあらかじめご質問ください)。
商品登録や設定の代行など、開店までのお手伝いが必要でしたら、お気軽にご相談ください。
テンプレート表示に影響がある設定箇所
一番最初は必要な設定箇所が多いです。
カラーミーショップを初めて使う方は管理画面のメニューは一通り見ておく必要があります。
比較的重要で見逃しやすい設定箇所は以下のとおりです。
・ショップ作成>会員機能
「会員専用ページを 使用する / しない」。会員価格を使う場合に「使用する」。
・ショップ作成>デザイン>画像サイズ
画像アップロード前にサイズを大きく変更しておく必要があります。
・商品編集画面の名入れ設定
名入れ設定「利用する」。自由入力欄なので、名入れ以外にも使えます。
・商品管理>在庫管理>在庫表示設定-全般
「在庫を表示 しない / する」。商品編集画面でも在庫表示に関連する設定箇所があります。
・商品管理>レビュー管理>レビュー設定
レビュー機能を使用する場合は、レビュー機能「使用する」、評価星の数「5」個にします。
・ツール>メールマガジン
メルマガ配信予定がある場合はメルマガ登録・解除のリンク「表示する」。
表示場所から設定箇所を探す
ご自身でメンテナンスする際に必要な知識になります。
ここに挙げた設定箇所以外は、ほとんどがコード内の修正になります。
共通・トップページ
・SNSアカウントの修正
テンプレートの共通HTML内のコード2-5行目
・ロゴ
ショップ作成>ショップ情報>トップページ>ショップロゴ画像
・ヘッダーメニューのブログ
ショップ作成>ショップ情報>トップページ>店長エリア>店長ブログURL
https://your-domain.com/?mode=f2にすると、フリーページ一覧にリンクします。
・スライドショー
ショップ作成>デザイン>スライドショー(画像単位設定のみ機能)
停止時間などのスライドショーの各パラメータはテンプレートの共通HTML内のコードを修正する必要があります。
・INFORMATION
ツール>テンプレートプラス>インフォメーション登録
・INFORMATION直下のバナー2枚
ショップ作成>ショップ情報>トップページ>お知らせ
・フッター左のショップについて
ショップ作成>ショップ情報>トップページ>店長エリア
・カレンダー
ツール>テンプレートプラス>営業日カレンダー管理
営業日カレンダー表示設定「ショップに次月も表示する」で2ヶ月分表示。
・コピーライト
ショップ作成>ショップ情報>トップページ>コピーライト
・サイドのバナーエリア
ショップ作成>ショップ情報>トップページ>フリースペース
商品詳細ページ
・名入れ
商品登録・商品編集内の名入れ設定
・在庫数
商品管理>在庫管理>在庫表示設定-全般
ご購入前にデモサイトをご確認ください
テンプレートの見た目と操作感は下記URLを参照してください。
商品詳細ページは登録時の画像サイズが小さい、横長画像、オプション表形式を使用しているなどが理由で、メイン画像下・メイン画像右に余白が空くことがあります。
RECENTLY CHECKED ITEMSはデモサイトでは動作しませんが、カラーミーショップ上ではスライドします。
ページの見え方を何通りか登録していますのでご確認ください。
商品詳細ページ(サムネイル画像が少ない、オプションプルダウン)
商品詳細ページ(サムネイル画像が多い場合はスライドショーに変わります)
商品詳細ページ(サムネイル画像なし、オプション表形式)
商品詳細ページ(メイン画像が正方形、オプション表形式)
商品詳細ページ(レビューの星表示)
商品詳細ページ(売切れ時)
↓スマートフォン時(クリックで拡大します)
必要な画像サイズ(横幅の目安)
レスポンシブサイトのため各デバイスの表示を考慮する都合上、思った以上に大きめの画像が必要になります(大きい分にはほとんど問題ありませんが)。
画像幅が不足する場合は画像右側の余白になります。
画像サイズがたりない場合は、調整可能か対応を検討することになります。

カラーミーショップは商品画像をアップロードする際に設定値に縮小します。
カラーミーショップの管理画面で、ショップ作成>デザイン>画像サイズ を確認して設定値を大きくする必要があります。

複数サイトに導入できますか? ほか許諾について
複数サイトにテンプレートを導入する際は、カラーミーショップの一契約ごとに一つご購入いただく必要があります。
テンプレート内のコードの変更可、コードの流用不可、コードの譲渡不可です。お支払完了をもって、上記についてご了承いただいたものとみなします。
よくあるご質問
ご購入時の流れ(打ち合わせ~引き渡しまで)
- メールでかんたんな打ち合わせをして、作業内容とお見積りを行います。
- ご請求書(pdfファイル)をメール送付。
- お振込み後、副管理者設定をしていただいて、ログイン情報をご連絡ください 。
- naeco.jpの作業開始。
- 引き渡し、ご確認。
今ある店舗に影響はありますか?
基本的には営業中でも問題ありません。
カラーミーショップの管理画面の設定は、いまお使いのテンプレートと作業中のテンプレート両方に共通ですので、管理画面の設定をいじるときだけは、影響がすこし出る可能性はあります。
表示しない主な項目
定価、会員ログイン時の割引率(オプション価格表示を優先)
新着商品、イチオシ商品、トップページバナー(テンプレートプラスの機能)
簡易説明(本来的な役割ではあまり使わないので)
知っておくと便利な知識
画像を差し替えたい場合
同名で画像ファイル管理からアップロードすれば上書き更新されます。
カラーミーショップのキャッシュが効くことがありますので、すぐに更新されないことがあります。
外部ファイルをCDN経由で読み込んでいます
主なファイルは以下の3つです。
Purecss(CSSフレームワーク)
Font Awesome 5 Free(アイコンフォント)
Google Fonts(文字フォント)
グループメニューに注意
カラーミーショップのグループは癖があって、登録時には親子関係が作れますが、カラーミーショップの独自タグではグループの第一階層しか表示できません(仕様)。
パソコン閲覧時、共通ページのヘッダーメニューにグループを表示しない理由は第二階層以下が表示できないためです。第一階層しか表示できないとメニューとして使い辛いわけです。
商品詳細ページでは別の独自タグ(パンくず)がありますので、その商品のグループの階層表示が可能です。それを利用して、第二階層以下をタグ風に見せています。既存テンプレートでよくありますが、グループのパンくずをズラズラ並べるとレイアウトが崩れますので、グループ表示をコンパクトにする理由もあります。
ヘッダ―メニューでグループの第二階層以下を表示する場合は、コード直打ちになります。メンテナンス性が低下しますので、既製のテンプレートでは通常行いません。
執筆者

えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら