ホームページのアクセスアップを頑張って、訪問者を増やすことも大切ですが、それ以上に、訪問者を記事に引きつけることも、とても大切なウェブ活用のひとつだと考えています。

今回は、ホームページ制作依頼にも盛り込み、先日公開した美容系ホームページに採用したデザインについて、解説いたします。

訪問者対象は、どちらも「女性」を意識したホームページ・デザインと記事デザインです。

ホームページのデザイン・ポイントは3つ

ホームページのデザインを考える際のポイントは3つです。

ひとつは、訪問者を引きつけること。
2つ目は、訪問者にスクロールさせること。
3つ目は、訪問者にアクションを起こさせること。

SEOを使って検索経由のトラフィックを集めたとしても、SNSに投稿して、その記事の紹介文から、記事コンテンツにアクセスしたとしても、記事のトップ(はじめに表示される画面範囲内)で訪問者に、「探している答えがここにある」と感じさせ、スクロールしたくなるような段落の配置や文章をデザインし、記事の後半で、あなたが希望する行動を訪問者に起こしてもらわなければ、それはただの「ニュース」でしかなく、ビジネス系のホームページとは呼べません。

今回の記事では「訪問者を引きつけるファーストビューのデザイン」について解説します。残り2つのテーマに関しては、下記の記事で解説しています。

訪問者にスクロールを促すデザイン

最初の画面で引きつけ、スクロールさせるコンテンツ・デザイン

「ファーストビュー」というのは、ページにアクセスされた際に「スクロールせずに映し出される画面」のことです。

このファーストビューでは比較的大き目の画像やイラストなどを使った「視覚的要素」と「テキスト」を使って引きつけるのが基本です。

引きつけることができなくても、最悪「引き止める」ことができなければ、アクセスは減ってしまいます。

なぜなら、滞在時間が短すぎると、そのページがインデックスされた検索キーワードから除外されてしまうからです。

このページならこんな感じです。

ファーストビューのデザイン

ファーストビューのデザイン(パソコン版)

すぐに離脱されるファーストビュー・デザインが及ぼす影響

例えば「りんご」と検索して、そのページの最上部の画像(アイキャッチ画像)に果物盛り合わせの画像があれば、違和感を感じますよね。

そして、その画像の中や上下に「りんご」に関係ない文字や文章が配置されていれば、訪問者は、「間違ってこのページを開いた」と感じてしまい、検索結果に戻ってしまうからです。

これが繰り返されると、Googleも表示させる検索キーワードを間違った(インデックスするキーワードに誤りがあった)と、認識するようになり、そのキーワードでの検索ランキングを低下させます。

美容サロンのホームページに多い残念なデザイン

また、これは特に美容系サービスを提供する「サロン」のホームページに多いデザインなのですが、店舗名以外の「絵的な部分」が非常に似通っていて、どのお店のホームページにアクセスしても「違いを見つけるのが難しい」と感じさせるデザインでは、やはり、お店への集客を果たすことはできません。

トップページの構成がライバル店と似通っているデザインは、集客率が悪いということです。集客率が悪ければ、それだけ多くのトラフィックを集めなければなりませんので、大変です。

美容系サロンのホームページのコンテンツ・デザインで、頻繁に採用されている構成は「スタッフの集合写真」があり、「アットホームなお店」か「優雅なお店」かの、どちらかに分かれ、ここに整体的なサービスがメインのお店だと「技術志向」の画像や文言が並びます。

そして、お店のピーアール。

キャンペーン中だとか、口コミサイトでのランキングのほか、雑誌に掲載された…。そして、取って付けたような「お客様の声」や店長の凄さ自慢…。

集客対象が「女性」なら押さえておきたいポイント

サイトへのアクセス対象を「女性」に絞った場合、確かに「絵的なイメージ」は、大切です。そして、今、紹介したような「定番構成」を使って、画面をスクロールさせることは可能です。

なぜなら、違いを見つけるためには、スクロールしなくては、見つけられないからです。しかし、閲覧者はスクロールしても、スクロールしても、違いが見つけられず「なんとなく良さそう」「キャンペーン中だから安く試せるかな?」という、感覚で予約を申し込んだり電話をかけてくれることはあります。

確かにこれでも「集客」は「成功」と言えるかもしれません。

「たまたま客」を集めてしまうトップページデザインの結末

ただ、このような定番デザインは「リピート性の高いお客様」を集客する場合には、向いていません。なぜなら、初回来店を決めた動機が、他者に行く場合でも同じだからです。

たまたま、はじめに見た店舗だったから…
たまたま、電話対応してくれた人の声の感じが良かったから
たまたま、予約が取れたから…
たまたま、キャンペーン中だったから
たまたま…

このような「たまたま客」のニーズに応えるサービス提供ほど、難しいことはありません。本来サロンを探していた目的とキャンペーンの内容が異なれば、サロンを探していた本来その閲覧者が抱えていた問題の解決とは異なるサービスを「キャンペーン中だった」と言うだけで、入れ替えてしまい、サービスを受けても、本来の目的は果たせていませんので、またお店を変えるために検索…

こうなってしまうのが、美容系ホームページではよく見られます。

これは、サロンなどの店舗だけではなく、サプリメントや美容系雑貨、健康食品や健康飲料などの「女性をターゲット」としたホームページでデザインを施す際にもっとも多い、残念なデザインです。

その結果、お客様のリピート率を上げることができなくなるので、新規客をたくさん集めなければならないので、集客コストと集客労力が上がり、経営の利益率が下がります。

リピート率の高いお客を集めるトップページデザイン

今回のホームページ作成のご依頼でも、当初は「繁盛している(らしい)」別地域のサロン・ホームページを参考に作って欲しいと言うご要望だったのですが、リピート率の高いお客様を希望されるのなら…と、次のようなデザインを提案させていただきました。

  1. 通いやすさをファーストビューでイメージさせる
  2. 店舗アピールではなく、お客様のニーズに応える
  3. お客様の「不明瞭なウォンツ」を浮き彫りにする
  4. その解決策が、このサイトに掲載されていることを示す。
  5. なぜ、それが可能なのかを証明する
  6. 常にキャッチコピーは、閲覧者への「呼びかけ」でデザインする

このようにトップページをデザインすることで、閲覧対象を「女性」に絞るだけでなく、来店動機を明確にすることができ、受けるサービスもウォンツに沿ったサービスを選んでくれるようになり、結果リピート率を期待できるお客様を集められるようになります。

サロンを探したい女性は「自分にぴったり」のサロンを見つけたいと望んでいますし、「自分が変われる」サロンを探していると私の場合は考えます。

「変化」を望んでいるのですから「変化」を体感させることが大切ですし、イメージさせるだけでも充分です。

だからと言って、ヘッダー画像が切り替わるようなデザインは採用しませんでした。その理由は、情報量が多くなるからです。

ファーストビューに掲載する情報は少なめに

一度に飛び込んでくる情報量が多すぎると、人は難しいと感じます。

ホームページに掲載する「情報量」は多くて構いません。その理由は、その情報を読んだり見たりする際に、それ相応の「時間」と「行動」が行われているからです。

そこで、どんな仕掛けをしたかと言うと、このサイトでは採用していませんが、背景画像を「緩やかに変化させる」グラデーションを動かすアニメーションを採用しました。

お客様のサイトなのでご紹介はできませんが、同じアニメーションの仕組みを採用して健康系のサイトを作成したので、後ほどご紹介します。

背景にアニメーションを使う際の注意点

私がアニメーションを使ったデザインを採用する際に注意している点は3つあります。

ひとつ目は、前の段落でお伝えしたように「変化」を望んでいる人がホームページの閲覧対象である場合。

2つ目は、背景を動かすことで、伝えたいイメージがより強固になる場合。
3つ目は、長文の段落を読む中で、閲覧者の注意が散漫にならないよう、また、下線や太文字などの文字装飾で「ガチャガチャ」したデザインにしたくない場合。

そして、注意している点は、背景アニメーションが、文字情報を妨げないようにすることです。

例えば、先日公開した「菌活ブログ」のトップページでは、次のような背景アニメーションを採用しています。

デモ

サイトは下のボタンで確認いただけます。

菌活ブログ

ファーストビューにアニメーションを使ったデザインの解説

このサイトは「除菌や殺菌、消毒よりも菌活はじめませんか!」と言うテーマで、私や友人たち、そしてお客様たちが日々取り組んでいる、有用菌を育てて有害菌を駆逐する「菌活」に関する情報をお届けするサイトです。

キャラクターは、「もやしもん」という、私もすごく影響を受けた講談社イブニングから出版されている漫画に登場する微生物をデフォルメしたものです。

もちろん、著作権の侵害にならないように、講談社イブニングの編集部に問い合わせ、条件付きですが承諾を得ています。

背景画像の「菌のキャラクター」を動かすことで、空気中に浮遊している微生物の存在を思い出してもらえればと、絶え間無くキャラクターが動くような設定をしています。

さらに、背景色もグラデーションを動かして、爽やかな感じや温かみのある感じを演出しようと、このデザインを採用しました。

フォントも柔らかくした理由は、微生物に関するウェブサイトは、カタカナが6つも7つも並ぶ学術的な情報ばかりで「難しい」と感じさせるホームページやブログばかりだったので、「このサイトは何かが違う」と感じさせるために、フォントを柔らかいものにしたり、画像文字は踊ったような配置にデザインしました。

アニメーションではなく静止画だった場合との比較

この画面を静止画で見ると下図のようになります。

デモアニメーション

カラフル過ぎて、どこかスッキリしないと感じませんか?

画面上部の「ヘッダー画像」をスライドのように動かしているサイトも多いですが、スライドを使うと、確かに訪問者を、その画面に止まらせることはできます。しかし、スクロールするタイミングを失ってしまうと言う欠点と、閲覧動機を混乱させてしまう危険もあります。

この2つのデメリットを除外しながら、訪問者の目を引きつけるデザインとして、また、アニメーション背景を使うことで、閲覧者が抱くイメージが膨らむ場合にアニメーション背景をトップページ最上部にデザインするようにしました。

サイトは下のボタンで確認いただけます。

菌活ブログ