非営利団体向けウェブサイトテンプレート

人々はたいてい、シンプルな疑問を持って訪れます。つまり、この団体は何をしていて、どう支援できるのか、ということです。

ホームページは、最初の画面でその答えを示す必要があります。短いミッションステートメント、印象的な1枚の画像、そして分かりやすい行動ボタンがあれば十分なことが多いです。

訪問者がよく探すのは次のような情報です。

• 支援している課題やコミュニティの分かりやすい説明
• プログラム、イベント、最近の更新など、現在の活動の証拠
• 明確な寄付導線
• ボランティアやパートナーシップの情報
• 連絡先や所在地（該当する場合）
• 団体が実在し、活動していることを示す証拠

非営利団体では、デザインと同じくらい信頼が大切です。つまり、漠然とした表現よりも、実名、実際の写真、そして具体的な活動内容を使うことが重要です。

多くの非営利団体サイトは、少数の目的別ページでうまく機能します。

実用的な構成は次のとおりです。

• Home: ミッション、主要な成果、主な行動導線
• About: 団体のストーリー、リーダーシップ、価値観、支援対象
• Programmes: 提供するサービス、キャンペーン、取り組み
• Get Involved: ボランティア、パートナーシップ、募金、ニュースレター登録
• Donate: 分かりやすい支援方法と、寄付金の用途
• News or Updates: 最近の活動、イベント、現場のストーリー
• Contact: メール、フォーム、電話、住所、来訪者向けの地図

ホームページでは、次のようなセクションが役立ちます。

• ミッションステートメントと寄付ボタンを含むヒーロー
• 簡潔なインパクト概要
• 注目のプログラム
• ボランティアや支援方法
• 最新ニュースや今後のイベント
• 許可がある場合の推薦文やパートナーのロゴ
• 連絡先とSNSリンクを含むフッター

地域向けサービスを運営している場合は、対応エリアの情報や、訪問時の実用的な案内も入れましょう。

非営利団体のコピーは、具体的で読みやすいことが最優先です。できるだけ曖昧なミッション表現は避けましょう。「地域をエンパワーする」と言う代わりに、実際に何を、誰に対して、どう提供しているのかを説明してください。

良いホームページのコピーには、通常次の内容が含まれます。

• 誰を支援しているか
• 何をしているか
• なぜ今それが重要なのか
• 訪問者が次に何をできるか

たとえば、プログラムは次のように具体的に書けます。毎週の食料配布、放課後の学習支援、法律相談、救助・再譲渡活動、地域ワークショップなどです。

写真は、演出されたものよりも、記録性のある雰囲気が望ましいです。以下を使いましょう。

• 実際のプログラム写真
• スタッフやボランティアのポートレート
• イベント、スペース、使用中の資料の写真
• 可能であれば統一感のあるトリミングとライティング

文脈が助けになる場合はキャプションも追加してください。写真に配慮の必要な人々が含まれる場合は、適切な許可を取得し、画像を適切に使用してください。

必要な機能は団体の運営方法によって異なりますが、いくつか定番があります。

寄付フローは、しばしば最も重要です。MoremadeにはStripeの組み込みコネクタがあるので、希望する価格や寄付額でチェックアウトを設定できます。

そのほか、役立つ追加機能には次のようなものがあります。

• 一般問い合わせ用のコンタクトフォーム
• ボランティア応募フォーム
• イベント登録リンクや申し込み
• ResendやSendGridを使った更新用メール登録
• オフィス、センター、イベント会場の地図
• 必要に応じてSupabaseを使った簡易データベース連携フォームやメンバーエリア

定期的に更新を出すなら、繰り返し使えるニュースカードやイベントカードに対応したレイアウトにしましょう。チームが文言を頻繁に直す必要があるなら、短いセクションを使って入れ替えや並べ替えをしやすくすると便利です。

直接サービスを提供する団体では、インタラクティブ機能を増やしすぎるより、明確な問い合わせ導線のほうが役立つことが多いです。

Moremadeでは、まず平易な言葉でサイトを説明することから始めます。たとえば、「ホームページ、Aboutページ、プログラム一覧、寄付ページ、ボランティアページ、問い合わせフォームを備えた非営利団体向けサイト」と依頼できます。

AIエージェントがソースコードを書き、ライブプレビューを表示します。サイトは実際のReactとTailwindコードで構築されます。

その後は、チャットで調整できます。

• 見出しを変える
• セクションを差し替える
• 色や余白を調整する
• 寄付セクションを追加する
• ボランティアのCTAを書き直す

ビジュアルインスペクタで要素をクリックして変更したり、コードビューを開いたりすることもできます。

準備ができたら、ワンクリックで無料の yourname.moremade.ai サブドメインに公開できます。有料プランでは独自ドメインを接続できます。ドメインはMoremade内で購入することも可能です。

ソースファイルが必要なら、いつでもプロジェクト全体をZIPで書き出すか、GitHubへプッシュできます。

公開前に、基本項目を丁寧に確認しましょう。

• 最初の画面でミッションが明確に伝わるか確認する
• すべてのボタン、フォーム、寄付リンクをテストする
• 連絡先、住所、営業時間やイベント時間を確認する
• モバイル表示で長い文章や画像の切り抜きを確認する
• プログラムページが、対象者と参加・支援方法を説明しているか確認する
• 各ページの内容に合ったページタイトルとメタディスクリプションを設定する
• 大きな画像を圧縮して、ページの表示速度を確保する
• 名前、日付、寄付に関する文言を校正する
• 独自ドメインを使う場合は、宣伝前に接続確認をする

非営利団体のサイトは、ページ数が多くなくても十分機能します。必要なのは、分かりやすい構成、信頼できる情報、そして次に取るべき行動が明確であることです。