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

料金表や会社概要など、複数の項目をユーザーに分かりやすく伝える方法として、表が挙げられます。表を制作する際は、より伝わりやすくするために目的に合わせたデザインにすることがお勧めです。
しかし、毎回同じようなデザインになってしまうWEBデザイナーの方も多いのではないでしょうか。
今回は、そんなWEBデザイナーの方が今すぐにでもホームページで活用できる、ユーザーに伝わりやすい表のデザインを目的別にご紹介します。

料金表のデザイン

料金表などの数字を用いた表を制作する際、数字の部分は英字フォントを選びましょう。円などの単位は、数字よりも小さく表示した方が数字が際立って見えるため、ユーザーが一目で見て分かりやすいだけでなく、デザイン性が高く感じられます。
また、ユーザーがプランを比較しやすいように、どのプランにどのような内容が含まれているのかを視覚的に分かりやすく表現できると良いでしょう。

会社概要の表のデザイン

会社概要などで用いられるテキストのみの表は、凝ったデザインにしてしまうと逆に見えづらくなってしまう可能性があるため、基本的にはシンプルなデザインが良いでしょう。
シンプルと言っても、線と塗りの組み合わせ次第でいくつものパターンが挙げられます。毎回同じデザインの表にするのではなく、ホームページの雰囲気に合わせてデザインを変えることができるデザイナーを目指しましょう。

営業時間の表のデザイン

病院のホームページを制作する際は、営業時間の表が必須と言っても過言ではありません。
病院に訪れるユーザーにとって、営業時間は一番求めている情報です。そのため、分かりやすくデザインするだけでなく、目につきやすい分かりやすい場所に配置しましょう。

表のレスポンスデザイン

横並びの項目が多い表は、スマートフォンでは基本的には横にスクロールをする形になります。その際、ユーザーが分かりやすいようにスクロールを促すためのスクロールヒントデザインを設けるなどの工夫が必要です。全貌を一目で見せたい場合は、スマートフォンのデザインを制作する際に組み替えて対応をしましょう。

今回のまとめ

ホームページで用いられる表は、毎回同じデザインで制作するのではなく、目的に合わせたデザインで制作しましょう。その際、今回ご紹介した表のデザインをぜひご活用ください。
ただし、横並びの項目が多い表は、スマートフォンで見た際に横にスクロールをする形になり、全貌が見えないため注意が必要です。場合によってはスマートフォンのデザインを制作する際に組み替えるなどの工夫をしましょう。