カラーミーテンプレート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はデモサイトでは動作しませんが、カラーミーショップ上ではスライドします。

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

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

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

必要な画像サイズ(横幅の目安)

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

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

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

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

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

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

よくあるご質問

ご購入時の流れ(打ち合わせ~引き渡しまで)

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

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

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

固定幅にしている理由

閲覧中のブラウザ幅によっては、商品詳細ページの大画像の横にスジがでます。ブラウザの計算時の端数の処理が原因で、固定幅にすることで回避しています。
固定幅ですが、各デバイスに対応しています。

表示しない主な項目

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

知っておくと便利な知識

画像を差し替えたい場合

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

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

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

グループメニューに注意

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

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

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

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

執筆者

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

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

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

よく読まれているプロダクト