通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ヤフーショッピング作成講座 2016 > 実践講座 > スマートフォン用サイトの編集

スマートフォン用サイトの編集

なんということか!ヤフーストアのスマホページ編集の融通のなさ!(泣)ショップサーブのように作り込もうと思ったら設定箇所少なっ!ま、短時間で済むので、ある意味ラクと言えばラクですが・・・制限が多いですが、それなりのスマホページになるよう頑張りましょう!

メニュー

※ネットショプ成功事例無料パンフレット配布中

1.スマホ用看板のポイント

スマホデフォルト

お店の顔!である看板が、デフォルト(初期状態)は上記のようなしょぼーいテキスト文字だけなんですよね。これでは店の名前なんて、あってないようなものです(TT)。一番上のY!だけが目立っているので、ユーザーは「Y!で買い物をしている。」という認識になってしまうので困ります。

「当店に来てるんだよ!」ということをアピールするためにも、立派な看板をつくってドッカ~~ンと載せたいですね。で、ポイントはPCサイトのような情報てんこ盛りの看板ではなく、シンプルに3、4点のアピールにとどめることです。てんこ盛りにしてしまうと、それぞれの文字や画像は小さくなって見えなくなります。逆効果です。

画像サイズは幅640px、高さは任意ですが180~300程度が妥当でしょう。デザインは自由ですが、左半分や上半分にお店のロゴやキャッチ、あまったスペースに販売情報などを載せるのが基本です。下のような感じですね。

スマホ用看板画像

2.トップページ編集から看板画像を追加

「ストアトップ」→「編集」→「スマートフォン用情報」と進みます。「参照」というボタンから、作った看板画像を登録します。必ず「保存してプレビュー」ボタン、そして反映をお忘れなく。これを忘れると、待てど暮らせどスマホページに表示されませんよ~。

トップページへは自動でリンクが貼られるので、看板画像の貼り付けは簡単ですね。作り込みたいのは、その下のフリースペースです。ここ頑張りましょう。

3.トップページ用フリースペース大活用

おそらく、ヤフーストアのスマホページで唯一!自由が利くのはこのスリースペースでしょう。これだけ制限が多いとHTMLが使えるのが嬉しいですね。当店では特設ページのバナーを2,3点貼っています。

ま、ここはお店さんによって自由に編集していいですし、バナーにリンク貼るだけですから操作自体は簡単ですね。一応、テンプレートになりそうなタグサンプルを3つ用意しました。

横幅いっぱいサイズのバナーを3つ配置

スマホページにバナー

<a href="特設ページ"><img src="画像リンク" style="margin-bottom:5px;"></a><br>
<a href="特設ページ"><img src="画像リンク" style="margin-bottom:5px;"></a><br>
<a href="特設ページ"><img src="画像リンク" style="margin-bottom:5px;"></a>


一応CSS(スタイルシート)が使えるので、バナー下には見栄え良くなるように5pxの余白を入れています。


バナーを横に2列、縦3列

スマホページにバナー3

<table border="0">
<tr><td><a href="リンク1"><img src="画像1"></a></td>
<td><a href="リンク2"><img src="画像2"></a></td></tr>
<tr><td><a href="リンク3"><img src="画像3"></a></td>
<td><a href="リンク4"><img src="画像4"></a></td></tr>
<tr><td><a href="リンク5"><img src="画像5"></a></td>
<td><a href="リンク6"><img src="画像6"></a></td></tr>
</table>

タグは何も考えずにコピペして、リンク先URLとバナーなどのリンクURLだけ変更してください。


バナーを横に4列、縦3列

実は、ヤフーショッピングのスマホ画面のフリースペースは、スマホの画面サイズに合わさなくていいんですよね。横長になってしまってもフリックすることでスライドさせることができるんです。これは使わない手はないですよね。20近くあるカテゴリバナーを横にならべて見れるようにしています。

12カテゴリ版

<table border="0">
<tr>
<td><a href="リンク1"><img src="画像1"></a></td>
<td><a href="リンク2"><img src="画像2"></a></td>
<td><a href="リンク3"><img src="画像3"></a></td>
<td><a href="リンク4"><img src="画像4"></a></td>
</tr>
<tr>
<td><a href="リンク5"><img src="画像5"></a></td>
<td><a href="リンク6"><img src="画像6"></a></td>
<td><a href="リンク7"><img src="画像7"></a></td>
<td><a href="リンク8"><img src="画像8"></a></td>
</tr>
<tr>
<td><a href="リンク9"><img src="画像9"></a></td>
<td><a href="リンク10"><img src="画像10"></a></td>
<td><a href="リンク11"><img src="画像11"></a></td>
<td><a href="リンク12"><img src="画像12"></a></td>
</tr>
</table>

このHTMLテンプレートでは余白をゼロにしているので、もし余白が欲しい場合は各画像のIMGタグの中にCSSを書くと良いです。

画像の上に余白:style="margin-top:5px;"
画像の下に余白:style="margin-bottom:5px;"
画像の右に余白:style="margin-right:5px;"
画像の左に余白:style="margin-left:5px;"

HTMLタグのか書き方
<img src="http://~~" style="margin-bottom:5px">
数字は任意ですよ。

ヤフーストア作成構築関係ブログ記事

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

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP