Hatena::ブログ(Diary)

おかねがない(゚∀゚)ッ!! RSSフィード Twitter

アニソン動画まとめサイトanimedleyはじめました。

2011-08-15 素人っぽさを感じるWEBサイト5つの特徴

[]素人っぽさを感じるWEBサイト5つの特徴

インターネットをしていると、いろんなWEBサイトに出会います。
気になるアーティストのサイトだったり、趣味に関連したサイトだったり・・・

そんな中で

「なんかこのサイト素人っぽい」

って、感じたことありませんか?

でも、「素人っぽい」と感じはしたものの、そのサイトのどこに素人っぽさを
感じたのか、じっくり考えてみることってあまりないのではないでしょうか。

そこで今回は、WEBサイトのどういう点に素人っぽさを感じるのか、
「脱素人っぽいサイト」を目指す私が感じた、「素人っぽいサイト」の特徴を、
まとめてみたいと思います。



画像処理が甘い


せっかく時間をかけて作ったサイトでも、使われている画像の処理が甘いと、
素人っぽさがでてしまいます。

具体的には




f:id:muggles0812:20110814195246p:image

ロゴやボタンといった画像をJPG形式で保存すると、このようになります。
写真はJPG、それ以外の画像はGIF、もしくはPNG形式で保存するのが基本です。




f:id:muggles0812:20110814195501p:image
「アンチエイリアス」と呼ばれる境界線の処理を適切に行なわないと、
エッジがギザギザになったり、輪郭がぼやけた画像になってしまいます。




f:id:muggles0812:20110814200720p:image

先の2点を踏まえて作成した画像。
粒状感もなく、文字が滑らかになっています。



ミスマッチな写真


f:id:muggles0812:20110815035543p:image

各ページのページタイトル背景として、写真素材が使われることがよくあります。
日本人しかいない会社の採用ページに、なぜか外国の方が微笑む姿が・・・。

・・・とまあ、ちょっと極端すぎな例ですが、ページの内容との関連性が
感じられない写真の使用は、逆に素人っぽさを感じてしまいます。



色がケンカをしている


これは過去記事「プログラマーがかっこいいWEBサイトを作る5つのコツ」でも触れた
内容ですが、無計画に反対色(例えば赤と青)を使ってみたり、カラフルな色使いを
したものの、うまく色のバランスがとれていない、などがこれにあたります。

カラフルな色使いをするときは、彩度(鮮やかさのレベル)・明度(明るさのレベル)を
揃えた色で展開すると、うまくまとまりやすいです。

彩度・明度を揃えた色展開の例
f:id:muggles0812:20110815061015p:image



ページによってコンテンツの表示がずれる


左右にマージンを取り、コンテンツを中央に表示するレイアウト、よく見かけます。
すべてのページが同じような長さのであればいいのですが、実際は、ページによって
コンテンツのボリュームが異なり、ページの長さもまちまちになると思います。

すると、コンテンツが多いページは右側にスクロールが表示され、
コンテンツの少ないページはスクロールがない、ということになり、
ページを切り替える度に、ページの表示位置がずれることになります。


f:id:muggles0812:20110815094245g:image


これはCSSで、常にスクロールを表示するプロパティを追加することで回避できます。

html {
overflow-y:scroll;
}



適度なパッディング・マージンがとられていない


コンテンツの構成要素同士の間隔が狭すぎる・広すぎる、文章の行間を調整していない、
などは素人っぽさを感じさせる1つの要因になります。

しかも、例え間隔をとったとしても、全体として見たときにほどよいバランスに
なっていなければ、素人っぽさを感じさせてしまいます。

この辺は、広告や、雑誌を見ていても参考になる気がします。


...と、以上5つの特徴をまとめてみましたが、いかがでしょうか。
本当はまだ2つくらい、パッと浮かぶものがあるのですが、今回はこれで><

もし、ここに書かなかった特徴が気になる方はツイートしてみてください。

記事を書いたらつぶやきます。→muggles0812



この記事を読んだ人におすすめ


プログラマーがかっこいいWEBサイトを作る5つのコツ