離脱させないHPデザイン スマホ用とPC用 何を変えるべき?

スマホファーストとは言われているが、実際にはスマホ用とパソコン用のHPでは、デザインやコンテンツなど何をどう変えるべきなのか。BtoB向けか、BtoC向けかによってもHP戦略は異なるが、運用の見直しにお役立て頂きたい。(協力:女性向けホームページ制作のaiwave)

<合わせて読みたい記事>
女性向けホームページ制作・デザインの戦略ヒント11~女性マーケティング視点で考察~
女性向けホームページ最近のデザイン傾向7

スマホファーストとは?

スマホファーストとは一般的にMFI(モバイルファーストインデックス)と呼ばれ、スマホ用のホームページ評価を基準とするGoogleの検索仕様のことを指す。今までのGoogle検索の結果はパソコン用HPの評価に基づいていたが、今後はスマホ用HPの評価が検索順位に影響するとされている。

現在は、Googleのクロール、インデックス登録、ランキングのシステムは主にデスクトップ版のコンテンツを見ているが、今後はスマホ用 Googlebot によるクロール回数が大幅に増え、検索結果に表示されるスニペットや Googleのキャッシュページ内のコンテンツにはモバイル版のページが使用されるようになる、とGoogleが今年正式に発表した。そのため「MFIが大事」と言われている。

レスポンシブウェブデザインなど、デスクトップ版と同等のコンテンツ情報を持っているサイトにはMFIがさほど影響無いといわれている
上記のような情報は、Googleブログで随時発表されているので定期的にチェックしておこう。

スマホ閲覧とパソコン閲覧の割合

スマホユーザーが増えていることは理解していても、では実際の割合はどれくらいなのか。全体ではスマホ閲覧は60~70%と言われているが、BtoBに関してはスマホ比率は低い傾向にあり10~20%、学生や主婦層を中心としたBtoCの場合はスマホ閲覧が90%と、業種やターゲットによってスマホ閲覧とパソコン閲覧の割合は大きく変化する(aiwave調べ)。

デザインは何を違えるべきか?

そのため、HP制作では業種やターゲットなどを考慮した上で戦略を変えるのが望ましい。ただ、いずれにしろ共通しているのは「スマホはパッと」「パソコンはじっくりと」といった大まかな役割を担っていることだ。

スマホは「気になる」→「検索」→「見てみる」という流れで活用されるため、短時間でパっと閲覧したい時に使われるが、パソコンはじっくり調べたい人や、スマホでは見えづらいほど情報の多いサイト閲覧、BtoBのサイト閲覧に使われる傾向にある。

パソコン用HPは目線の導線を意識するが、スマホ用HPは持ち手や指で触るボタン、メニューの処理など、ユーザビリティへの意識が重要になってくる。女性向けホームページ制作のaiwaveでは、ユーザーによってどの場所にボタンを設置するか、(右利きが多いことを意識して)右上のアクションボタンを何にするか、ボタンのサイズは何pt(ポイント)が適正かを制作ガイドラインで設定する。

例えば、同社ではスマホのトップ画像サイズを、ユーザー数が多かったiPhone 4・5を基準に最小320ptとして設定している。企業秘密のため公開は不可とのことだが、同社ではスマホ用HPのガイドラインはかなりのボリュームだという。

スマホ用は“ストレス軽減”に重きを置こう

誤操作によるユーザーのストレスはアクションに影響してしまうため、ストレスを軽減するためのサイズ調整も年々変化する。現在同社では、iPhone、Androidの公式UI設計ガイドラインで定められているピクセル数を基準にボタンの最小サイズを44pt×44pt以上としている。

デザインの良し悪しは人それぞれ、女性でも年齢や目的に応じて好き嫌いは変わるが、スマホは手に持って使う端末のため、HP閲覧に触覚的なストレスを感じさせないよう注意が必要だ。誤操作が起こりやすかったり文字や画像が小さかったりすると、一般的にユーザーは離脱してしまうからだ。

情報量はそぎ落とすのではなく、見せ方の工夫が必要

「パソコン用デザインをスマホ用に反映させる際、ある程度情報量をそぎ落とす必要がある」と認識しているマーケターは多いかもしれないが、同社によると情報量をそぎ落とすことはお勧めできないと言う。

MFIにおいても情報量は評価される重要な要素のため、同じコンテンツ・情報量でサイトをモバイル化することが推奨される。情報量を減らすのではなく、伝える情報を精査する工夫に力をいれるべきだろう。

例えば、文字の多いコンテンツではテキスト数を大幅にカットするのではなく、アコーディオンメニューを活用して一覧化するなど、見せ方を工夫したい。Wikipediaのモバイルサイトが分かりやすい事例だ。特にモバイル閲覧ユーザーが多いHPの場合は、MFIを重視したデザイン・設計になっているか、今一度確認・再考してみよう。

【協力】
aiwave:女性消費者に訴求したい企業のための、女性チームによるWebサイト制作ブランド。ターゲットに対してクリティカルにアプローチするため、企画から運用まで一社完結でフルサポートが可能。

PR
制作前段階の企画・戦略立案も行います。ウーマンズ読者様には、ライバルサイト調査や既存サイトの活用診断を無料にてご提供します。