コンサルロケッツ STATION

新年明けましておめでとうございます!
伍号機です!
あっという間に2018年ですね。
今年もコンサルロケッツを何卒よろしくお願いいたします。

 

新年一発目は!
今話題の!
スマホの商品ページにお気に入り登録ボタンを入れてみよう!の巻です!
 
よくあるこういうやつです↓


 
方法の前に、そもそもなんでお気に入り訴求が大事かというと、
お気に入り登録した商品って値下げしたり、ポイントUPするとマイページに通知が届くので、
購買促進につながる可能性が増えるのです!
 
こんな感じですね↓
 

 
最近はお気に入り登録数もRMSで確認できることですし、
(え、そうなの!?と思ったあなたはこちらの記事をどうぞ 笑)
お気に入り登録を促して、登録数を把握することは店舗運営にとって大事なことだと思われます。

 

そんなこんなで、具体的な実装方法のご紹介です!
いろいろ見せ方はありますが、今回は
 
【1】右側に固定するバターン
【2】商品名の下に挿入(固定はされない)
の2種類をご紹介致します。
 

 

※ちなみに、goldのFTPを使用しますので、契約していないとこの方法は実装できませんのでご了承ください。

 


1.お気に入り登録用の画像を用意します。


例えばこんな感じです↓

(「【2】商品名の下に挿入」の場合は不要なのでスキップしてください)
 
もうなんだったら、そのまま右クリックで保存して使っちゃってください。
ちなみに、pngファイルなので、goldのサーバーに上げることを推奨します!
cabinetにあげるとgifかjpgになって汚くなっちゃいます。
(必ず自分のところのサーバーにUPしてから使ってくださいね。)
 


2.jsファイルの準備


任意のjsファイルを用意します。
(例:fav.js)
 
用意したjsファイルに、下記を参考に記述していきます。
※●ショップID●と■画像URL■の部分を書き換える必要があるので、お忘れなく!
 

【1】右側に固定するバターン

 

【2】商品名の下に挿入するパターン
(こちらはショップIDだけ変更していただければOKです!)

ちなみに、「ショップIDがわからん・・・!」という方は、こちらの記事を参考にしていただければと!

 


3.cssの準備


こちらも任意のcssファイルを用意します。
(例:fav.css)
 
もしくは、すでに何らかスマホ用商品ページ用のcssを読み込んでいる場合は、
既存ファイルに追記でもOKです!
既存もしくは新規のcssファイルに、下記の通り記述します
 

【1】右側に固定するバターン

 
【2】商品名の下に挿入するパターン

下からの位置や、画像サイズ、背景色など細かい部分は任意で調整いただければ!

 


4.jsファイルと、cssファイルをgoldのサーバーにUP


準備したjsファイルと、cssファイルをgoldのサーバーにUPします。
ここまでできたら準備OK!
もうひと息です!

 


RMSに記述、実装


5.いよいよRMSに記述していきます。
 
RMSのデザイン設定メニュー(スマートフォン) > 商品ページ設定 に
下記を参考に、記述してください。
↓下記のjsやcssのURLはあくまで見本なので、それぞれgoldのサーバーにUPしたURLに変更してください。

 
おつかれさまでした!
うまくいけば、商品ページにお気に入り登録ボタンが出現しているはずです。
必ず確認をお忘れなく!
  
※有名な話なので注意書きするまでもないと思いますが念のため
上記ソースは変な隙間や記述がいかれているように見えていますが、
RMSのデザイン設定ではは本来jsファイルやcssを読み込むことができないので、
あえてこのようなタグにすることで、裏技的に挿入することができるのです。
なので、無駄に見えるスペースなどもそのまままるっとコピーしてご利用ください。

 
 
2018年も、いや、2018年こそは役に立つ記事を書いていければと思いますので、
今年もよろしくお願いします!
 
今回はこの辺で。ばいちゃ〜
 

んちゃ!伍号機です。

 

今日は自分用のメモを兼ねて。

プログラマーさんとかだと常識なんでしょうが、
正規表現で一括置換するといろいろ便利だったので、
そのやり方をご紹介します。

 

普段デザインとかちょっとしたコーディングメインであまり馴染みのない人も
こういうやり方があると覚えておくとちょっとしたときに便利そう!

 

そもそも正規表現とは

“通常の文字 (a ~ z など) と、”メタキャラクタ” という特殊文字から
構成される文字列のパターンです。”

 

▼引用元
https://msdn.microsoft.com/ja-jp/library/cc392020.aspx

 

・・・
 
ちょっと(伍号機には)難しいので、例で説明します!
 
例えば、

というように、連番の数字が並んでいる画像をまとめて

に置換したいという場合。

 

微妙にファイル名が違うので、普通の一括置換はできませんよね。
そんな時に出番なのが正規表現を使った一括置換!
 

やり方はいろいろあるようですが、
今回はDreamWeaverを使ったやり方です。

 

Command+Fで検索画面を開いて、以下のように設定します。

↑「正規表現を使用」にチェックを入れるのがポイント
 

【置換前】

【置換後】

という具合です。

 
ちなみに、置換前に使われている

“ ¥dは数字1文字を表します。[0-9] と同じです。
プラスで『数字のどれか1文字が1回以上繰り返されてる』という指定になります。”

▼引用元
http://tenderfeel.xsrv.jp/memo/70/

 

 

こんな感じで「すべて置換」ボタンを押すと、
まとめて置換ができちゃいます。

 

今回の例でいうと仕上がりはこんな感じ!
 


↑アイコンが見事一括で変更できちゃいました!

 

さらに〜
 

よく使うパターンは毎度毎度打つのは面倒なので、
クエリーとして保存することもできちゃうとのこと!
 
方法は超簡単。
検索画面の「クエリーの保存」をクリックするだけ!

 

再度使いたい時は、こちらで簡単に開くことができます。

 

正規表現自体はもっと複雑で、できることもたくさんあり、マスターするにはちょっと難しそうなので、
用途に応じてちょっとずつ覚えてみようと思いました。
こういうやり方があるということを知ってるか知ってないかだけでもいろいろ効率化ができそうです。
 

珍しく真面目に書いてみました。
本日はこの辺で。
 
ばいちゃ〜

んちゃ!伍号機です!

今日は恥を承知で。
「何だ、お前こんなことも知らなかったのかよ」なんて思われること覚悟で。

 

ただ、どこかに「マジか!知らなかった!」という仲間に届いてくれることを期待して書きます。

 

楽天でお気に入り登録数を確認する方法!

 

・・・

 

RMSから→「3-3 アクセス分析」→「商品ページランキング」

「お気に入り」タブで見ることができます!

↑こんな感じですね!

 

用途としては、

・仕入れ数の目安にしたり、
・人気アイテムを対象にしたクーポンやSALEを開催してみたり

 

未来の顧客に対してのアプローチをいろいろ考えることができそうです!

 

・・・

 

あまりにも短すぎて「この辺で」なんてとうてい言えないので、
最近の楽天の5の倍数キャンペーンについての考察をば。

 

先日のスーパーSALEは12月2日〜12月7日までの開催でしたが、
一番盛り上がったのはやっぱり「5」日だったようです。
弊社でサポートさせていただいている店舗さんもほぼほぼそのような結果になりました。

 

ダイヤモンド会員1年以上継続中の伍号機も、もちろんほしかったあれこれ
5日にまとめ買いしましたとも。

ポイントマニア ≒ ヘビーユーザー
なので、この日を狙っている人の多さが伺えます。

 

始めの頃は楽天関係者内で盛り上がっていた感がありましたが、
だんだん一般のお客様にも浸透してきた気がします。

 

楽天のマラソンやらスーパーSALEって5日間開催が基本なので、
必ずどこかの日は5の倍数にかぶります。
何と言ってもうれしい楽天負担なので、日頃ポイントUPはなかなかしないという店舗さんも
ここぞをばかりにメルマガやバナーでアピールしまくるといいと思います!

 

みなさん。こんにちは。
ロケッツ4号機です。

  
  

コーダーにとって「エディタ」は仕事の相棒であり、パートナー。
みなさんも自分好みのエディタを使用されているかと思いますが、自分はここ2〜3年「Atom(アトム)」を愛用しています。

  
  

そこで今回!Atom の「スニペット」機能を使って爆速コーディングを実現する方法をご紹介します。
※DreamweaverやSublime Textにも同様の機能がありますので、それらのエディタをご使用の方は各自のスニペットを編集してください。

  
  

▼目次

スニペットとは?
便利なスニペット一覧
さいごに

  
  

■スニペットとは?

コーディング作業において、同じようなコードを書くシーンが多々あるかと思います。
たとえば「コメントアウト」やCSSの「メディアクエリ(media query)」、さらにはJSなどの代入式・・・。
こういった「繰り返し書く機会のある」コードを、いちいち書かずに呼び出す機能を「スニペット」と呼びます。

  
  

スニペットとは「断片」「端切れ」という意味の言葉らしいですが、コードの断片をスニペットとして登録しておくことで、
次回からのコーディングをより効率的に短縮して行うことができるのです。

  

※Atomではメニューバーから「スニペット」を選択するとsnippets.csonファイルが開きますので、そちらのファイルを編集してください。

  
  

百聞は一見にしかず。
実際にスニペットを使用しているシーンがこちら。

  
  

  
  

いかがですか?
このように、自分がよく使用するコードを辞書登録機能のようにして呼び出すことができるのです。

  
  

ではつぎに例として、自分が個人的にスニペット登録しているコードの一部をご紹介します。

  
  

■便利なスニペット一覧

では、自分が実際に登録しているスニペットをいくつかご紹介します。

  
  


HTML編

  

見出し(コメントアウト/HTML版)

  
  

jQuery

  
  

ulリスト

  
  

jQueryプラグイン(ex.Slick.js)

※よく使用するjQueryプラグインの標準コードを登録しておくと便利

  
  


CSS編

  

見出し(コメントアウト/CSS版)

  
  

メディアクエリ

  
  

clearCSS

  
  

IE10以上に適用

※こういった、忘れやすいコードを登録しておくといちいち探さなくて済む

  
  


JavaScript編

  

即時関数(jQuery)

  
  

即時関数02(jQuery)

※別バージョンの即時関数も登録しておくと、いざというときに便利

  
  

.scroll()

※scrollの他にもonやready、eachなど自分のやりやすいデフォルトの形で登録しておくと便利

  
  

userAgent

こういった、パッと書けない&出てこないコードを登録しておけるのがスニペットの良さ

  
  

■さいごに

いかがでしたか?
エディタの「スニペット」機能を活用することで、同じコードを繰り返し書く必要がなくなり、コーディングの効率化に繋げることができます。

  

とくにありがちなのは、JSプラグイン設置時のコードがわからず公式サイトを参照してしまい、無駄な時間を費やしてしまうシーンですが、いちどスニペットに登録しておけば一発でコードを書くことができるようになります(プラグインの仕様が時折変更することがありますので、その際は随時確認するようにしてください)。

  

それでは、今年も残りわずか。良きコーディングライフをお楽しみください。

  
  

弐号です!
お久しぶりです。

来月の楽天スーパーSALEの
サーチ申請は11月27日までです。
お忘れのないようにして下さいね!

ちなみにですがコピー商品で申請出すか、通常商品を申請にしするかは考えてからやって下さいね。
誰かに言われたので、そのまま言われたとおりにコピー商品作って申請出したりしたらもったいない事があります。

どんなときもったいないかと言うと、、、

1「あまり最近アクセスが無かったり売れていない商品だけど、本当は楽天の検索で上位に上がって来たら売れるのになー」という商品
2「スーパーセールで売れる事で今後の楽天検索対策として利用したい」という商品
3「同じ商品だけど、数量やバリエーション別で別の買い物カゴとして登録している商品ページがあり、たまに売れている」という商品
などなど。。。

上記などは、基本的にはコピー商品サーチ申請をせずに直接現在のページをサーヒ申請かけた方が、セール期間もその後も効果が発揮されます。

デメリットとしては設定後から開始までは売れなくなりますが、現在そこまで売れてない商品なら
現在の商品ページをサーチ申請するのをおすすめします。

今年も1ヶ月と少し、、、
お忙しいかとは思いますが、とにかく走り抜けましょう!

 

こんにちは。コンサルロケッツのコーディング担当、4号機です。
今回はまじめモードで、ウェブ制作に役立つ情報をお届けしたいと思います。

 

自分がこのウェブ業界に入って約7年、本格的にコーダーとして働いて早5年目になります。
コーダーはHTMLやCSSの知識もさることながら、やはりJavaScript(JS)が書けてこそ一人前。

 

けれど・・・書けない・・・むずかしい・・・

 

そうなんです。JSはHTMLやCSSとは違って「プログラミング言語」のひとつ。
HTMLやCSSとは全然別の脳みそを使わなければ、上手く書くことができません。
自分も「よし今年こそはJS勉強しよう!」と意気込みながら、毎年気づけは紅白歌合戦を観つつ、むしゃむしゃミカンを食べる体たらく。

 

日本人に生まれてよかったという幸せを感じながらも、ミカンをひと房、またひと房と頬張るたび、確実になにかを失っているような感覚。

 

・・・だめだ!!今年こそミカンを美味しく食べたい!
そして紅白で安室ちゃんの勇姿を見守るんだ!!

 

というわけで、今年も残すとこをあと僅か。
この記事では、JS初心者のぼくが、JS初心者のみなさんと同じ目線に立ちながら、
「今年こそ美味しくミカンを食べるぞ!」と意気込みながらお送りします。

  
  

▼目次

ざっくり!そもそもJavaScriptってなに?
JavaScriptはどう使うのか?を知ろう!
プログラミング的思考は日常にありふれている!
超かんたん!jQueryのススメ
さいごに 〜下手でもいいから書いてみる!〜

 

■ざっくり!そもそもJavaScriptってなに?

 

JavaScript(JS)は主にウェブブラウザで動く「プログラミング言語」のひとつです。
たとえば画像が自動で切り替わったり、タブで表示を切り替えたり、カウントダウンタイマーだったり、あとはGoogleMapなんかもJSの技術を応用したものとして知られています。

 

参考:GoogleはWebの常識を塗り替えた

 

とにかくJSは「動的なウェブサイトを作成する」ためには必要不可欠な技術といっても過言ではないでしょう。

 

単にHTMLとCSSだけでは、特に動きのない「ただ表示されている」だけのウェブサイトとなります。
※最近では簡単なものであればCSSのみでも動きを付けることが出来ますが。
しかし、そこにJavaScriptが加わるだけで一気に「リッチ」な印象のウェブサイトを作ることができるようになります。

 

たとえばそれは「魔法のよう」に、自由自在に思い描いたデザインを表現できるツールなのです。

  
  

■JavaScriptでなにができるのか?を知ろう!

 

ではつぎに、ウェブサイトにおけるJSの「仕事っぷり」を見てみましょう。

 

・・・はじめに結論から述べると、ウェブサイトにおけるJSはおおよそ

 

1:要素を取得して
2:なんらかの処理を定義して
3:しかるべきタイミングで処理を実行する

 

という流れを辿ります。

 

たとえば「div要素をクリックすると文字が大きくなる」という仕組みを作ってみます。
まず、HTMLを下記のように用意します。

 

 

これは簡単ですね。
ただ<div>の中に<p>で囲ったテキストを入れているだけです。

 

つぎにJSですが、このように記述します。

 

 

ひとつひとつ見てみましょう。

 

まずはこちら。
var elm = document.getElementById(‘sample’);
これは、先ほどのHTMLの<div>要素(id=”sample”)を、変数elmに代入しています。
JSにおいて「=」は一般的な「等しい」の意味では使用しません。
ここでは「代入(代入演算子)」と呼ばれ、右辺を左辺に代入する目的で使用されます。
つまり、ここでは先のid=”sample”の要素一式が、変数elmに入ったことになります。

 

つぎはこちら。
function test(){
elm.style.fontSize = “50px”;
}
ここではtest()という関数(function)を定義しています。
関数とは「なんらかの処理」を行うための「魔法のブラックボックス」です。
このコードでは「変数elmのフォントサイズを50pxにする」という処理を関数test()という名前で定義しています。

 

ここまでのコードで「要素を取得(id=”sample”)」して「フォントサイズを変更する」という処理が出来上がりました。
つまりこういうことです。

 

1:要素を取得して(id=”sample”)
2:なんらかの処理を定義して(フォントサイズを変更)
3:しかるべきタイミングで処理を実行する(???)

 

最後に、どのタイミングでその処理を実行するのかを決める必要があります。

 

それがこちら。
elm.addEventListener(‘click’, test, false);
ここではaddEventListener()というメソッドを使用します。
※ここでいう「メソッド」とはJSがもともと用意してくれた関数(処理のまとまり)だと思ってください。
かんたんに言うと、addEventListener()とは「言ってくれたらそのタイミングで実行しまっせー」というメソッドです。

 

そしてカッコの中を見てみると、なにやらカンマ区切りで3つの何かが入っていますね。
この「何か」をプログラミング界隈では「引数(ひきすう)」と呼びます。

 

第一引数には’click’とあります。つまり「クリックしたときに実行しまっせー」というものです。
第二引数にはtestとあります。つまり「クリックしたときにtestを実行しまっせー」というものです。
第三引数はfalseとなっていますが、ここでは特別な理由がない限りfalseで大丈夫です(興味があれば調べてみるのも面白いかも)。

 

まとめると・・・
elm.addEventListener(‘click’, test, false);
「elmをクリックしたときにtestを実行しまっせー」というものです。

 

もう、おわかりですね。

 

1:要素を取得して(id=”sample”)
2:なんらかの処理を定義して(フォントサイズを変更)
3:しかるべきタイミングで処理を実行する(クリックしたとき)

 

これで、立派なJSのコードが完成しました!

 

サンプルはこちら

 

参考:addEventListener type一覧と各ブラウザ対応

  
  

■プログラミング的思考は日常にありふれている!

 

このように、JSの仕事とはHTMLの要素を取得して、なんらかの処理を、しかるべきタイミングで実行するよう指示を出すことです。
先ほどの例では簡単なお題に沿って説明しましたが、仮に規模の大きな処理であっても、基本的には同じような仕組みの積み重ねです。

 

AをBした時に、Cする。
Cした後に、AをDする。
Dした後、AをBに戻す。

 

しかし、この考え方!慣れない!頭が混乱してしまうことこの上なし!
プログラミング言語でつまづく大きな理由のひとつは、このような「プログラミング的思考に慣れない」というものかもしれません。

 

しかし!言っても普段、私たちも日常でこのような思考を無意識裡に働かしながら生活しているものなのです。
たとえば「明日もし雨が降ったら、買い物には行けないので、今日のうちに買い物を済ませよう」。
ありますよね、こういうシーン。

 

これを、JavaScriptで書くと、このようになります。

 

 

ifとは「もし〜ならば」の条件分岐を定義する文です。
またelse ifでは、ifで定義した条件とは異なる条件を定義することができます。

 

ほかにも、日常でこのようなシーンがあるかと思います。

 

「明日までに仕事が終わらなければクビになってしまう・・・」
「先週のコンパで会った女の子で、とりあえず連絡のついた子をだれでもいいから誘って飯行って、そのあとムフフ」
「オレ・・・この戦争が終わったら・・・あの子に思いを告げるんだ・・・」

 

これらにも全て、プログラミング的な思考が働いています。
プログラミングを書くとは「○○を○○した時、○○する(しよう)」という普段私たちが使っている思考の形を、より明示的にコードとして表すことなのです。

 

■超かんたん!jQueryのススメ

 

とは言え、プログラミングになれるには、とにかくコードを書くことが一番の近道!
そこでおすすめなのが「jQuery」です。

 

jQueryとは、JavaScriptのライブラリ(より扱いやすくしたもの)です。
例えるなら「中華調味料の元」みたいな感じです。
麻婆豆腐を作ろうと思って、いちいち調味料を全て揃えるのは面倒ですよね。
けれども「麻婆豆腐の元」があれば、それひとつで大幅に手間を減らすことができます。

 

初学者の方であればJavaScriptとjQueryの違いがイマイチわかっていないケースもあるかと思いますが、jQueryとは「中華調味料の元」だと思っていれば(たぶん)大丈夫です。

 

では具体的にどう便利なのかを見て見ましょう。
先ほどのJSのコードを参照してみましょう。

 

 

これを、jQueryで書くと、このようになります。

 

 

サンプルはこちら

 

どうですか?JavaScriptで書いたコードと同じ挙動が実現できたとおもいます。
同じ動きにもかかわらず、コードがなんだかスッキリしたような気がしませんか?

 

たとえばJavaScriptでidを取得する場合は
var elm = document.getElementById(‘sample’);
と書く必要がありましたが、対してjQueryでは
var elm = $(‘#sample’);
これだけで十分なのです。

 

つまり、JavaScriptよりも完結に、かつわかりやすくコードを書くことができるスグレモノなのです!

 

とはいえ、jQueryはライブラリに依存するため、スピードや新しい技術に追いつかないという欠点もあります。
しかしながら、特別な理由がない限りjQueryを使用して、まずは「プログラミングの書き方」を学ぶということが大切だとおもいます。
JavaScriptでは冗長となる文も、jQueryでは先のように完結に記すことができ、初心者にもわかりやすい記法となっています。
ネイティブのJavaScirptはその後で改めて学習するのも、私はアリだとおもいます。

 

※jQueryを使用するにはあらかじめjQueryを読み込んでおく必要があります。
https://jquery.com/

  
  

■さいごに 〜下手でもいいから書いてみる!〜

 

いかがだったでしょうか?
これまでHTMLとCSSのみで、JavaScriptはプラグインだけ・・・
というコーダーさんにとって、JSが少しでも身近に感じられたなら嬉しいです。

 

かくいう自分も、まだまだ勉強中で分からないことばかり。
しかし、プログラミングを覚えるうえで大切なのは

 

「下手でもいいから、とりあえず書いてみる!」

 

ということだと思います。

 

初めのうちはコードのキレイ・きたないは関係なく、ただただ「動けばOK」なコードで大丈夫!
ガチのプログラマーさんに「そのコードは汚すぎてマジでナイわ・・・」と言われてもめげないこと!
そして、自分の意図通りに動いたときの「感動」を忘れないこと!
そうして一歩一歩ステップアップしていけば、きっとそう遠くないうちに、ちゃんとしたコードで、大きなものが作れるようになるはずです。

 

では、今年こそミカンを美味しく食べましょう!

 

んちゃ!伍号機です!
11月に入り、今年もいよいよSOYの投票が始まりましたね。
 
SOYって大豆じゃないよ。
ショップ・オブ・ザ・イヤーだよ!
 

約4万ものショップから、ジャンル賞やサービス賞、新人賞などが決まる、
楽天市場の年に一度のイベント。

 

売上や注文件数に加え、「お客様からの投票」も審査の基準になっているため、
SOYを狙っている店舗にとっては、重要な季節と言えます!

 

投票すると、抽選で100,000名に
最大10,000ポイントが当たるチャンスがあるので、
投票する側にとってもメリットがあって美味しい企画ですね。
 

大半の店舗は特に目立った告知などをしていない中、
バナーを作って投票を誘導したり、
中には投票専用のページを作って投票のお願いをする店舗さんも!

 

普段ご愛顧頂いているお客様への感謝の気持ちを伝えたり、
スタッフの顔写真が載っていたり、
投票のコメントを公開していたりと、
ついつい投票しちゃいたくなる魅力的なページがたくさんありました。

 

ということで、今回は伍号機が気になった投票ページをずらずらっとご紹介しちゃいます!!
それでは、レッツゴー!

 

(2017.11.9現在のURLです。公開終了になっている可能性もございますので、ご了承くださいませ)

 
 


soulberry


シンプルながら、丁寧に感謝の気持ちがつづられています。

【PC】
https://www.rakuten.ne.jp/gold/soulberry/event/171101_soy/
【スマホ】
https://www.rakuten.ne.jp/gold/soulberry/smartphone/event/171101_soy/index.html

 
 


e-zakkamania stores


毎度ながら、すごい。(↓見ればわかります)

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/e-zakkamania/feature/2017/17_soy/

 
 


タマチャンショップ


個人的に、いつもお世話になっています。
投票したコメントが公開されていたら、嬉しくなりますよね。
タマチャンショップ
【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/kyunan/shop2017.html

 
 


Hamee


店長さんがいい人そうで、応援したくなります。

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/keitai/html/soy2017.html

 
 


AXES


こちらもうれしいコメント付き。
そしてページがおしゃれ!

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/culture/topic/soy2017/

 
 


Outletshoes


スタッフさんのお顔を見ると、なんだか応援したくなりませんか?

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/outletshoes/event/soy2017.html

 
 


ZIP CLOTHING STORE


投票ページに◯◯◯◯を仕込むとは!

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/zip/feature/soy/

 
 


モダンデコ


カテゴリページを使って、おすすめ商品を一緒に見せちゃうのはいいアイディアですね。
モダンデコ
【PC・スマホ共通】
https://item.rakuten.co.jp/dondon/c/0000000461/

 
 


壁紙屋本舗


店長さんがおもしろい!

【PC・スマホ共通】
https://www.rakuten.ne.jp/gold/kabegamiyahonpo/img/campaign/soy2017/

 
 


澤井珈琲 Beans&Leaf


イラストがかわいいです!
澤井珈琲 Beans&Leaf
【PC・スマホ共通】
https://item.rakuten.co.jp/sawaicoffee-tea/c/0000000808/

 
 
 
 

い か が で し た か ?

どれも力作ぞろいで思わず脱帽です。

 
 

最後に、
「実は、投票コメントってどこで見るかわからないんだけど…」
とう方のために、コメントの確認方法をご紹介!

 


RMS > 【6】コミュニティ > Shop of the Year投票者の声


 
で見ることができますよ〜!

 
普段あまり聞けないお客様の声や応援の言葉を聞くことができると
店舗運営のやりがいにもつながりそうです!
 
今まであまり気にしていなかった方も、
ちょこっとバナーを出してみたりするだけでも投票してもらえるかもしれませんね^^

 
 

それでは、今回はこの辺で。
ばいちゃ〜

 
 

んちゃ!伍号機です!

 

書こう書こうと思いながら、早一ヶ月ほど経ってしまいました。。
全然タイムリーな話題じゃない。。
けど書きます。

 

メルマガ担当者必見!
効果測定レポートが新しくなった件について。

 

大きく変わったことが、
これまではメルマガでリンクを開いたら、そのリンクから直接サイトにアクセスした人の数字しか転換数としてとれなかったのが、
新しくなってからは、メルマガからリンクをクリックして、しばらく放置していたけど後から戻ってきて購入した…という場合でもちゃんと数字をとってくれるようになったというわけです。
ここまではRMSの告知で予告されていた通りです。
(わかりにくい説明ですみません。。)

 

で、実際問題数字がどう変わったか、ということが気になりますよね?
な り ま す よ ね ?

 

幸い、「旧効果測定」の画面も開くことができるので、
新と旧で数字を見比べてみることができちゃいます!

 

↓とあるクライアントさんで比較してみました。
左が旧、右が新の画面です。

それぞれ一番右端の「転換数」が日によって差がありますが、けっこう違ってきているのがわかると思います。
特に、赤枠で囲った辺りとかすごいです。

 

ちなみに、こちらのクライアントさんは夜に使えるクーポンを
昼のメルマガで予告で配布することが多く、
これまでは一度お客様が離脱することで、数字がきちんととれていなかったところが
新効果測定ではきちんと数字がとれるようになったと思われます!

 

ということで、これまでちゃんと数字がとれていなかったところもとれるようになった反面、
数字が正確になった分、「効果測定の数字では全ての数字が取り切れない」という言い訳ができなくなるとも言えます。

 
データが増えたせいか、「旧」の時より数字が出るのがちょっと遅くなったように思われます。
以前は、前日夜に配信した分のデータが、翌朝には見れていましたが、
新しくなってからは、昼以降?くらいまでかかる印象です。

なので、「昨日の転換数0だとー!?」と焦るのはちょっと早いです!
送客数とかも「0」の時は、時間をおいて見ていただければと大丈夫です◎

 

 

旧効果測定レポートに比べて、
原稿に対する反応も、ヒートマップなどで視覚的に見やすくなりましたね!

↑どこがよりクリックされているか一目瞭然!
 
どういった企画が響くか、
どう表現したらいいか、
どういったバナーが好まれるか
 
など研究するのに役立ち立ちそうです◎

 

今後は数字をしっかり分析しながら、より効果の上がるメルマガを書けるように精進しようと思います!

グリーティングがなくなったり、
無料配信枠の定義が変わったり、R-mailまわりはいろいろ改修が多いので今後も目が離せません。
また随時レポートしていこうと思います!

 

ということで、今回はこの辺で。
ばいちゃ〜

 

んちゃ!伍号機です!

 
今日言いたいことは件名の通りなのですが、
その前にちょっとだけ寄り道を。

 

おそらくyahooショッピングの「5の付く日」に対抗してはじめたであろう、
「楽天カードご利用で+5倍」の企画すごすぎませんか・・・?
楽天がんばってますね・・・!

 

楽天カードユーザー、ダイヤモンド会員11ヶ月継続中の伍号機は
もう5の倍数の日にしかお買い物しなくなりそうな予感です。
まだ始まって間もないということでまだあまり一般ユーザーには浸透していないかもしれませんが、
これが定番の企画になってきたらyahoo同様、山を作るきっかけになるかもしれません。

 

ちなみに、今回のお買い物マラソンは
9月30日20:00〜10月5日1:59までということで、
がっつり初日と最終日が5の倍数になってるんですよね。
これを計算してこの日程にしたのかは定かではないですが、
個人的には初日と最終日が跳ねるのではないかと予想しています!

 

なので、メルマガや特集ページを作る際は、ぜひこの企画もアピールしてみてはいかがでしょうか!
さらに超個人的な予想では、9月のスーパーSALEで買いすぎた人は
9月締めの支払いを上乗せするのを避けるべく、
10月5日のラストにどどんと買い込む人も一部いるのではないか・・・なんて見方も考えられます。

↑あくまで個人的見解ではありますが、ダイヤモンド会員の買い方の思考回路はこうなってるのかと
参考になれば。。(なるのか?)

 

さ て !
 

寄り道が長くなりました。
本題に入ります。
みなさん、モバイルメルマガ送っていますか?
 

スーパーSALEやマラソンなどの際に多くの店舗さんがメルマガを書かれていると思いますが、
普段あまりモバイルメルマガ送っていない!という店舗さんは一度ぜひ試してみてほしいな、という気持ちを込めて
伍号機なりのおすすめポイントをまとめてみました。
 


【おすすめ理由1】スマホシェアとともに効果が高まってきている


PCメルマガのほうが見栄えがよくて、かつ「ちゃんとやった」感が出るので、
そっちばっかり注力していたのですが、
最近はスマホの売上の方がどんどん伸びてきているので、
モバイルもやらねば!と、送ってみたら、PCに負けず劣らず転換がありました・・・!
もちろん、お客様の属性やお店の特色にもよりけりだと思いますが、
スマホのシェアが多い店舗さんはぜひ送ってみる価値ありです!
 


【おすすめ理由2】作るのが簡単


モバイルHTMLメルマガはなんてったって
文字数、画像容量の容量制限がガチガチにあるので、
どんなにがんばっても頑張りようがないというか、
その分さらっと作れちゃいます。
 
ちなみに伍号機は、PCメルマガの半分以下の時間でささっと作ります。
(手抜きじゃありません!)
なのにスマホからのアクセスの割合の多い店舗さんだと、
PC用の半分の力で書いたモバイルメルマガの方が、売上がとれちゃったりするので、
とにかくまず一度送ってみて、より効果がある方に力を入れる、とかでもいいかもしれないですね。
 
↓容量など注意点をまとめておきます(HTML版)↓
 
【件名】全角15文字以内
【画像】横幅最大240px、画像容量89.5K以内
【全体】TEXT・HTMLパートの合計サイズが9500バイト

 


【おすすめ理由3】PCメルマガに比べて予約枠が混みにくい


何ってもう予約枠の争奪戦が大変ですよね。。
PCとスマホだと、現状では圧倒的にPCメルマガの方が
あっという間に枠がぱんぱんになってしまっていますが、
意外とモバイルって埋まりにくいんですよね。
PCがもう「☓」で真っ赤になっている時もけっこう余裕があったりします!

 


【おすすめ理由4】即効性が高い


モバイルメールは、ケータイやスマホにダイレクトに届くので、
PCメルマガに比べて、すぐに開いてもらえる可能性が高いので、
送信後すぐの転換が期待できます。

 

「2時間限定!」「今夜23:59まで」など、短期間に絞った件名などは
特に送客数が高い傾向にあるので、
ぜひ件名に工夫して送ってみてください。

 
なんせ全角15文字以内なので、なんとしてもメールを開封してもらえるように、
件名には命を込めましょう!!
 

 

モバイルメルマガと言いながら、HTMLのことばっかり言っちゃいましたが、
もちろんテキストメルマガでも試してみる価値ありだと思います。
 
他社さんのメルマガをいろいろ読んでいますが、
文章が巧みな店舗さんだと画像がないからこそ、続きが気になってクリックしちゃう…ということが
多々ありますので、そこは気合と文章でカバーできるのではないかと!

 

ざっくりした感じになりましたが、今回はこの辺で!
ばいちゃ〜

いよいよ秋の気配!ロケッツ4号機です。
日々、ECのコーダーとして奮闘中の31歳です。

 

前回はお米を買いに行かなければならず若干焦りながらのブログ更新でしたが、今回は大丈夫です。

 

なぜなら、すでにお米を買いに行ったからです。

 

関東は今夜から台風が直撃するとのこと。
だんだん雨風が強くなってきましたが、片手に傘、もう片手に10kgの米を抱えて帰ってきました。

 

ウチのような夫婦2人暮らしの家庭は、米10kgを約ひと月なんですね。とはいえ、先月あたりから朝ご飯をパンから米に変えてからというもの、お米の消費量がぐんと増えた我が家。
これまで白米は基本的に晩御飯だけ食卓に上がるものでしたが、朝も食べることになり単純に倍の計算になります。けれど個人的には、朝はパンよりもご飯のほうが体に合っている気がします。なにより腹持ちが良いのが嬉しいですね。

 

さて、今回は「MakeShop(メイクショップ)」の機能のひとつ「マルチフォーム」の便利な設置方法についてご紹介します。
通常、MakeShopでマルチフォームを作成すると下記のようなページにリンクするように促されます。

 

http://designdemo05.shop14.makeshop.jp/shop/enq201507060
※フォーム専用ページ(MakeShop提供のデモサイト)

 

見てみるとページ内に「フォーム表示」のボタンが設置されていますね。
このボタンをクリックするとポップアップでフォームの入力画面が表示される仕組みになっていますが、よく考えてみるとこのフォーム専用ページ、余計な気がしません?
たとえば「懸賞応募ページ」をMakeShopの機能「独自ページ」で作成したとします。当然そのページには、フォームに遷移するためのボタンを設置しますよね。
デフォルトの状態では、遷移ボタンを押すといちどフォーム専用ページにたどり着くためのURLが発行されるのですが(下記例)

 

http://ショップURL/shop/enquete.html

 

今回は、独自ページに設置したボタンをクリックすると、その場で直接フォームが開くようにしたいと思います。

 

独自ページからアンケートフォームを表示させたい

 
 
 

▼目次

 
 
 

■MakeShop(メイクショップ)について

MakeShop(メイクショップ)
MakeShopとはGMOメイクショップ株式会社が提供する大手ASP(アプリケーションサービスプロバイダー)サービスです。ECに携わる者であれば、MakeShopの名前は絶対に耳にしたことがあるという程。ユーザーは個人運営から大企業まで規模を問わず、本当に多くのネットショップがMakeshopを活用しています。
今回取り上げるのはMakeShopの数ある機能のひとつ「マルチフォーム」です。かいつまんで言えば、簡単にフォームが作成できる便利ツールといったところなのですが、この「マルチフォーム」機能を活用することで、たとえば「顧客アンケート」や「懸賞の応募フォーム」といった様々なフォームをすぐに作成できちゃうのです。コーダーなら経験があると思うのですが、イチから構築するとなるとフォームは案外手間の掛かるもの・・・。「マルチフォーム」はその構築コストを大幅に省くことができるため、とっても便利な機能なのです。

 
 
 

■「マルチフォーム」の作成方法

マルチフォームの作成方法はココを見よ!ここに全てが載っている!

 

1:マルチフォームの設定(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenquete/

 

2:マルチフォーム案内文の設定(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenqueteset/

 

3:マルチフォームの回答確認(MakeShopオンラインマニュアル)

http://ms-manual.makeshop.jp/crmenquetereply/

 

いかがでしたか?とてもわかりやすく掲載されていますね。さすが公式!
では、ご一読いただいたことを前提に、次はいよいよ本題のほうに移りたいと思います。

 
 
 

■独自ページから直接フォームを表示する方法

さて、いよいよ独自ページから直接フォームを表示する方法をご紹介します。
たった2つの手順で完了できるので、とても簡単に設置できますよ。

 

手順1:ボタンを設置したい箇所に以下のhtmlを設置します

※javascript:openEnqueteWindow(‘201709110’)の「201709110」の部分は、フォーム専用ページのURL末尾の数字とイコールです。

 

手順2:以下のformタグとscriptタグを設置します

※formのinputにあるvalueの値はご自身のショップIDに変換してください

 

 

以上で設置が完了しました。スマートフォンも同じソースコードをコピペするだけでOK!
ただし、そのままだと味気のないボタンになってしまいますので、各自CSSでお好みのデザインに調整してくださいね。

 

それでは来月、またお米を買う頃にお会いしましょう。

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • リープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • イーチャンス
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!