商用ウェブデザインの具体的なポイント

商用ホームページのデザインにおいて、最低限押さえておくべき具体的なポイントをご紹介します。本当に基本的なことばかりですので、確実に押さえたいところです。見やすさ、読みやすさといったウェブユーザビリティにも影響を与える商用ホームページのデザインポイントです。

テキストを読みやすくルール化する

テキストを読みやすくルール化するというのは、ページ上の全てのフォント(文字)の大きさを統一するということではありません。コピーやページタイトルなどの大見出し、トピックの中見出し、項目等の小見出し、それ以外の文章部分に使われるフォントサイズを、文章レベルごとに統一するということです。

例えば、メニューが並んでいた場合、それぞれの文字の大きさは必ず一定にしないと、非常にちぐはぐで見づらくなります。同様に、見出しがあり、その下に文章があるとすれば、通常そこに入る文章のフォントサイズは見出しよりも小さくなければ読みにくくなります。

ページ全体の中でいくつかの見出しがあるのであれば、重要度の高い見出しほど大きく、小見出しは小さくなります。 仮に、大見出し、中見出し、小見出し、文章とあれば、四つの文字の大きさをページ上のどの位置で使っても同じにしておくということが、フォントサイズのルール化です。

このようになっている場合には、どこが見出しでどこがその見出しに対応した文章なのか、判別できるので読みやすくなります。(画像にする場合にも同様に見出しレベルで統一した画像にします) 尚、フォントサイズについては、ウェブデザインのスタンダードとなる目安があります。

文章として読ませたいフォントの大きさは14px~16px(ニュースサイトなどの文章のフォントサイズ)、ページ中の一番小さいフォント(ページ内メニューなど)のサイズで12px前後が読みやすいとされています。また、行間隔は140%が可視性に優れていると言われています。

ちらつく色はウェブデザインに向かない

ホームページでの色使いは上手に活用すると適切な印象をユーザーに与えることが出来ます。しかし、印象の前に、一つだけホームページならではの大原則があります。それは、目をちらつかせる色使いにしないことです。

ご存知のようにホームページはディスプレイによって表示されます。ここが紙媒体と大きく異なる点です。ディスプレイに表示した時に目がちらついてしまうホームページは不快感を感じることも多いので、印象以前の大原則となります。

ちらつき、見にくさの原因となるのは背景やページ全部が黄色や赤、黄緑(エメラルドグリーン)などの色で塗りつぶされているケースです。要するに、表示面積の多い領域が原色、あるいは明度の高い色の場合がそれに該当します。

メインコンテンツ部分(ヘッダーやメニューを除いた本文の領域)で利用しても問題のない色というのは、残念ながらほとんど決まっています。背景については結局のところ白、文字の色は黒が一番読みやすいものになり、そこから全体との色バランスやメリハリなどに合わせるようにして多少の変化を付けます。

ウェブデザインではディスプレイのことを考える

特にパステル系の色は薄い色のイメージのため、優しいと思われがちですが、ディスプレイで見ると、反射がひどく、チラつきやすいので注意が必要です。

色で印象を与える場合、しっかりしたイメージであれば紺、美しいイメージであれば濃いめのピンク、あるいは色の印象はほとんどなくし、画像で印象付けます。また、安心、親切といったイメージであれば、緑系、茶系等の自然にある色、清涼感、清潔感であれば薄めの青系、力強さは濃いめの赤、楽しさ、明るさはオレンジ系、というように、色系統によって、多くの人が持つイメージが存在するため、選択肢は限られます。

したがって、奇をてらったカラーリングや、あれもこれも目立たせようとする色使いは大抵うまくいきません。 ホームページの色系統は与えたい印象によって選択するようにしましょう。与えたい印象と、その色系統に対して多くの人が共通して抱くであろうイメージがマッチしていることが大切です。

色系統を選択したら、メインコンテンツ部分の背景は白、ナビゲーションやサイドメニュー等のページの外側部分に濃いめの色を使うと全体がひきしまります。その上で、文章の色は黒、あるいはそれに近い濃いめの色を使うことで目にストレスのない読みやすいコントラストとなります。

画像は綺麗なものを使う

ホームページで使用する画像や写真は綺麗なものを選ぶようにしましょう。現在ではデジカメも安くなり、また、携帯電話でさえ一昔前のデジカメ並の画質で写真が撮れます。

とても基本的なことですが、画質が粗いものは避けましょう。ユーザーにとっては、商品やサービスの品質をイメージする大切な要素です。食品関係であればおいしそうな写真を、医療関係であれば清潔な写真を選ぶようにしましょう。

ネットショップなどのECサイト等では特にその商品画像によっても購入判断が変わります。これは、良さそうだと思う以外にも細部が分かるか分からないかという点によるものです。

実際に手に取って購入を決定出来るリアルのショッピングに比べて、ネット上での通販は商品画像以外に実物を確認できる術がありません。例えばネットオークションなどでは、細部の傷や汚れをきちんと見せる方が取引が成立しやすくなります。中古の場合に一番知りたいのはその細部の状態だからです。

新品の商品でも同様です。概要写真しかなければそれで判断するしかありませんが、細部に渡った写真があればあるほどユーザーにとって実物とのギャップが減るという安心感が生まれます。不動産業の物件写真、サービス業などの事例写真も同様です。一枚で足りなければ部分に分けて複数掲載するようにしましょう。

もちろん、その際の画質は良いものを選ぶようにしましょう。 尚、画像についてもホームページで利用する場合には大まかな目安があります。まず、商品画像などの写真を見せる場合のファイルの種類はJPGで800×600以内のサイズ、解像度は72pxにします。一般的には640×480以内くらいに収めないとホームページの全体のレイアウトの中には入らないことが多いでしょう。

レイアウトの都合上画像をサムネイル表示にして、クリックすると拡大画像が表示されるようにする場合は好きなサイズに出来ますが、それでも1024×768以内にします。 理由は表示に時間がかかるのと、ブラウザが勝手に縮小表示してしまうと、せっかくの大きなサイズ、高解像度の写真も劣化して見えてしまうからです。

稀に建築関係のホームページで非常に高い解像度のものがありますが、建築や設計で使用するままではホームページで利用するには大きすぎますので適宜サイズや解像度を調整するようにしましょう。

レイアウト要素の縦や横を揃える

タイトルやトピックス、リンク、見出しの横の長さが著しく違い、右にも下にもスクロールさせなければいけないホームページは読みにくくなってしまいます。

ウェブデザイン初心者のホームページに多い、ページの中の要素を全てセンタリング(真ん中寄せ)も同様です。サムネイルを並べても縦のラインや横のラインが整列されていなかったり見出しの位置がページ全体で揃っていないと非常に見にくいデザインになります。

その逆に、見やすい形とはブログやウェブサービス、プロの制作するホームページのように、要素の縦のライン、横のラインが一定の規則にしたがって並んでいるものです。

通常、ページ共通で横幅を決めるところからはじめ、その横幅の範囲内でさらに要素の横幅を一定にすることで、各ページの統一感が生まれ、見やすくなります。

尚、文章コンテンツについては、センタリングしてしまうと揃えづらいので、基本的には左に揃えます。 ホームページ中のどのページを見ても要素が整理されていないホームページは、縦横のラインを揃えたり、要素の大きさを揃えるだけで随分とすっきり見えるようになります。

プロのウェブデザイナーの技

プロのウェブデザイナーは要素の位置を決めるために電卓を使うこともあります。ポイントは制限です。掲載したい内容を単純に全部並べようとするとどうしても整理が出来ません。そこで、デザインを崩さずに掲載するために、掲載個数を決めたり、文字数を制限したりして調整します。

これも掲載したい、あれも掲載したいと詰め込めば詰め込むほど、ルールが侵されて結果的にぐちゃぐちゃになります。Yahooなどのニュースが並んでいる部分も、文字数には制限があります。自由に勝手で長いタイトルを入れてしまえば、トピックとして並ぶニュースタイトルが二行になったり、横にはみだしたりしてしまい、大きく見栄えを崩します。

したがって、整ったデザインのページに掲載するタイトルを作る人は文字制限がある中で最大限に内容を言い表すタイトルを作ります。もちろん画像化するなどの方法もありますので、ケースバイケースですが、崩れていて見にくいデザインを見やすく整ったデザインにする唯一の方法は、縦横のラインを揃えることです。そのために、要素の個数や幅などのルールを決めることが必要です。

ウェブデザイン品質はホームページの安心感につながる

以上のように、基本的なポイントを押さえるだけでも、「デザイン品質」、「デザインコンセプト」、「ユーザビリティとの両立」は実現でき、商用ホームページとしての最低限のデザイン品質をクリアできます。

繰り返しになりますが、デザイン品質が著しく低い場合にはあなたへの信頼感、安心感を欠いてしまいます。最高級に美しい域まで達する必要はありませんが、最低限の信頼感、安心感を見込客が感じれる品質でなければコンバージョンにつながりにくくなってしまいます。

ウェブデザインはコンテンツの内容に勝る要素ではありませんが、内容が良いのに外観でその良さを損ねてしまうことのないようにしましょう。