Hatena::ブログ(Diary)

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

2011-08-15 素人っぽさを感じるWEBサイト5つの特徴 このエントリーを含むブックマーク



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

そんな中で

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

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

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

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

(8/19追記)
以下の内容はあくまで素人muggles0812が感じた、個人的な意見であり、該当する項目が
あったからといって、必ずしも他の皆さんが「素人っぽい」と感じるとは限りません。



画像処理が甘い


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

具体的には




f:id:muggles0812:20110815152230p:image

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




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




f:id:muggles0812:20110814200720p:image

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



ミスマッチな写真


f:id:muggles0812:20110815035543p:image

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

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



色がケンカをしている


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

カラフルな色使いをするときは、トーン別カラーチャートを利用すると、うまくまとまりやすいです。

トーン別の色相カラーチャート | 色カラー

(8/17訂正)



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


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

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


f:id:muggles0812:20110815094245g:image


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

html {
overflow-y:scroll;
}



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


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

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

私の場合、この辺はWEBに限らず、広告や、雑誌をなんかも参考にしています。


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

もし、ここに書かなかった特徴が気になる方はtwitterで。

muggles0812も愛読するデザイン初心者本


ノンデザイナーズ・デザインブック [フルカラー新装増補版]
ノンデザイナーズ・デザインブック [フルカラー新装増補版]



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



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


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