レスポンシブWebデザインとLPOデザイン

2244
レスポンシブWebデザインのホームページ作成

今月後半2つ目のレスポンシブWebデザインで作成したホームページを公開しましたので、2つのレスポンシブWebデザインとLPOに関してご案内したいと思います。

改めて簡単に説明すると【LPO】とはランディングページ最適化、到達ページ最適化と訳すことができるのですが、【ランディングページ=縦長のセールスページ】といった解釈は一切行なっていませんので予め断っておきます。

後で紹介するホームページもそうですが、私は検索エンジンからのLPOを意識して、TOPページのレイアウトデザインとサブキーワード設計を行い、TOPページからのLPOとして主要ページのレイアウトデザインを行ないます。

ホームページに訪れたユーザーは、アクセス後3秒足らずでそのホームページの閲覧を続けるかどうかを判断していると言うことを参考にLPOデザインを考えると、それはファーストビュー(アクセスされ始めに映し出される範囲。スクロールせずに閲覧することが出来る範囲)で決まるとして遠くはないでしょう。

レスポンシブWebデザインでホームページを作成すると、少なくても冒頭のイメージのような4通りのファーストンビューでそれぞれの画面スペースが持つ特徴と検索ユーザーの状況、アクセスしているシーンを想定し設計する必要があります。

特に重要なのはレスポンシブWebデザインにはモバイルファースト(モバイル端末からのアクセスユーザーを優先させる)という視点からレイアウトをデザインしていくのですが、掲載できる情報量が限られているため、そのほとんどはテキストではなくイメージ(画像)で表現させることが望まれます。

ユーザーはまず見て、読むかどうかを決める

しかし、キーワードによってはモバイルで頻繁に検索されるキーワードとそうでないキーワードがあり、ホームページにブログを設置し頻繁に更新する場合なら、検索からではなくFacebookやTwitterに投稿したブログの更新通知から各記事にアクセスされるケースの方が多くなると考えています。またこうなると必要な対策は、その記事からどうやってページの移動おこさせ、訴求ページに促すかというLPO視点が必要ですので次回に譲ります。

また、スマートフォンユーザーを観察していると、ファーストビューからスクロールまでの時間が極端に短いという傾向があるように思われます。このことも交え、スマートフォンにおけるSEO的なLPOはあまり重きを置いていません。そのため施策と設計が必要な対象ユーザーは、検索ユーザーに絞り、まずは、TOPページにアクセスするユーザーに着目してホームページの構成とレイアウトデザインを行ないます。

検索シーンは、デスクトップパソコン、安定したシェアを誇る11〜15インチレベルのノートパソコン。そして普及著しいタブレットPCの3タイプで比較的検索ユーザーは落ち着いた状態でネットサーフを行なっていると想定しています。

冒頭で紹介したダイエット 食事に特化した情報を公開しているレスポンシブWebデザイン4つのファーストビューと、ここで紹介した犬専用のサプリメント、特に 犬 下痢 に関しては様々な視点から予防と対応の方法を掲載したホームページの2種類を見て頂くと分かる通り、タブレットビューではデスクトップパソコン(モニタータイプ)に継ぎ比較的多くの情報を一度に掲載することができますが、ノートブックに限っては、縦幅がほぼ半分になっていることから、情報量は激減してしまいます。

ヘッダー画像の幅を低く設定すればそれだけ多くの情報を掲載できると言う意見もありますが、視覚的に情報を飛び込まさせるために一定幅以上のヘッダー画像を採用するようにしています。

また、TOPページで狙うSEOキーワードがビックキーワードになればなるほど、もしくはSEO難易度は低くてもその言葉の意味合いが抽象的になればなるほど、その単語に続く2つ目、または3つ目のキーワードが多岐にわたります。

TOPページの目的は、ユーザーが検索する際に顕在化しなかった次の1語を提示させることであり、このことがLPOに繋がります。そのために、ノートブックPCのレイアウト幅内には、スライドを用いて3〜5種類以内の2語目3語目を提示するか動画で一気にメッセージを送り、該当サイトの歩き方を指示するかが求められます。

レスポンシブWebデザインでホームページを作る場合、そのほとんどでスライドを採用するのはこのためです。動画もスライドに組み込むことは可能ですが、コスト面とデータ容量、表示速度の面から双方を採用するのは控えています。(動画はスクロールした後にあるといいかと思います)

もちろん、ファーストビューに掲載させるコンテンツはホームページの運営方針などにも左右されるのでこの限りではありませんが、情報サイト色が強いホームページをレスポンシブWebデザインで作成する場合は、以上の視点でTOPページレイアウトをデザインすると良いでしょう。

レスポンシブWebデザインのホームページ作成やネット集客、SEO、LPOに関するご相談は
下記よりお問い合わせください。

問い合わせ

ads by Google