カラーミーテンプレート02. Sidebar

naeco.jpオリジナル制作の既製テンプレートの販売と設置を始めました。
既製テンプレートの利点は、オーダーメイドより比較的安価・短時間で設置可能です。

共通するコンセプトは、ストーリーと機能。

昨今のネットショップでは情報発信が重要になります。
お店・商品のストーリーを書くことを意識して、サイトデザインしています。

カラーミーショップの構築に長く携わってきた経験を生かして、従来のテンプレートの不足を補う機能を実装しています。
また追加でショップに応じたカスタマイズも可能です。

【デモサイト】を用意しましたので、ご確認ください。
ご不明な点などございましたら、「お問い合わせ」からご質問ください。

テンプレートの概要

昨今はほぼ必須になっているレスポンシブテンプレートです。
ブレイクポイントは、767px以下（スマホ）、768px以上（タブレット、パソコン）に設定してあります。

回遊性を重視した２カラムのテンプレートで、商品点数やカテゴリーが多いショップに向いています。

制作依頼がよくあるショップオーナー様からの需要を反映したオーソドックスなレイアウトです。機能面では今風に使いやすくなっています。

機能について

大きめのスライドショー
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枚
ショップ作成＞ショップ情報＞トップページ＞お知らせ

・フッター左のショップについて
ショップ作成＞ショップ情報＞トップページ＞店長エリア

・カレンダー
ツール＞テンプレートプラス＞営業日カレンダー管理
営業日カレンダー表示設定「ショップに次月も表示する」で２ヶ月分表示。

・コピーライト
ショップ作成＞ショップ情報＞トップページ＞コピーライト

・サイドのバナーエリア
ショップ作成＞ショップ情報＞トップページ＞フリースペース

商品詳細ページ

・名入れ
商品登録・商品編集内の名入れ設定

・在庫数
商品管理＞在庫管理＞在庫表示設定-全般

ご購入前にデモサイトをご確認ください

テンプレートの見た目と操作感は下記URLを参照してください。

商品詳細ページは登録時の画像サイズが小さい、横長画像、オプション表形式を使用しているなどが理由で、メイン画像下・メイン画像右に余白が空くことがあります。

RECENTLY CHECKED ITEMSはデモサイトでは動作しませんが、カラーミーショップ上ではスライドします。

ページの見え方を何通りか登録していますのでご確認ください。

商品詳細ページ（サムネイル画像が少ない、オプションプルダウン）
商品詳細ページ（サムネイル画像が多い場合はスライドショーに変わります）
商品詳細ページ（サムネイル画像なし、オプション表形式）
商品詳細ページ（メイン画像が正方形、オプション表形式）
商品詳細ページ（レビューの星表示）
商品詳細ページ（売切れ時）

↓スマートフォン時（クリックで拡大します）

必要な画像サイズ（横幅の目安）

レスポンシブサイトのため各デバイスの表示を考慮する都合上、思った以上に大きめの画像が必要になります（大きい分にはほとんど問題ありませんが）。

画像幅が不足する場合は画像右側の余白になります。
画像サイズがたりない場合は、調整可能か対応を検討することになります。

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

複数サイトに導入できますか？ほか許諾について

複数サイトにテンプレートを導入する際は、カラーミーショップの一契約ごとに一つご購入いただく必要があります。

テンプレート内のコードの変更可、コードの流用不可、コードの譲渡不可です。お支払完了をもって、上記についてご了承いただいたものとみなします。

よくあるご質問

ご購入時の流れ（打ち合わせ～引き渡しまで）

メールでかんたんな打ち合わせをして、作業内容とお見積りを行います。
ご請求書(pdfファイル)をメール送付。
お振込み後、副管理者設定をしていただいて、ログイン情報をご連絡ください。
naeco.jpの作業開始。
引き渡し、ご確認。

今ある店舗に影響はありますか？

基本的には営業中でも問題ありません。
カラーミーショップの管理画面の設定は、いまお使いのテンプレートと作業中のテンプレート両方に共通ですので、管理画面の設定をいじるときだけは、影響がすこし出る可能性はあります。

表示しない主な項目

定価、会員ログイン時の割引率（オプション価格表示を優先）
新着商品、イチオシ商品、トップページバナー（テンプレートプラスの機能）
簡易説明（本来的な役割ではあまり使わないので）

知っておくと便利な知識

画像を差し替えたい場合

同名で画像ファイル管理からアップロードすれば上書き更新されます。
カラーミーショップのキャッシュが効くことがありますので、すぐに更新されないことがあります。

外部ファイルをCDN経由で読み込んでいます

主なファイルは以下の３つです。
Purecss（CSSフレームワーク）
Font Awesome 5 Free（アイコンフォント）
Google Fonts（文字フォント）

グループメニューに注意

カラーミーショップのグループは癖があって、登録時には親子関係が作れますが、カラーミーショップの独自タグではグループの第一階層しか表示できません（仕様）。

パソコン閲覧時、共通ページのヘッダーメニューにグループを表示しない理由は第二階層以下が表示できないためです。第一階層しか表示できないとメニューとして使い辛いわけです。

商品詳細ページでは別の独自タグ（パンくず）がありますので、その商品のグループの階層表示が可能です。それを利用して、第二階層以下をタグ風に見せています。既存テンプレートでよくありますが、グループのパンくずをズラズラ並べるとレイアウトが崩れますので、グループ表示をコンパクトにする理由もあります。

ヘッダ―メニューでグループの第二階層以下を表示する場合は、コード直打ちになります。メンテナンス性が低下しますので、既製のテンプレートでは通常行いません。

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら