コラム

コラム

NGOのホームページで参考になるサイト【事例10選】

ホームページを作る・新しくすることになったら、まず参考になるサイトを探される方が多いと思います。しかし、NGOの優れたホームページがまとまっているサイトはほとんど見かけません。


そこで、今回のNPOWebiderコラムでは、参考になる優れたNGOのホームページをご紹介させていただくとともに、お手本になるポイントをお伝えします!

目次

シンプルなメニューで情報にすぐ辿り着ける構成-JEN

シンプルなメニューで情報にすぐ辿り着ける構成-JEN

特定非営利活動法人ジェン HPを見る

非営利・非政府活動はアピールしたいことや求められる配慮が多く情報が溢れがちなのですが、JENのホームページはとてもシンプルです。

 

TOPページから下層のサブページに入っても、サイドメニューが右側に追従してくるのでページ間の移動がしやすくなっています。

トップページに伝えたいことをまとめる-PLAS

トップページに伝えたいことをまとめる-PLAS

特定非営利活動法人エイズ孤児支援NGO・PLAS HPを見る

一般的にトップページは、上から順にロゴやメニューがあり、写真や動画があり、お知らせ、サブページへの移動ボタン…と続きますが、PLASのホームページはトップページを読むと大まかに団体のことが理解できるような構成になっています。


活動を始めたばかりでコンテンツがまだそこまでたくさん無いという団体は、トップページで大まかに団体のことを伝えるのも有効です。

活動への参加方法を1ページにまとめる-シャプラニール

活動への参加方法を1ページにまとめる-シャプラニール

特定非営利活動法人シャプラニール=市民による海外協力の会 HPを見る

遠い国で起こっているように思えるNGOの活動に、自分にできることは何か知れるページを制作しておくのは重要です。どのような参加方法があり、自分に合った方法は何か伝えるページを用意しておくと、最初の一歩が踏み出しやすくなります。

『初めての方へ』ページをつくる-ウォーターエイド

『初めての方へ』ページをつくる-ウォーターエイド

認定NPO法人ウォーターエイドジャパン HPを見る

最近、NPOのホームページでよく見かけるのが「はじめての方へ」ページです。


団体概要やどんな社会課題に対して活動をしているのかを分かりやすく伝え、最後に支援を求めます。訪問者は1ページで団体のことを把握できる上に、どんなアクションをしたらいいのかが分かり、支援にも繋がりやすいので、これからホームページを作る・新しくされる団体にはぜひ作っていただきたいです。

ファーストビューがHPの印象を決める-セーブ・ザ・チルドレン

ファーストビューがHPの印象を決める-セーブ・ザ・チルドレン

公益社団法人セーブ・ザ・チルドレン・ジャパン HPを見る

ホームページに訪れたとき最初に表示される一画面を「ファーストビュー」といいます。


セーブ・ザ・チルドレン・ジャパンは赤をメインカラーに、印象的な写真でファーストビューを作っており、切迫感が伝わってきます。


また、活動が多岐にわたりページ数が増えやすいNGOでは、下部にページのリンクを一覧で載せておくと、どんな内容があるのか分かりやすく、訪問者は見たい場所にすぐたどり着くことができます。


文字を読みやすく-ジョイセフ

文字を読みやすく-ジョイセフ

公益財団法人 ジョイセフ HPを見る


活動に想いがこもっていればいるほど、説明文は長くなってしまいがちです。そんなときには、字間に気をつけると読みやすくなります。


Webと長文の相性は悪く、説明文を短く収めるのに越したことはありませんが、デザインで工夫する、もしくは動きをつけて工夫するといいでしょう。


寄付募集の見せ方を工夫する-ワールド・ビジョン

寄付募集の見せ方を工夫する-ワールド・ビジョン

特定非営利活動法人ワールド・ビジョン・ジャパン HPを見る 


WBJのチャイルドスポンサーシップ制度のページでは、取り組む課題や寄付制度の説明、実際の子どもたちのストーリーが1ページにまとめられています。


実際に支援している女の子の名前を出し、その子の暮らしを紹介するなど、感情に訴えかけるだけでなく、数字も見せ、支援者の声も丁寧に掲載されているので、初めてサイトを訪れた人でも寄付につながりやすい設計になっています。

活動内容の見せ方を工夫する-世界の医療団

活動内容の見せ方を工夫する-世界の医療団

認定NPO法人世界の医療団 HPを見る 


NGOにとって活動内容紹介のページは必須です。

世界の医療団では、活動ひとつにつき1ページ用意されており、それぞれのページに印象的な写真や、数値、ストーリー、現地からの声など、共感性の高い文章が展開されており、その上、文中には効果的な箇所に支援ボタンが設置されています。


さらに注目したいのは活動内容紹介のページ一覧です。

文字だけで活動の名称を並べているのではなく、Instagramのような正方形の写真に、活動を一言で表すキャッチコピーが重なっており、訪問者は自分の関心の高いページをすぐに見つけられるようになっています。

数字の見せ方を工夫する-プラン・インターナショナル

数字の見せ方を工夫する-プラン・インターナショナル

公益財団法人プラン・インターナショナル・ジャパン HPを見る


活動に共感してもらったり、支援を促したりするのに数字はよく活用されます。例えば、「1,000円の寄付で〇〇ができます」「世界の◯%が~~です」といったものです。


プラン・インターナショナルの「遠い国の女の子の、私は親になりました。」キャンペーン特設サイトでは、それらの見せ方に加えて、「女の子が1年長く初等教育を受けると、その子が将来得る収入が約11%増加。」「女の子の早すぎる結婚を10%減らせば、人産婦死亡率は70%減る」というような、支援があればどれほどの効果があるかを数値化しています。


NGOの活動内容を数字で見せているのではなく、その結果として、どのような変化があるのかが示されているので、見せ方としてとても上手です。

頻繁な更新でアクセスを増やす-テラ・ルネッサンス

頻繁な更新でアクセスを増やす-テラ・ルネッサンス

認定NPO法人テラ・ルネッサンス HPを見る 

ホームページへの訪問者を増やす一番簡単な方法は、ページ数を増やし、検索サイトから流入する窓口を増やしていくことです。


テラ・ルネッサンスでは、ほぼ毎日ブログを更新しており、記事のテーマも様々です。これにより、直接団体に関係がないような検索ワードでもGoogleやYahoo!などの検索サイトにホームページを表示させることができるのでアクセス数が期待できます。


NGOのホームページお手本ポイントまとめ

【構成について】

▽ファーストビューをシンプルに

▽トップページに言いたいことをまとめる

▽活動への参加方法を1ページにまとめる

▽「はじめての方へ」ページをつくる


【デザインについて】

▽訪問者に持たれたい印象をファーストビューに込める

▽文字は読みやすさを意識する


【その他制作での工夫】

▽寄付募集ページは「活動内容紹介+数字+声+支援ボタン」

▽ほしい情報にすぐ辿り着ける一覧ページをつくる

▽支援の結果どう変わるのかを数字で見せる


【公開後の運用について】

▽こまめに更新をしてアクセス数を伸ばす



いかがでしたでしょうか?

よろしければ、非営利活動の実績が年間30団体あり、ホームページ制作と公開後簡単に更新をしていただけるシステムがセットになったNPOWebiderもご検討くださいませ!

▼この記事を書いた人

岡田 有加(okada yuka)

リタワークス株式会社 NPO事業部 コンテンツ制作担当

最近髪の毛がクジャク色になった。