タグ別アーカイブ: スマホ用

ネットショップ用の注意喚起バナー作製の基本

こんにちは。nekonomoridesignのyoshyです。
ネットショップ用にバナーの作製などを日常的にやっている私なのですが、もうかれこれ5年以上そういう仕事をしていると、ちょっとお客様に注意喚起したい事があれば、フォトショップなどですぐにバナーを作ってその日のうちに貼り付けて・・・というのをやっているのですが、その画像はいたってシンプルに仕上げるようにしています。

残りわずか!などの短期間にしか出さないバナーに時間はかけない。
目立つ文字・配色・バランスでさっと手早く作る。

たとえば、今日、在庫が残り少ないと連絡があった商品のページには、「残りわずかです!」とお客様に注意を促すバナーを目立つように配置しました。
文字だけではやはり「視認性」(目に付く)のが少なく、見た人の印象に残らないので、

  • 印象に残りやすい配色(おおむね3色以内)
  • 印象に残る色
  • 印象に残るカラーバランス
  • 文字配置

を意識してつくりました。

※作ったバナーがこちら↓

目立つバナー
目立つバナー

赤を基準に白と黄色と黒で色数少なく、印象に残って欲しい文字を特に強調した文字デザインにした、極めてシンプルで極めて簡単なバナーを10分ほどで仕上げて即アップしました。

パソコン用だけではなく、スマートフォン用にもきちんと配置しよう

今回、私の管理しているのがヤフーショッピングだけだったのですが、ヤフーショッピングの該当の商品ページには、スマホ用の編集ページがあるので、スマホ用の編集にも、もちろんこのバナーを付けました。

いまや、スマートフォン用のページの編集もきちんとする時代

スマホ用のアプリが出ているほど、ネットショッピングはパソコンとスマートフォンで利用している人は増えています。
ですので、こういった注意喚起のバナーなども、スマホ用にもきちんと設定するのが望ましいと思います。

たかがバナー、されどバナー。

バナー1つで、お客様に伝わるメッセージは大きく変わります。
それぞれ、そのバナーの持つ役割に応じたものをすぐに用意できるかが、時間の流れの速いネットショップで成功していく鍵だと思います。

それでは、今日はこのあたりで!

スマホ用のページ作製はたとえ楽天市場やヤフーショッピングなどのモールであっても、画像のサイズ設定やタグをきちんとスマホ用にした方が良い

こんにちは。nekonomoridesignのyoshyです。
最近、ヤフーショッピングのサイトを作っていたのですが、その作業中、気づいた事がありました。

商品説明文(PC用)のところに、商品説明を画像で作ったものをIMGタグで配置したり、TABLEタグで左に画像、右側に文章を書くという感じの物をつくっていたのですが、それを気にせずにスマホ用の説明文(フリースペース)に貼り付けて商品ページをつくっていました。

スマホで見て見ると、画像が凄く小さかったり文字が凄く凝縮されていて見づらかった

スマートフォンは縦にスクロールするので、画像の右隣に配置した文字とかがぐちゃぐちゃっと寄せられてしまっていました。
さらに、画像の表示大きさ指定をしていなかったので、画像サイズが凄く大きいもの(600pxや800px等)のものはスマホの画面からはみ出していたり、テーブルタグも表示崩れのようになっていたのです。

スマホ用のIMGタグには、画像の大きさを、WIDTHで画像表示サイズを指定しよう

スマホ用の説明文のところにIMGタグを使用して画像を配置する場合は、WIDTH=100%で画像の表示サイズを100%に指定する方が良いと思います。

そうすれば、iphoneやAndroid等さまざまな機種のスマホがあってもそのスマホの表示サイズに合わせて%で比率を変えて表示してくれます。

個人的には100%だといっぱいっぱいでスペースが無いので、95%くらいにしています。

TABLEタグで2列配置にしている説明文は、上下2段での説明文にしよう

どういうことかと言いますと、簡単に言うと下記の図のような感じ。

↓これはパソコン用のタグ。

スマホ用タグとPC用タグの違い
スマホ用タグとPC用タグの違い

 

 

↓こっちがスマホ用。

1002-2

スマホの場合、縦スクロールで見る事を前提にして文字や画像の配置をした方が良いということです。
ですので、TABLEタグで、PCの時に左に画像、右に文字を売っている場合は、スマホ用は、上に画像、下に文字と言うふうに並び替えが必要だと言うことです。

CSSが使えない出店方法をしている店舗は、必ずタグの打ち変えが必要

CSS(スタイルシート)が使える環境での契約で出店している店舗の場合は、DIVタグで画像や文字のブロックを設定しておくだけで、FLOAT設定で右にしたり左にしたり上にしたりで変えられるので楽ですが、TABLEぐらいしか使えない又は昔にTABLEで組んでいたと言うところは、打ち変えしたほうがよいと思います。

今は、スマホからの購入も多いネットショッピング

いまや、各モール専用のアプリが出ているくらい、スマホ経由での購入も多いネットショップです。ですので、スマホ用のページも意識していく事も重要になってきます。

スマホ用ページをいじってない、、という店舗さんは一度見直しを検討されてみてはいかがでしょうか?

スマホでの自分の店舗の見栄えをチェックするのも良いですよ!

それでは、今日はこのあたりで失礼します。

スマホ用サイトの作製などの依頼やタグの打ち変え作業など細かい作業も請け負いますのでご相談されたい方はフォームからのご連絡お待ちしております♪