カラーミーテンプレート03. Button

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

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

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

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

このテンプレートの機能・デザインは「カラーミーテンプレ―ト01. Favorite」を踏襲しつつも、商品詳細ページのプルダウン形式をボタン化した作りになっています（この点が01. Favoriteと異なります）。

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

テンプレートの概要

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

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

機能について

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

プルダウンメニューの代わりに、ボタン入力を実装しています。
オプション表示形式でプルダウン形式を選択している場合に、下画像のようなボタン入力に置き換えて表示します。ボタンを使いたい場合は、「プルダウン形式」を選択する必要があります。
JavaScriptとCSSを書いて、オプションラベルに色を表示することもできます（デフォルトは表示しない）。

ショップのストーリーを書きたい方へ、カスタマイズしやすいトップページの構造を採用しています。
トップページの大きなスライドショーと商品一覧にアイキャッチ表示を採用しています。
管理画面でほとんど更新できますので、導入後もご自身で更新しやすい作りになっています（更新にはすこしですが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を参照してください。

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

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

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

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

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

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

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

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

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

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

よくあるご質問

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

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

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

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

画像が小さい場合の対応

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

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

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

表示しない主な項目

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

在庫管理しない場合

「在庫管理しない」でオプション表示形式「プルダウン形式」を選択している場合、オプション一覧の在庫数を空欄や0にしていると、ボタンに斜線（売切れマーク）が入ります。
上記のような場合は、オプション一覧の在庫数に仮の数字（1以上）を入れておきます。
売れたとしても、在庫管理しない限り、オプション一覧の在庫数は減りませんので、売切れになったりはしませんし、ボタンに斜線（売切れマーク）は入りません。

知っておくと便利な知識

画像を差し替えたい場合

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

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

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

グループメニューに注意

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

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

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

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

執筆者

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

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

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