検索上位に表示されるスマホECサイトの作り方

目次

まずは、フォントサイズから気を付けましょう。Googleではスマホにフレンドリーなフォントサイズとして16pxを推奨しています。16pxは割と大きなテキストとなりますが、注釈や備考などあまり目立たせたくないテキストを配置したい場合には、最低でも12pxにとどめておいて、フォントカラーを少しグレーにすると本文との差別化ができます。

スマホの狭い画面をテキストで埋め尽くしてしまうと、ユーザーが読み飛ばしてしまい、離脱の原因にもなります。フォントサイズと合わせて、段落ごとに余白を空けるなどスマホでも読みやすくすることもSEO対策になります。

スマホでは小さい画面を指で操作することになるため、クリック要素同士が近かったりボタンが小さかったりすると、意図していないところをタップしてしまい、ユーザビリティに支障が出ます。ボタンを配置する際は、Googleのガイドラインで推奨している128×72px以上のサイズ作成し、16px以上離すようにしましょう。また、PCと違いマウスを重ねた時の動きや変化をスマホではつけられないので、「進む」ではなく「購入手続きに進む」といった具体的に動作が分かる表現にしたり、矢印や影をつけて一目でボタンとわかる工夫も必要です。

ボタンと同じく押しやすさやリンクとしての認識しやすさを意識しましょう。リンクテキストはボタン以上に押しにくい要素なので、ボタンの近くに配置する場合やテキストリンクが羅列する場合は十分に余白を開けることが必須です。また、分かりやすいフォントカラーとボーダーラインでリンクとして目につきやすくしておくとベストです。

ECサイトには欠かせない入力フォームですが、実は入力フォームで入力を完了する前に途中で離脱してしまうユーザーの割合は81％にも上るそうです。そんな中、HubSpotの検証によると、1カラムのフォームを2カラムにしたところCV率が57%も向上したという結果も出ています。これは、ファーストビューでフォーム全体が把握しやすくなり、煩わしさやたくさんの情報を記入する不安が軽減されたことが理由のようです。入力項目が多いフォームの場合は、この検証のように２カラムにしたり、例えば入力画面を２〜３ページに分割し入力する負担を分散させることも、ユーザーの離脱防止に繋がりSEO対策としても有効です。その場合はステップ画像を配置することも忘れないでください。
参考：https://blog.hubspot.jp/disproving-best-practices-the-one-vs.-two-column-form-test

昔から使用されてきた、FlashやJava アプレット、Silverlightなどの古い技術は、スマホブラウザではもう利用できません。スマホ対応に伴いこちらのツールとはお別れしてください。その代わり、ちょっとした短いアニメーションであればGif動画などに変化して配置することもできます。

これはデザインポイントではありませんが、動画などのデータ容量も注意していただきたいです。商品の説明やPRなどで動画を使用されているサイトもあるかと思いますが、サイズの大きいデータはスマホでの読み込みにとても時間がかかってしまいます。コンテンツの表示速度の低下は今後検索順位に大きく影響する課題です。WebM形式に変換してvideoタグで配信するか、もしくはYoutubeにアップロードしてサイトに埋め込む方法を採用してください。

PCで見慣れた横長のメインビジュアルにテキストを含む場合、スマホの画面で幅が縮小され、文字が読めないほど小さくなっているサイトを見かけます。UIデザイン的にはもちろんアウトですし、折角の商品への訴求が無駄になってしまいます。PCの画像とは別にスマホ用の画像を設定しておくか、画像の縦横比率をモバイルファーストに合わせていくこともオススメです。
※MFI/SEOとは関係が薄い項目です。

従来のWebデザインでは、見出しやボタンを装飾するとなるとどうしても画像として装飾パーツを配置しなければなりませんでした。しかし、近年CSS3は続々と便利な仕様が増え、簡単な装飾であればスタイルで対応することができるようになりました。先ほどもお話ししましたが、コンテンツの表示速度も今後検索順位に大きく影響していきます。可能な範囲でCSSでの装飾を採用し、少しでも画像データを減らしていくこともSEO対策に繋がります。