カラーミーテンプレート01. Favorite

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

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

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

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

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

テンプレートの概要

昨今はほぼ必須になっているレスポンシブテンプレートです。
ブレイクポイントは、767px以下(スマホ)、768px以上(タブレット、パソコン)に設定してあります。
スマホ閲覧時を念頭に入れると、商品詳細ページの画像サイズは767px程度必要です。

スマートフォン閲覧を重視して、1カラム(サイドメニューなし)でレイアウトしています。トップページに商品をズラズラと並べずに比較的コンパクトにしています。

機能について

コーディングはスマートフォンファーストで、スマホ時の商品画像のスワイプ操作と使いやすいスマホメニューを標準で実装済み。
お気に入りオプション価格・オプション在庫数の表示レビューの星など、既製テンプレートでは実装されていない便利機能も充実。

ショップのストーリーを書きたい方へ、カスタマイズしやすいトップページの構造を採用しています。
トップページの大きなスライドショー商品一覧にアイキャッチ表示を採用しています。
管理画面でほとんど更新できますので、導入後もご自身で更新しやすい作りになっています(更新にはすこしですがHTML知識がある方が良い)。

ストーリーを書くのが苦手な場合は、カテゴリーバナー、ブランドバナー、特集記事へのリンクなど、ショップ一般の要素に置き換えることでトップページの各セクションを便利に使えます。
ショップの種類に関係なく幅広くご利用いただけると思います。

既製のテンプレートになりますので、オーダーメイドするよりも安価で制作期間が大幅に短縮できます。

閲覧環境について

全デバイス・全ブラウザで完全な動作を保証するものではありませんが、一般的なモダンブラウザとInternet Explorer11での動作確認を行っています。ただし閲覧環境で表示が一部異なる場合があります
個別に対応が必要な環境がある場合は別途ご相談ください。

テンプレート、ストーリーセクション

費用と初回設定の内容

テンプレート購入費+初回設定費用(※) 66,000円(税込)

※naeco.jpで行う初回設定は

  • トップページに並べている画像の設置
  • ページ先頭行のヘッドラインテキストの設置
  • トップページのテキストの設置
  • タイトル行、リンク行、バナーの文字変更
  • SNSへのリンク設置
  • 使わない項目の削除、セクションの非表示
  • ページ更新時の修正箇所の説明(実作業は伴わない)
  • カラーミー管理画面の設定の相談


上記以外は作業の大小にかかわらず要相談になります。作業に際して費用が発生する場合があります。
機能追加も同様に費用が発生します。あらかじめご相談ください。

初回設定以外の作業について

テンプレートプラスの機能「新着商品・イチオシ商品」については表示するように作っていません。必要な場合はあらかじめご相談ください。

お買い物ガイド、プライバシーポリシー、フリーページについて凝ったページを作りたい場合は、別途費用が発生します。ご相談ください。

ご用意いただくもの

テンプレートプラスのインフォメーション登録と、営業日カレンダーを利用しています。レギュラープラン以上かテンプレートプラスの契約が必要です。プラン不足の場合は非表示にすることは可能です。

設置する画像、文章はお客様がご用意してください。
商品データはお客様が登録してください。

テンプレート設置に関係ある部分に限ってnaeco.jpが設定を行います(設定範囲がご不明でしたらあらかじめご質問ください)。
商品登録や設定の代行など、開店までのお手伝いが必要でしたら、お気軽にご相談ください。

テンプレート表示に影響がある設定箇所

一番最初は必要な設定箇所が多いです。
カラーミーショップを初めて使う方は管理画面のメニューは一通り見ておく必要があります。

比較的重要で見逃しやすい設定箇所は以下のとおりです。

・ショップ作成>会員機能

「会員専用ページを 使用する / しない」。会員価格を使う場合に「使用する」。

・ショップ作成>デザイン>画像サイズ
画像アップロード前にサイズを大きく変更しておく必要があります。

・商品編集画面の名入れ設定
名入れ設定「利用する」。自由入力欄なので、名入れ以外にも使えます。

・商品管理>在庫管理>在庫表示設定-全般
「在庫を表示 しない / する」。商品編集画面でも在庫表示に関連する設定箇所があります。

・商品管理>レビュー管理>レビュー設定
レビュー機能を使用する場合は、レビュー機能「使用する」、評価星の数「5」個にします。

・ツール>メールマガジン
メルマガ配信予定がある場合はメルマガ登録・解除のリンク「表示する」。

表示場所から設定箇所を探す

ご自身でメンテナンスする際に必要な知識になります。
ここに挙げた設定箇所以外は、ほとんどがコード内の修正になります。

共通・トップページ

・ヘッダー最上部の文言
テンプレートの共通HTML内のコード2行目

・SNSアカウントの修正
テンプレートの共通HTML内のコード4-7行目

・ロゴ
ショップ作成>ショップ情報>トップページ>ショップロゴ画像

・ヘッダーメニューのBLOG
ショップ作成>ショップ情報>トップページ>店長エリア>店長ブログURL

・スライドショー
ショップ作成>デザイン>スライドショー(画像単位設定のみ機能)
停止時間などのスライドショーの各パラメータはテンプレートの共通HTML内のコードを修正する必要があります。

・スライドショー直下のバナー2枚
ショップ作成>ショップ情報>トップページ>お知らせ

・INFORMATION直前のバナー4枚
ショップ作成>ショップ情報>トップページ>フリースペース

・INFORMATION
ツール>テンプレートプラス>インフォメーション登録

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

・カレンダー
ツール>テンプレートプラス>営業日カレンダー管理

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

商品詳細ページ

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

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

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

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

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

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

商品詳細ページ(サムネイル画像が少ない、オプションプルダウン)
商品詳細ページ(サムネイル画像が多い場合はスライドショーに変わります)
商品詳細ページ(サムネイル画像なし、オプション表形式)
商品詳細ページ(メイン画像が正方形、オプション表形式)
商品詳細ページ(レビューの星表示)
商品詳細ページ(メイン画像の登録サイズが小さい場合は拡大表示もできますが、画質が粗くなります)

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

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

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

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

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

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

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

コードの変更可、コードの流用不可、コードの譲渡不可です。お支払いいただいた際にご了承いただいたものとみなします。

よくあるご質問

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

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

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

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

画像が小さい場合の対応

大きい画像を表示する用のテンプレートなので、できれば大きい画像をご用意いただくのがよいと思います。
無理な場合は商品画像やスライドショーが小さい場合は余白が空きます。許容できなければ、代替案もありますのでお尋ねください。

ヘッダーメニューに項目を増やしたい

パソコン閲覧時時にはわりと余白が空いているように見えますが、幅の狭いデバイスの際にあまり余裕はありません。要検討になります。

視差効果で、iOS閲覧時に不具合が生じます

iOS側の不具合のため、対応できません。ユーザーエージェントで切り分けて、回避コードを入れています。
ただし、最新デバイスのユーザーエージェントが考慮されていませんので、回避できなくなることがあります(崩れはしませんが元画像サイズで固定表示されます)。

表示しない主な項目

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

知っておくと便利な知識

画像を差し替えたい場合

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

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

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

グループメニューに注意

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

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

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

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

執筆者

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

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

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

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