ユーザー体験向上でファンが増える！公園のDrupal導入事例

Drupal 海外事例：Forest Park Map

Forest Park Foreverはセントルイスにある1,300エーカーものランドマークを復元、維持するためのNPOです。

現状使っている公園の画像マップはForest Parkのメインサイトにあるのですが、印刷用で、オンラインで使用するのが難しいです。地図には公園内にある何十ものスポットを紹介していますが、詳細を見るために、ユーザーは画像を拡大して情報を見つけないといけません。スポットの紹介やその歴史を紹介するスペースが地図では確保できず、地図にはコンテクストまで表現できず、公園のストーリーを伝えるのには不十分でした。

また、その地図はスマホで利用するのも難しく、ユーザーの多くはスマホ経由で利用するので、使いにくいことは大きな問題となっていました。スマホのGPS機能を使って使用できないので、ユーザーは現在施設内のどこにいながら地図を見ているのか、ということもわかりませんでした。このような乏しいスマホでのユーザー体験が訪問者の低下や混乱につながらないかという心配があり、公園の運営者は地図サービスの再構築の時期ではないかと考えていました。

Forest Park Foreverは軽くてレスポンシブ対応のツールを作り、公園に訪れることが楽しくて探検しやすい、ということを伝えたいと思っており、それによってサイトのトラフィックと公園への訪問者を増やしたいと思っていました。そしてそのツールはどのデバイスからでもうまく機能する必要がありました。（家のハイスピードインターベットからパソコンで見る時も、公園内のアトラクションをスマホ経由で探していて、回線状況が良くない時も）

「このオンラインマップは、訪問客の体験をより良くするためのものと捉えていました」「このマップにより、公園の魅力がもっとたくさん伝わり、この公園の素晴らしさを学ぶきっかけにしたいと思っていました。」と、Forest Park Foreverの幹部であるLesley Hoffarth P.E.はおっしゃっていました。

今回のプロジェクトでは、その要望に合致する完全カスタマイズの地図を作成しました。

なぜDrupalが選ばれたのか：以前のGPS機能付き地図の提供経験

MIT List Visual Arts Centerのサイトを開発した際に使用したフレームワークが成功事例としてあったので、Drupalにて開発を進めました。そのフレームワークはGPS機能付きのコンテンツリッチな地図になります。

なぜDrupalが選ばれたのか：キャッシュの柔軟性

この開発プロジェクトにて、Drupalが持つキャッシュの柔軟性に対して感銘を受けました。クライアントは、電波状況が悪い環境でも、訪問者が公園を回るのに役立つ、軽くてレスポンシブ対応のウェブサイトを必要としていました。

Drupalエンティティの表示モードは、各ユーザアクションに必要な正確なデータをロードできたのです。また、Drupalを使用すると、今後のアプリケーションの反復でさまざまなソースに位置情報を提供することができます。

コンテンツ構造 / 情報提供の柔軟性

Drupalフィールド、タクソノミー、メニューシステムにより、クライアントの運営チームがサイトを簡単に更新できる、最小限のフレームワークを作成することができました。

プロジェクトについて：どの大きさで地図を見ても綺麗に見えるを作ること

クライアントは、機能性だけでなく見た目も素晴らしい地図を求めていました。公園には100以上の名所があり、JPGバージョンの地図での大きな問題は、その一つ一つを紹介するのが煩雑になっていたことでした。

これを解決するために、Leaflet.markerclusterを使用して、特にユーザーがズームアウトしているときに、これらのポイントが混雑したり地図を遮ったりするのを防ぎました。

また、TechnologiesのMapTiler Proを使用して、デスクトップユーザーには4つのズームレベルを提供し、モバイルユーザーには6つのズームレベルを提供しました。

Retinaディスプレイは、ユーザーが最大にズームインしているときでさえ、地図を鮮明に見えるようにします。

地図内の特定のエリアを共有できるようにする

クライアントは、ユーザーがSaint Louis Science Centerのような公園内の好きな場所をeメールやFacebook、Twitterで共有できるようにしたいと思っていました。これを実装するために、HTML5 APIを使用して、ページ全体を再読み込みせずにユーザーが表示している場所によってURLが変わるような機能を施しました。

ユーザーがある地図URLに直接訪問すると、それにあった位置情報をロードし、AJAXリクエストとして保存する方法です。ホームページノードとロケーションノードに同じテンプレートファイルを使用してこれを実現しました。

場所の詳細情報を通じて公園の歴史を伝える

以前の地図ではロケーション名が提供されていましたが、全ての情報を網羅していませんでした。クライアントは、新しい地図でより豊富な公園の歴史と個々のスポットの特徴を伝えたいと思っていました。

それを実現するため、クリックで開いた場所の詳細ポップアップに概要情報を保存しました。（概要、営業時間、入場料など）このようにして、地図の可読性を失うことなくあらゆるデータを含むことができました。

“関連施設”を通じて文脈を提供する

クライアントは、公園の場所それぞれは孤立した情報ではない、と思っていました。つまり、公園全体として大きなストーリーを伝えることで公園の歴史や文脈がわかる、ということです。

新しい地図には場所ごとにある「関連施設情報」を提供することでその文脈を伝えようとしました。バックエンドでは、カテゴリに基づいて自動的に「関連ロケーション」を提供しますが、クライアントの運営チームはこれらの選択肢を無効にし、任意のカテゴリから3つの関連施設を手動選択できます。

ユーザーの興味に応じて公園を探検できるようにする

クライアントは、ユーザーの興味に応じておすすめスポットをフィルターできるようにしたいと思っていました。例えばユーザーが自然に興味がある場合、他のおすすめスポットの情報は表示しないようにして、森林、島、サバンナなどのスポットのみを表示、スクロールできる、という具合にです。ユーザーがトイレを探している場合も同様です。これを実装するためにDrupalのタクソノミーを利用しました。

利用中のデバイスから道案内を利用できること

位置情報サービスはこのマップの特徴の一つです。ユーザーがどのあたりを探検しているのかがわかるようになります。ユーザの位置を示すために、サイトはまず、ブラウザがGPS座標を与えることができるかどうかをチェックします。サイトがユーザーの位置情報を取得できるかどうかを質問するのです。Chromeのような最新のブラウザでは、技術的にGPS座標を持たないデスクトップコンピュータやラップトップでも許可を要求するアラートが表示されます。コンピュータのGPS座標を手動で設定できるからです。

電波状況に関わらず、地図がすぐに表示されるか

DrupalをLeaflet.jsマップと統合することは、多くのやり方があるため、主な課題の1つでした。このサイトは、単一ページのWebアプリケーションとして構築されています。つまり、カスタムモジュールAJAXリクエストを使用してすべてのロケーションの詳細がロードされます。

最初のページ表示では、サイトは場所の名前やカテゴリ、IDなど、必要なデータしか表示しません。このデータはJSONオブジェクトとして送信され、Drupalコアキャッシング機能を使用してキャッシュされます。この特定のキャッシュビンは、ロケーションノードが作成、更新、または削除されるまで保持されます。これらのアクションが発生すると、そのキャッシュビンはなくなり、次のページロードで再構築されます。

開発工程

地図の開発には6週間かかりました。開発にあたり毎週マイルストーンを決めて、昨日開発があるごとに評価・テストしました。サイトは最新版のChrome、Firefox、Safari、Chrome for Android、Internet Explorerの8-11でテストされました。

成果

新しい地図をローンチすると、クライアントは地元の有力メディアを含む、一般の人々とメディアから大変注目を浴びました。

この地図に対し、Forest Park Foreverの幹部であるStephen Schenkenbergはこのように述べました。「Forestparkmap.orgを使うと、公園の歴史、詳細、何百ものおすすめスポットなど、信じられないほどの情報が手のひらで利用できます。」

2015年8月31日から10月15日までの間にサイトは11,000PVを達成しました。

終わりに

いかがでしたか？当初クライアントは乏しい地図の利用体験が公園訪問者の満足度を下げるだけでなく、公園の運営（来場者）そのものにも悪影響を与えていることを心配していました。

Drupalを使って革新することで、公園での体験を素晴らしいものに変えました。この事例を通じてDrupalがウェブサイト、周辺システム以外の構築も可能である、ということを知っていただけたら嬉しいです。