あのお店のあのデザイン流行っているみたいだけど、どうやるの？にお答えします

スマートフォン利用者の増加によりスマホからのご注文が増えてます。

業界によっては注文のほとんどがスマホだとか。すごい勢いですね。

でも、依然としてPCからのご注文やアクセスも多いと聞きます。なぜでしょうか・・・

常時携帯しているスマホはパパッと注文できるというのが利点です。

しかし、大画面化したとはいえ画面が小さくて情報量が少なかったり、手軽さゆえのデメリットもあります。

ネット通販に関する消費者実態調査2013では、PC利用者が７６％を超えて圧倒的に多いという調査（ジャドマ通販研究所 調べ）もあります。

そこで、

PCからのアクセスがあった時に目につくデザインテクニック

 

Chapter 1. 画面余白を活用した縦帯アピール

一つ目は、縦帯アピールです。

きものセレクトショップ kirakukai さま

昨今のPCは１６：９の横長画面が主流になってますが、これは多くの場合画面の両端にスペースが残ります。

そのスペースを広告あるいはお知らせのスペースにしてしまおうというデザインです。多くのお店さんが採用するスタンダードなデザインです。

上のようにセールの告知を目につく配色で行って、訪問者の期待を刺激します。

ソースは以下

ソースを記述する場所ですが、ヘッダーフッターレフトナビに記述するもよし、商品説明、共通説明文（大）に記述するもよしです。

いずれの場合も二通りの記述方法があります。

一つ目は直接記述する方法。

例えばヘッダーフッターレフトナビのヘッダー部分に直接記述する場合、次のソースをコピペします。

二つ目はスタイルシートを外部リンクとして読み込む方法です。

同様にヘッダー部分に記述する場合は、次のソースをコピペします。

保存先は楽天GOLD内に管理しやすいように「style」などのフォルダを作成して、そこに保存するとよいかと思います。

外部ファイルとしておく方が後々編集しやすいので、こちらの方が望ましいでしょう。

 

Chapter 2. 画面余白を使ったピコピコ動くキャンペーンバナー

画面右にピコッと顔を出しているこれです→。（あなたがご覧になっているモニターの右端です）

マウスを合わせるとピコッと顔を出してきます。（スマホでご覧になっている場合はごめんなさいかもしれません）

ソースは以下

これと、スタイルシート

細かい説明は省きますが、18行目で表示させたい画像を右側へ66px押しやって、25行目 マウスを乗せると元に戻る、といった内容です。

ピコピコして面白いですね。

一つ目のソースをヘッダーフッターレフトナビ、共通説明文（大）、商品説明文等に記述して、スタイルシートは外部リンクさせます。

なお、widthやheightは画像サイズに合わせて記述しなおしてください。

表示させたい場所についてはtop（上から）、bottom（下から）、right（右から）、left（左から）等のように変えることができます。

ピコピコバナーを複数表示させたいときは、下記の様にすると可能です。

 

Chapter 3. 工夫次第でいろいろ可能

ヘッダーフッターレフトナビや共通説明文（大）はテンプレートを数種類作成可能です。

商品によって、あるいはカテゴリによって表示を変えたい場合、それぞれに紐づけされたテンプレートを変えることによって、この商品はピコピコバナーAタイプ、この商品はBタイプなどケースバイケースで見せ方を変えることができます。

お試しください。

 

商品説明文へのソース追加を自動で一括入力してくれるツールもオススメ。

問い合わせフォームから不明点を問い合わせる