名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

WEBデザインで重要な視認性の意味とデザイン制作時のポイント

2022
.05.13

WEBデザインで重要な視認性の意味とデザイン制作時のポイント

皆様の自社ホームページや、他社のホームページを見ているときに、テキストが読みにくいと感じたり、バナー広告やボタンの見栄えがしっくりこないと感じることはありませんか?もしかしたらその問題、「視認性」を意識して WEBデザインを見直すだけで解決できるかもしれません。
今回は、WEBデザインで重要な視認性の意味と制作時のポイントについてご説明します。

【目次】
1. 視認性とは
2.視認性の高いWEBデザインにするための3つのポイント
a.1.年代によって最適なものにする
b.2.何を一番伝えたいか明確にする
c.3.配色のルールを決める
3.今回のまとめ

視認性とは

WEBデザインにおける視認性とは「WEBデザインの見やすさ・分かりやすさ」のことで、さまざまな要素が関係します。
例としては、デザインのレイアウトや文字の配置、画像はもちろん、フォントの種類やサイズ・配色などです。
視認性の高いWEBサイトにするには、ユーザーがWEBサイトを見てすぐに情報を理解できる状態にすることが重要です。

視認性が低いWEBサイトの例

ホームページの内容には自信があっても、何故か離脱率が高く、コンバージョンに繋げることができていない企業は、ホームページの視認性の低さが原因かもしれません。
例としては、以下のようなWEBサイトは視認性が低いと思われます。

・コンバージョンに繋がるボタンなどの色がページごとに統一されていない。
・共通しているメニューの色やレイアウトがページごとに変わり、規則性がない。
・テキストがリンクされているのかわからない。

視認性の高いWEBサイトにするには、ユーザーが混乱しないよう、配色やボタンなどのルールなどを決めておくことが重要です。
次の項目でご説明する3つのポイントをふまえて、自社のホームページが見づらくないか、見直しを行うことをおすすめします。

視認性の高いWEBデザインにするための3つのポイント

年代によって最適なものにする

ホームページ制作において最も大切なのは、制作者ではなくWEBサイトを訪れるユーザーにとって見やすいかどうかです。ペルソナに設定した年代の方が閲覧しているWEBサイトなどを想定し、そのWEBサイトの配色やフォントサイズを参考にしても良いでしょう。
例としては、ペルソナを60代と設定したサイトの視認性を考える場合、10代が見やすいと感じる小さめのフォントサイズは60代には見えづらい可能性があり、少し大きいと感じるくらいのサイズにすると丁度いい場合があります。
ホームページ制作の際には、設定したペルソナにとって視認性が高くなるようなWEBデザインを心がけましょう。

何を一番伝えたいか明確にする

視認性を高めると言っても、全ての情報の視認性を高める必要はありません。何を一番伝えたいかを明確にして、目立たせる場所と目立たせない場所の優先順位を決めましょう。

配色のルールを決める

視認性を高めるためには、配色も重要です。一般的に、白を背景にした場合は明度が低い色(青や紫)は視認性が高く、明度が高い色(黄色など)は視認性が低くなります。逆に背景を黒にした場合には、明度が高い色のほうが視認性は高くなります。
また、一般的に見やすいとされている配色でも、色覚異常のユーザーにとっては見づらく感じる可能性もあります。
目立たせたいからと言って、そのような色ばかりを使用してしまうと、ユーザーがWEBサイトを閲覧する際の視認性が低くなる可能性があるので注意しましょう。

今回のまとめ

WEBサイトは、デザイン性や操作性が優れていても、視認性が低ければユーザーのアクションを促すことができません。
見づらいWEBサイトは、ユーザーがホームページから離脱してしまう原因になったり、コンバージョン率の低下にも繋がります。
一方で、見やすいWEBサイトは、ユーザーがストレスなくWEBサイトを閲覧することができ、結果的に使いやすく、利用満足度が高いWEBサイトになります。
ユーザーがサイト上で次のアクションに進むために、視認性を意識したホームページ制作を心がけましょう。

AUTHOR

著者情報

WEBデザイナー

A.K.

不動産会社でグラフィックデザイナーとしての勤務を経て、株式会社オンカに入社。アミューズメント施設やサービスサイトなど、ユーザーに魅力を訴求する大衆的なデザインを得意とし、長年培ってきたデザインのノウハウに基づきながらも顧客の要望を汲み取った柔軟な対応力でホームページ制作に尽力している。

  • カラーコーディネーター AD

PAGE TOP