モノトキのお出かけ記事が増えてきたので、大分県の地図から記事を探せる「お出かけマップ」を作りました。
きっかけは、「紹介した場所にピンが立っていて、押したらその記事に飛べるページがあったらいいな」という思いつきです。ChatGPTに相談しながら、地図だけでなく記事の一覧も並べる形にしていきました。
この記事では、マップを使う手順よりも、どんな考えで形にしていったのかを中心に、制作の流れを振り返ります。
始まりは「この記事の場所、どこだろう？」
公園、水族館、街歩き。モノトキでは、大分県内のお出かけ先を少しずつ記事にしています。
カテゴリーを開けば記事は並びますが、場所の名前を見ただけでは、県内のどのあたりなのか分かりにくいこともあります。「近くに別の立ち寄り先はあるかな」と考えるときも、地図で見られる方が便利そうです。
そこで考えたのが、大分県の地図に、記事で紹介した場所を並べるページでした。新しい記事を増やすことに加えて、すでにある記事を見つけやすくする入口を作ろう、という発想です。
最初に決めたのは、地図と一覧の両方を使えること
最初の相談では、地図にピンを置く形を考えていました。ただ、地図で場所を見たい人もいれば、施設名や短い紹介を一覧で読みたい人もいるはずです。
そのため、地図だけで完結させず、同じページに記事一覧も置くことにしました。
| 探し方 | 役割 |
|---|---|
| 地図から探す | 場所の位置関係を眺めながら候補を見つける |
| 一覧から探す | スポット名・エリア・短い紹介を読んで選ぶ |
地図の番号と一覧を対応させ、気になる場所から紹介記事へ進める構成です。一覧の「地図で見る」から、その場所を地図上で確かめる操作も加えました。
まずは、公開済み記事の情報をそろえる
地図を作る前に、掲載するスポットの情報をそろえました。初期版では、公開済みのお出かけ記事から16スポットを掲載しています。
- スポット名とエリア
- 記事の公開URL
- 一覧に載せる短い紹介文
- 地図に表示するための位置情報
- 公園・自然・動物など、過ごし方の分類
名前だけを並べるよりも、一文の紹介があれば、どんな場所なのか伝わりやすくなります。また、本文の詳しい説明や写真は元の記事に任せ、マップでは行き先を選ぶための情報に絞りました。
県内の観光地をすべて載せるのではなく、モノトキで紹介した記事へ案内する地図として始めています。
地図は、大分県の輪郭にピンを重ねる方式に
今回の制作版は、大分県の輪郭を使ったSVGの地図です。SVGは、拡大しても線がぼやけにくい画像形式です。その上に、記事に対応する番号付きのピンを置いています。
地図の背景画像を外部から次々に読み込む方式ではなく、このページ用の案内図として作りました。制作版は、地図サービスのAPIキーを入力せずに表示できる構成になっています。
県の輪郭には、Natural Earthの地理データを加工したものを使用しています。自分で地図の形を描き起こしたわけではなく、制作時の資料に出典と利用条件を残しました。
一方で、この地図は入口や駐車場へ正確に誘導するものではありません。ピンが重なる場所では位置をずらし、線の先で代表地点を示しています。見やすさと、場所の目安を伝えることの両方を考えた作りです。
見た目だけでなく、探すときの操作も加える
地図と一覧を土台にして、スポット名などの検索、エリア別、過ごし方別の絞り込みを加えました。「別府市の公園を探す」といった探し方ができるようにするためです。
地図には拡大・縮小と全体表示に戻る操作を用意し、拡大したあとはドラッグで表示位置を動かせるようにしました。
また、PCでは地図と一覧を横に並べ、スマートフォンでは縦に並べる構成にしています。画面幅が変わっても記事を選べるよう、一覧自体はJavaScriptが動かない場合にもリンクを使える形で残しています。
地図上の操作が増えても、最後は紹介記事へ迷わず進めることを大切にしました。
WordPressでは、固定ページとして置くことに
マップは、通常の記事とは別に、WordPressの固定ページへ設置する形で準備しました。新しい記事に押し流されず、これからも使う案内ページにしたかったからです。
制作では、ブログで使っているCocoonの見出し装飾や、自動目次との相性も調整の対象になりました。地図内のスポット名まで通常の記事見出しとして扱われると、目次が長くなったり、デザインが変わったりするためです。
設置用のコードでは、地図を保存したあとに本文を読み戻し、必要なSVGやJavaScriptが残っているか照合する処理も用意しています。手元のプレビューが表示できることと、WordPressに同じ内容が保存されることは、分けて確認する必要がありました。
制作中には、APIのエラーにもぶつかりました
固定ページを登録する途中では、WordPressへの問い合わせで「HTTP 400」「rest_invalid_param」「対象: status」というエラーが出ました。
この表示だけで「投稿者アカウントだから使えない」と決めることはできません。問い合わせの指定に関する問題と、固定ページを編集する権限の問題は、別々に確認する必要があります。
制作記としては、コードができたところで終わりではなく、ブログ側の設定や保存結果まで含めて確認することも、ページ作りの一部だったと残しておきたい点です。
この記事は、すべてのWordPress環境でそのまま動く設置手順ではありません。実際に同じようなページを作る場合は、使っているテーマやアカウントの権限に合わせた確認が必要になります。
次は、記事が増えても更新しやすいマップへ
今回の制作版は手動で更新する形です。新しい記事を書けば、地図にも自動で追加されるという仕組みではありません。
位置や紹介文の元データはまとめていますが、更新時には地図・記事一覧・操作用のデータをそろえて反映する必要があります。記事が増えてきたら、この作業も分かりやすく整えていきたいです。
今後の候補としては、写真を使った一覧や、駐車場の記事を探しやすくする案内なども考えられます。まずは今ある記事へたどり着きやすい状態を大切にしながら、少しずつ育てていく予定です。
記事を書くことに加えて、記事への入口を作る
今回のマップは、「記事を増やす」以外にもブログでできることを考える機会になりました。すでに書いた記事を、場所という別の切り口でつなぎ直す取り組みです。
ChatGPTと相談しながら、最初の「地図にピンを置きたい」というアイデアを、地図・一覧・絞り込みのあるページへ形にしていきました。
大分のお出かけ先を探すときに使いやすい入口になるよう、これからも内容を整えていきます。
