新型コロナウイルスに関する弊社の取り組みについて詳しくはこちら

ユニバーサルデザインを意識したクリッカブルマップデザイン

クリッカブルマップ用の地図を制作しました。
エンドユーザーが幅広い年齢層で色盲など障害を抱えている方もいる為ユニバーサルデザインを意識しデザインしました。

クリッカブルマップとは画像で作成した地図上の任意のエリアにマウスオーバーすると画像がクリックできるようになっており、都道府県の詳細ページなどそれぞれ個別のページにリンクさせることができます。 兵庫県内の各市町村に対してのクリッカブルマップを制作し司法書士会の会員検索及び無料相談会場が検索できるようにしました。

まずはベースとなる地図のテイストを決めます。
リアルな境界線を引いた白地図をベースにするのか、それともデフォルメした略地図にするのか。
今回は2種類の目的「会員検索」と「無料相談会場検索」で別々の地図を作成することになったので両パターンで作成しました。

クリッカブルマップの場合、マウスオーバー時の色変化などのデザインも必要な為、1地図につき最低2種類のデザインが必要になります。

目次

初稿デザイン

会員検索デフォルトデザイン

会員検索マウスオーバーデザイン

会場検索デフォルトデザイン

会場検索マウスオーバーデザイン

ユニバーサルデザイン修正

・全ての書体をユニバーサルデザインフォントに変更しました。
・ロールオーバー後の文字を太くし、変化したことを認識させやすくしました。
・認識しづらい赤色をオレンジ寄りに変更しました。
・境界をはっきりさせています。

会員検索デフォルトデザイン

会員検索マウスオーバーデザイン

会場検索デフォルトデザイン

会場検索マウスオーバーデザイン

採用デザイン

会員検索設置イメージ

会場検索設置イメージ

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次