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

☓ 閉じる

18Sep2011

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22Aug2011

ネットブック+スマートフォン ユビキタス時代の仕事術

できる人の 超★仕事術
マッキンゼー式 世界最強の仕事術 (SB文庫)
仕事が速い人のすごい習慣&仕事術 (PHP文庫)
テンプレート仕事術 ―日常業務の75%を自動化する
–PR–

このブログでも散々書いているので「しつこいっ!」と思われるでしょうが、2011年初夏にスマートフォンデビューしました。

僕の選んだ「HTC evo WiMAX」は、その名の通りWiMAX電波も受信できるハイブリッド端末。

さらに受信した電波はWi-Fi機能によって手持ちのデバイスへネットワークを供給する無線LANへと早変わり。

さらにAUでは無線LAN機能を使った場合の通信料金も携帯通信の範囲内でまかなえます。

実を言うと海外暮らしから戻って以来、プライベートな携帯電話を持っていませんでした。

大切な連絡はPCメールや自宅の電話で充分だし、プライベートな携帯電話の90%は無駄な時間を浪費していると信じているんです。
外では常に仕事用の携帯を持っているわけだし、急な用事程度なら不便はありません。

「まだそんな奴がいたのかっ!?」と思われるでしょうが、おそらくIT関係の業界では僕が最後の砦だったことでしょう。(マジメな話、最後だったかも知れませんね。)

そんなアンチケータイ派の僕が、このHTC evoのスペックを見て即買いした理由は上述の無線LAN機能。

「だれでも、どこでも、何からでも」のIT社会を表す ユビキタス という言葉が登場して数年経ちますが、やっとここまで来たか! という感覚です。

※ちなみにユビキタスという言葉の定義は特になく、概念的には人間が動く事で周囲のコンピューターが自律的に相互的に働き合う環境や技術を指しているのだと僕は勝手に解釈しています。究極的には、朝起きた事をベットが感知してコーヒーを淹れて暖房を入れる。自宅の玄関を開けると車はエンジンスタート、会社の駐車場に停めると個人認証をしてゲートオープン&オフィスのPCなどが一斉にON。昼食のカロリーは自動的にサーバーにアップされて携帯・PCなど、どこからでも確認OK!みたいなイメージです。これは完全にSFの世界なので、個人的には「いつでも、どこでも、どのデバイスからでも」同じ仕事ができる環境が、現実的で即実現可能なユビキタス社会だと思っています。

徐々に進行していたユビキタス社会の基盤

3年ほど前からのネットブックブーム。

当時Intelが開発したATOMプロセッサという新しい超省電力CPUの技術革新がそこにはありました。

バッテリーの稼働時間を大きく左右するCPUの省電力化。これによりノートPCのサイズ・重量を大きく左右するバッテリーの小型化が進み、それ以前のPCから見ればモンスターの様な小型・長時間稼動のネットブックが登場したわけです。

でも今までは外に持って行ってもネットワークが繋がりませんでした。

外出先でネット接続をする手段としては「公衆無線LAN」「ネット接続用の携帯ネットワークやWiMAX」などのサービスがありますが、いずれも月々1000円程度~6000円ほどです。

安価な無線LANは接続場所が「特定の駅」「特定のカフェ」など、とても”どこでも”と呼べるシロモノではありません。

“どこでも”を実現する広範囲ネットワークは月額5000円以上と、特別に必要な人以外はハナから相手にしていない料金設定です。

まさかこんな日が突然やってくるとは思っていませんでした。

携帯電話のネットワークが追加料金無しでPCに使えるなんて!

これこそが「誰でも、どこでも、何からでも」使えるネットワーク、まさにユビキタス社会の基盤ではないでしょうか?

どこにいても仕事ができる

前置きが壮絶に長くなってしまいましたが、ここからが今日の本題です。

人間というものは、環境が変わると発想が変わります。

これからは「仕事内容に合わせて環境を変えてしまおう」という事が可能な時代です。

僕の場合は、具体的に仕事を以下の3つに分けられます。

・【マネジメント系】スケジュール管理、タスク管理
・【実務作業系】web制作作業、商品管理・梱包発送などの作業
・【クリエイティブ系】短期・長期的な戦略を考える、物書き(ブログ)など

これに加えて、思いついた発想はすぐに記録する、という作業が一日中どこにいても付きまといます。
その為のスマートフォンです。お忘れなく。

では次から、上記の3つに適した仕事場所とデバイスを考えてみます。

マネジメント系は移動中

スケジュール管理などは電車の移動中が最適です。

そもそもスケジュール管理に使う時間は短ければ短いほど良いと思われます。

反して、スケジュール管理は仕事の質と効率を決める、ものすごい重要な要素です。

時間があるなら、ああでもない、こうでもない、と一日中悩めてしまいます・・・

その点電車内では目的地に着いたら強制的に終了をかけれらるので、スケジュール管理をするなら理想的な場所です。

移動中にはよほど気合を入れない限りPCを開けませんので、必要なデバイスは「スマートフォン」です。

短文程度なら吊り革を掴んだまま片手で打てる様に鍛えておきましょう 笑

移動中は環境がめまぐるしく変わる為、面白い発想もでてくるのでは?と考える人がいると思います。

仰るとおりですが、僕みたいに一般的な集中力の人間には、移動中はクリエイティブな発想を具体化する作業ができません。
ポッと浮かんだアイデアも一瞬で忘れてしまいますw

発想は簡単にメモするだけ。それを詰めていく作業は・・・次の章で。

クリエイティブ系は街のカフェで

「刺激的な環境」と「落ち着いた環境」を実現するのが、街のカフェです。

上の2つがもたらしてくれる「クリエイティブな発想」と「集中力」が、今後の戦略を練ったり、まとまった文章を書く時に必須の要素です。

さすがにスマートフォンでは長文はきついですので、ここではネットブックを使います。

カフェ+ネットブックは最強の物書き環境だと思います。

物を書くときには調べ物をする機会が増えますが、ちょっとした調べ物程度でしたらPCで書きながらスマホで調べる、といった使い方もできます。

移動できない重い作業は、オフィスで

ネットショップの場合、商品管理と発送作業は当然倉庫で行う事になります。

カフェで梱包作業やってるアホはさすがに見かけないですよね 笑

その他にも、web製作などの専用ソフトが必要な重い作業は、専用のデスクトップPCが必要です。

オフィスの作業で一番大切な事は、

外でできる事は、できる限り外でやる

という気持ちです。

これを意識しないと、何時間もダラダラとブログを書いたり、スケジュール管理に時間を浪費する事になります。

スケジュール管理はスマホでしかしない!
ブログはネットブックでしか書かない!

と決めることで、時間を有効に使うことができます。

少なくとも僕はそうでした(;・∀・)

いつでも、どこでも、何からでも を実現させる下準備

【ネットワーク環境】
・WiMAX,3Gなどの広範囲ネットワーク
・公衆無線LAN
・オフィス,自宅の高速通信(光回線)

【使用端末】
・スマートフォン
・ネットブック
・デスクトップPC

【ツールのクラウド化】
・スケジュール管理
googleカレンダー
Remember the Milk など

・メモ帳
evernote など

他にも、気になった物は何でも写真を撮ってpicasaやdropboxにアップするなど、アイデア次第でいくらでも無料でクラウド化できます。

便利な無料ツールの使用レポは、随時更新していきます!

21Jul2011

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

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

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

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

左ナビと上ナビの違い

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

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

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

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

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

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

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

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

まとめ

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

13Jul2011

オーバーレイ表示機能についてのアレコレ・・

「thickbox」とは無償で公開されている、手軽にオーバーレイ表示を実現させるスクリプトです
 
近年、画像などをオーバーレイ表示させるサイトが急激に増えてきました。
 
僕のサイトでも、つい先日、全ページに設置してある「お問合せフォーム」へのリンクと、全商品画像をオーバーレイ表示される様にプチリニューアルしました。
 
 
オーバーレイ表示ってなに!? だって??
 
ここ」とか、↑上のタイトル画像をクリックして下さい。
  
ポップアップ表示みたいな物ですが、ポップアップが「新しいウィンドウでページ・画像を表示する」だけなのに対して、
オーバーレイは「現在のウィンドウに重ねて、新しい画像・ページを表示」する所に違いがあります。
 
あくまでもベースは「現在のウィンドウ(ページ)」なので、ウィンドウ・タブを閉じたり、戻ったりすると、オーバーレイ表示ごと現在のページも閉じてしまいます。
この点がインターネットに慣れないお客様にとっては離脱の原因になってしまうポイントの一つですが、デメリットは後ほどまとめて考えてみます。
 
 

もくじ

 
1, オーバーレイ表示導入事例の紹介
2, オーバーレイ表示のメリット・デメリット 
3, 実際の導入方法

 
 

オーバーレイ表示導入事例の紹介

 
今回、僕のサイトでは「お問合せjフォーム」へのリンクと、商品販売ページの商品画像をオーバーレイ表示にしました。

あまり自分のサイトへのリンクは貼らない主義でやっていたのですが、説明が面倒なので実際に見てください><

プチコテージ てぬぐいの販売ページ (別ウィンドウで開く)
↑ページ最上部のテキストナビゲーションの「お問い合わせ」をクリックしてください。 一目瞭然です。 
 
以前は「お問合せ」は、問い合わせフォームを設置してあるページへのリンクでした。
それをオーバーレイ表示にする事で、ページ遷移すること無くフォームだけを呼び出せます。
 
 
 

オーバーレイ表示のメリット

 
最大のメリットは 「カッコイイ」という事 (`・∀・´)エッヘン!!
 
ふざけたワケではなく、ネットショップにとって「かっこ良さ」や「制作技術」は大切です。
多少のスクリプトを使って画像をオーバーレイ表示させる技術がある、という事だけでも、閲覧しているお客様にとっての安心感に繋がります。
 
使っているスクリプトにもよりますが、大抵のオーバーレイ表示スクリプトにはスライドショー機能もついています。
これにより、同一ページ内の任意の画像を「Next」ボタンなどで簡単に表示させる事ができ、「商品ごとのスライドショー」を簡単に実現できます。 
 
 
ユーザビリティーの観点から言うと、 ページ遷移が無いため離脱率が下がる という点が重要です。
 
僕のサイトの例で言うと、商品拡大画像と問い合わせフォームをオーバーレイ表示にしています。
 
せっかく商品の販売ページを見てくれていて、さらに興味ももってくれているから画像を拡大したり「問い合わせフォーム」に進んだりするわけです。
その際に拡大画像が別ページで表示されたら。。。 きちんとブラウザの「戻る」ボタンを押してもらえる率はどのくらいでしょうか?
ましてや問い合わせフォームのように少し時間のかかる作業の場合、問い合わせた後に元のページに戻ってもらえる可能性はどれほどでしょう^^;
 
ページ遷移をなくすことで離脱率を下げ、結果として成約率が上がれば大成功です。
もちろんお客様にとっても「あぁ・・・ページ閉じちゃったよ。。」というイライラが無くなりますしね。
 
 

オーバーレイ表示のデメリット

 
ただし、先ほども触れたデメリットとして
オーバーレイ表示を閉じようとしてブラウザの戻るボタンor閉じるボタンを押されてしまう
という恐怖もあります。
 
大抵のオーバーレイ表示スクリプトは枠外のグレー部分をクリックすることで表示が消えますが、慣れていないお客様が戻るボタンを押してしまう例も多くあります。 

この点についての解決策ですが、
1. 閉じるボタンが目立つオーバーレイ表示スクリプトを選ぶ
2. 「枠外、または”閉じる”をクリックして下さい」などの注意書きを、すべてのオーバーレイ表示部分に書く
3. 間違って「戻るボタン」を押されても大丈夫。「進むボタン」を押してくれる事を期待する
などがあります。 
 
また、JavaScriptの処理が遅いIEでは、高機能なスクリプトを使用すると、表示に時間がかかったりカクカクしたりしますので、この点も注意が必要です。
 
 
ページ閲覧中に一時的に表示させる手段としては、デメリットよりはメリットのほうが多いでしょう。

 
 
 
長文になってきたので、次回に続かせていただきます^^;

後編 「web知識ゼロでもできるThickboxの導入方法」