楽天 カテゴリページ デザイン。 楽天RMSの裏技・TIPSまとめ

簡単ディテールアップ!CSSで楽天カテゴリページをデザインする方法。|ビリオンプランのスタッフブログ

楽天 カテゴリページ デザイン

こんにちは。 ディレクターのあかねです。 春は新しいモノが欲しくなります。 ネットショッピングをしているとあれも…これも…とついつい買いすぎてしまいますね。 また、デザインがステキなサイトは商品も魅力的に見えるのでついついポチッと… ステキなサイトはきっと売れてるんだろうなーと思って、デザインのステキなECサイトをまとめました。 楽天サイトも5サイト紹介しているので参考にしてください。 ECサイトを作るときに参考にしたいサイト10選 Sophie et Chocolat ソフィー エ ショコラ 女の子が好きなメルヘンチックなサイトです。 下層ページもかわいいのでぜひ。 OTOE Brand OFFICIAL ONLINE STORE — 音と絵ブランド オフィシャルオンラインストア — Tシャツのポップ感と合うデザインでかっこいい。 MADFOOT! オフィシャルサイト 靴のカテゴリーの見せ方とフッターの歩いている靴がステキ。

次の

コピペOK!RMSスマホ カテゴリをカードデザイン風にカスタマイズ

楽天 カテゴリページ デザイン

商品画像(最大20枚) スマートフォン用商品説明文があれば、問題ないと思いがちですが、ユーザーは商品画像のフリックで商品を確認する場合が多いと言われています。 なるべく多くの画像を登録しておきましょう。 オリジナル看板画像の登録 ショップの顔となります。 ショップのイメージを表現した画像にしましょう。 [ロゴ・店舗名]だけでなく、下記の情報を入れるのも良いかと思います。 ・ショップキャッチコピー ・0,000円以上で送料無料などの特典 ・店舗電話番号 ・支払方法が分かるアイコン等 4. [参考記事] 5. 小バナー(共通バナー) バナーのサイズが小さいので、カテゴリーバナー・イベントバナー・商品のバナーに適しています。 [参考記事] 6. 目玉商品 商品の表示の入れ替えが簡単に行えるので、新着・イチ押し商品の表示や、説明文・大バナー・小バナーで紹介できなかった商品を表示したり、様々な用途で利用できます。 中級編 中級編は、頑張れば他の店舗と差をつける事が可能です。 ぜひトライしてみましょう。 商品詳細・カテゴリページに看板画像(店舗ロゴ)を挿入する ユーザーの流入が多いといわれるカテゴリページ・商品詳細ページにロゴを設置して、ショップのアピールを行いましょう。 [参考記事] 2. カテゴリ(商品一覧)ページを工夫して回遊率アップ 1. 下位カテゴリを強制表示&表示カテゴリをコンパクト化 カテゴリを絞り込むボタンが見逃しやすく、タップしないと下位カテゴリが表示されないので、下位カテゴリを見やすく改善します。 [参考記事] 3. イベントの際には、フローティングバナーを使用する ページの下部や右側に、文言や画像を固定して「常に」表示させておく事が出来ます。 [共通説明文]や[大バナー]などで、イベントの告知バナーを設置する事は出来ますが、どうしても商品ページの下部の表示になりますので、様々な店舗へ回遊を行う楽天ユーザーの場合、気づかず離脱する可能性も高いかと思います。 どんなにお買い得なセールを行いバナーを設置していても、ユーザーに気づいて貰えなければ、意味のないものになってしまいます。 そんな事がないようフローティングバナーを設置しましょう。 [参考記事] 4. 大バナー・小バナー・目玉商品にタイトルバーを設置 cssの疑似要素「:before」「:after」を利用して、裏ワザ的にタイトルバーを表示させています。 [参考記事] 5. 買い物カゴ上部に関連商品のバナーを設置 を設置して、一元管理出来るようにするとなお良しです。 上級編 1. 固定ヘッダーを作成する 全カテゴリーを回遊出来る、ドロワーメニューを作成するとなお良しです。 共通説明文にiframeを設置し、文字数制限を回避して表示する 特に商品詳細ページ、カテゴリ(商品一覧)ページは、楽天goldに予め作成したページをiframeを使って表示させると厳しい文字数制限を回避し、多くのバナーを表示できます。 商品ページをスマートフォン用にデザインする ユーザーの売上がスマートフォンに突出している場合や、主力商品がある場合は、大変ですが行うと効果があるかと思います。 トップページをGOLDで作成する トップページをGOLDで作成するメリットは、やはり商品やバナーを多く表示させることです。 楽天のトップだと自店舗の商品を満足して紹介出来ない場合は行いましょう。 特集ページ・カテゴリページをGOLDで作成する 最近はレスポンシブデザインでPCとスマートフォンの両方を対応している店舗も多いです。 重要なページがある場合などは作成するとよいかと思います。 まとめ いかがでしたでしょうか? スマートフォンは以前はPCのおまけのような形で制作を行っていましたが、 今やPCと同様、PC以上に制作を行わなければいけません。 このページの内容ではなく、【楽天市場 スマホテクニック 簡単コピペだけでOK!カテゴリページ(商品一覧ページ)を改善!】に関する質問なのですが(そのページにはコメント欄が無かったもので、コチラですみません。 )、改善策の【ウィンドウショッピング形式(3段組 or 2段組 レイアウト)に変更】を試し、複数人でスマホで当該ページを確認してみたところ、正しく表示される者と崩れてしまう者がおりました。 崩れた者の使用端末は皆iphoneだったのでiosがダメかと思いきや、正しく表示された者にもiphoneがおりましたので、困惑しております。 キャッシュをクリアさせて再起動させても改善しませんでした。 原因が分かりません。 何か思い当たることはございますでしょうか?.

次の

楽天専門のデザイン制作 リューキデザイン|東京・大阪・福岡

楽天 カテゴリページ デザイン

楽天RMSで禁止されたHTMLコードを使う裏技 スマホでiframeやdivを使えます。 コピペでOK! 楽天RMSでスマホ追従バナーを設定する方法 検索から商品ページに来たお客様に、キャンペーンやクーポンへ飛んでもらいたい時にオススメ。 結構踏まれるので、 貼るだけでアクセス全然変わります。 多忙な楽天店長に見てほしい!サムネイルのおすすめデザインと登録方法のTIPS キャンペーン用のサムネイル画像と通常検索用のサムネイル画像を、パパっと変更するのに役立ちます。 楽天RMSのPC版で、スクロールで追従するサイドバナーを貼る方法 賑やかしのためのサイドバナーについて。 高さを20000pxとかにしたせいで、 スクロールして下のほうに行くと余白がメッチャ余ってる・・・みたいな店舗さんがいますが、そういう方に。 そういう細かいクオリティ、お客様は見てますよ。 楽天RMSでPC・スマホ共通の固定グローバルメニューを設置して回遊性アップ! PC・スマホ共用でグローバルメニューを作れます。 スクロールしても最上部に固定でついてくるので、30000pxとかのなが〜い商品ページでもお客様を迷子にさせません。 なにより 回遊率が段違いに上がります!特にスマホは。 楽天商品ページでも使える、マウスオーバーでふわっとへこむリッチUIなボタンの作り方。 ふわっとへこむボタンを、ど〜うしても楽天商品ページ内で表示させたくて頑張りました。 自己満に近いですが。。。 楽天で使えないタグは、GOLD内にアップしてiframeで、が基本です。 「この3つ施策をやれば、どの店舗でも定期購入が絶対に増えるか」と聞かれたら微妙なところですが、やらないよりはやったほうが効果はあります。 特に社内にデザイナーがいない店舗さんは、こういった部分までカバーできないのではないかと思います。 そういったお店の参考になれば幸いです。

次の