3年かけて「ウォンバットを救出せよ！」に向き合ってみた話
- Launch
- Period
- 3年（！）
- Soft
- language
mamenoです。
サイト制作実践課題 『ウォンバットを救出せよ！』に取り組んでみました。
今回の課題を通して、自主制作を完成させることの難しさを痛感しました。
何を隠そう「やるぞ！」と決めてから完成するまでに3年かかっています（！）
何度も諦めかけましたが、なんとか形にすることができたので、この3年間で考えたことや悩んだことを、記録としてここに残しておきたいと思います。
課題の趣旨
日本では4頭（当時）しかいないウォンバット。
飼育も困難なこともあり、このままだと日本でウォンバットが見られなくなる日が来るかもしれない。
ウォンバットの認知度をあげ、日本でのウォンバットへの関心を高めることで、ウォンバットを日本で飼育し続けられるようにしたい。
そのために、まずは日本一ウォンバットの飼育を頑張っている五月山動物園への関心を高めたい。
課題のゴールは「五月山動物園のサイトへの誘導」です。
コンセプトワーク・企画設計
まずここに50時間以上かかりました（！）
「ウォンバットって何？」「救うってどういうこと？」
そんな問いに向き合いながら、ゲシュタルト崩壊しかけつつも考え続けた軌跡を、ここに残しておきます。
疑問①：ウォンバットにおける課題は「認知度」なのか？
最初にキーワード調査をしていて、ふと思いました。
ウォンバット、意外と認知されてない？
以下は課題に手をつけ始めた2023年当時のキーワードボリュームの画像です。
カピバラと同じくらいのボリューム。
カピバラといえば動物園や水族館などいろんなところにいる人気者。それと同じくらいのキーワードボリュームがあります。
え、ウォンバットって知らない人少ないのでは？
こう感じた私は、「認知度を上げる」というのを課題のゴールに設定するのをやめました。
課題のタイトルは「ウォンバットを救出せよ！」。
ならば、「救う」とは何なのか。
ここからは、“認知”ではなく“救う”という行為そのものに焦点を当てて、考え始めることにしました。
疑問②：ウォンバットを救うとは
そもそも、「救う」とはどういうことなのか。一度立ち止まって、ざっくり整理してみました。
物理的に救う
- 保護活動をする
- 絶滅が危惧されている理由を知り、それを解決する
- 繁殖活動をする
間接的に救う
- 保護活動の支援のための寄付をする
- 池田市のウォンバット寄付（ふるさと納税）をする
「物理的に救う」のは、ハードルが高い！オーストラリアにいるならまだしも日本ではやることも限られるし、今回のゴールから明らかに大きく外れている（この時完全にゴールを見失っていた）ので、「間接的に救う」の方にフォーカスを当てました。
その結果、この課題を通して実現したいことを以下の2つに定めました。
- 日本でウォンバットの飼育に力を入れている五月山動物園への関心を高めること
- 五月山動物園を運営する大阪府池田市へのふるさと納税につなげること
五月山動物園のへの関心を高めてもらうために
ここまでの整理を踏まえて、
今回は「ウォンバットをすでに知っている人」に向けたサイトにしようと考えました。
さらにターゲットを絞ると、
- ウォンバットの存在は知っている
- 「かわいいな」と思ったことはある
- でも、実際に見に行ったことはない
そんな人たちです。
きっかけがあれば動きそうな人。
この層にどうアプローチするかを軸に、サイトの内容を考えていくことにしました。
ペルソナ
年齢や居住地なども細かく設定していますが、ここでは一部を抜粋して紹介します。
- ネット利用状況：
・snsは気づいたらみてる
・気になったことがあったらとりあえず調べる（ブラウザ・sns）
・最新情報はTwitter（X）で収集
・PCはプライベートではあまり使わない - 属性（性格）：
その気になったら行動に移すのが早い、楽しそうなことが好き、散歩途中スタンプラリーとかやってたらコンプリートしたくなる、好きなものはとことん調べる - ウォンバット歴：
元々コアラが好きでオーストラリアの動物のことについて調べたことがあり、ウォンバットの存在を知る。
かわいい〜と思ったし池田に五月山動物園があることは知っていたが、わざわざそのために行くのはなあ…と感じている。
何かきっかけやついでがあったら行ってもいいかなと思っている。
シナリオ
このサイトを通して実現したい理想のストーリーは、こんな流れです。
大阪周辺で散歩したり楽しめるところを探している。
大体の主要な観光スポット（カップラーメンミュージアムなど）は行き尽くした感。
↓
そういえば五月山動物園っていう小さい動物園があったな（調べ始める）
↓
このサイトを見つける
↓
五月山動物園の周辺に色々あることを知る
↓
楽しみになる
↓
実際に会いに行ってmapを見ながら散歩する
（map：https://projects.shibajuku.net/wombat/mameno/meet/map/）
↓
ウォンバットが身近なものになる→ふるさと納税先に池田市という選択肢が入る
ここまでを踏まえてコンセプトシートを作成し、デザインフェーズへ進みました。
デザイン
ここが、いちばんの難所でした…。
全然浮かばない。
浮かばないからやる気も起きない。
そんな負のループにはまり、気づけば2年ほどかかっていました。
それでもなんとか形にするためにやったのは、とにかく自分の中にあるイメージを言語化すること。
思いつく限り、ひたすら言葉にしていきました。
デザインコンセプト
- ファン雑誌（定義：特定のアニメやゲーム、スポーツチームなど、みんなが好きなものについて詳しく知ることができる雑誌。ファン雑誌を読むことで、もっとその趣味を楽しむことができる。） マニア向けという感じよりはライトなファン・潜在ファン
- 観光パンフレット
感じてほしいこと、デザインで目指すこと
- ワクワク感
- 思わずめくりたくなる、手に取りたくなる感じ
- 読みたくなる感じ
- ターゲットが考える「らしい」モチーフ、カラー（ウォンバット「らしい」・観光パンフ、ファン雑誌「らしい」）
テイスト
- 楽しい、ポップ、親しみ、かわいい、わくわく
- 子供っぽ過ぎない、甘くない
- フォント：ゴシック系・ウォンバットが犬や猫に比べてマイナーな動物なので、一般的すぎないフォントを使いたい
- カラーイメージ：オレンジ、カラフル
- テイスト：やわらかい（丸めの形）、ポップ、カラフル
ロゴについて
ロゴマークについて
- ひとめ見ただけで直感的に「ウォンバットのサイトだ」ということがわかるようにしたい
- ウォンバットの形をそのまま落とし込む
- ウォンバットの特徴：語源にもなった「平たい鼻」をロゴに入れたい
ロゴタイプについて
フォントは「natadecoco gothic」を使用しました。
選んだ理由は、wがウォンバットの耳に一番似ていると思ったので、ロゴマークにもロゴタイプにも違和感なく使えそうだと思ったから。
また、ちょっとクセのある形が、「ぱっと見謎の生き物だが、動く姿や写真を見るうちに可愛く見える」ウォンバットに似ていると感じて、ほぼ一目惚れで決めました。
MVで与えたい印象
- かわいい
- ウォンバット！！
- わくわく
ページごとの構想
「★」マークが付いているページが特にサイト内で重要なコンテンツです。
あくまで構想当時のものなのでデザインで一部省略したり見直したりしていて変わっているところもあるかも。
| ページ | 感じてほしいこと（キーワードやイメージ） | 目指すこと | 参考イメージ |
|---|---|---|---|
| Topページ | 雰囲気 わくわく、親しみ、ポップ、 | ウォンバットのことが色々わかりそうだと思ってもらう。 ウォンバットを身近に感じてもらう（親しみを感じてもらう）。 イメージは観光雑誌や観光パンフレット。思わず手に取ってしまう感じ。（https://www.pinterest.jp/search/pins/?q=観光 パンフレット&rs=typed） | https://tomatoto.jp/ https://umajimura.jp/ |
| /meet/ | 情報系、わかりやすい | ウォンバットに会える動物園の詳細と、おすすめ時間帯がわかる | https://hitotoki-hotel.com/ |
| ★/meet/map | 情報・雰囲気 わかりやすい（現地でも確認しながら歩いてもらう想定）、 わくわく（実際に歩きたいと思ってもらう）、 | 五月山動物園に行くための後押しとなること。 五月山動物園へのお出かけがより有意義で楽しいものになるようなサポート。 ============ ここはガイドブック用パンフレット的な感じ 参考 | https://www.guidoor.jp/cities/3008 https://umajimura.jp/course/ |
| ★/support | 情報 真面目な情報だが、硬すぎずさらっと読みやすい。 流し読みしてもどんなことが書いてあるかは大体わかる。 | ふるさと納税があることを知ってもらう ふるさと納税をしてみようと思ってもらう | |
| /know | 雰囲気・お楽しみ サイトの中ではサブ的なコンテンツ。シェアしてもらいやすい形を作ることでこのサイト自体を広める役割もほしい。 | https://umajimura.jp/course/ | |
| /about | このサイトの制作者がわかることで、どういう経緯で作られたのかや目的がわかるので安心感？ |
デザインカンプ
早速作り出しましたがまあ出てこない…
引き出しがなさすぎて、ピンタレスト見たり本屋さんで観光雑誌や動物雑誌を見たり、何かのファン雑誌を見たりしてピンとくるものを探しまくりました。
あとはPCの前で固まってるとほんと出てこないので、ノートに手書きをしてみたり。
手書きの方がなんかいろいろ出てくる気がする…手書き大事。
ちなみに、今回デザインツールはfigma、イラストはiPadでAdobe Frescoというアプリ（無料）を使用して作成しています。
救世主、あらわる
今回デザインに苦戦した大きな理由のひとつが、使える素材がほとんどなかったことでした。
特に、「ウォンバットかわいい！見に行きたい！」と思ってもらうには、写真やビジュアルの力が欠かせません。
Googleで素材を探してみても、暗かったり、イメージと違ったりでなかなかしっくりこない…。
そんなとき、Xで五月山動物園のウォンバットを撮影している方を見つけました。
思い切って「写真を使わせていただけないか」とご連絡したところ、快くOKをいただくことができました。
そこから、一気にデザインが進むように。
サイトにおいて写真の力は本当に大きい。
身をもって実感した出来事でした。
（本当に感謝です…！）
救世主についてはこちらのページで紹介していますので、気になる方はチェックしてみてください！
before after
せっかくなので、最初に作ったカンプと、ほぼ最終形のカンプを並べてみました。
全体的にぼんやりしていた状態からコンテンツごとにメリハリがつき、「何があるサイトなのか」が直感的に伝わるデザインに変わったと感じています。
また今回、「やわらかい」「淡い」といったイメージをWebデザインとして表現する難しさも実感しました。
さらに、MVにおいてはやはり写真の印象がとても大きい。
何を一番に見せたいのかを意識することで、デザイン全体の方向性が定まったと感じています。
また今回は、ターゲットがPCでサイトを見る想定ではなかったため、途中から思い切って3カラムレイアウト（スマホベース）に変更しました。
その結果、「ただでさえデザインが進まないのに、PC・タブレット・スマホとすべてのパターンを考えないといけない…」という心理的なハードルがぐっと下がり、デザインそのものに集中できるようになりました。
コーディング
環境
Orelop Astroという、shibajukuのオーナーである柴田先生が作成されたAstroの環境を使用させていただきました。
2025年の年賀サイトの構築にもAstroを使用していますが、複数ページ構成のサイトをしっかり作るのは今回が初めてでした。
そのため、「どうファイルを分けたら効率よくなるのか？」を考えながら進めていましたが、正直よくわからず…。
「絶対もっといいやり方あったよな…」と思いつつも、（もうすでに始めてから2年経過していたため、）今回は“悩むよりとにかく完成させる”を優先して進めました。
結果として、Astroの便利さをまだ十分に活かしきれていない感覚もあり、ここは今後の改善ポイントです。むずかしい。
苦労した点
いちばん苦労したのは、ヘッダー周りです。
というのも、SPとPCでメニューを切り分けたくない！！！という謎のこだわりがあり…。
レイアウトは変えたいけど、構造はなるべく共通にしたい。
そのバランスを取るのにかなり苦戦しました。
正直、どうやって実現したのかは（1年前のことなので）細かくは覚えていないのですが、「display: contents; 神！！！」と思ったことだけは、はっきり覚えています。
このサイトのここ見て！！ポイント
このサイトの中でもいちばんメインのコンテンツは「マチナカウォンバットMAP」です。
Google My Mapを活用することで、ユーザー自身のGoogleマップでもそのまま開くことができ、実際に街を歩くときにも使える設計にしています。
さらに、
サイト内の「ウォンバット関連ショップリスト」と、マップ上のアイコン番号を連動させることで、現地でも迷いにくい導線を意識しました。
ひとつひとつアイコンを作成してマップに適用していく作業は、正直かなり地道でしたが、その分オリジナリティのある、かわいいマップに仕上がったと感じています。
そして、「こんなにお店があるんだって！」と、友達などに共有するときにやりやすいように、ページurlコピーボタンをつけてみました。
こうした工夫によって、
- 「行ってみたい」がそのまま行動につながる
- 現地でも迷わず楽しめる
- 誰かに共有しやすく、サイト自体が広がっていく
本当はこのマップを使って実際に現地を歩いてみたいのですが、千葉在住のmamenoはなかなか気軽には行けず…。
だからこそ、行けるタイミングで実際に使ってみて、さらに改善していけたらいいなと思っています。
Webサイトは、作って終わりじゃない！
あとがき
最後まで読んでいただき、ありがとうございました。
何度も諦めそうになりましたが、それでも完成させようと思えたのは、
「ここまで相談に乗ってくれた方たちの時間を無駄にしたくない」
という気持ちがあったからでした。
人を巻き込むことも、ひとつの環境づくりなのかもしれない。
そんな気づきも、この課題を通して得ることができました。
この「ウォンバットを救出せよ！」という課題に出会えたこと、そして関わってくださったすべての方に、心から感謝しています。もちろん、このブログを読んでくれたあなたにも。
最後までお付き合いいただき、ありがとうございました！