【反面教師】「暮らしーの」に学ぶ見やすいブログサイトの作り方

今や星の数ほど存在するWebメディア。

ブログ形式のニュースサイトや単一ジャンルに特化したオンラインマガジンなど、呼び方は様々ですがブログのように記事単位に情報がまとめられ、それを便利に閲覧できることを念頭に設計されています。

個人で運営して運営者の個性を出していればブログと呼ばれ、そうでなければメディアとかオンラインマガジンとかポータルとかニュースサイトとか呼ばれます。

そんなサイトのひとつに「暮らし～の」というサイトがあります。

暮らし〜の | アウトドア暮らしのウェブマガジン暮らし～の[クラシーノ]

サブタイトルには「アウトドア暮らしのウェブマガジン」となっていることからわかる通り、アウトドア関連の情報を発信しています。

私はアウトドアの趣味が多いものですから、何かと検索するときに「暮らし～の」の記事が検索結果に表示されます。

しかし、これがめちゃくちゃ見づらい。特にスマホ。

世の中に見づらいサイトは数あれど、ここまで微妙な気分になるサイトはありません。

インターネット黎明期に作られたようなサイトでさえ気にせず情報源にする僕が、このサイトは見たくないなと名前を覚えるほどですからよっぽどです。

批判や悪意など、「暮らし～の」に対する特別な意図は全くありません。

単純に日常生活を送る上で、情報収集のために検索を繰り返した結果として、私個人の感想として「見づらいサイト」として認識されるに至りました。

もしかしたらデザインのプロやサイト制作のプロからすると良いサイトなのかもしれませんが、僕個人的にはそうは思えないのです。

そうした経緯で、今回は反面教師として利用させて頂くに至りました。

当サイトは趣味の情報を発信するだけの個人ブログです。

デザインも見ての通り何も考えられていない素気ないものです。適当なテンプレートを入れて、色なんかを少しいじった程度です。

ブログを始めて数年。いい加減ちょっとはデザインを考えてみようかということで、「暮らし～の」の見づらい点をまとめながら、それを反面教師にしながら改善していこうと思い立ったわけです。

１．ヘッダーを固定表示する

「暮らし～の」では、画面をスクロールするとヘッダーが追従してフロート表示されます。

下スクロールで隠れますが、少しでも上スクロールすると表示されます。

これには多くの不快要素が潜んでいます。

• ヘッダーが記事を覆い隠して邪魔
• ヘッダーの大きすぎる
• 出番のないタイトルロゴが主張しすぎ
• 背景が透過ですらなく白
• これだけ邪魔なのにあんまりメリットがない

とにかく不必要にでかいヘッダーが記事を大きく覆い隠すので邪魔です。

後述する理由で、「暮らし～の」を見ているとよくスクロールしすぎて戻ることが多いので、なおさら邪魔に感じます。

タイトルロゴはタップすることでトップページに遷移できますが、その機能だけのためにここまで本文を覆い隠す必要があるでしょうか？

もう少しやりようはないのでしょうか？

また、トップページへ行きたがるユーザーが居たとして、加えて彼らがタイトルロゴをタップすればトップページに遷移できるだろう、という推測ができる程度のリテラシーを持っていたとします。

その時、画面の一番上までスクロールすることを苦にするでしょうか？

この手のサイトで「わざわざ」トップページに足を運びたいという人なら、画面の一番上までスクロールすることをそれほど苦にしないはずです。

また、それにしたって「一番上に行く」ためのリンクを控えめにフロート表示させておけば良いはずです。

検索とメニューボタンは表示されていても良いと思いますが、それにしても背景は透過して控えめに表示していれば十分だと思います。

２．フッターを固定表示する

フッターには、常に広告が固定表示されます。

しかもこれもヘッダー同様に高さがあります。

ヘッダーとフッターで画面の四分の一程度を隠してしまっているのではないでしょうか。

いくらなんでもやりすぎでしょう。

しかも、便利機能でも何でもなくフッターは常に広告です。

せめて広告を隠すボタンが表示されていれば良いですが、それすらありません。

３．写真素材はInstagramを使う

写真にはなぜがInstagramが利用されています。

もしかすると有償の写真素材やライセンスなどの面倒ごとを回避する手段なのかもしれません。

Instagramの写真を使うサイトはたまに見かけますが、100%不便です。

まずは下のスクリーンショットを見てみてください。

Instagramからの引用画像は縦横比はスマホの画面にあっておらず、Instagramの余計なUIに囲まれていて、スマホではほぼ一画面分を占有してしまいます。

写真は必ずしも本文に合っているとは言えず、記事自体の信頼感や説得力も損なわれます。

写真の質の良し悪しの話ではありません。

自前で用意した写真を使っていれば、例え写真の腕前や画質が悪かろうとも、記事の内容に沿っており、実体験をもとにして書かれた記事なんだなと説得力を感じられます。

これがプロが撮影した構図や品質の高い写真ともなれば、高い信頼感を得られるでしょう。

しかし、Instagramの写真を使っているとそのどちらも得られません。

「暮らし～の」では、これに加えて先述した通りヘッダーとフッターがあって、もう写真が出てくるだけで画面がパンパンです。

４．記事をページ分けする・見づらいページャー

昔のWebサイトには、よく記事を複数ページに分割する手法がとられました。

おそらくですが、インターネットの通信速度が遅かった時代に、画像や表示するデータが増えて読み込みが遅くなることを避けるために採用された手法でしょう。

現在では何の意味もなく、不便なだけです。

サイトによっては明らかなPVの水増しや広告表示回数稼ぎのためにページ分けをしているケースも見られます。

もし文字数が数万文字を優に超える場合には、文書としての体裁や利便性の面から見出しだけでなくページ分けが有効になるケースもあるでしょう。

一例として、教材などの書籍が丸々Webページ版として掲載される場合には、章ごとにページが分かれることが多いです。

1章あたりの文字数は2万～4万文字ほどになり、画面の高さは10万ピクセル近くまで伸び、画像も頻出します。

高解像度の画像を数百枚表示する記事もページ分けを検討しても良いでしょう。

それでも今時は、画像を遅延読み込みさせて一つのページに画像を数百枚表示するのも何の問題もない時代です。

さて、「暮らし～の」のサイトを見てみるとどうでしょう。

文章も画像もそれほど多くないにも関わらず、こちらの記事では3ページにページが分割されています。

ページャーは見づらく広告やその他のデザインのなかに埋もれており、これが広告やリンクなのかページャーなのか一目では判断がつきません。

更に、ページャーを通り過ぎると無限とも思えるほど長い広告ゾーンに突入します。

ページの実に半分あるいはそれ以上が広告に埋め尽くされているのです。

多くの人が、この部分に関連する記事や人気の記事が表示されていることを期待すると思います。

しかし、「暮らし～の」においては、あたかもそう見えるかのように広告が無限に続きます。

一通り記事を読んだ後に、参考になりそうな関連記事を見たいと思うのは専門性の高いサイトでは当たり前のことです。

しかし、それができません。

５．ページの半分くらいを広告で埋め尽くす

これまで説明した通り、「暮らし～の」の記事を開くと画面の約半分が広告で埋め尽くされています。

これの意図は不明ですが、単純に期待してスクロールする分、ガッカリ感が強調されます。

アウトドア関連の専門性の高い記事を読んだ訳ですから、その関連する記事を読みたいと思うのは自然な流れです。

また、ページャーは非常に見落としやすいためページャーや記事の続きを探してスクロールしても無限に不愉快な広告が列挙されるだけ。

これ、一体全体なにを考えてこんな作りにしているんでしょうか？

誤クリックや全然関係のない興味関心への離脱を促しているのでしょうか。

６．情報の専門性・独自性が低い

最後に、私が情報を求めて検索をして「暮らし～の」が表示されるとガッカリしてしまう理由がこれです。

なんとなくそれっぽいことが書いてあります。

タイトルや取り扱うテーマも専門性のあるものです。

しかし、内容はというとありきたりで独自性が全くないのです。

新たな発見はなく、参考になることもありません。

独自の写真がないことからも予想できますが、取材や調査活動、実体験はされておらず、インターネットに掲載されている情報を当たり障りないように無難にまとめて安く質の低い記事を量産しているのではないでしょうか？

当サイトは個人の趣味のブログということで必ず実体験が伴っていますし、そうでない場合でも徹底的に調査や実験を繰り返し、メーカーや関連企業に問い合わせたり、記事にするのは他にはない情報に限っています。

もちろん1つのテーマについて記事をまとめれば似通った部分が出てくるのは当然です。

例え実体験が伴っていても、結果的に周りと似たような記事になることもあるでしょう。

しかし、そんな中にキラリと光る1つの独自性や新たな発見、知見が含まれていることが重要だと思います。

まとめ

今回は「暮らし～の」を例にとり、見づらいと感じたポイントをまとめてみました。

私自身、何の意図もなく普通にインターネットで情報を収集している中で「暮らし～の」が見づらいなぁと長らく感じていました。

そして、今回偶然にも自分のブログを改善しようと思い立ち、反面教師として利用させて頂くことに決めたわけです。

最終的に6つのポイントが見つかり、それを活かしてこんなサイト作りをしていこうと心に決めました。

• ユーザーは記事本文を読みに来ていることを念頭に置く
• 記事本文を読むことに集中できるデザインにする必要がある
• 記事本文を隠すヘッダーやフッターは極力省き、必要な場合には透過背景のアイコンで細やかに表示する
• 広告を表示するなら本文や画像を途切れさせない程度の大きさに留める
• 画像が画面を埋め尽くさないように、横長の画像を使用する
• 特段の事情がなければページ分割は行わない
• 画像の遅延読み込みを採用する