タグ別アーカイブ: 画像

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

こんにちは。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で組んでいたと言うところは、打ち変えしたほうがよいと思います。

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

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

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

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

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

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

LINEスタンプをつくっています。早く完成させて販売にこぎつけたい!ラインスタンプを自作

こんにちは。nekonomoridesignのyoshyです。実は、

今コツコツと自分の書いたキャラクターのLINEスタンプをつくっています。無料でクリエイター登録は可能なので、何事もやってみよう!

とおもって、コツコツといま作っています。

LINE クリエイターズマーケット

前から、ずっと作りたいと思っていたのですが、思っているだけではダメだ!と思って、ノートに手書きした自作のイラストをパソコンに取り込んで着々とラインスタンプをつくっています。

LINEスタンプは

  • メイン画像
    必要数:1個
    フォーマット(保存形式):PNG
    画像保存サイズ:W240 x H240 px
  • スタンプ画像
    必要数:40個
    フォーマット(保存形式):PNG
    画像保存サイズ:w80~370 x H80~320 px
    ※サイズはスタンプ1個のサイズ
    ※自動縮小のため、縮小率は偶数のサイズで
  • トークルームタブ画像
    必要数:1個
    フォーマット(保存形式):PNG
    画像保存サイズ:w96 x H74px

と言う設定で作らなくてはいけません。
PNGで保存というのがアレですね。
透過設定で保存しないと、背景の白とかが出たままのスタンプになりそうです。。このあたりは少しデジタルデータの事を理解していないと厳しいものがありそうです。

過去に、画像の保存形式についてご説明している記事があります
参考までに良ければ読んでみてください。

PNG8? PNG24?
知っているようで知らなかった透過PNG形式ファイルについて

下書きの時は凄くイイカンジだと思っていたのですが、なぜか色を塗っていくと何だかなー・・・というかんじになって、ちょっとショックを受けていますが、男女関係なく使ってもらいやすいようにということであまりかわいくない感じでキャラを描いています(´_ゝ`)

完成したらお知らせします♪

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

出店方法に合わせた商品画像の作り方 楽天市場・ヤフーショッピング・ポンパレモールの場合 【ネットショップ運営ノウハウ】

こんにちは。nekonomoridesignのyoshyです。
今日は昨日の続きで、ネットショップにとって不可欠な「商品画像」の作り方についてお話したいと思います。

モールに合わせた商品画像を作る事を私は推奨しています。昨日は、Amazonの作り方を具体的に説明いたしましたが、今日は、ショッピングモール感が強い、楽天市場・ポンパレモール・ヤフーショッピング用の商品画像の作り方を具体的に画像を見ていただきたいと思います。

(関連記事)

楽天市場・ヤフーショッピング・ポンパレモールに出すなら、背景画像は魅力的に作るべし!ライバルに差を付けて
「わかりやすく」「見やすく」「買いたくなる」画像を作ろう

楽天市場・ヤフーショッピング・ポンパレモールの場合、商品検索をすると、該当する商品があるだけ全部店舗ごとに並びます。
アマゾンさんのように、商品ごとにまとめられたりはしません。

商品名に入っているキーワードを元にすべて表示されます。
ですので、たとえば、私が今使っている

nanocareの卵型イオン発生器

を検索してみても、取り扱っている店舗の数だけずらーりと並びます。

価格も重視だが、商品を具体的に見てみたいと思わせる画像作りは大事

楽天市場やヤフーショッピングで買い物をする人の仲には、「何気なく」ウィンドウショッピングを楽しむ感覚で商品を探している人も居ます。
そういった人にアクセスしていただき、購入へ導く事が、ネットショップの売り上げを上げて良くコツになります。

 

ですので、楽天市場・ヤフーショッピング・ポンパレモールさんに出すときの商品画像は「魅力的」かつ「何かがわかる」という画像つくりをする

では、具体的にはどう作れば良いのでしょうか?
たとえばで作ってみました。

まずは、Amazon用の画像だとこんな感じです。

商品画像の作り方Amazon編。アマゾンの商品画像メイン画像は背景は白で。
商品画像の作り方Amazon編。アマゾンの商品画像メイン画像は背景は白で。

楽天市場・ヤフーショッピング・ポンパレモール用だと、こんな感じにぐらいは工夫したほうが良いと思います。

商品画像の作り方楽天市場・ヤフーショッピング・ポンパレモール編。
商品画像の作り方楽天市場・ヤフーショッピング・ポンパレモール編。

 

どちらも同じ画像のみ使用し、(サーキュレーターのみです)あとは、装飾しているだけです。

こういった工夫をするだけでも、一覧で見たときに見栄えが違いますね。

楽天市場やヤフーショッピング、ポンパレモールを利用する客層としては、「なるべく安く」「お買い得」に買いたい。出来れば商品の事も良く知ってから買いたいという方が多くいらっしゃる、主婦層を中心とした一般的な方が多いので、広告めいた画像作りが効果的です。

Amazonはどちらかというと決めうち(これを買う)と決めて値段を探しにくる男性的なお買い物が多い傾向

今までの経験上、Amazonでお買い物をする層としては、男性的といいますか、「これを買う」と決めて探して購入される傾向が多いように感じます。

ついで買いもあまり見られないのは、Amazon発送の商品がほとんど送料無料対象な事もアリ、必要なときに買えば良いという方が覆いからのように感じます。

楽天市場・ヤフーショッピング・ポンパレモールは、女性を意識した商品画像作成が効果的

面倒な作業になりますが、Amazon用はAmazon用、そのほかのモールはそのほかのモール用の画像作成を推奨します。
こういった面倒な事をやっているかやって居ないかで、お客様の流れを引き寄せるか引き寄せないかが変わってくると思います。

Amazon用は画像をくりぬくだけで良いので、そういった簡単な作業は外注に依頼するなど、人手間をかけて、店舗の売り上げを上げる事にどんどん力を入れていって欲しいなと思います。

nekonomoridesignでは画像のくり貫き作業も格安で承ります。

作業時間・納期・作業内容・商品によってお見積もりを個別におだししますので、頼んでみたいというかたは、お見積もりだけでも是非お待ちしております。

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

関連記事

 

Facebookのトップカバー画像(カバー写真)とプロフィール画像(プロフィール写真)の大きさ・サイズについて

こんにちは。nekonomoridesignのyoshyです。
そろそろ、このnekonomoridesign用にFacebookページを開設したいなぁと思っていて、それに伴い、Facebookについて色々調べてみました。

個人ではすでにFacebook暦は2年を超えるのですが、あまり深く使い込んでいたわけではなかったので、この際ちゃんと調べてみようと思いました。

トップカバー画像(カバー写真)の大きさを調べてみました。

オリジナル画像を作るにあたり、大きさが判らないと作成が難しいので、調べてみました。

大きさは

  • パソコン・・・幅851ピクセルx高さ315ピクセル
  • スマートフォン・・・幅640ピクセルx高さ360ピクセル

と言うことでした。

ですので、パソコンで閲覧される事を想定して、851 x 315pxの大きさが必要と言うことになりました。

プロフィール画像(プロフィール写真)の大きさもついでに調べてみた

  • コンピュータ・・・160×160ピクセル、
  • スマートフォン・・・140×140ピクセル、
  • ほとんどのフィーチャーフォン・・・50×50ピクセル

と言う事で、正方形にトリミング(切り抜き)されるので、正方形で画像を作ったほうが良いですね。

カバー画像(カバー写真)の読み込み速度を早くする大きさ・設定がある
幅851ピクセル、高さ315ピクセル、100キロバイト未満のsRGB JPGファイルだと読み込み速度が速い

読み込み速度は、いくらインターネット回線が普及したこの時代でも結構重要です。ストレスなくアクセスしていただくためにも、この最適化の設定でなるべく画像は作りたいなと思います。

カバー画像は、ホームページで言う「看板」みたいなものです。

基本的にタイムラインしかチェックされないことも多いFacebookですが、自分のページにアクセスしてもらったときに印象を与えるカバー画像はとても大事だと思います。

ビジネスでSNSマーケティングの一環でFacebookページを開設している場合は特にカバー画像・プロフィール画像を重要視するべき理由

先ほども申し上げたとおり、カバー画像は、そのFacebookページの「顔」と言うべきものです。どんな事をしているのかが人目でわかってもらえるような、印象付ける画像を設置する事がより効果的に人をひきつける要素になると考えて居ます。

プロフィール画像も、プロフィールと言うことにこだわりすぎず、フォロワーのニュースフィードなどに一覧などに表示されるアイコン的なものですので、そのあたりを意識した画像を作る事が良いと思います。

nekonomoridesignのyoshyがあなたのFacebookページのカバー画像、プロフィール画像作成のお手伝いをさせていただきます。

デザイン関連のお仕事をして10年以上のキャリアがあります。

画像を作ることはもっとも得意としている事でございます。
個人デザイナーでございますが、その分、お客様の細かいニーズやご希望のイメージを元に、じっくり・丁寧に作成させていただきますので、Facebookページの画像を変えてみたいと思われた方は是非一度お問い合わせください。お問い合わせは無料です!

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

ネットショッピング運営ノウハウ 魅力的な商品画像の作り方

こんにちは。nekonomoridesignのyoshyです。
ネットショップにとって、商品を買っていただくために一番大事なことは、私は、

商品画像の作り方

が大事だと考えています。

検索された時に一覧でズラっと出るサムネイル表示される画像は最も気合をいれる

検索結果一覧で表示される画像となるのが商品メイン画像ですね。買い物カゴのすぐ隣にある一番大事な画像です。
検索結果一覧で出てきた時に、目を引いてもらえるようなものでなければ、どんなに良い商品を売っていても、見てもらうことは出来ません。
ただし、その画像の作り方も、出店しているモールや商品によってちょっとした工夫が必要になります。

  • ごちゃごちゃしすぎない

    これは、一覧で見たときの画像の大きさによるものです。一覧でずらっと並んだ画像のとき、商品写真よりも文字が多い・・商品がちっちゃすぎて判らない、というのでは本末転倒です。

  • 白い背景に商品だけどーんと載せても見てもらえるものもある

    家電や本など、「目的」をもって探しにこられる商材をお取り扱いの場合は、白い背景などでも十分です。
    しいて言うなら、タイトルとかお勧めの一言くらいはあっても良いかも?しれません。
    アマゾンさんが良い例ですね。アマゾンなどは、白い背景で、商品だけ単独でどーんと乗っていても、目的買いで探す事が多いのと、アマゾン産の場合は同じ商品コードの商品の場合は、価格最安値のものに自動的に紐付けされて画像は上位の1個のだけが一覧で出てくるので、あえて目を引かせる必要はないのです。

  • 囲いを付けすぎるとダサくなる。

    枠線を付ける人も居ますが、むやみやたらと全部の画像に枠を付けると、やぼったい感じになりがちです。真っ白で味気ないので囲いだけでも・・・とやってしまいがちですが、色あいや太さなどには注意が必要です。

競合他社の多い商材や、楽天市場やヤフーショッピングなど、モール出店をして居る場合は特に、画像を目立たせる事が必要です。

目立つだけではなく、商品を見たくなるように魅力的に商品を魅せる。

同じ商材を取り扱っていて、メーカーから写真を入手して掲載して居るお店も多いと思いますが、自分の店舗で独自になるべく商品の写真は撮影するほうが良いと思います。

先ほども申し上げたように、カメラ・家電、本など、あらかじめもう何かがわかっていて、おそらく商品番号などでしか検索されないような商材を取り扱う場合を除き、できれば撮影したほうが良いですし、そういった型番商材を取り扱う場合でも、他社との差別化を図るために、自社でオリジナルの視点で撮影した商品画像を掲載しているほうがクリック率は上がると思います

ネットショップは手間隙をかけた分だけ売り上げが上がってくる次代に突入している

今までは、出せば売れる時代でしたが、これだけ飽和状態になってくると、いよいよ「差別化」が必要になってきます。SEO対策も大事ですが、SEO対策が出来たら今度は、クリックされる率を上げましょう。

そのためには、効果的な画像作成が必要になってきます。

これからは、魅せる商品ページを作る時代です。

是非、店舗の売り上げに行き詰っている店舗経営者さんは、自社ショップの商品ページの見直しをしてみてくださいね。

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