SOLG System Blog

こんにちは。地味にPokémon GOにはまっているマツナガです。好きなモンスターはレアコイルです。

今回は、お店などを検索するWebページを作るお話です。とはいっても、今となっては、PCのアクセスよりもスマートホンからのアクセスが多い時代。
スマートホンでアクセスした際に、使い勝手のよいページを実際に作ってみました。

まずは、動画で見て下さい。


今回のこだわりポイントは以下の２点です。

検索結果０という残念な結果を出さない

いろいろ検索していくと、「お探しの情報は見つかりませんでした」と出るアレです。まだ、こういったお詫びの文章が出るのならよいのですが、検索結果がなかった場合、何も表示されずに真っ白な画面だけが出る残念なサイトもあります。これは、ユーザー体験としては、かなりのマイナスポイントです。

この残念な結果を回避するために検索結果０の選択肢は表示しない。という実装を行いました。
また、検索結果がどのくらいあるのかを合わせて表示することで、情報量があらかじめわかるのもよいと思います。

ページをスクロールしたいのに地図がスクロール！

スマホページで、Google Mapなどが設置されている場合によく見かけられる残念なパターンです。ページをスクロールして見ていくと、地図が現れ、でも地図は特に見たくないので、もっと下の方をスクロールして見たい、、、という時に、ページがスクロールされずに、地図がスクロールされてしまうアレです。
下の方の情報は見れない上に、地図もスクロールされてしまって、せっかくお店の場所にピンが立っていたのに、そのピンがどこにあるかわからなくなってしまうってことありませんか？

したがって、スマホの場合、地図自体のスクロールをロックしてしまう実装の方が僕は好きです。でも、場合によっては、Webページ上で地図をぐりぐりやって検索したいという場合もあると思います。
その場合は、地図表示モードを作って、地図表示モードの場合は、ページの方をロックしてしまってスクロールできないようにする実装が考えられます。
そうすれば、ページがスクロールされないため、思う存分、地図をぐりぐりとやることができるわけです。

今回取り上げた検索ページは、地域情報のWebサービス「まちぽ」に実装されています。

夏にぴったり！水遊びのできる公園
沼津駅・沼津港・内浦港周辺のグルメを食べつくそう
鷹匠のお店

などです。

また、「食べきり（完食）」をテーマにした「ふじのくに 食べきり やったね ! キャンペーン」でもこの機能が実装されていますので、ぜひ使ってみて下さい。