2016年3月24日

カラーミーショップにおける配送会社の話題

恒例のビックイベント「カラーミーショップ大賞2016」の投票が、3月24日23:59までとなっています。

ノミネートショップに知り合いのお店が出てないか眺めてきましたが、丁寧に作られたお店が多くて、私のデザイン&カスタマイズ魂が高揚しています。
今年も全チェックして、勉強させてもらいます。その結果はまたのちほど、別の機会で。

 https://award.shop-pro.jp/2016


0. 管理画面のおしらせ欄について


皆さん、管理画面のおしらせをチェックされていますか?
最近頻繁に更新されている大賞ショップのPR記事が面白いと気づいて、過去にさかのぼって読んでたりします(おしらせ内のECコラムというセクション)。
記事を眺めながら、読者にどのようにしてショップや商品のストーリーを伝えるのか、 自分ならどうするだろうかと考えています。

そのほかにも、ためになる内容(機能改善の話題など)があったりして、なかなか有用です。「カラーミーショップのおしらせページ
RSS配信も行われているので、気楽にチェックできます。


で、昨日更新された話題がコレです。
ぶっちゃけどの配送会社を使ってますか?ショップ店長さん100人に聞きました。
ネットショップされる方、みんなが気になる話題で、カラーミーショップの良い仕事です。


これからネットショップを始めようと考えている方は、ご参考にどうぞ。


1. 利用されている配送会社


皆さんは、配送会社をどんな基準で選びますか?

前述のECコラムのアンケート結果によると、配送料金、運送会社への信頼度、追跡サービスの順となっています。
私はシステムや配送業務の面から、全国一律の料金が簡便でベストだと思います(そんな都合の良いのはないのだけど)。

さて、アンケート結果によると、利用されている配送会社は下の通りです(ECコラムから、画像で切り抜いてきました )。



印象としては、上二つが「運送会社への信頼度」、下二つが「配送料金」で選ばれているように感じます(ざっくりと)。

以下の内容は大部分が、60-120サイズくらいの一般的な荷物を送る場合の話です。


見積もりを取ったときに比較しましたが、西濃運輸は配送料金がかなり安いです(大口契約で本州宛の場合)。

西濃運輸の配送料金とサービスは……残念ながらトレードオフです。西濃運輸を利用するには、サービス面で割り切りが必要です。
大きな荷物を安い料金で、というショップには向いているかもしれません。
時間指定不可、日祝配達不可というエリアがちょいちょいあります(通販でこれは厳しい気もしますが、取扱商品にもよるのかな)。

佐川急便も西濃運輸ほどではありませんが、配送料金は安いです。配達日時指定ができるので、こっちのほうがサービスは良いです。


アンケートで一番人気な日本郵便。サービスが広範で、個人的にも大好きです。
ゆうパックの場合、月20個以上から大口・後納契約をしてくれます
後納契約とは、月締めでまとめて費用を支払う契約です。

(他の配送会社と違って)離島料金がないので、カラーミーショップで設定しやすい。

全国一律料金のレターパックも便利。
小サイズ用に、定形外郵便、ゆうメール、ゆうパケット、レターパックなど、選択肢多め。ポスト投函・手渡し、追跡や料金で選択できます。
ゆうパケット、レターパックプラス、ゆうパック、EMSは集荷に来てくれます。

海外宛なら小型包装物(スモールパケット)、eパケット、EMSと、日本郵便の独壇場。
それ以上になると、ヤマトグローバルロジスティクスなどにお願いすることになります。

郵便局ネットワークは局留めが便利で、不在がちのお客様も受け取りやすいです。

送料無料のヨドバシカメラでも、ゆうパックで送ってくることがありますが、契約どうなってるんでしょうね(注文日のその日に届いたりしますし)。

ヤマト運輸。ブランド力か、「ヤマトで送って欲しい」と言われることがあります。
配送料金は比較的やや高めで、信頼度重視で選ばれます。


2. カラーミーショップのシステム面について


カラーミーショップでは、管理画面 > ショップ作成 > 配送 でいくつかの項目が設定できます。

取扱商品が大・小ある場合は、商品重量を基準に設定→送付先別設定で、いい具合に配送料金が計算できるように設定することになります(商品の組み合わせが複雑になると、なかなか思い通りにいかないけれど)。

いくら以上で送料無料という設定もありますが、送付先によって配送料金が大きく異なる場合は、なかなか厳しい(最大○○円引きというようにはできない)。
多くのショップが、配送料金が高い北海道・沖縄・離島まで送料無料になると都合悪い、と思っているはず。
こういう部分は、最終的には手動になるので、配送業務の面で負担になってきます。

カラーミーショップは、いろんな部分をシンプルにして、簡単に使える、という点が最大の特徴なのでしょうから、配送についても、できるかぎりシンプルに、簡便な方法を選ぶのがカラーミー的といえるのではないでしょうか。


個人的には、シンプルで、わかりやすい配送料金設定がお客様に親切かな、思います。

2016年3月13日

荷物のお問い合わせフォームを設置する

確定申告の期限前のこの時期は、個人事業主の皆さんはぐったりされている方も多いことでしょう。
理由は様々でしょうけど、簿記を分からないなりに、自分でやってる方が結構多いですよね。
時間は掛かりますが、慣れれば、仕訳も書類作成もできるようになりますし。

とはいえ、書類作成に多大な心理的負担がかかっている方は、税理士さんに投げちゃったほうがいいんじゃないかなぁと思います。コストも大したことありませんし。

ということで、私もこの時期はなにかと忙しくしておりますが、あと少しの辛抱です。

さて今回。
配送会社のWebサイトにある、荷物のお問い合わせフォームを、カラーミーショップに設置する方法についてです。
完成イメージはこんな感じ。うちにも付けたいなと思っていただけたら幸いです。




0. HTMLのformタグについて


まず、formタグについてです。<FORM>-HTMLタグリファレンス
デザイン関連のHTMLは理解しているけど、formタグは知らないという方、結構多いと思います。
サーバーとのやりとりがイメージしにくいのか、少々とっつきにくい印象です。

ということで、ざっくりとした説明。
1. type="submit"となっているところのボタンを押すと 
2. <form>~</form>内の、inputタグにあるname属性とvalue属性の値をサーバーに送って
3. PHPやCGIなどで処理して、結果を表示

荷物のお問い合わせフォームを設置すること自体は難しくありません。
配送会社のWebサイトから<form>~</form>内の必要項目をコピペすれば、 カラーミーショップにも設置できるという話です。


1. ヤマト運輸の「荷物のお問い合わせフォーム」


クロネコヤマトの荷物お問い合わせシステムから一部抜粋
<form method="post" action="/cgi-bin/tneko" style="margin: 0px;">
<center>
<table border="0" width="no">
<tr>
 <td align="left">詳細情報 
  <input type="radio" name="number00" value="1" checked>あり
  <input type="radio" name="number00" value="2">なし
 </td>
 <td align="center">
  <input type="submit" name="sch" value="お問い合わせ開始">
  <input type="button" value="  クリア  " onclick="javascript:clearText(this.form,10);">
 </td>
</tr>
</table>
</center>
<hr width="750">
<table class="ichiran">
<tr>
 <th><br></th>
 <th colspan="2" class="lf">
  <font color="#990000" size="3"><b>お問い合わせ伝票番号</b></font>
 </th>
 <th><font color=#990000 size=3 class="ct">日付</font></th>
 <th><font color=#990000 size=3 class="ct">配達状況</font></th>
</tr>
<tr>
 <td><br></td>
 <td colspan="4"><font size="2"><span style="FONT-WEIGHT:NORMAL;">枠の中にお問い合わせ伝票番号を入力してください。<br><br></span></font></td>
</tr>
<tr align="middle">
 <td class="number">
  <font size="3"> 1件目</font>
 </td>
 <td class="input">
  <input name="number01" size="20" maxlength="14">
 </td>
 <td class="denpyo"><br></td>
 <td class="hiduke"><br></td>
 <td class="ct"><br></td>
</tr>
(以下、省略)
</form>


必要な箇所はマーカー部分の5ヶ所です。
カラーミーショップで動かすために、少し手を入れます。
<form  method="post" action="http://toi.kuronekoyamato.co.jp/cgi-bin/tneko" style="margin: 0px;">
  <input type="hidden" value="1" name="number00">
  <input maxlength="14" size="20" name="number01">
  <input type="submit" name="sch" value="お問い合わせ開始">
</form>
送信先のプログラム名はフルパスで指定します。

本家にあったラジオボタンは不要なので、number00=1 固定で送ります。hiddenは、Webサイト上に表示はしないが送信する必要がある場合。

3行目は、type="text"が省略されています(type属性の値が"text"の場合は省略可能)。テキスト入力エリアが表示されます。
入力した数字がname属性の値とセットになって、number01=314159265358という具合にサーバーに送られます。

4行目のtype属性の値"submit"は、ボタンを表示します。実行、送信、検索などなど。この例では「お問い合わせ開始」というラベルがついています。
ボタンを押すと、action属性で指定したスクリプトが実行されます。

5行目。閉じタグ、重要ですね。

最後にCSSでデザインを指定すれば完成。


2. おわりに


先にも書きましたが、デザイン関連のHTMLは理解しているけど、formタグは知らないという方には、レベルアップのよい機会ではないでしょうか。
formタグは、カラーミーショップでも、「検索窓」や「カートに入れる」ボタンで使われています。このあたりをいじっていると、避けては通れない知識だと思います。

ヤマト運輸以外も、やりかたは同じです。

2016年3月6日

カラーミーショップにおけるSmarty入門

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

カラーミーショップは、PHP用のテンプレートエンジン Smartyを使っています。
カラーミーショップのカスタマイズにおいてもたまーに使いますが、知らなくてもそんなに不便はありません。
今回は、実践的なサンプルを二つ紹介します。

Smartyとは?って方は、公式でご確認ください。まとまってます。「Chapter 1. Smarty とは? | Smarty


Smarty使用の例としては、テンプレート内のこういうやつですね。条件分岐、ループなどに使用されています。
<{section name=num loop=$category}>

あと、カラーミーから提供されている独自タグ。これもそうです。カラーミーが用意してくれた変数に値(値、文字列など)が入っています。
ちなみに、JavaScript内でも使えます。
<{$product.id}>

<{ }>=デリミタ、Smarty構文ですよ、というタグ。

マニュアルの細かい部分までは不要ですので、がっつり読まなくても大丈夫です。
Chapter 5. 変数の修飾子」は、使う可能性大です。


1. 変数の修飾子を使った例

<{if $recommend[num].name|regex_replace:'/検索文字列/':'x' ne $recommend[num].name}>
    <{assign var="style" value="red"}>
<{else}>
    <{assign var="style" value="other"}>
<{/if}>

Chapter 5. 変数の修飾子」にも記載されていますが、reg_replaceは、検索・置換機能です。

この例は、おすすめ商品の商品名のなかに検索文字列があればxに置換し、元の商品名と比較しています。
元の商品名と一致しない場合(すなわち、検索文字列がヒットした場合)は、条件分岐はtrueで、styleにredをセット。それ以外は条件分岐がfalseで、styleにotherをセット。

商品名のなかに何か(型番、色、形状、サイズ、グループなど)あらかじめ仕込んでおくと、絞込んだり、条件分岐に使えます(カスタマイズしていると、こういう判断条件が必要になったりすることがあるんです)。

xに置換して比較してというように少々回りくどいですが、Smartyの場合、検索文字列の有無は、こんな風にして判断します。

assignで、変数に値を代入できます。独自タグと使い方は同じで、<{$style}>を埋め込めば、値を使用できます。

例ではひとつですが、|(パイプ)をつなげていくと、左から順番に変数の修飾子を使うことができます。


2. Smartyの予約変数を使った例

予約変数 {$smarty} | Smarty」を使用し、URLクエリを取って条件分岐に使ってみます。
予約変数はカラーミーショップのテンプレートにもしばしば登場しています(<{smarty.section.num.first}><{$smarty.section.num.iteration}>などがそう)。
<{if $smarty.get.keyword == ""}>
    <input type="text" name="keyword" id="search_textarea" placeholder="検索" />
<{else}>
    <input type="text" name="keyword" id="search_textarea" value="<{$smarty.get.keyword|escape:'html':'EUC-JP'}>" />
<{/if}>
検索窓にキーワードを入れて商品検索をするときに、ページ遷移すると入力したキーワードが消えてしまいます。消さずに表示したままにしてほしい、という要望があったときに使えます。

URLクエリからキーワード(keyword)を取ってきて、検索窓にセットします(escape以下は、キーワードが全角文字の場合にEUC-JPでエンコードする必要があるため)。

URLクエリとは、「http://www.example.com/?mode=srh&sort=p&keyword=test」の?以降の文字列のこと。PHPにパラメータ(今回は検索キーワード)を渡すときに使います。

妙なところに改行が入っていますが、ブログの表示の都合上で、本来は不要です。


3. まとめ

今回の例もそうですし、文字列を加工することもそうですが、どちらともJavaScriptでできるんですが、Smartyでやるほうが断然スマートです。

過去記事にもSmartyの話題がいくつかあります。ご参考にどうぞ。
ラベル:Smarty

2016年3月2日

カラーミーショップにおけるレスポンシブ入門編

【仕事サイトにレスポンシブ関連記事を書きました】
カラーミーキットの中を見て、レスポンシブ対応について学ぶ


2012年頃からちらほら見かけるようになりました、レスポンシブ・ウェブ・デザイン(Responsive Web Design, RWD)。
昨年の「カラーミーショップ大賞2015」にノミネートされたショップを拝見していても、ずいぶんと使われています(とはいっても、全体からすると半分にも満たない、まだ少数派ですが)。

カラーミーショップは今年で11周年だそうで、その時代の環境に合わせて、機能拡張されています。
スマートフォンショップ用のデザイン・商品説明欄も、後に追加された機能ですし、レスポンシブ対応についても、後からなされました。

今回は、カラーミーショップにおけるレスポンシブ入門編として、導入部分についてご説明いたします。


1. カラーミーショップの設定箇所について


カラーミーショップにおける、レスポンシブ対応の設定は、唯一ここだけ。
管理画面の、ショップ作成>スマートフォンショップ>表示モード設定のドロップダウンメニュー「スマートフォン表示モード設定 PC版表示」です。

とはいっても、このページの設定、後から追加されているので、案外気づきにくいです。ということで、いまはデザインのページにもリンクが張ってあります(下図の下部参照)。
スマートフォンでレスポンシプテンプレートを利用する時の注釈が付いています。
スマートフォンでレスポンシプテンプレートを利用の場合は「PC版表示」に設定してください
ということで、レスポンシブ対応のテンプレートを使用する場合などは、グレーの網掛け部分の、「スマートフォンでの表示状態」を「【PCテンプレート】 が設定されています」としておく必要があります。

 

2. カラーミーショップのテンプレート


カラーミーショップ公式にテンプレート一覧がありますので、レスポンシブ対応テンプレートを見てみましょう 。レスポンシブ | ショップ デザイン テンプレート
4つが無料(WASHI、nano、Bit、カラーミーキット)。いずれもミニマルデザイン調で、利用ショップを選びそうな印象。

一方、有料テンプレートは6つあり、どのようなタイプの商品でも合いそうなテンプレートが見つかる感じで、デザインの選択肢が多い。そしてお値段するだけあって(といっても、人に頼むともっとする)、見た目の完成度も高いです。
綺麗に撮った商品写真があれば、即オープン可能じゃないですかね。

それ以外にも、Bootstrap風のCSSフレームワーク「カラーミーキット」というのも用意されています。完全自作派の方の作業効率アップ。
CSSフレームワーク - カラーミーショップ ネットショップ運営サービス

3. レスポンシブの一般的な説明


カラーミーショップ公式の読み物コーナーに、簡単な説明が載っていました。
Webデザイナーが詳しく解説!流行りの「レスポンシブ対応」のメリットって? | ECお役立ち情報 – ネットショップ運営サービス【カラーミーショップ】

レスポンシブ対応のざっくりとした概要。
・ブラウザの横幅に対応して、段組が変化する
・ブラウザの横幅に対応して、画像の大きさが変化する
・ブラウザの横幅が狭いときは、メニューが変化し、内容の一部が非表示になる
・PC~スマートフォンまで、ひとつのWebサイトで表示できる

その多くがCSSで実装されていて、一部JavaScriptも使っています。
ブラウザの横幅の取得にはメディアクエリ(CSS3)を使用しますので、対応ブラウザはIE9以降となります(IE8の対応はもういいかなと個人的には思います)。

レスポンシブ・ウェブ・デザインは、デザインを厳密にコントロールできないので、趣味じゃない人もいらっしゃると思いますが、昨今そんなことも言ってられません(私もその一人なのですが)。

2016年になり、最早「流行り」と呼ぶ時期ではなくなっていますので、リニューアルを考えていらっしゃる方は、メリット・デメリット を含めて検討されてはいかがでしょうか。

4. おわりに 


入門的な内容に終始しましたので、機会があれば、実践的な内容で続きをやりたいと思います。

前回記事の再掲。
日頃のご愛顧に感謝して、カスタマイズのサービスをココナラに出品しました。
料金は無料(限定)となっておりますので、手伝いやらご質問があればこの機会にどうぞ。
ココナラの登録は、Yahoo ID、facebookアカウント、メールアドレスが利用できます。