自治体のごみ分別検索サイトをつくったぞ、でもってオープンソースも公開したぞ（ただし事業系ごみ）

神戸市では、市内の事業者やその従業員の方々（長いので、以降は「排出する方」もしくは「ユーザー」といいます）に向けて、会社やお店から出るごみの分別方法・排出方法が手軽に調べられるWebサイト「事業系ごみ分別検索サイト」（これも長いので「分別サイト」といいます）を公開しています。

キーワード、リスト、業種別のよく出るごみリストから、目的の品目を探すことができます。

[神戸市：事業系ごみ分別検索サイト](http://www.city.kobe.lg.jp/business/regulation/environment/enterprise/bizwastesearch/index.html)

自治体のWebサイトは、専用のCMSで作成するか、外部に制作を発注するのが一般的ですが、この分別サイトは職員である私が作成・運用しています。

今回は分別サイトの企画から運用までをやった中で起こったことや、気付いたことなどをご紹介します。

# 分別サイトをつくったきっかけ
### いきなり堅苦しいお話から
神戸市では、平成28年3月に策定した[第5次神戸市一般廃棄物処理基本計画](https://www.city.kobe.lg.jp/documents/58912/ippaikeikakuhonnbunn.pdf
)の中で、事業系ごみの排出量を平成37年度までに10％削減（対平成25年度比）することを掲げています。

目標を達成するための基本方針の中には次のように書かれています。
>中小規模事業所、テナントビル入居者、ごみの排出を直接行う従業員などこれまで情報が届きにくかった人たちに対しても減量や資源化の促進につなが る情報を発信していく（P.53）

### さて、何をしようか
私はわからないことがあればすぐにスマホで検索します。
着任当初、早速自分の業務をWebで検索すると．．．ほとんど何もでてきません。

「自分だったらインターネット上でごみの捨て方が検索できるサービスが欲しいなあ」

そう思い、このサイトを作り、平成29年春に公開しました。

# サイト公開の効果
### Webでの問い合わせ（閲覧）が増えた
分別サイトは公開以降、様々な方にアドバイスを頂きながら改良したこともあり、平成30年の春ごろからユーザー数が増加し、現在では1日平均150人程度の方にご覧いただいています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/123999/876df2a9-73e4-7ffd-265d-e340a82d6440.png">

この数、ブロガーとしては到底生きていけませんが、1日あたりの問い合わせ件数だと考えればなかなかの数になります。

私の知る限り、分別方法の問い合わせで1日100件も電話が鳴ったことはありませんので、おそらく、Webで調べられるようになったことで、これまで電話や窓口へ問い合わせることのなかった方も見てくれているのではないでしょうか。

### 「何の出し方がわからないのか」がわかるようになった
サイトでは検索ワードや閲覧された品目などを記録しています。
そのため、閲覧した人が何の出し方がわからないと思ったのかがよくわかるようになりました。

こうした情報はサイトの更新に役立てたり（例：[よく閲覧されている品目を検索欄外に掲載](http://www.city.kobe.lg.jp/business/regulation/environment/enterprise/bizwastesearch/search.html)）、広報啓発などその他の施策にも活用することができます。

# つくるときに心掛けたこと・やったこと
分別サイトを作成するにあたっては、以下のことを心掛けました。

1. ユーザーが分別方法を素早く、正確に知ることができるサイトにすること
2. 検索ワードなどを収集し、ニーズの把握など様々な用途に利活用できること
3. 作成者（私）がいなくなっても更新され続ける仕組みにすること

## 1. ユーザーが分別方法を素早く、正確に知ることができるサイトにすること
### サイトの目的は極力絞る
サイトの目的を定めることは、行政のサイトに限らず重要です。
一方で、目的の定め方には行政のサイトならではの留意点もあります。

発信者である行政側は、こう思いがちです。
>「色々なコンテンツを見て欲しいなあ」
「常にこのページを見ていて欲しいなあ」
「隅から隅まで穴が開くくらいしっかり見て欲しいなあ」

一方でユーザーは、たいていの場合こう思っています。
>「必要な情報だけが必要なときに欲しいんだ」
「回りくどい前置きとかいいからさっさと結論が欲しいんだ」
~~「できればこんなサイトよりYou○ube見たり、ツムツ○したりしたいんだ」~~

．．．想いの乖離が激しすぎて泣けてきますが、現実に目を背けてはいけません。

分別サイトの閲覧データもそれを裏付ています。
 
- ユーザー数のうち、93%が新規ユーザー
- 平均セッション継続時間は1分30秒

※いずれも平成30年12月のもの（Googleアナリティクスより）

想像ですが、ほとんどのユーザーが、突発的に調べる必要の生じた1〜2品目を調べてセッションを閉じてるのではないでしょうか。

このことからも、行政のサイトは、サイトの目的を極力絞っておき、ユーザーに的確な情報を素早く届けられるものがよいと考えています。

## 2. 検索ワードなどを収集し、ニーズの把握など様々な用途に利活用できること
### 目的達成のためのデザインとは
分別サイトの場合、排出する方にとっての目的は「排出方法を調べること」に限定しています。
また同様に、市にとっての目的も「排出する方のニーズを把握すること」に限定しています。

そして、この目的を実現しつつ、ユーザビリティも極力損なわないようにする方法として、以下のような仕組みを採用しています。

* 検索ボタンを押下したら検索ワードを記録する
* 品目が選択されたらその品目を記録する

ユーザーにとっては、入力と同時に検索結果を表示したり、検索結果に排出区分を併記した方が使いやかったのかもしれませんが、その仕組みでは情報を正確に収集することは難しいと思っています。
（私が方法を知らないだけなのかもしれません…どなたか知ってれば教えてください）。
<img src="https://qiita-image-store.s3.amazonaws.com/0/123999/78976f35-7689-126e-347a-8f947de5b2d8.png">

画面構成もシンプルにしています。
色んな機能やリンクは配置していません。
本来の目的以外の行動を誘発し、ユーザーも我々も欲しい情報を収集し損なう恐れがあるからです。

### 見た目はどうしたか
見た目については、私はデザイナーでもなければ、絵心もありませんので、とりあえず以下のことには気を遣うようにしました。

- 流行のデザインは眺めておく<br>
※「フラットデザイン」「マテリアルデザイン」などのドキュメントから「今年流行するWebデザインの最新トレンドまとめ」といったページまで幅広く...
- 「2色しか使わないルール」を徹底<br>
※こう決めておくだけですごく捗ります（他の資料作成などでも使えます）
※サイトで使っている緑色は、神戸市章の色を使いました（神戸っぽくてエコなイメージなので）
- 「無意識に不快感・違和感を感じない」ポイントを押さえる
  - 端を揃える
  - 大きさを揃える
  - 高さを揃える など ※他のサイトを色々眺めてみよう
- 事あるごとに他者の意見を聞く<br>
※自分でいいと思うものは、たいてい他者はいいとは思ってくれない...と思うくらいがちょうどいい

## 3. 作成者（私）がいなくなっても更新され続け仕組みにすること
### 後任が'ITオンチ'である可能性も考える
ほとんどの行政職員は、ExcelやWordは使えても、コードの書き方や、CSSやJavaScriptが何なのかといったことは知りません。

そもそもPCに対して苦手意識を持つ人もいます。

本市では近年、職員のデータリテラシーを高める取り組みを行ったりもしていますが、そういったスキルを持った人が自分の後任に配属されるとは限らないのです。
極論ですが、ITオンチが配属されたとしても今のクオリティが保てる仕組みにしておく必要があります。

### なるべく自動化する
下図は、分別サイト関連の業務フローです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/123999/915f8c57-6a9a-fd6b-99d5-111930f3717a.png">
流れをまとめると．．．

1. ユーザーがサイトを閲覧する → ログを残す
2. 蓄積したログを取得する
3. 取得したログを分析・編集する
4. サイト用のデータや、オープンデータ用のファイル、職員向けの分別一覧に加工して公開・配布する
5. 1. にもどる

となっています。

もしこの一連の作業をITオンチな人に任せてしまうとどうなるでしょう．．．はは。

そこで、これらの作業を極力自動化することにしました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/123999/85ed2e72-5338-13c0-774c-beb217f22237.png">

上図の緑に塗られた部分が自動化した部分です。

分別サイトでは、GoogleAppScript（GAS）によりGoogleスプレッドシートにアクセスログ、検索ログ等を記録しています。
また、月替りに直前1ヶ月分のログを別ファイルに保存し、任意のメールアドレスにExcel形式で自動送信しています。

↓ やり方を別記事にまとめました
[GASで擬似的なアクセスログをつくる - Qiita](https://qiita.com/S_Kosaka/items/539394beaaf02a4a0998)

品目データの管理はExcelで行っています。
ごくごく普通のExcel操作で一覧を編集し、ボタンを１度クリックするだけで、サイトのデータベースであるJSONファイルや、オープンデータ用のCSVファイル、職員間で共有する分別一覧用のExcelファイルが出力されるようになっています。

あとはCMSでのアップロードや、メールでの共有作業を行えば完了です。

これでもだめですかね．．．はは。

# いざ、公開
### 導線はたくさん用意しよう
いいサイトを作った！だけでは意味がありません。
サイトに訪れてもらうための工夫も大切です。

たとえば、自身が管理する他のページのわかりやすいところにリンクを貼ってみたり、検索窓を設置して「何だかよくわからないが、とりあえず打ち込んでみるか」と思ってもらえるような工夫をしてみたりしました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/123999/984a1f5a-c1e2-9b1c-e613-8e371b7f3ba4.png">

その他、メールマガジンや市のFacebookページでも広報しましたが、思いのほか効果があったのは郵便による案内でした。
事業者に向けたものということもあったのでしょうか。

### SEO対策も欠かせない

分別サイトには1300品目以上を収録していますが、それらをすべてサイトマップに登録しています。

こうすることで、検索エンジンで直接「神戸市 事業系ごみ ○○ 捨て方」などと検索した際に当該品目のページをヒットさせることができるようになります。

↓ やり方を別記事にまとめました
[拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita](https://qiita.com/S_Kosaka/items/ab6465141061e08bce64)


### その他にやっていること
#### 検索結果の分析
月に１度、検索結果や品目ごとの閲覧数を解析しています。

検索で「該当なし」となった品目を追加したり、表記ゆれや誤字脱字を分析し（例：サーバ（ー）・発砲スチロール）、そういった入力がなされた場合でもユーザーが求める結果を表示できるよう、プログラムやデータを修正しています。

#### ユーザー行動の分析
ユーザーがどのボタンやリンクを選択したかなどを分析し、レイアウトの修正などに活かしています。

「これは便利に違いない」と思って配置したものが全く使われていなかったことがわかったときの寂しさにはまだ慣れませんが。

#### メニュー画面であそぶ
月に１週間、トップ画面やロゴのデザインを、その月にあるイベントにちなんだ「限定デザイン」に衣装チェンジしています。
ふと訪れたユーザーが「また見たいな」「おもしろいな」と思ってもらえればいいなと思っています ~~...っていうのは建前でほんとはたのしいからやってます～~~ 。

# オープンソース化しました
ごみの分別方法を検索するサイトやアプリは、家庭ごみ向けのものではもう一般的です。
ですが、事業系ごみのサイトやアプリを私は他に知りません（既にあったらごめんなさい）。

実際に公開してみてわかったのは、意外にも世の中にニーズがあるということです。
きっと、他の市町村の事業者やその従業員の方々にとっても、きっとあったら便利に違いないと思います。

ということで、このほど、サイトのデータ一式をオープンソースとして、神戸市のGitHubアカウントにて公開することにしました。

https://github.com/City-of-Kobe/bizwastesearch

多くの方（特に自治体関係者の方）に興味を持っていただけることを期待しています。


**<おことわり>**
開発環境や本番環境等の都合により、公開しているサイトはモダンな方法を用いずに開発しています。
扱いづらいかもしれませんが、その点ご容赦ください。

# おわりに（謝意）
開発に際し、自分の勝手を黙って見守ってくれた上司や、技術についてアドバイスいただいた方など、とにかく周囲に恵まれていたと感じています。

この場をお借りして心より御礼申し上げます。