文句があるわけじゃないんだ。
でも、これじゃYahoo！ショップへの誤クリックが増えてしまうと思うんだ。
Amazonと楽天に飛ばされるならまだいいんだ。Amazonか楽天のリンクを踏もうとしたお客様がYahoo！に飛ばされるのは大きなリスクなんだ。
そういうわけで、モバイル版のYahoo！の商品リンクを粛清するカスタマイズを行いました。今回も元気にニッチカスタマイズです。
価格表示もできるようになってすごぶる便利なCocoon商品リンク
素晴らしいですね、Cocoonが日々進化する横で毎日老化現象に苛まれております。
さて、Cocoonも正式版リリースがされてからも、怒涛の勢いでアップデートを繰り返しております。
商品リンクに関しても「いつかカスタマイズしないとなぁ」と思っていたのですが、「むしろカスタマイズしなくてもいいんじゃね」というくらいに洗練されたCocoonなので、完全に放置しておりました。
価格は表示すべきかは微妙なところ
とはいえ、「価格表示」あたりから「むむむ」と感じるところもありまして。
いえ、価格表示に関しては、表示したい人はすればいいし、表示したい商品だけを厳選してもいいというCocoonのアップデート方針は神です。ただの神テーマです。
読者としても「価格」が見えることで、興味をひくことができたり、価格を調べるためにリンクを踏む必要がなくなるのでメリットも多いです。
ただ、デメリットはちゃんと把握しておくべきですね。
価格の誤表示はサイトの信頼に大きく関わる
価格の誤表示はかなり致命的だと私は思っております。
まぁ、1日複数回キャッシュ更新していれば、トラブルにつながるような「書いてあるのと値段が違う！」にはならないと思いますし、丁寧に更新時間も書かれていますからね。
心配しすぎかとは思います。
ですが、「Amazonタイムセール」や「楽天スーパーセール」中は価格を表示しないことも大切です。
価格の変更がキャッシュ更新に追いつかないですし、キャッシュは更新するだけ重たくなりますしね。
1.1.7のモバイル表示の変更
Cocoonも1.1.7までアップデートが進みました。
すげぇ速さです。
すごい速さで夏が過ぎたが〜べいべー
というわけで、モバイル版はかなりすっきりとしたデザインになりました。
なりましたが、これはちょっとYahoo！リンクがでかいような気がします。
タブレットサイズだと、ボタンが３つ横並びで「これいいじゃん！」という感じなのですが。
Yahoo！ショッピングの文字が長すぎる
だいたい、無駄にYahoo！ショッピングってネーミングがながいんじゃー
と文句を言っても仕方がないので、おとなしくカスタマイズします。
ようは、Yahoo！ショッピングの長さをなんとかすればいいわけですね。
それでいて、並んでもタップしやすい形、と。
はい、閃きました。
マルですね。
![まるです。-I am Maru- [DVD]](https://m.media-amazon.com/images/I/41wHOaNYynL._SL160_.jpg)
今回のカスタマイズは、あくまでもモバイル版だけです。
一応、画像を貼っておくので、「こんな感じのカスタマイズ」ということだけ知っていただければと思います。
AMPで読まれている方は、一度通常ページにお戻りいただけるとより確認しやすい形になっております。
カスタマイズのコード
はい、今回も２時間ほどかかりましたが、3秒くらいでコピペしちゃってください。
たぶん、いろいろ色変えたり、ボーダー入れたりとまだできるカスタマイズの余白は残したつもりです。
あくまもでアイデアの投げ売り、ということで。
/**** Cocoon物販リンク ****/
/* 普通の商品リンクも影をつける */
.product-item-buttons>*>a {
box-shadow: 0 3px 5px rgba(0,0,0,.33);
border-radius: 4px;
}
/* yahooだけ背景色を変える */
.shoplinkyahoo a {
background: #ea3939;
}
/* モバイルサイズ以上はyahoo文字を1段階小さくする */
@media screen and (min-width: 768px){
.shoplinkyahoo a {
font-size: .8em;
}
}
/* スマホサイズは丸にする */
@media screen and (max-width: 480px){
.product-item-buttons>* {
width: 32%;
}
/* cocoon商品リンクをまるく */
.product-item-buttons>*>a {
width: auto;
position: relative;
border-radius: 50%;
height: 80px;
width: 80px;
padding-top: 30px;
}
/* 背景にアイコンを入れる */
.product-item-buttons>*>a:before {
font-size: 60px;
position: absolute;
opacity: .2;
}
.shoplinkamazon a:before {
content: "\f270";
font-family: "fontawesome";
left: 10%;
}
.shoplinkrakuten a:before {
content: "\f25d";
font-family: "fontawesome";
left: 11px;
}
.shoplinkyahoo a:before {
content: "\f07a";
font-family: "fontawesome";
left: 10%;
}
}カスタマイズのポイント
普通と違う形のボタンはリンク踏まれないから気をつけて
このカスタマイズは、「どれだけボタンらしさを作り出せるか」が大事になってきます。
今は、ちょっと影を入れる程度にとどめていますが、背景色に対してやや濃いめの下線（border-bottom）なんかを入れるとより立体感を出すことができます。
モバイル版なので、スマホユーザーだとホバーでリンクを表現することができないので、「いかに見た目でリンクと分からせるか」が大事です。
あるいは、最近何かと話題のマイクロコピーをボタン下に入れてもいいかもしれません。
マイクロコピーってなんだ？
マイクロコピーは、ユーザーに行動の結果をわかりやすく示したり補足したりするちょっとした文章のことですね（たぶん）。
「アイコンをタップすると各ショップで詳細ページをご覧になれます」みたいな感じでいかがでしょうか。
私は毎回文字を打つのは面倒なので、どこかにafter擬似要素で定型文をいれてしまってもいいかもしれません。
大きさは微調整が必要
私としては、あくまでもスマホユーザーしかターゲットにしていないカスタマイズなので横幅300pxくらいまでしか確認できていません。
もう少し狭い幅で使うと、たぶんショップリンクが重なったりして思うようにいかないかもしれません。
今回は大きさを固定したので、レスポンシブに大きさが変わってくれないので。
背景にFontAwesomeのアイコンをいれてみた
今回のポイントは、アイコンを使ってしまったことですね。
いつかどこかで書いたような気がしますが、アマゾンアソシエイト的には、指定されたAmazon商標ロゴ以外のものを使用することは禁止されています。
ロゴとアイコンの違いはなんなのか、とか、FontAwesomeのは商標ロゴではないんじゃないかとか、いろいろ考えて疑問を投げかけてもアソシエイトは「商標ロゴはだめ」としか答えてくれません。
そのくせ規約違反は突然うにゃむにゃ
今回のように、リンクメインとして使用するのではなく、背景に溶かし込むのがAmazon判定的にどうなのかは微妙です。
あまりにも巨大なkindleサイトであるきんどうさんがリンクボタンにアイコン入れ込んでるくらいだから大丈夫とすべきか。
各々の判断でアイコンを変えて楽しんでください。
コメント