FindNPO のデザイン｜公的データの信頼感を画面で伝える

FindNPO は、全国のNPO法人、社会福祉法人、公益法人などを、地域と分野から探せる情報サイトです。伎冶メディアネット（伎冶商事合同会社）が運営するサイトで、Lapisデザインラボの制作事例の一つです。決めた色と書体、作りの一覧は制作事例「FindNPO」の詳細ページに載せています。

ここでは、その一覧を繰り返すのではなく、データを扱う情報サイトやポータルサイトを作るときに、どんなことを考えて見せ方を決めたのかを説明します。業界の情報サイト、事業所の検索サイト、地域のポータルなど、たくさんのデータを載せるサイトを作ろうとしている方が、自分のサイトに置き換えて読めるように書いています。

情報サイトに特有の課題

会社のホームページと、情報サイトやポータルサイトでは、デザインで解くべき課題が大きく違います。

	会社のホームページ	情報サイト・ポータル
ページの数	数ページから数十ページ	数千から数万ページ
訪れる人	その会社に関心がある人	何かを探している人。目的はさまざま
主な道筋	トップから読み進める	検索や一覧から、目当てのページへ直接
信頼の元	会社の実績や人	情報の正しさと出どころ

FindNPO では、次の3つを課題として設計を始めました。

1. 公的なデータは一覧表としては存在するが、名前を知らない人が探すための入口が無い
2. ボランティアや会員として参加したい人、寄付をしたい人、協働の相手を探す企業や自治体と、訪れる人の目的がばらばら
3. 公的な情報を扱う以上、見た目の軽さが信頼を損なう

名前を知らない人のための入口

情報サイトを作るとき、まず思い浮かぶのは検索窓です。ところが、検索窓は、探している相手の名前を知っている人にしか役に立ちません。NPO法人を探している人の多くは、「近くで子どもの支援をしている団体」のように、条件で探しています。

そこで、検索窓だけに頼らず、都道府県と活動の分野という二つの軸から入れる入口を用意しました。分野は、内閣府の20の活動分野を7つにまとめ、分野の名前を知らない人のために「子どもの育ちを応援したい」のような言葉からも選べるようにしています。探す人が必ず知っている手がかり（自分の住む地域、関心のある分野）から入れるようにすると、名前を知らない人も目当ての団体にたどり着けます。

自分のサイトで考えるときの問い

• 探す人は、何を手がかりに探しているか（地域、分野、目的、条件）
• その手がかりから、一覧、詳しいページへと進む道があるか
• 検索窓で見つからなかったときの、次の道が用意されているか

目的の違う訪問者に、同じ画面で応える

FindNPO を訪れる人の目的は、ボランティアや会員として参加する先を探す、寄付先を探す、協働の相手を探す、と分かれています。目的ごとに別の画面を作ると、ページの数が増え、管理も難しくなります。

そこで、団体の詳しいページには、どの目的の人にも要る情報（活動の内容、地域、規模、連絡先、公開されている財務の情報）を同じ順番で並べ、目的によって見る所が変わっても、迷わず読めるようにしました。連絡の手段がある団体のページでは、冒頭に、参加・寄付・協働のそれぞれで何を聞けるかの案内を置いています。一覧の画面でも、団体を比べるときに見る項目を揃えています。

情報サイトでは、「全員に同じ情報を、同じ場所に」置くことが、結果としてどの目的の人にも使いやすい画面になります。

一覧の画面で見せる項目を絞る

情報サイトの一覧の画面は、たくさんの項目を並べたくなる場所です。しかし、一覧に項目を詰め込むほど、一件ずつの違いが読み取りにくくなります。FindNPO の一覧では、団体を見比べるときに最初に見る項目（名前、法人の種類、活動の分野、所在地、経常収益や常勤の人数といった規模の目安）を短く並べ、詳しい情報は団体のページで読んでもらう形にしました。気になった団体は「検討リスト」に入れておき、あとでまとめて見比べられるようにしています。

一覧に何を出すかは、「この一覧を見て、次にどの一件を開くかを決めるのに、何が要るか」で考えます。決めるのに要らない項目は、一覧から外して詳しいページへ送ります。

スマートフォンで探す人を先に考える

情報サイトを訪れる人の多くは、スマートフォンで探しています。パソコンの広い画面で表のように並べた一覧は、スマートフォンでは横にはみ出したり、文字が小さくなりすぎたりします。

FindNPO では、一覧の一件を、罫線で区切った台帳のような行にまとめ、スマートフォンでも表のように横に広がらないようにしました。デザインを確かめるときは、パソコンの画面より先に、スマートフォンの画面で、探す、比べる、開くの一連の動きを試します。

見た目の軽さが信頼を損なう

公的なデータを扱うサイトが、にぎやかな色や、軽い書体で作られていると、扱っている情報まで軽く見えてしまいます。FindNPO では、見出しに新聞や公的な資料に近い字面の書体を選び、色は藍を基調にして、背景には真っ白ではなく、わずかに黄みのある地の色を敷きました。影と丸い角は使わず、細い線で区切っています。強い朱は「探す」「問い合わせる」のような押してほしい所に絞りました。

長い一覧を読むサイトでは、背景の色も大切です。真っ白な背景は、長く見ていると目が疲れやすく、紙の名簿のような少し柔らかい地の色の方が、落ち着いて読み進められます。

自分のサイトで考えるときの問い

• 扱っている情報の性質は何か（公的、専門的、身近、楽しい）
• 書体と色は、その性質に合っているか
• 長く読む画面で、目が疲れない地の色になっているか

データの出どころを各ページに書く

データを扱うサイトで最も大切な信頼の元は、情報の出どころです。FindNPO では、各団体のページの基本情報のすぐ下に、どこが公表した情報か、いつの時点のものかを書き、その団体の出典の元のページへのリンクも置きました。

出どころが書かれていないと、読む人は数字の正しさを自分で確かめられません。反対に、出どころと時点が書かれていれば、古い情報に気づいたときに、元の資料を見に行くことができます。公開されているデータを載せるサイトでは、そのデータの使い方の条件を確かめることも欠かせません。

大量のページを速く見せる

情報サイトでは、ページの数が数万になることも珍しくありません。件数が増えても表示が遅くならないよう、FindNPO ではデータをデータベースに持ったうえで、ログインしていない人に出すページを配信の拠点に保存しています。団体や運営が内容を書き換えたときだけ全ページを一斉に新しくするので、同じページを開くたびにデータベースを読み直さずに済みます。

表示の速さは、見た目のデザインと同じくらい、使いやすさを左右します。一覧のページが開くのに時間がかかると、探している人は途中で離れてしまいます。デザインを決めるときに、ページの数と更新の頻度を伝えて、作りの面からも見せ方を考えることが大切です。

載っている側の人も使う

情報サイトは、探す人だけでなく、載っている側の人（FindNPO なら団体の担当者）も見ます。自分の団体の情報が正しいか、どう見えているかを確かめ、必要なら直したいと考えます。公表データだけのページには、写真や活動の様子、連絡先が無いことも多く、探す人はそこで先に進めません。FindNPO では、団体のページに運営者の方への案内を置き、団体が無料で登録して、写真や活動の紹介、募集の状況を足し、問い合わせを受け付けられる管理の画面を用意しました。登録の際は、公表されている連絡先などで団体ご本人かを確かめます。掲載をやめたい団体は、アカウントを作らずに停止を依頼できます。

載っている側の人が情報を直せる道があると、情報が新しく保たれ、サイト全体の信頼も上がります。

情報サイトのデザインで大切なこと

1. 探す人が知っている手がかりから入れる入口をつくる：検索窓だけに頼らない
2. 全員に同じ情報を、同じ場所に置く：目的の違う人にも読みやすい
3. 見た目を情報の性質に合わせる：書体、色、地の色
4. 出どころと時点を書く：信頼の元を、読む人が確かめられる形で
5. 作りの面から速さを考える：ページの数と更新の頻度を最初に伝える

できあがった画面は、制作事例「FindNPO」の詳細ページで見られます。Lapisデザインラボのプランと料金はサービスと料金に、ほかの制作事例は制作事例に載せています。