【2019年版】上位表示しやすいモバイルファーストのサイトデザインを解説

2019年7月1日からGoogleが新しいサイトについてはモバイルファーストインデックスがデフォルトになりました。

今後はスマホ対応が当然視され、完璧にスマホ対応したサイト同士の戦いになるということですね。

参考：【重要】Googleが新しいサイト全てに対して７月からモバイルファーストインデックスを無差別に適用すると発表！｜モバイル時代のSEO情報ブログ

SEOアフィリエイトをやっている方はもちろんレスポンシブデザイン対応のwebサイトを運営していると思いますが、今のwebサイトの状態で本当に大丈夫なのでしょうか？

心配性のワタシは全日本SEO協会の「googleが高く評価するモバイルファーストサイト設計術」セミナーを受けてきましたよ。

日本のwebサイトのトレンドやデザインの傾向は米国の2～3年遅れと揶揄されることがよくありますよね。

全日本SEO協会のセミナーでは、米国のwebサイトで各業界のトップクラスの集客力を持つサイトを例に

「今後上位表示しやすいモバイルサイトとはどんな設計になるのか？」

詳しく解説していただきました。

ここではモバイルファーストサイト設計術セミナーで学べたことや、今アフィリエイトサイトでやっておかなければならないスマホ向けのサイトデザインや記事の書き方を解説していこうと思います。

モバイル対応しているけど、本当に今の状態で大丈夫なのか不安なアフィリエイターや企業のSEO担当者の方はぜひ読んでみてください。

この動画は全日本SEO協会のYouTubeチャンネルで視聴できる「Googleで上位表示しやすいモバイルサイトのトップページとは？」です。
モバイルファーストサイト設計術セミナーの一部が視聴できるのでぜひ視聴してみましょう。

モバイルファーストサイト設計術セミナーで学べたこと

2019年7月12日に行われたモバイルファーストサイト設計術セミナーの講義内容は下記のとおりです。

・「Google UX Playbooks」のインパクト
・「Google UX Playbooks」から読み解く今Googleが高く評価するモバイルサイトとは？
・トップページのファーストビューには何を配置すれば検索順位が上がるのか？
・スマートフォンユーザーが好むランディングページの作り方
・業界ごとのサイトデザインの注意ポイント（医療健康・不動産・旅行・自動車・金融・ニュースサイト・リスト取得用のサイト）
・サーチコンソールのモバイルユーザビリティを見てモバイルサイトを改善する方法
・サイト軽量化の重要テクニック

参考：モバイルファーストサイト設計術セミナー

現在は全日本SEO協会の公式サイトからオンライン講座で有料（税込8,000円）で受講できるようになっております。

Googleが高く評価するモバイルファーストサイト設計術セミナー

googleはモバイルサイトで以下の点を改善するよう公式発表しています。

１．トップページ・ランディングページ
２．メニューとナビゲーション
３．サイト内検索
４．メインページ
５．行動喚起（CTA）
６．フォーム最適化

全日本SEO協会では、米国の医療健康・不動産・旅行・自動車・金融・ニュースなどのジャンルでトップクラスのサイトがこの6つの主要エリアを、どのように設計しているのか詳しく解説いただきました。

ワタシと同じようにアフィリエイトサイトを運用している方や企業のオウンドメディアを管理している方なら「ニュースサイト」の6つの主要エリアの改善方法に興味があるのではないでしょうか。

ここですべての業界向けに解説できるわけがないので、少し絞って説明していきましょう。

Googleが勧めるモバイルファーストサイトとは？

結論から先に言うと、Googleは徹底的にユーザビリティを高めた「スマホアプリ」のようなモバイルサイトの設計を勧めているようです。

つまり

・わかりやすい（操作しやすい）
・動作が軽い（待ち時間が少ない）
・目的の情報にすぐにたどり着ける

以上の３つをおさえたモバイルサイトを上位表示するようになってきています。

ではスマホアプリとスマホ用サイトの違いとは何でしょうか？

ざっくりと表にまとめてみました。

アプリとスマホ用サイトの違い

競争が激しい英語圏の検索結果で上位表示しているモバイルサイトは、サイトのファーストビューでユーザーが求めている情報を取得しやすい設計になっています。

それに対し、日本語のサイトはファーストビューの大部分に売り込み色の強いキャッチコピーや広告が占められていることが多く、とにかく文章が多い傾向があります。

クリック（タップ）できる箇所が多すぎて、自分が望んでいるボタンを押しても、誤って隣のボタンを押してしまいやすいです。

海外サイトは欧米人のデカい指に合わせているためか？ボタンが大きく、数も限られていて押しやすくなっています。

むりやり表示するのはNG！とにかく使いやすい便利なサイトに

全日本SEO協会のセミナーではモバイルサイトのファーストビューにカルーセル（スライダー）を使わないほうが良い。

という解説がありました。

例えばWordPressのテーマでもサイトのトップページのファーストビューに画像やバナーがスライドショーのように入れ替わるデザインがあります。

カルーセルは最初のバナーのクリック率は高いですが、2枚目、3枚目のクリック率はとても低くなっており、海外ではカルーセルをやめるサイトが増えているようです。

スマホのサイトを閲覧するユーザーは常に自分でweb表示のコントロールをしたがり、無理やり表示される動きのあるバナーや画像にはストレスを感じやすいそうです。

ストレスを与えるサイトはユーザーから直帰や離脱される可能性が高くなり、SEOにマイナスの影響となるようです。

そのため、カルーセルをどうしても使いたい場合や、カルーセルをやめれない事情がある場合は

・自動から手動のカルーセルに切り替える
・切り替わる画像の枚数を減らす
・切り替わるスピードを遅くする

といった設定変更を行い、ユーザーにストレスを与えないようにするのが理想的です。

カルーセルのメリット・デメリットやガイドラインについては以下のページも分かりやすいので参考に読んでみてください。

参考：ホームーページにカルーセルを配置する利点と欠点、デザインに役立つ8つのガイドライン｜Adobe

海外のトップクラスモバイルサイトと日本のサイト比較

海外のホテル予約サイトで有名なのが「trivago」です。

元々はドイツのエンジニアによって作られたサービスのようですが、現在は米国の旅行会社のエクスペディアグループに買収されたようですね。

最近テレビCMも多いので日本国内でも広く認知されるようになってきました。

これと比較するように、国内サイトの「じゃらん」を並べてみましたよ。

trivagoはアクセスするとgoogle検索画面のようなデザインになっており、非常にシンプル！

行きたい場所を入力すると次に宿泊の日程を選択できるようになっています。

それに対してじゃらんでは、まずメニューボタンがたくさん並んでおり選択肢が多いです。

宿泊先をさっさと予約したい人にとっては、じゃらんはなんだか迷うナビゲーションです。

ちなみにtrivagoの海外サイトはtrivago.comですが、日本国内でスマホからtrivago.comにアクセスすると日本語対応のtrivago.jpにリダイレクトされます。

どちらのサイトもアプリのインストールやスマホのホーム画面に保存するのを推していますが、trivagoのほうが押しが強いです。

ニュースサイトのモバイルファースト最適化のポイント

次に海外ニュースサイトと国内のニュースサイトを比較してみましょう。

アフィリエイトサイトはデザインと運用方法がニュースサイトのようになることが多いので、海外のニュースサイトの研究はアフィリエイターにも重要であると言えます。

海外のニュースサイトでトップクラスと言えるのがHUFFPOSTです。

これに対して国内のニュースサイトで取り上げたのが朝日新聞デジタルです。

全日本SEO協会の動画でも解説がありましたが、国内のニュースサイトでは日経電子版がクオリティが高いのでHUFFPOSTと競いあわせたいところです。

が、違いが良く分かるように朝日新聞デジタルを用いました。

HUFFPOSTも本家サイトのhuffpost.comにアクセスしようとするとhuffpost.jp（日本語サイト）にリダイレクトされます。

また、海外ニュースサイトはサムネイルが横幅いっぱいにあり、縦にニュースがたくさん並びます。

それに対し、国内のニュースサイトはサムネイルとタイトルが横並びのデザインが多いです。

そしてどちらもバナー広告が目立つところに表示されていますが、国内のサイトは広告エリアの範囲が広くて、テキストを読みにくくしている傾向があります。

ちなみにワタシは記事上部のアドセンス広告の使用を一切やめました。

行動喚起用のLPでモバイルファースト最適化のポイント

ここで例に挙げたのは海外の車探しサイトと国内の車探しサイトの比較です。

車の買取サイトはユーザーに、まずは欲しい車や売りたい車を入力してもらう設計になっています。

この両者のサイトを比較すると、海外の車探しサイト「CARGURUS」はファーストビューに「一流のディーラーからお得な情報を探す」と、非常に短く端的な言葉でユーザーに行動を促しています。

それに対してガリバーのキャッチコピーはとっても長くなっています。

「中古車買取台数No.1 圧倒的な品揃え 非公開車両もあります！ 毎日500台が続々入荷中！」

ちょっと長ったらしいですよね。

それに国内のサイトやランディングページは文字を画像で表示していることが多いです。

文字を画像にすることは目立つデザインにすることができますが、スマホ表示にすると字が読みにくかったり、外国人はまったく読めなかったりとデメリットも多いです。

また画像は表示するまで時間がかかることもあります。

海外のサイトは短文のテキストで表示しているため、自動翻訳も可能です。

世界中のユーザーがアクセスしても、とりあえず読み進めることが出来るようになっています。

ワタシがオススメするアフィリサイトのスマホ対応最適化ポイント

全日本SEO協会で紹介していただいた海外のトップクラスのサイトと国産サイトを比較するだけでも色んなことが見えてきました。

そこでgoogleが求めている最新のスマホサイトの改善点をまとめてみると以下になります。

・表示スピードをなるべく速くする
・ユーザーがすぐに目的の情報にたどり着けるようにする
・片手でも使いやすいデザインにする

表示速度を速くする

モバイルファーストインデックス以降はスマホの表示速度がとても重視されるようになってきています。

アプリ並みに待ち時間が少なく快適に使えるサイトにするには、動的サイトから静的サイトにするのが一番良いです。

WordPressは動的サイトなのでかなり表示が遅く、イライラして直帰されることもあるでしょう。

ワタシが運営しているアフィリサイトもWordPressサイトは軒並みPageSpeed Insightsのスコアが低いです。

これに対し、アフィリエイトに最適化した静的サイトをカンタンに作れるサイト作成ツールのSIRIUSはPageSpeed Insightsで高いスコアを叩き出します。

参考：上位版がオススメ！次世代型サイト作成システム「SIRIUS」

WordPressである必要がないサイトは静的サイトで構築するほうがダンゼン有利です。

またWordPressはテーマによって表示速度が大きく変わるので、自分でテーマをカスタマイズできない方は、なるべく表示速度が速いSEOに最適化したテーマを探して使うのが良いです。

ちなみにアフィリエイターに人気のWordPressの無料テーマ「Cocoon」はかなり表示速度が速く、PageSpeed Insightsでも良いスコアを出します。

WordPressオススメテーマ：Cocoon

このようなテーマを使って必要以上にカスタマイズせず、シンプルなデザインで運営するのがオススメです。

デザインよりもアクセス数や売り上げの方が大事ですからねえ。

必要以上に文字を画像にしたりせず、行動喚起の言葉はなるべく短くシンプルに。

テキストリンクはなるべく避けてスマホ向けにボタンリンクにするか、ボタンっぽく押しやすいリンクにするのが良いでしょう。

こんな感じのリンク

こんな感じのリンク

CSSを利用したボタンリンクやリンク枠を使って画像を極力減らしつつ、クリック（タップ）されやすくデザインするのも重要だと思います。

ユーザーがすぐに目的の情報にたどり着けるようにする

国内のウェブサイトは「見せたいもの」や「売りたいもの」を前面に押し出した新聞の折り込みチラシのようなサイトがまだまだ多く、そのようなサイトからバンバン検索圏外に飛ばされている傾向があります。

ユーザー体験を高めるために、ナビゲーションメニューをもう一度考え直しましょう。

また記事をアップしたら、必ずスマホでチェックするのもオススメです。

Google Chromeにはスマホ表示をチェックできる機能がありますが、実際にスマホで確認するとPCでは分からなかった読みにくさや使いにくさ、誤字脱字、違和感のある句読点など発見できることがありますよ。

片手でも使いやすいデザインにする

スマホは片手で操作することが多く、PCよりも文字の手入力やコピペが断然面倒です。

片手でサイトを閲覧していることを前提にして、押してほしいボタンはなるべく指が届きやすい位置に設置するのがポイントです。

また入力の手間を省くために、通販サイトの場合はSNSログインを用意するといったことも検討する必要があるでしょう。

上位表示しやすいモバイルファーストのサイトデザインを解説 まとめ

こんな感じです！

昨年から全日本SEO協会のセミナーを受け続けることで、スマホで上位表示できるサイト設計が良く分かり、かなり改善することが出来ています。

参考：2019年6月アプデ以降、サイト滞在時間が短いサイトでも上位表示するようになった？

SEOで上位表示するのは今後もますます難しくなってきているので、これからもネットビジネスで売り上げを確保していきたい方はぜひSEO関連のセミナーを受けに行き、自分に投資しておきましょう！

ワタシもまたセミナー行きますので、会場で見かけたらぜひお声がけくださいねー！
ではでは。