share
  • >
  • ブログトップ>
  • スマホサイトで成功する「勝ちパターン」とは?

スマホサイトで成功する「勝ちパターン」とは?

近年、スマホでの閲覧を基本にした「ワンページ展開」でつくられたWEBサイトが増えています。

 

ワンページ展開とは、1ページの中で情報をつかみやすい仕様でつくられたサイトのことで、シンプルで見やすい、縦長のレイアウトでデザインされたサイトの構成を指します。

 

年々増えるスマホユーザー

毎年新しい機種が登場するように、スマートフォンユーザーは増え続けている傾向があります。
以下の資料をご覧ください。

【引用】総務省『通信利用動向調査』の「図表5-2-1-1 情報通信端末の世帯保有率の推移」より
http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html

 

参考資料を見ると、2010年頃からグラフに登場した緑色の線がスマートフォンの世帯保有率を示します。

このことから、年々スマートフォンの利用者数は増加し、WEBサイトを制作する上でもスマートフォンベースでの構成を主軸として考える必要が出てきました

 

全体的に縦長のページ構成で、大きなビジュアルイメージを配置し、シンプルな情報を記載したページはシングルページと呼ばれることもあります。
WEB制作に携わっている担当者であれば、一度は目にした経験があるのではないでしょうか。

 

縦長で訴求したいサービスや事業内容がシンプルにまとめられているページの特徴を抑えて、事業で成果を出す勝ちパターンを学びましょう。

 

ファーストビューに魅力的なキャッチコピー

メインビジュアルとなる画像以上に、サービスや伝えたい内容を言い換える”キャッチコピー“を配置することが重要です。

 

利用者へサービスのメリットを伝える文言なのか、はたまた誰もみたことのない新サービスを体現する比喩となる文言なのか。

 

ファーストビューは3秒以内で相手に訴求できるほどシンプルなキャッチコピーが求められます。
ひとめ見ただけで閲覧者に伝えしたい特徴を強く印象づけるキャッチコピーを配置して、訪問者の興味を一気に惹きつける効果があるからです。

 

シングルページの構成で成功に導く最初のステップは、ファーストビューに載せるキャッチコピーであるのは間違いないでしょう。

 

ファーストビューにアクションボタンを置く理由

【引用:https://www.freee.co.jp/

 

キャッチコピーとともにファーストビューにはアクションボタンを配置しましょう。

 

アクションボタンとは、資料請求や問い合わせ、注文などそのページを通して閲覧者に促したい行動へ誘導するボタンのことをいいます。

 

ファーストビューで興味を持った人を最短ルートで目的の行動へ導くだけではありません。

 

ページを訪れた人には様々な条件の人がいることは皆さんご存知でしょう。
ページを閲覧する時の状況は初めて訪れた人もいれば、以前ページに訪れたことがある人など多種多様です。

もしかすると、既に検討を終えて早く申し込みや問い合わせをしたいと思って訪れる人もいるかも知れませんね。

 

ファーストビューにアクションボタンを配置することは、以前にサービスを知ってページを最後まで読んだ人が、再び検討のためにサイトへ訪れた時にスムーズに行動へ誘導できる効果もあります。

 

新規の人に最短で行動を促すだけでなくリピーター客にも重要なテクニックなので覚えておきましょう。

 

ストーリーの設計が重要

スマートフォン向けサイトで成功する縦型のページはサイトの流れを上手くデザインすることが重要です。

 

冒頭からページの最下部に向けて全体のストーリーを組み立てて、サイトの構成と顧客の心理が見事にシンクロした時がワンページの効果を最も発揮する瞬間となります。

 

ワンページ展開におけるストーリーの設計は、
「掴み」→「メリット」→「説得」→「裏付」→「アクション」

 

という流れで構成するとよいでしょう。

 

先ほどファーストビュー内にアクションを置くように伝えましたが、どうして最後のセクションもアクションで締める必要があるのか疑問に感じた方がいるかも知れません。

 

繰り返しになりますが、お客さまが購入したいと思うタイミングは人それぞれ。

 

ファーストビューの時点で一気に行動に移す訪問者もいれば、ページの最後までじっくり読み終え、他サービスと比較し吟味した上でアクションを起こす人もいます。

 

サイト訪問者が行動したいと欲求した時に一番最短ルートで行動の動線を用意することが重要なため、ページ全体が長すぎると感じた時はファーストビューと最後の締めだけでなく、途中で再び用意しておく方が親切でしょう。

 

中には、スマートフォン向けサイトでよく見る「TOPへ戻る」ボタンのように、ページの下部で固定表示された行動ボタンを表示しておくのも効果的な策となります。
ページ内の構成に関わらず、サイト訪問者の任意のタイミングで行動に移すことができるわけですから。

 

ストーリーの設計を疎かにしたままで制作を進めてしまうと全体の流れがうまく相手に伝わらず、効果の見込めないよくわからないサイトになってしまう可能性があります。

 

このストーリーの設計は、ユーザーストーリーとも呼ばれワンページ展開のサイト制作におけるフレームワークとして昨今WEB業界でも意識的に利用されている手法です。

 

ユーザーストーリーの手法とは

明確ではないふんわりとした目的を持つユーザーがサイトを訪れた時に、サイト側がユーザーの気持ちに共感し、抱える欲求に応え、行動を促す一連の動きを提供することが求められています。

 

この手法は心理学を応用したAIDAの法則という名前でも広まっています。
AIDAはそれぞれ、

  • Attention(注意)
  • Interest(興味)
  • Desire(欲求)
  • Action(行動)

 

の頭文字から名付けられ、この流れにそってワンページ展開のサイト構成を組んでいくと効果が高いでしょう。

 

また、実店舗への誘導を促したいサイトの場合であれば、上記の流れのDesireとActionの間にMemory(記憶)を追加した、「AIDMAの法則」と呼ばれています。

 

もうひとつ、ストーリー構成を考える手法として、「QUEST FORMULA」を紹介します。
これはセールスレターの世界で利用されている手法で、感情的に訴えかける表現をとる特徴がAIDMAの法則と違います。

 

人は感情に行動を左右され、感情で記憶する生き物。

なので、訴求したいものを利用者の気持ちに沿って訴えることでサイトの効果を高めることができます

 

メリットを利用者の目線で紹介する

キャッチコピーとメインビジュアルで掴んだ後は、そのサービスのメリットを紹介します。

メリットの説明方法にもテクニックが存在します。
単純に商品やサービスの特徴を羅列するだけではなく、この商品を使うと受けられる恩恵や体験を利用者の目線に立って紹介することが重要です。

 

ただし、余りにも特徴を訴求したいあまりに長すぎる文章は好ましくありません。
端的に文章をまとめ、メリットは3項目ほど、最大で5つ程度に決めて紹介しましょう。

 

動画の利用はサイトの読み込み速度に気をつけて

限られた時間内で効果的にメリットを訴求する手法として、動画を利用するのも一つの手です。
GIF動画等で実際の動きや特徴などを紹介すれば利用者もイメージがつきやすく、直感的にサービスを理解してもらえるでしょう。

 

ただし、動画は容量データが大きくなる傾向があるのでできるだけ短く内容をまとめファイル容量を抑えることを意識することです。

 

実際、過去に失敗した事例を紹介します。

制作したワンページ展開でビジュアルも構成も素晴らしいサイトが完成しました。

しかし品質にこだわるあまり、少し秒数の長い動画をサイトに置いたところ、ページの読み込み速度が遅延し、結ユーザーの離脱に繋がってしまい、結果として効果が弱まってしまったのです。

 

まとめ

スマートフォン向けのWEBサイトで、もはや主流となったワンページ。

 

これからWEBサイトの設計を考える時はスマートフォンベースで構成を考えることがとても重要です。
中でも、ワンページ構成はシンプルで小さな画面でも見やすく、最小限の情報と特徴的なキャッチコピー・イメージ画像でわかりやすく伝えるのに最適な手法だといえます。

 

また、サイト訪問者の感情や背景に教案し、ストーリーに沿って縦に進める構成がベストです。

 

何らかの悩みをぼんやりと、あるいは強く感じて訪れたターゲットに対して、

  • もう少し知りたいとページをスクロールさせるキャッチコピーで興味を与え(掴み)
  • 利用者にとって利点となる特徴をシンプルに伝え(メリット)
  • データやお客様の声などで納得感を高め(説得・裏付け)
  • クロージングとして最終的なアクションに結びつける(アクション)

サイト構成を考える時点で「掴み」→「メリット」→「説得」→「裏付」→「アクション」という流れを設計し尽くしておくことが大事といえるでしょう。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

※下記ボックスにコメントすると、あなたのタイムラインに本記事へのリンクが投稿されます。

この記事を書いた人

投稿者
中山 健

株式会社セルバ代表取締役。学生時代にアルバイトでWEB製作会社に入りプログラムを覚える。大学卒業後SIerにて金融システムの開発に携わった後、再びWEB業界へ。

WEB系のプログラム言語とサーバー構築、さらにはCOBOLも出来ます!最近ではシステム開発だけでなく、SEOやマネタイズなどのグロースハックや企画を担当する事が多いです。

Twitter
Facebook

セルバではWEBシステム開発からスマートフォンアプリ開発、デザイン、企画/マーケティングまでいかにコストを掛けず、成果を高めるのか研究し実践しています。企業、店舗のWEBシステム/アプリ開発のお手伝いさせていただいておりますので「WEBシステムの開発」「アプリ開発を依頼したい」「既存サイトのアプリ化」「サイト/アプリからの集客を増やしたい」など新規開発やリニューアルにご興味のある方は、ご相談だけでも構いませんのでお気軽にお問い合わせください。

ご相談・お見積
ページトップ