ストアサービスをボタン画像に変更する方法

NO IMAGE

デフォルト(初期状態)で貧相なストアサービスのリンクを無料サービスを使って画像化する方法を解説します。と言っても、といっても簡単ですが。

表示するボタンと大きさを決めよう

幅とボタンの数を決める

まずページの幅とボタンを何個配置するかを決めて、ボタンの大きさを割り出します。

ページ幅は設定画面から自由に変更できます。

今回のお店は幅950pxでボタンの配置は7個です。

950px ÷ 7個 = 135.7px

ですが、ボタンとボタンの間に少しスペースが入るので132pxにしました。

132×7=924です。ボタンが大きすぎると右端のボタンが改行されてレイアウトが崩れるので注意して下さい。

無料ボタンメーカーで3分クッキング

ネット上には便利なサービスがたくさんありますが、今回選んだのは「ボタンメーカー」というウェブサイトです。

ネット上でいろいろなボタン画像を無料で作ることができます。

ボタンメーカーhttp://box.aflat.com/buttonmaker/

今回のボタンの幅は132pxにしました。高さも自由ですがスッキリ28pxとしました。

・背景色:ピンク(カラーコード:#F2B9B9)
・上の文字は黒(コード#000000)
・ボタンの枠:グレー(#DDDDDD)
・フォントの大きさ:21(プライバシーポリシーだけ15)

文字の色「黒」は見やすいですが、ちょっと品がない感じなってしまいました。

上品でおしゃれな雰囲気を出す場合は、ちょっと薄めの色が良いと思います。

これが作ったやつ。7個作りました。フォント(書体)が限られているのは仕方ないですが、

カート見る
お問合わせボタン
メルマガボタン
お買い物ガイド
お問合わせ
プライバシーポリシー

必要な情報を入力して「Create」ボタンを押せばボタンが自動生成されます。

それをパソコン上に保存していきます。

今回はシンプルなボタンにしましたが、角に丸みをつけたり、光沢のあるような加工をしたり、かなり本格的なボタンの作成もできるので、いろいろ挑戦してみてください。

動画を用意しました。

【動画の補足】パソコン上に保存するときは、わかりやすいファイル名にすると良いです。

「toppage.gif」「cartmiru.gif」「otoiawase.gif」「merumaga.gif」などです。

ストアエディタで簡単変更

さて、ボタン画像ができたらストアページの変更です。

「ストアデザイン」→「ヘッダー・看板」と進みます。

ヘッダー・看板

そして、「ボタン画像」のところから「参照」ボタンを押して、先程作ったボタン画像を登録していきます。登録が完了したら「反映管理」から更新しするのをお忘れなく。

ボタン登録箇所

反映が終わるとストアサービスの部分はボタン画像に変わりました。

ま、これだけでは、まだまだお店やってる感がないですから、看板やナビゲーションの画像化、そしてフリースペースなどに情報を追加して、賑わい感を出せるよう頑張りましょう!

完成!

ストアサービスの表示数や表示名の変更

ストアサービスのリンク数は、初期設定で7つになっています。

が、お客さんのサイト内での動きやすさや、必要とされている情報の優先順位を考えると「プライバシーボリシー」はフッター(下)のほうでも良いでしょう。

ストアサービス初期設定

また、会社概要は固い印象なので「お店案内」、ニュースレターは「メルマガ」、「お買い物ガイド」は「お買い物方法」などと言い換えたほうが良いと思います。

というのも、ヤフーショッピングのお客さんは、ネットショッピングにあまり慣れていない人が多いからです。

商品ページは見ることができるのですが、「どうやって買うの!?」なんてレベルの人もたくさんいます。

もちろん、客層にもよりますが、ネットショッピング・ビギナーが多そうなお店の場合は、「そんな説明いる?」くらいのレベルでお買い物ガイドのページを作ると良いです。

電話やファックスも利用すれば、そういったユーザーに買ってもらいやすくなりますよ。

つまり売り上げアップ!

ボタン画像を6個にした場合は、「950÷6=158」なので、ボタン間のスペース分を差し引いて155くらいにすると良いです。

ま、これは算数の問題なので説明するまでもないですが。

ストア作成関連ブログ記事一覧

ヤフーストア作成に関連するブログ記事一覧です。

ヤフーストアのカテゴリをバナー画像に置き換える方法
フリースペースや商品説明はホームページ・ビルダーで効率的に作る
ヤフーストア・トップページ用のテンプレートを作ってみた。
ヤフーショップのヘッダー画像HTMLの編集方法
yahoo! shoppingトップページ用HTMLテンプレート(シンプル版)