鉄則その１　タイトルを大きく表示。何を提案しているか瞬時にわかる様に

　トップビューでなんだかわからないという印象を与えるとユーザーの心に響かないので、間違いなくお客さんはページから離れていきます。
内装屋、歯科医院、行政書士事務所、居酒屋さん、ファッション通販……etc

　自分のビジネスをはっきり表現してください。

　よくない例ですが、これを守っていないサイトが美容室関係に多くあります。
イメージやデザイン重視のトップ画像が多く、店舗名なども英語（しかも筆記体）さらにサービスのメニューまでも英語。これではお客さんには何のサイトかわかりません。

　たとえデザインはイケていても、お客さんが知りたいのは、その美容室でどんなサービスが受けられるのか？気に入ったヘアスタイルにしてくれる美容師さんはいるのか？メニューごとの価格はいくらなのか？といった具体的なことです。

　美を売る仕事ですから、サイトのセンスがよく美しいことはもちろんいいことですが、内容が伝わらなければ集客には結びつかないのです。

　こうした間違いは美容室に限ったことではありません。イタリアン、フレンチ、料亭といった高級料理店もイメージを優先しようとするあまりサイト集客に失敗している例が見受けられます。

　以前私がホームページのリニューアルをお手伝いしたイタリアンレストランも、当初はイメージと美観重視のトップビュー。魚やパスタ料理の写真が動いて左右から登場するというフラッシュ画像をトップに配置していたのです。
　フラッシュ画像とは、音声や動画、画像などのアニメーションを組み合わせて作られたコンテンツのことで、綺麗ですが表示や動作に時間がかかります。見た目には美しく楽しいかもしれませんが、サイトの訪問者にまず必要な情報を知ってもらうという観点から大きく外れているばかりか、フラッシュの再生時間を待てずに離脱を招くことも多いのです。

　トップ画像でフラッシュを使うのがＰＣサイトで流行した時期がありました。これが美容室ではいまだに多いのですが、集客の観点からすると絶対におすすめできません。フラッシュの使用を止めるだけで、お客さんの反応がアップすることがほとんどです。
　トップビューで必要な情報をお客さんにインプットしていただくためには、動くものをトップに置かないことがベストです。

　それとは別に、サイトへの動画活用が有効であることが最近わかっています。それは、トップビューではなく、商品の良さを語っているお客さんの感想動画などです。

>鉄則その２　レスポンスデバイスはサイトの基調色と反対色で目立たせる

「電話」「申込みフォーム」２つのボタンに反応させやすい色は何色でしょうか。
赤が目立つからいいというのは俗説で実は何の裏付けもないこと。むしろ赤はキツい印象でよくありません。サイト全体の基調色が青なら確かに赤系統が正しいのですが、赤ではなくオレンジなどを使うことで目立ちます。他に実は緑がいちばん反応がとれるという説もあります。

　基本的にレスポンスデバイスはサイト基調色の反対色がいちばん高反応。
学生時代に「色の相関図」というものを学んだ記憶がありませんか？
デザインをしている方にとっては常識だと思いますが、反対の色を使うことでクリックしてほしい部分を目立たせるというテクニックです。

　ちなみに、色には業種ごとに適したものがあります。
たとえば飲食系店舗は黄色やオレンジ色がいいと言われます。マクドナルドや吉野家はロゴマークなどに、黄色やオレンジを使っていますよね。

　また病院系は青がいいと言われます。赤は血の色を連想させるので当然ＮＧ。さらに青は、真面目、誠実に見えるという効果がありますので士業、コンサルタント系に多く見られます。「誠実」イメージを利用するために、世の中でちょっと悪いイメージを持っている業種はあえて青を使ったりします。

　以前、悪徳商法がニュースをにぎわせたリフォーム業者や、貸金業なども青を使ってイメージアップをはかろうとしています。
このような定番色がない業界の場合は、競合するライバルが使っていない色を使ってみるのも、差別化のためには良いと思います。

　レスポンスデバイスの色を変えるだけでお客さんの反応数値がぐんと跳ね上がったケースを私も何度も経験しています。絶対にこだわるべきポイントです。

鉄則その３　ユニバーサルデザインを活用。アイコンだけでわかるサイトに

　ユニバーサルデザインとは、駅や公共施設のマークなど誰がみてもわかるシンボルマークやアイコンのことです。

スマートフォンは画面が小さいので、文字でなく誰もがわかる図形やアイコンを使って、見た瞬間に次の動作がわかるようにすることがユーザーの利便性を上げま　す。ボタンをクリックしたその先に何があるのかを、文字で説明せずにわからせてあげるのが理想的。

　このサイトは元々ＰＣサイトのページ数がすごく多くて、スマートフォン対応サイトを作るのに、３ヵ月くらいを要しました。
サイト内でいうと例えば、

・若葉マーク→エステ初心者を表わす。
・家のマーク→トップページ　
・封筒のマーク→メール　
・虫眼鏡のマーク→検索　
・プレゼントマーク→キャンペーン
　
というように、シンボル化されたアイコンが駆使され、サイト内をスムーズに閲覧するのに役立っています。

※参考図書　東京大学大学院教授 中川聰著
「ユニバーサルデザインの教科書」（日経BP社）
世の中にたくさん存在するユニバーサルデザインを解説し利用するための入門書。スマートフォンサイトを作るときにも役立つ概念が学べますのでお勧めです。

鉄則その４　リンクボタンを大きくしてタップ（クリック）間違いをなくす

　スマートフォンでクリックしてみたら意図しないページが開いたという経験はありませんか？
スマートフォンのボタンの押し間違えは、サイト離脱の原因になります。
　バナーボタンを大きくし、隣接する場合はなるべく間隔をあけます。そして、ボタンにわかりやすいアイコンを活用することなどが、間違いを減らす工夫。
サイトのグローバルメニューのボタン数は少なめに。ＰＣサイトの場合５個から７個が適当と言われますが、スマートフォンなら４個から５個が限界でしょう。

　こうした配慮は「電話」「申込みフォーム」のレスポンスデバイスについても同様です。

　スマートフォンサイトで次の２通りのボタン配置があります。どちらが「誤操作が起きにくい」正しい並べ方だと思いますか？
　

　スマートフォンを操作する時、多くの人が機器本体を右手で持ち、右手親指で画面をフリックします。もしＡのように「ＴＥＬ」ボタンが画面右側にあったらどうでしょう。フリック中に誤ってボタンに触ってしまう可能性がぐっと高くなりますよね。
　電話のコンバージョンを測ることができても、この誤操作が計測値としてカウントされてしまうと、正確なデータを得ることができません。正解はＢです。

　　「電話」ボタンは必ず親指が触れにくい左側に配置するようにしてください。とても細かなポイントですが、こうした繊細な配慮がPCサイトとは異なるスマートフォンサイトならでは特性であり、売れるサイトを実現するための大切なポイントなのです。
　ボタンの表記も「今すぐ、ＴＥＬ！」「電話する」など、表現を工夫することがポイント。ほんのちょっとした配慮が、コンバージョンを上げることにつながります。

　「自社のスマートフォンサイトはどうすれば反応が取れるようになるのか？」、「一度自社のスマートフォンサイトを見てもらいアドバイスをしてほしい！」という方のために、スマートフォンサイト無料相談を実施しております。
　下記よりアクセスして、お申込みください。初回のみ無料でアドバイスをいたします！！