アドバンド株式会社

Webの壁[担当者に必要な基礎知識/その③]デザイン&レイアウト

15.11.24
Webの壁[担当者に必要な基礎知識/その③]デザイン&レイアウト

訪問者の滞在時間に大きく影響する、インターフェースとナビゲーション。

Webサイトの制作では、インターフェースとサイト設計が重要であることは先に述べたとおりだ。

また、訪問者が目的ページになかなかたどり着けなければ、離脱する可能性が高い。

これを防ぐにはナビゲーションに配慮する必要がある。

つまりWebサイトは表現が制約されたメディアだからこそ、訪問者のユーザビリティを向上させることが大きなポイントだ。

新規顧客に対する情報提供やサイトの誘導には、特に注意したい。

せっかく認知度を高めて数多くの訪問者を集めても、問い合わせや資料請求、メルマガ登録など次のアクションにつながらなければ意味がないのだ。

たしかにコンテンツの品質も重要だが、顧客の課題や悩みに共感し、分かりやすい見せ方を心がけるだけでも、機会損失を最小にとどめることができるだろう。


 「うちの商品はホームページでは売れないから…」

そんな理由だと思われるが、数年間放ったらかし状態のWebサイトを目にすることが時々ある。これは非常に残念なことだ。

新規顧客にとっては、初めての接点が展示会や紹介・口コミだったとしても、Webサイトこそが最初の接点だと心得るべきだ。

これから取引を検討しようと考えるなら、企業のWebサイトは必ず一度は訪問される。

その時の印象が、いわば「イケてない」デザインだったとしたら…。いくら素晴らしい商品やサービスを提供している企業だとしても、その品質が疑われても仕方がないだろう。

また、定期的な更新も強く意識したい。

ずっと更新されていないWebサイトが好印象を持たれることは、まずないと心がけてほしい。


リキッドレイアウトの基本スタイルで、PC、スマホなど複数のデバイスに対応。

WebサイトはPCだけでなくタブレットやスマホなど、さまざまなデバイスで閲覧されるため、ひとつの固定レイアウトでは対応することが不可能。

それぞれの見やすさを追求するためには、定番のナビゲーション構造を把握することが大切だ。

グローバルナビゲーションの使い勝手、サイトの道案内となる「パンくずリスト」の配置など、工夫が必要とされる。

閲覧環境や各種デバイスに対応するため、スマホ用には別途レイアウトを用意。

ピクセル単位で幅を設定する「固定レイアウト」ではなく、デバイスやモニタの幅で変化する「リキッドレイアウト」で制作するなどの対応が求められる。

これにより、画面に左右されない柔軟なレイアウトが可能となる。


PC向けレイアウトではコンテンツを挟んで上部にヘッダ、下部にフッタを配置。
コンテンツ領域を2~3段組みに分け、メインコンテンツとサブコンテンツにするのが基本となる。

一方、スマホやタブレット端末など「スマートデバイス」の特徴は、縦と横2つの方向があること。そしてマウスでなく指で操作するタッチパネルも大きな特徴だ。ここにもリキッドレイアウトを活用する理由がある。

特にスマホ用サイトは段組みを使わず、コンテンツを縦に長く配置するようなレイアウトにすればボタンをタッチしやすく、閲覧者の使い勝手の良いサイトとなる。

PointPoint

●ナビゲーションに配慮し、訪問者のユーザビリティを向上
●新規顧客に対する情報提供やページ誘導は、特に配慮を怠らない
●デザインなど見映えが良くないと、商品・サービスの品質も疑われる
●幅広いデバイスで閲覧するには、リキッドレイアウトで対応

このエントリーをはてなブックマークに追加