オンライン説明会開催中!

携帯ネットショップ運営ガイド TOP > ショップにサムネイル表示を設定する

ショップにサムネイル表示を設定する

2009 年 2 月 26 日   カテゴリー: aiship

こんにちは、テクノロジー(開発)担当です。
別記事の「商品一覧は画像を使ったサムネイル表示で商品の魅力をアピール!」でも紹介されていた
商品一覧のサムネイル表示ですが、
aishipでは標準で提供している機能なので今回はaishipをつかった携帯サイトで
サムネイル表示を簡単に設定する方法を説明したいと思います。

登録した商品に画像を設定しよう

ではまず最初に、サムネイル表示にする為の画像が必ず必要になりますので、
商品の新規登録時、または既に登録されている商品に表示させる画像を設定しましょう。
aishipでの画像の設定画面は下記のようになっています。

aishipの管理画面では
メニュー:【商品管理】⇒【商品登録】または【登録商品詳細の編集】
で、商品画像の登録が出来ます。

①表示させる画像をアップロード
参照ボタンを押下して登録させたい画像を選択します。
ここで選択された画像がショップに表示されますので、
登録する画像のサイズと容量には気をつけましょう。
画像容量が500KB以内で収められれば特に問題無いと思います。

②携帯ショップ用にチェックを入れる
携帯ショップで商品画像を表示させるには必ずこのチェックが必要になります。

aishipでは一つの商品に10枚まで画像を設定する事が可能です。
1~10枚登録できる内の、一番上に登録された画像が
サムネイルに使われる画像になります。

目的のコンテンツをページに設置

商品に画像の登録が完了しましたら
サムネイル表示をするコンテンツを携帯ページに設置していきます。

aishipでは簡単に携帯サイトが作成できるツールが用意されています。
aiship管理画面の
メニュー:【サイト管理】⇒【携帯サイト管理】⇒【携帯サイト作成/管理】
に移動されますと、別ウインドウが開いて携帯ページの編集が行えます。

下記が携帯ページへのコンテンツ設置方法です。

①設置したいページを選択する
「ページ構成」というウインドウには
携帯サイトで表示されるページがツリービュー形式でリスト化されています。
コンテンツを設置したいページを選択して下さい。
上記の画像ではTOPページを例にあげています。

②機能カードから目的のコンテンツを選ぶ
画面内にある機能カードウインドウに、携帯サイトで利用できる各コンテンツメニューが
機能カードというカードにまとめられて表示されています。
サムネイル表示が利用できるのは
・商品検索窓
・カテゴリ
・What’sNew
・ランキング
・オススメ
の、5つです。

③表示させたいページに設置する
設置したい機能カードをダブルクリック、またはドラッグ&ドロップで
「ページ作成」ウインドウへ引っ張っていくと機能カードが設置されます。

④設置が完了したら保存ボタンを押して保存する
「ページ作成」ウインドウ内にある
フロッピーディスクようなアイコンを押下して下さい。
「保存に成功しました」
というメッセージが表示されれば保存完了です。

サムネイル設定をする

サムネイル表示が利用できるコンテンツは下記の5つです。

aishipの管理画面では
メニュー:【サイト管理】⇒【コンテンツ編集】
・What’s New
・ランキング
・おすすめ商品
・商品カテゴリ
メニュー:【サイト管理】⇒【商品ページ】
・商品一覧(携帯)
にあります。

先ほど設置した機能カードでの表示設定をここで行います。

それでは例として、
「商品一覧(携帯)」でのサムネイルモードの設定方法を説明します。

上記がサムネイル表示の為の最低限必要な設定となっています。

①サムネイルモードに変更
aishipの初期設定では
「ベーシックモード」という画像が表示されない設定になっていますので、
「サムネイルモード」に切り替えます。

②サムネイル画像の表示サイズを指定
サムネイル表示される画像のサイズ指定です。
縦幅、横幅の両方を設定すると
画像の縦横比に関係なく設定されたサイズで表示されます。
また、片方しか設定しなかった場合、
設定した方のサイズを基準に元の縦横比を保ったままそのサイズで表示されます。

その他の項目を簡単に説明します。
■商品文字色
一覧表示された時の商品名の文字色を設定します。
16進数またはコードカラーの選択画面で色を設定してください。
■価格表示をする
商品価格の表示有無の設定です。
■価格文字色
商品価格が表示された時の文字色の設定です。
16進数またはコードカラーの選択画面で色を設定してください。
■商品検索結果の表示順設定
検索された際に表示された商品一覧の表示順を設定します。
●セレクトボックス
・商品番号順
商品を登録した際に設定した、「ショップ商品番号」を基準に表示順を決定します。
・登録日順
商品を登録した順に表示順を決定します。
●ラジオボックス
・昇順
セレクトボックスで設定された並び順の、小さいものから大きいものを順に表示されます。
・降順
セレクトボックスで設定された並び順の、大きいものから小さいものを順に表示されます。
■サムネイルモード時の区切り線
一覧が表示された際に、商品ごとに線で区切っていくかの設定になります。
「表示する」チェックを入れると線が表示されます。
線の色の設定は16進数またはコードカラーの選択画面で設定してください。

一覧表示を見比べてみる

ここまでの設定でサムネイル表示の設定は完了です。
作成した携帯ショップを表示して確認しましょう。

下記は「ベーシックモード」と「サムネイルモード」を見比べた例になります。

■商品検索結果

■カテゴリー

■What’sNew

今日のまとめ

サムネイル表示を設定する事により
商品画像の一覧が見れてエンドユーザが商品をイメージしやすくなります。

そしてショップに訪れたエンドユーザーにとって
テキストで表示された商品名を一つ一つクリックして商品画像を確認するよりも、
サムネイルで商品の画像が表示されている方が確認する手間も省け、ストレスも少なくなります。

サムネイル表示を活用すればコンバージョンにも繋がってきますので、
上手に活用して印象の良いショップを作成して下さい。

タグ: ,