本屋さんマップのUI改善

正月休みを利用して本屋さんマップのUI改善を実施できました。

大きく2点。

1.　書店の規模をアイコンの大きさで表す

2.　書店の説明欄の規模表記をより直感的にする

です。

1.　書店の規模をアイコンの大きさで表す

これは以前からやりたかったのですが、大きさだけ変えたアイコン画像を使っても、Googleマイマップの仕様で補正されてしまい同じ大きさになってしまう、というハードルを超えられずにいました。

が、最近イラストレーター（アドビ製品）に慣れてきたことで、「アイコン画像の外側にダミーの画像を配置し目には見えないようにする」という技がひらめき、それを使って実現！見た目上の大きさの差を生み出すことができました。

これ↓を・・・

こう↓しました。

大きさがすこーしずつ違います。ただ、大きさだけだと判別が難しいので、一番大きいのが黄色、そこから オレンジ → 緑 → 水色 → 一番小さいのが紺と、色でも判別できるようにしています。

微妙な差ですが、慣れてくると使い勝手がいいはず。

2.　書店の説明欄の規模表記をより直感的にする

これまで各書店の説明欄に

「小規模（120歩）」

のような表記をしていたのですが、先日友人から「直感的にわかりにくい。規模を5段階くらいに分け、レビュー表記のような星取りアイコン表現などしてもいいのでは」とアドバイスをもらい、それを実現。

「規模 ■■□□□（120歩）」

のように表現する方法に変えました。

これ↓を

こう↓

これまたさらに微妙ですが。ぱっと見で目に飛び込んでくるのは、より視覚的に訴える表現。ほんとはここにもアイコン的なものを使いたいのですが、テキストのみなので。

少しでも、利用される方々のお役にたちますように！