アニソン動画まとめサイトanimedleyはじめました。
2011-08-15 素人っぽさを感じるWEBサイト5つの特徴
■[WEBデザイン]素人っぽさを感じるWEBサイト5つの特徴
インターネットをしていると、いろんなWEBサイトに出会います。
気になるアーティストのサイトだったり、趣味に関連したサイトだったり・・・
そんな中で
「なんかこのサイト素人っぽい」
って、感じたことありませんか?
でも、「素人っぽい」と感じはしたものの、そのサイトのどこに素人っぽさを
感じたのか、じっくり考えてみることってあまりないのではないでしょうか。
そこで今回は、WEBサイトのどういう点に素人っぽさを感じるのか、
「脱素人っぽいサイト」を目指す私が感じた、「素人っぽいサイト」の特徴を、
まとめてみたいと思います。
画像処理が甘い
せっかく時間をかけて作ったサイトでも、使われている画像の処理が甘いと、
素人っぽさがでてしまいます。
具体的には
ロゴやボタンといった画像をJPG形式で保存すると、このようになります。
写真はJPG、それ以外の画像はGIF、もしくはPNG形式で保存するのが基本です。
「アンチエイリアス」と呼ばれる境界線の処理を適切に行なわないと、
エッジがギザギザになったり、輪郭がぼやけた画像になってしまいます。
先の2点を踏まえて作成した画像。
粒状感もなく、文字が滑らかになっています。
ミスマッチな写真
各ページのページタイトル背景として、写真素材が使われることがよくあります。
日本人しかいない会社の採用ページに、なぜか外国の方が微笑む姿が・・・。
・・・とまあ、ちょっと極端すぎな例ですが、ページの内容との関連性が
感じられない写真の使用は、逆に素人っぽさを感じてしまいます。
色がケンカをしている
これは過去記事「プログラマーがかっこいいWEBサイトを作る5つのコツ」でも触れた
内容ですが、無計画に反対色(例えば赤と青)を使ってみたり、カラフルな色使いを
したものの、うまく色のバランスがとれていない、などがこれにあたります。
カラフルな色使いをするときは、彩度(鮮やかさのレベル)・明度(明るさのレベル)を
揃えた色で展開すると、うまくまとまりやすいです。
彩度・明度を揃えた色展開の例
ページによってコンテンツの表示がずれる
左右にマージンを取り、コンテンツを中央に表示するレイアウト、よく見かけます。
すべてのページが同じような長さのであればいいのですが、実際は、ページによって
コンテンツのボリュームが異なり、ページの長さもまちまちになると思います。
すると、コンテンツが多いページは右側にスクロールが表示され、
コンテンツの少ないページはスクロールがない、ということになり、
ページを切り替える度に、ページの表示位置がずれることになります。
これはCSSで、常にスクロールを表示するプロパティを追加することで回避できます。
html {
overflow-y:scroll;
}
適度なパッディング・マージンがとられていない
コンテンツの構成要素同士の間隔が狭すぎる・広すぎる、文章の行間を調整していない、
などは素人っぽさを感じさせる1つの要因になります。
しかも、例え間隔をとったとしても、全体として見たときにほどよいバランスに
なっていなければ、素人っぽさを感じさせてしまいます。
この辺は、広告や、雑誌を見ていても参考になる気がします。
...と、以上5つの特徴をまとめてみましたが、いかがでしょうか。
本当はまだ2つくらい、パッと浮かぶものがあるのですが、今回はこれで><
もし、ここに書かなかった特徴が気になる方はツイートしてみてください。
記事を書いたらつぶやきます。→muggles0812