SEOに強いメディアサイトになるためにデザインでできる3つのこと ファーストビュー編
はじめに
こんにちは、Pairs事業部メディアチームデザイナーのジェニーです。
メディアチームではPairsコラムのSEOを強化するためにデザイン面の改善を行い、先日ついにフルリニューアルしたサイト（スマホ版）をリリースしました。
今回のリニューアルで特に重きを置いていた課題は、「検索エンジン経由で流入したユーザーのUXを高めることで、トラフィックを増やす」というものです。
目次
- 大課題：ファーストビューで、コンテンツを把握できない
- 要因1：コンテンツに関係のないものが多く表示されてる
解決策：CTR・CVRが低くCV数が少ないバナーを削除、関連リンクを減らす - 要因２：ファーストビューで伝えたいコンテンツが不明確だった
解決策：ディスクリプションを配置・ユーザーにとって重要なコンテンツの占有スペースを広げた - 要因３：ユーザーの興味を引くデザインになってない
解決策：ビジュアルで直感的に判断できる要素を増やす - まとめ
大課題：ファーストビューで、コンテンツを把握できない
メディアサイトは、当然ながらユーザーのニーズに沿った記事を提供しなければ読んでもらうことができません。
そのため、ファーストビューでユーザーがコンテンツの中身を把握できるとが何より重要です。ところが、リニューアル前のPairsコラムは、ファーストビューで記事がどんな内容であるか判断し辛い状態でした。
その課題を解決するために、要因を3点に絞り、解決していきました！
要因１：コンテンツに関係のないものが多く表示されてる
リニューアルを行うまで、記事のファーストビューには多くのテキストリンクやバナーなどが占めており、記事に関するコンテンツが全く見えていませんでした。
解決策：CTR・CVRが低くCV数が少ないバナーを削除、関連リンクを減らす
改善前に、まず、各リンクやバナーのCTRとCVRを抽出し、その結果数値から今あるリンクやバナーの内どれを残すべきかの優先順位付けを行い、CTR・CVRが低くCV数が少ないバナーを削除 / 使われていなかった関連リンクも減らしていきました。
要因２：ファーストビューで伝えたいコンテンツが不明確だった
上記の通り、コンテンツに関係ないものが占めていた上に、ファーストビューで伝えたいコンテンツも不明確でした。例えば、アイキャッチ画像が小さく、タイトルの大きさも中途半端でメリハリがなくなってしまっていたため、ユーザーがどこから記事を読めばいいのか非常にわかりづらい状態でした。
解決策：ディスクリプションを配置・ユーザーにとって重要なコンテンツの占有スペースを広げた
解決策として、記事タイトルの下にディスクリプションを入れました。
7行程度のディスクリプションを入れることで、記事の内容が一目で伝わるようになりました。また、アイキャッチ画像を画面の上部に大きく表示させたり、タイトルを大きくしたりなど、コンテンツが目立つようにスペースを使い、メリハリのあるデザインに改善しました。
要因３：ユーザーの興味を引くデザインになってない
表示されている情報やリンクが、全てテキストのみになっていて、一見して「文字が多すぎる…」という印象をユーザーに与えてしまい、記事を読む気が失せてしまうデザインになっていました。
解決策：ビジュアルで直感的に判断できる要素を増やす
人間は受け取る情報の8割を視覚から得ていると言われるほどビジュアルで判断する動物であるため、興味を引くためにはやはりビジュアルを強化しなければなりません。もともとテキストだけだったものをアイコンなどを用いた表現に変更しました。カテゴリごとに色を目立たせアイコンをつけたり、view数の表示箇所を目のアイコンに変更したりなど、文字を減らし、ビジュアルを用いて直感的に伝わるようにしました。テキストが減ったことでファーストビュー画面がさらに整理され、ファーストビューで受け取る情報量がシンプルになりました。
更に、Pairsコラムは恋愛に関する情報を配信するメディアなので、柔らかいイメージをユーザーに与えるために、ページ全体の色味やボタンなどのオブジェクト要素も、世界観を統一したものに刷新しました。メインのカラーを水色にしたり、オブジェクト要素を丸味のある形状に統一し、不足していたhタグなどの要素も増やしました。恋愛をテーマとした情報を扱うメディアではありますが、女性寄りのデザインになりすぎないよう最終調整をし、男女ともに恋愛コラムを楽しんでもらえるようなデザインに仕上げました。
まとめ
メディアサイトは、どのサイトもSEOを強化して検索ランキング上位になるように工夫を凝らしていますし、そこには様々なテクニックのようなものも存在します。しかしながら、SEOの真髄はユーザー体験を高めることにあります。それを実現させるためには、デザイナーとして常にユーザーの視点でデザインを考えなければいけないと、今回のリニューアルを通して改めて痛感しました。ページの美しさ、コンテンツの要旨をすぐに把握できるかどうか、読みたくなるかどうか、快適な操作ができるかどうかなど、すべての要素をユーザーの視点で考えながら、これからも愛されるサイトを目指していきたいと思います！
