【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

18Sep2011

ネットショップ設計のトレンド

売れるネットショップ開業・運営 eコマース担当者・店長が身につけておくべき新・100の法則。
できる 100ワザ ネットショップ 作れる! 儲かる! オンラインショップの実践ノウハウ
ネットショップ 開店・運営バイブル
できる 100ワザ ネットショップ 作れる! 儲かる! オンラインショップの実践ノウハウ
–PR–

ネットショップ設計のお話。

サイト設計、特に物販サイトにおけるサイト設計では「ユーザビリティー」という言葉がもてはやされています。

平たく言えば「使いやすさ」なのですが、極端な言い方をすれば「何クリックで注文できるか」という意味になると思います。

お客様が買いやすい環境を整える事はとても大切です。
・ページ遷移が少なくシンプル
・目的の商品が簡単に見つかる

しかしユーザビリティ至上主義はすでに時代遅れになりつつあります。

検索エンジン=タウンページ

そんなに遠くない昔、インターネットのなかった時代。

蕎麦が急に食べたくなったらタウンページを使ってお店を探しました。

お蕎麦屋さんをいくつか見つけたら、一番行きやすい場所にあるお店に食べに行きます。

つい3年~5年ほど前、SNSが普及していなかった時代。

近所のお店に置いてないおしゃれなエプロンが欲しくなったら、googleで検索しました。

「エプロン おしゃれ」の検索結果の上から見ていき、気に入ったデザインのエプロンが見つかったお店で買いました。

多少無理やり感もありますが、上記のように検索エンジンはタウンページに似ていると思います。

食べに行ってみないと美味しいお蕎麦屋さんかわからない様に、検索結果だけではどんなお店かわかりません。

検索結果をクリックした先で「目的の商品はありそうか?」「信用できるお店か?」などの印象が決まります。

サイトに入ったページが「ごちゃごちゃしてわかりにくい」「どこに目的の商品があるかわからない」場合、ほんの数秒でお客様は帰ってしまいます。

だから検索エンジン全盛時代はユーザビリティが全てだったのです。

しかしタウンページが役目を終えたように、ネットにおける検索エンジンの役割も減衰しています。

ネットも現実もクチコミの時代

3年ほど前から、クチコミの力が一般にも言われる様になりました。

美味しいおそば屋さんを探すのには食べログを、おしゃれなエプロンは好きなモデルさんがブログで紹介していたお店で。

事前情報の無い状態で飛び込むよりも、他の人の評価を参考にしたほうが効率が良い事を気づき始めたのです。

検索結果からクチコミへ。 するとどんな変化があるか?

食べログで評価が高かったお店に行く時。

目的のお店の外見がボッロボロの廃墟で「お蕎麦。カツ丼。カレーライス。冷やし中華始めました。」の張り紙があっても「ここが隠れた名店か・・入ってみよう」というポジティブな気持ちになれます。

ネットショップの場合、目的の商品がどこにあるのか全然わからなくても「どこかにあのモデルの着けてたエプロンがあるはず。」という気持ちで探せます。

スタートラインをずらせるのがクチコミの効果

クチコミという事前情報を得ることによって、お店に行く前の印象が変わります。

必ずしもポジティブという事ではなく、ネガティブにもなり得る点には注意が必要です。

ただ真面目にショップを運営していて、多くの人に悪く言われる事はありませんので安心してください。

逆に”真面目な商売を邪魔するような悪徳な輩がクチコミによって少なくなる”という期待も持てますので、大多数の経営者にとっては良い面が強いと思います。

クチコミの基本は「人に好かれる」こと

ユーザビリティ至上主義を否定しましたが、ユーザビリティを全く考えなくていいという訳ではありません。

一昔前と違って、今はユーザビリティが全てじゃなく同じくらいクチコミが大切だよ。という事です。

「いろんな人に噂してもらえて、とっても使いやすいネットショップ」

が理想なのは言うまでもありません。

ユーザビリティ改善には基本がある

ユーザビリティを改善するにはある程度のマニュアルが存在します。

・LPO (検索エンジンからのランディングページを最適化する)
・動線の改善 (メニューの改善、サイト構造の見直し)
・リンクの最適化 (関連商品のリスト表示、バナーを適材適所に)
・アクセスログの分析 (上記施策を定期的にチェック&改善)

上記の基本を実践すればユーザビリティは必ず改善します。

クチコミを増やすのにマニュアルはない

実施すると効果がある、と言われている事はあります。

・snsボタンの設置 (うわさ話をする場所への近道作り)
・各種snsサイトでお店公式アカウント解説 (直接ファンクラブを作る)

しかし最終的にいいクチコミが集まるお店というのは

お客様みんなに好かれている

ということ。 これに尽きます。

みんなに好かれる為のマニュアルなんてありません。

ユーザビリティを良くするもよし。
逆にゴチャゴチャにして”おもちゃ箱みたい”なドキドキを提供するもよし。

めちゃめちゃ安売り+即日発送もよし。
逆に値段は高い+受注後生産だけど、ここにしかないオリジナルを提供するもよし。

移り変わりの速いネットの世界、永遠に試行錯誤の毎日です。
頑張りましょう。

2Aug2011

デジタル一眼レフ:画像フォーマット、保存形式の選び方

ネットショップ経営術”TY”メソッド 一眼レフカメラの保存形式選び

デジタル一眼はフィルムではなく画像データを保存します。
使い切るまで交換できないフィルムと違い、画像データは写真一枚ごとに保存形式の変更ができます。

保存できる画像データの基本と、商品撮影のシチュエーションごとに最適な保存形式を考えてみたいと思います。

デジタル一眼:保存形式の基本

多くのデジタル一眼では、以下の要素を選択できます。

画像形式: RAW / JPEG / TIFF
JPEG画像圧縮サイズ: L / M / S
JPEG画像圧縮率: FINE / NORMAL(STANDARD) / BASIC

現行のデジタル一眼の人気機種を少し調べてみましたが、TIFFという画像形式で保存できる機種はニコンD700,D3系、しかありませんでした^^;
自分がD700なので他もTIFFに対応しているかと思ってたら、少数派だったとは・・・

画像圧縮率はニコン・ペンタは変更できますが、他のメーカーは変更できない所もあります。

画像形式の説明

TIFFは非常に少数派だったことが判明したので、説明を省きます。。

RAW とは、英語のraw(生)が示す通り、現像をしていない未加工の画像データです。
専用の現像ソフトを使って、一般的な画像データであるJPEGなどに現像します。

【メリット】
・カメラが頑張ってフル性能で撮影したそのままのデータです(非圧縮/可逆圧縮)。
・カメラが勝手に現像していない為、撮影後に自分の好みに現像できます。
・RAWデータが残っている限り、何回加工しても劣化しません。

【デメリット】
・現像をしないと一般のフォトビューワーでは写真を表示できません。
・専用の現像ソフトや現像の知識が必要です。
・撮影時の全ての情報が詰まっている為、データ量が大きくなります。

現像しないと見れない、専用機材・知識が必要など、フィルムカメラの「ネガ」だと考えるとピッタリです。

扱いづらい点しか見当たりませんが(笑)、カメラの最大性能を発揮できるのは間違いなくRAWデータです。
カメラ購入時にメーカー製の現像ソフトが付属していることもありますので、写真に質にこだわるなら是非チャレンジしてください。

最近はRAW画像を扱いやすくするために、撮影時にJPEGと同様にホワイトバランス、撮影モードなどを設定してカメラ本体やPCのビューワーでプレビューできます。
その場合でも、現像する際には好きなだけホワイトバランスやシャープネス・彩度などを触れます。

TIFFは少数派だったのか・・・

TIFFは少数派だったのか・・・


JPEG とは、誰でも見れる様に現像・圧縮した画像データです。
どのように現像するか?どの程度圧縮するか?は撮影前にカメラ本体で設定をします。

画像形式をJPEGにした場合のみ「画像サイズ」「圧縮率」を設定する必要があります。
また「ホワイトバランス」「撮影モード(シャープネス・彩度など)」は、撮影前に完璧に調整をしておきます。

【メリット】
・現像はカメラがやってくれて、どんなフォトビューワーでも表示できる。
・容量が小さい。

【デメリット】
・撮影と現像が同時なので、撮影前に全ての現像項目を設定する必要がある。
・JPEGで保存されたデータは、後に画像ソフトで補正をする度に必ず劣化する。

TYメソッド的観点から最適な保存形式を考える

ネットショップで使用する写真の大きさを考えます。

一般的には、(横幅いっぱい使うほど)大きめの商品写真は600×400程度、商品一覧などのリストで使われる写真は150×150程度です。
楽天のお祭り騒ぎのお店で観るような画面いっぱいの写真でも800×800程度です。

それに対して人気のOLYMPUS PEN(1230万画素)のRAW・JPEG(L)での画素数は「4032×3024」です。

・・・4032×3024のサイズで保存できても、実際に使う時1/6~1/7に加工されてしまうんです。。

小さくリサイズすると当然細部は失われますので、最新の一眼で撮影した画像をそのままのクオリティでネットショップに掲載する事は非現実的です。
そうすると、クオリティ重視のRAWを使うメリットがほとんど無くなってしまいます。

解像度は高ければいいってもんじゃない。品質が重要です・・

解像度は高ければいいってもんじゃない。撮像素子の品質が重要です・・ 写真は一眼ではなくコンデジ「FinePix X100」


結論

ネットショップでは基本的にJPEG撮影が最適でしょう。
ただしJPEGは不可逆圧縮で触る度に画像が劣化するため、保存は常に「最大サイズ(L)」「最高画質(FINE)」で保存します。

撮影時にホワイトバランスなどの設定をきちんとしなければいけませんが、RAW画像を全て現像する手間を考えれば相当時間の節約になります。

RAWデータは、特別なシチュエーションで後から自分で現像したい時だけ、使用すればいいと思います。

・複数の光源が混ざっていたりして、カメラまかせの現像では不安な時
・ページの最上部に載せる「こだわりの商品写真」

僕の場合、上記のシーンでは通常のJPEGに加えてRAWで一枚だけ保存しています。

今回の記事が、みなさんのショップの写真の質向上に貢献できる様願っています^^

商品写真加工が90円から
当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。

23Jul2011

[photoshop]商品写真の切り抜き加工 クイックマスク編

Photoshop 10年使える逆引き手帖 【CS4/CS3/CS2/CS/7.0対応】 (ああしたい。こうしたい。)
Adobe Photoshop CS5パーフェクトマスター―Adobe Photoshop CS5/Extended/CS4/CS3/CS2対応、Windows/Macintosh対応 (Pefect Master Series)
Photoshopデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック-[改訂第二版] 【CS5/CS4/CS3/CS2/CS 対応】
奇蹟のPhotoshop "ハイクオリティな写真"をつくるプロのレタッチ術
–PR–

ネットショップで大切な商品写真。

実際の使用場面を再現したイメージ写真や、商品の質感がよく伝わるようにアップで写した詳細写真など。

用途によっていろいろな撮影方法が必要になります。

今回のテーマは「切り抜き写真の作り方」。

画像補正ソフトで背景を切り抜いて、真っ白にする手法です。 

切り抜き写真の効果的な使い方から、photoshopでの切り抜き方法までを説明したいと思います。

もくじ

1, 切り抜き写真の効果的な使い方
2, 切り抜きに最適な写真の準備
3, photoshopでの切り抜き加工

切り抜き写真の効果的な使い方

写真には一枚一枚メッセージがあります。
山岳写真家が山脈と向き合った時、「この山の過酷さを表現したい」と思ったのか「この山の美しさを表現したい」と思ったのかで、同じ山でも全く違った写真になります。

商品写真も全く同じ。

例えばスニーカー。
「どんなシーンで使うのか?」「どんなパンツと合わせたらかっこいいか?」 という要求には、切り抜き写真では表現できないためモデルを使った撮影が最適です。
しかし、「素材感は?」「靴底はどうなってる?」「いろいろな角度から見てみたい」という要求には、切り抜き写真が最適でしょう。

商品の詳細な画像が見たい時は切り抜き写真が適しています。

ただし、僕は日頃から「切り抜き写真には心がない」と思っています。

確かに切り抜き写真では商品の詳細を知ることができるでしょう。
しかし「楽しさ」や「ワクワク感」は切り抜き写真では伝えられない、という事を忘れないで下さい。

ネットショップでの切り抜き写真の効果的な使い方

・商品の詳細写真として使う。ただし、必ず「使用をイメージできる写真」も使うこと。
・「商品一覧」や「色違いの商品」などのリストで使う

切り抜きに最適な写真の準備

基本的にはどんな写真・被写体でも切り抜きは可能ですが、出来上がりの完成度を高める為に「切り抜き用写真」を準備することが好ましいです。

以下は「切り抜き用写真」に適していませんので、注意してください。

【被写体】
・ガラス製品 (背景が透ける)
・上記以外でも、背景が透ける商品(薄い布など)
・境界線がはっきりしない商品 (ファー(毛皮)製品など)

【セッティング・構図】
・商品のライティングにムラがある
・背景色と商品が同じ色
・商品の一部しかピントがあっていない
・商品の全体が写っていない

背景は無地の白が最適です。
白以外にすると、どうしても背景の色が商品に写りこんでしまいます。
その結果、商品を切り抜いても、境界線が背景色に染まってしまいます。

先に書いた「背景色と商品が同系色はNG」と矛盾してしまいますが、なるべく商品と背景色は合わせたほうが映り込みが少なくすみます。
ただし商品と背景がまったく同じ色の場合は、非常に切り抜きがやりにくいです。。。

このへんのバランスは何回かやってみて習得して頂くしかないですかね・・・^^;

photoshopでの切り抜き加工

では実際にphotoshopで切り抜き加工をしてみます。

※切り抜きの方法はいくつもありますが、今回ご紹介するのは個人的にお気に入りのクイックマスクを使用する方法です。
塗り絵感覚で簡単に行える反面、ペンタブレットがないと多少難しいかもしれません。。。

使用するのは、僕のネットショップで好評販売中(笑) モロッコバブーシュです。

切り抜き用に準備した写真

ちなみに背景は、実家のリフォームで余った白系の壁紙を使用しています。
白色のロールスクリーンは何万円かするので、節約節約^^;

まず初めに「マグネット選択ツール」でおおまかに選択します。

マグネット選択ツールで商品の輪郭にそってドラッグします

マグネット選択ツールで商品の輪郭にそってドラッグします

後で修正するので、おおまかで大丈夫です

後で修正するので、おおまかで大丈夫です

選択ができたら「クイックマスクモードで編集」を押します。(or ショートカットキー”Q”)

マスクのアイコンをダブルクリックでマスクの色を変更できます

マスクのアイコンをダブルクリックでマスクの色を変更できます

商品と反対色のマスクにすると切り抜きやすいです

商品と反対色のマスクにすると切り抜きやすいです

マスクモードになったら、ブラシツールを選択します。(or ショートカットキー”B”)

ブラシツールを選択したら描画色が黒になっていることを確認します

ブラシツールを選択したら描画色が黒になっていることを確認します

ブラシツールの黒でマスクが足りない部分を塗り足します。
マスクがはみ出している所は、消しゴムツール or ブラシの白で塗ります。

ブラシや消しゴムの大きさは好みで調整してください。

で、こちらが修正後

商品に多少食い込む程度の方が綺麗な仕上がりになります

商品に多少食い込む程度の方が綺麗な仕上がりになります

修正が終わったら、先ほどの「クイックマスクモード」アイコンをクリックします。(or ショートカットキー”Q”)

商品だけ綺麗に選択されました

商品だけ綺麗に選択されました

メニューの「レイヤー」→「新規」→「選択範囲をコピーしたレイヤー」をクリックします。

選択範囲をカットしたレイヤーでも構いません。お好みで。。

選択範囲をカットしたレイヤーでも構いません。お好みで。。

レイヤーウィンドウに新しいレイヤーが出てきますので、元々のレイヤー「背景」を削除します。

切り抜きのレイヤー「レイヤー1」が新しく登場します

切り抜きのレイヤー「レイヤー1」が新しく登場します

背景を削除したら切り抜きの完成!!

背景を削除したら切り抜きの完成!!

「別名で保存」でJPEGを選択した場合は、透明部分は自動的に白になります。

「手動で白い背景を作りたい場合」や「白以外の背景色にしたい場合」は、切り抜きレイヤーの下に新規レイヤーを作成してベタ塗りしてください。

こちらが完成した切り抜き写真です。

明度・彩度の補正やリサイズをして使いましょう

明度・彩度の補正やリサイズをすれば、すぐにでもサイトにアップできます

切り抜き写真は汎用性を高める為、色調補正をする前に保存しておきます。

実際に使う際に、先ほど保存した切り抜き写真に色調補正・リサイズを施します。

こうすることで、切り抜き写真が必要になったときに毎回切り抜き作業をする必要がなくなります^^

どうしても綺麗に切り抜けない! そもそもPhotoshopを持ってない!

お困りの場合はtyのtwitterにつぶやいてください!

実際に切り抜きたい写真を見せて頂けたら、簡単なアドバイスができるかと思います。
またphotoshopの操作方法でお困りでしたら(CS2・CS5なら)、大抵わかります。

あ、あと今回作例で使ったバブーシュが気になっちゃった場合は僕の運営するショップ・プチコテージを覗いてください 笑
【プチコテージ】モロッコバブーシュ 一覧

商品写真加工が90円から
当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。

21Jul2011

ネットショップの基本的なナビゲーションを考える

webサイトの最上部などに表示されるナビゲーション。
 
ネットショップでは、よほど特異な構成にしない限り最上部ナビゲーション&左ナビゲーションの2つ使いが基本になるかと思います。
今回は、そのナビゲーションの基本的な形を考えてみます。
 
あくまでも一般的な基本形を考えてみる回なので、実際のショップに最適化すると違いが出てくる場合もあるでしょう。
その点を理解した上で、みなさんのウェブショップ運営に役立てて頂けたら嬉しいです^^
 
 
 

ネットショップに最低限必要なナビゲーションとは

 
まず、一般的なネットショップに必要なナビゲーションを整理してみましょう。
 
・トップページへ
・決済方法 and 配送方法
・商品カテゴリ大 (ファッション・AV機器 など)
・商品カテゴリ小 (ハーフパンツ・サンダルなど スピーカー・ノートPCなど)
・商品検索ウィンドウ
・ご利用方法
・カートの中身を見る
・お問合せ and よくある質問
・メルマガ登録
・規約 and 会社概要
・ショップブログ
・ショップ独自の記事、新製品比較レポなど
 
 
 
 

左ナビと上ナビの違い

 
基本的かつ一般的ななネットショップの構造では「左ナビゲーション」と「上ナビゲーション」を併用します。
 
 
左ナビは上ナビに比べて
 
・項目数を多く表示できる
・階層表示できる
 
ことが利点です。
 
 
 
上ナビの利点は、
 
・どのページでも最初に表示される
・項目数が少ない分、各々の項目が目立つ
 
ことです。
 
また現在では事実上、多くのユーザーが「重要な情報は上ナビにある」と考えている点も考慮します。
 
 
 
 
 
 

左ナビに最適な要素とは?

 
・項目数を多く表示できる
・階層表示できる
 
 
この2点をフルに活用できるのが「商品カテゴリ表示」です。
 
雑貨屋さんの商品カテゴリを例にすると、
 
・アクセサリー
・ファッション
・インテリア小物
・文房具
・キッチン雑貨

など、項目数が多い上
 
【アクセサリー】
・ヘアーアクセサリー
・ネックレス
・ブレスレッド
【ファッション】
・パンツ
・スカート
・ワンピース
・サンダル
・ブーツ
 
などなど、 それぞれの階層表示も必要になります。
 
 
 
こういった理由から、多くのネットショップでは商品カテゴリを左ナビで表示しています。
【商品カテゴリ表示=左ナビゲーション】と考えて間違いないでしょう。
 
 
 
 
 

上ナビに最適な要素とは?

 
・どのページでも最初に表示される
・項目数が少ない分、各々の項目が目立つ 
 
上記から、上ナビには「いつでもどこからでも必要とされる情報を置く」という事が基本的な考え方になります。
 
 
常に必要とされる情報とは?
 
・サイトのトップページ
・決済方法and配送方法
・お問合せ
・カートの中身を見る
 
などになると思います。
 
 
 
 
 
 

左ナビ・上ナビのどちらにも当てはまらなかった要素を考える

 
これまでに登場しなかった要素
 
・商品検索ウィンドウ
・ご利用方法
・メルマガ登録
・規約 and 会社概要
・ショップブログ
・ショップ独自の記事、新製品比較レポなど
 
は、左・上のどちらに表示したら良いのでしょうか?
 
 
「だれからも必要とされる情報、全てのユーザーに見てもらいたい情報は上ナビに」 という事が原則です。
 
これを意識しながら、各々のサイトの個性を考えて配置すると良いでしょう。
 
 
僕の運営するサイトではショップブログはメインサイトと同じデザインレイアウトで、かつ非常に高い頻度で更新しています。
ショップブログが強い武器になる、と考えている為、上ナビゲーションに表示しています。
 
ショップブログが別サイト(無料ブログなど)に飛ぶ場合や、効果的なプロモーションとして機能していない場合、上ナビではなく左ナビでも良いでしょう。
 
「ショップ独自の新製品レポ」などに力をいれている場合、上ナビゲーションでどんどんアピールすると良いでしょう。
 
 
 
 
 
 

まとめ

 
今回はナビゲーションの基本的な使い方を考えてみました。
 
これを参考に、各々のショップにあったサイトの設計をして頂けたら、きっと使い勝手の良いサイトになると思います。
 
 
 
 
機会があれば、より深く掘り下げた「ナビゲーション上級編」を考えてみたいと思います^^
 
 
 
ネットショップのナビゲーション設計でお困りでしたら、是非tyのtwitterにつぶやいてください(・∀・)
 

10 / 11« 先頭...7891011