ちょっとした工夫しだい。あなたもきっと上達します!

現役Webディレクターによる「嫌われないウェブデザイン」秘密講座ブログ!

トップページ > ウェブデザインの基本マナー

ウェブデザインの基本マナー

本文フォントには標準のゴシック体を

本文テキストに明朝体のフォントを使用しているサイトをたまに見かけますが、PCのモニタではやはり少々見づらい・・・特別な理由でもない限り、標準的なゴシック体のフォントを使ったほうが無難です。

1ページあたりの情報量はほどほどに・・・

自分でページを編集していると、「アレも入れたい、コレも入れたい」とついつい情報をつめ込みがち。しかし、情報の量が増えれば増えるほど注目度は低くなることに注意!

文字と文字の間の幅は整えよう

タイトルロゴやナビゲーションメニューなどの文字を画像で作る場合、文字の間隔を均等に調整(文字詰め)しないと、落ち着かない不安定感をユーザーに与えかねません。

フォントサイズは大きめに!

フォントサイズは小さいほうが、確かに「見てくれ」はカッコイイ。これは認めます。しかし目の疲れたユーザーにとっては、極小フォントのページを読まされるのは拷問以外の何物でもありません。

背景色はやっぱり白が無難

白や薄い淡色以外の背景色、特に濃い色を使うと、ユーザーに余計なストレスを与えてしまうリスクがぐっと高くなります。その理由は単純。読んでいて目が疲れるから。

インデントで文章にメリハリを!

MicrosoftのWordにも標準装備されている「インデント」はすでにご存知かと思います。字下げで文書を見やすくするこのテクニックは、Webデザインでも威力を発揮します。

良い余白、悪い余白

余白(空白のスペース)は、多すぎても少なすぎてもマイナスに・・・。適切な余白を取るために大切なのは、余白を設けるそもそもの「理由」を考えることです。

リンクのデザインNG集

反面教師として、クリックしづらい、分かりづらいリンクの例を「NG集」としてまとめてみました。

クリックを促すリンクデザイン

せっかくのリンクも、ユーザーにクリックしてもらえなかったら意味がありません・・・。デザインをちょっと工夫することで、リンクをさらに目立たせてクリックを促すことが出来ます!

見やすい表組みをデザインするコツ

商品の価格表や諸元表などのテーブル表組み、ゴチャゴチャして見づらくないですか? 見やすい表組みをデザインする、ちょっとしたコツをご紹介します!

「集合」「近接」でスッキリ見せよう

Webページに載せる内容は、多くなればなるほどゴチャゴチャしてしまうもの。メニューや見出し、画像、キャプションなどの各要素を見やすくレイアウトするには、「集合」「近接」のデザイン・テクニックが有効です。

「見えない線」に沿ってページをレイアウトしよう

見やすく整ったデザインに絶対不可欠なのが、「目に見えない線」に沿ったページレイアウト。これをおろそかにすると、せっかくの情報も非常に伝わりにくくなってしまいます。

大原則:目の疲れた状態でサイトを見直そう

嫌われないWebデザインを実現する際に最も重要な心がまえは、「目の疲れたユーザーの気持ちを考えてデザインする」こと。そのためには、自分も目の疲れた状態でサイトを見直すしかありません。