【実例から学ぶ】作りが悪いサイトを参考に良くない点と改善案を考える

【実例から学ぶ】作りが悪いサイトを参考に良くない点と改善案を考える

ここ最近、世の中のweb制作の技術が進歩しているおかげか、本当にひどいサイトというものに出会う機会が減ってきたと思いませんか?
制作のお手本にしたり、アイディアを得るためには、良いサイトをたくさん見ることが一番ですが、それと同じくらい悪いサイトからも学ぶべきことは多いと思います。

そして今回、たまたま作りが悪いサイトを見つけてしまいました。
そのサイトを実例とし、あくまで主観的な意見ですが、何が悪いのか、どうすれば良くなるか、ということを考えてみたいと思います。

 

ちなみに、ここでは以下のようなサイトを「作りが悪いサイト」と表現しています。

  • 読みにくい
  • 伝えたい内容が明白でない
  • なんだかわからないけどストレスを感じる

良くないwebサイトの実例:wix公式ブログ

今回、実例としてあげるのは、wixの公式ブログです。

とにかく文字がデカすぎる

まずはこれを見てください。

(画像をクリックすると拡大して見れます)

全体的に文字が大きいなぁと感じるのですが、とくに記事のタイトル
タイトルのフォントサイズは40pxです。ちょっとデカすぎませんか?
おそらく大きくして目立たせようという狙いなのでしょうか。
目立たせたい要素があるなら、派手にするのではなく、他の要素を控えめにして相対的に目立たせるのがいいのではないでしょうか。

 

僕が思うように改善したものが以下の通りです。

主な修正点は、

  • 記事のタイトルのフォントサイズを小さくした
  • サイドバーの文字を全体的に小さくした
  • メインコンテンツの幅を広げ、サイドバーの幅を縮めた

といった部分です。
その他ちょこちょこと、paddingを調整したり、記事の更新日付の下にあったカテゴリー(?)っぽい要素を消したりしました。
どうでしょうか?
全体的にスッキリしたけど、地味になったとは感じないのではないでしょうか?

見出しと本文の境目がわかりにくい

つぎは、本文に関するところです。

 

このように切り取ると、問題なさそうに見えますが、実際のページを開いて本文を読んでみると、ちょっと読みにくいと感じると思います。
読みにくいと感じる理由として思いつくのが、

  • 見出しと本文のフォントサイズ、色がほとんど同じ
  • 見出しの終わりと始まりの間隔が狭い
  • やっぱり文字がデカイ

つまり、見出しと本文の境目が曖昧で、全体として一つの長い文章に見えてしまいます

 

では、僕が思うように修正してみます。

 

修正点は、

  • 見出しの文字の大きさ、色、太さを変更
  • 本文の文字の大きさを小さくした
  • 見出しの終わりと始まりの間隔を広くした

といった部分です。

これで、見出しと本文の境目がハッキリしたのではないでしょうか。

画面下の固定バナーが大きすぎる

個人的にこれが一番びっくりしました。
まずは修正前です。

いや、デカすぎませんか??
これだと記事を読むのに邪魔だし、このページの一番強調したい部分が何なのかわからなくなります。
このページの一番の目的が「ブログを購読させること」だとしたら、それはそれでおかしいですしね。

 

なにより問題なのが、画面上のナビゲーション、サイドバー、そしてこのバナーが固定であることで、本文の領域がかなり狭くなっています。

これはハッキリ言って、ブログの内容を読みたいユーザーからすると、ストレス以外の何物でもないです。

一応、画面下のバナーは閉じることができるようになっています。
これだとほぼ間違いなく閉じられるでしょう。
そうなると、本末転倒ですね。

 

とりあえず、修正してみました。

修正点は以下の通りです。

  • バナーの幅を小さくした
  • バナー内の文字を小さくした
  • 本文の領域の幅を少し広げた

 

これだと、読むのを邪魔しないですむのではないでしょうか。
ブログを購読させるという目的を達成できるのかという問題はありますが、そこは検証の余地はあると思います。
邪魔をせず、さりげなくアピールできる大きさ、位置、色、見た目などを考えるべきですね。
ただ、必ず目に入るようにできる限り大きくする。というのは、絶対良い方法ではないと思います。

レイアウト以外にも問題が沢山

ブラウザのデベロッパーツールを使ってソースを見ていると、HTML、CSSともに壊滅的です。

たとえば、メインコンテンツとサイドバーの間に、間隔を調整するためだけに存在している要素があります。

また、h1要素が複数あったり(!)、imgタグのalt属性がなかったり、閉じタグがなかったり。
たぶん掘っていけばまだまだあると思います。
正直、CMSを売りにしている会社の公式ブログがこれっていうのは..

まとめ

この事例から学んだことは以下の通りです。

  1. 目立たせたい要素を派手にするのではなく、他の要素を控えめにして相対的に目立たせる方法も考慮する
  2. 情報の区切りをハッキリさせて、読みやすさを意識する
  3. 固定表示する領域を増やしすぎてはいけない
  4. 名の知れた企業が作るサイトでもクオリティが高いとは限らない

 

この公式ブログは何か事情があって、こんな状態になっているのでしょうか?
正直、プロが作ったサイトとは思えないくらいに構造がメチャクチャな気がします。

 

とにかく、作りが悪いサイトを見て、何が悪いと感じるのか、自分だったらどう直すかというのを考えてみるのは勉強になります。
デベロッパーツールを使ってソースを書きかえることもできるので、実際に自分の思うように変えてみるのもオススメです。