あなたのミッションを分かりやすく伝え、寄付を簡単・安全・信頼できる形で受け付ける非営利団体のウェブサイトの計画、構築、公開方法を学びます。

非営利のウェブサイトは一度に何でもできるわけではありません。テンプレートを選んだり見出しを書いたりする前に、サイトがあなたのミッションと訪問者に対して何をすべきかを明確にしましょう。
ほとんどの非営利サイトは一つの主要目標といくつかの補助目標を持ちます。一般的な主要目標の例:
「全部」を選んでも構いませんが、順位を付けてください。最重要目標がナビゲーション、ホームページのレイアウト、および主要ページで強調する内容を決めます。
主要な訪問者グループと、到着したときに彼らが何をしようとしているかをリストアップしましょう:
コンテンツ作成時に「これはどの観客向けで、どんな質問に答えるのか?」と問えるようになります。
ほとんどの訪問者にしてほしい行動の短いリストを選びます。典型例:
これらはヘッダーで見つけやすく、戦略的な箇所で繰り返して表示します。メニューに埋もれさせないでください。
月次の寄付コンバージョン、メール登録、ボランティア応募、問い合わせフォームの完了など、実際の進捗を反映する計測可能な成果を定義します。ローンチ後に基準値を設定し、劇的な目標ではなく着実な改善を目指しましょう。
各ページに役割があるとき、非営利サイトは最も機能します。コピーを書いたり色を選んだりする前に、訪問者に次に何をしてほしいか(寄付、ボランティア、イベント参加、単にミッションを理解するなど)を決め、それらの行動が数クリック以内にわかる構造を作りましょう。
ローンチ時にほとんどの非営利に必要なコアページ:
混乱を減らしたり、重要なオーディエンスを支援したりする場合に有効:
混みすぎたナビゲーションは人を遅らせます。トップレベルは1つにして最も重要な行き先だけを入れましょう(多くは Home, About, Programs, Impact, Donate, Contact)。項目が多い場合は「Get Involved」や「Resources」の下にまとめます。
各ページは「このページの目的は何か?」と「訪問者は次に何をすべきか?」に答えるべきです。例:
1ページでやりすぎている場合は分割するか、主要目標を支えない要素を削除してください。
ミッションメッセージは、訪問者が20秒の閲覧後に友人や理事、潜在的寄付者に繰り返せる短い一文です。何をしているか、誰を対象にしているか、なぜ重要かを要約できなければ、寄付ページに余計な負担がかかります。
次の「新しい訪問者テスト」を通るような一文を書きましょう。具体的で能動的、業界用語は使わないでください。
効果的なシンプルな構造:
We help [who you serve] by [what you do] so that [the change you create].
例(現実に合わせて調整してください):
詳しい説明が必要な場合は、それを補助コピーとして扱い、ミッションそのものを長くしないでください。
ミッション文の直後に、次の2〜4行を短く添えてください:
「コミュニティのエンパワーメント」のような抽象的表現は、すぐに具体例を示してください。内部用語は日常語に置き換えましょう。例:
ミッションは人の成果に結びつくと実感が生まれます。次の要素を示す短いストーリーを1〜2件共有しましょう:
ストーリーは具体的に:ある瞬間、決断、結果。必ず明確な同意を取り、必要に応じて識別情報は伏せ、氏名/写真を変更した旨を明示してください。
単純なストーリー形式:
“以前は…、[人物] は…に苦しんでいました。今では…、彼らは…できるようになりました。あなたの寄付は…の資金になります。”
一度使えるミッションラインができたら、ホーム、/about、/donate の上部などで一貫して使ってください。繰り返しは理解を育み、理解は寄付者の信頼を築きます。
ホームページは全てを語る場ではなく、訪問者に数秒で次のステップを選ばせるための案内役です。多くの訪問者は明確な目的(寄付、支援を受ける、ボランティア)を持って来るため、ページは案内標識の集合のように動くべきです。
「誰で何をする組織か」が一見でわかる強いヒーローセクションを作成します:
ヒーローは視覚的にシンプルに保ち、モバイルでスクロールせずに読めるようにします。
ヒーロー直下に、小さな「証拠ポイント」帯を入れて短時間で信頼感を作ります。正確なデータで裏付けできるものを選びましょう:
数値がない場合は信頼できる代替文(例:「2014年からクラーク郡で活動」や「地域の12校と連携」)を使います。
メニューを探させないでください。カードやボタンとして3〜4の顕著な選択肢を提示します:
各オプションには1文の説明を付け、訪問者が自己選択しやすくします。
ページは説明的な見出し、ゆとりのある余白、簡潔なコピーで短いセクションに分けます。効果的なシンプルな流れの例:
見出しをざっと見て団体が理解できるなら、ホームページは目的を果たしています。
寄付者やボランティアは、あなたが「実際に何をしているか」を素早く理解したい—マーケティングの誇張は避けてください。Programs と Impact の目的は、仕事を具体的かつ測定可能で正直に示すことです。
各プログラムについて、次の点を平易に説明します:
このレベルの明確さが「ミッションのぼやけ」を防ぎ、期待のずれを減らします。
インパクトは証拠に基づくとき最も説得力があります。裏付けられる成果を使い、文脈を添えてください:
「私たちはホームレスを根絶します」「すべての人生を変えます」のような断定は避け、成果が参加者の選択や住居の空き状況、追跡率などに依存する短い説明を添えます。
プログラムページや /impact ページには、実際の予算や制約に合った簡潔で具体的な一文を入れます:
特定の寄付が指定寄付(制限付き)か否かを明示できる場合は書いてください。
協働と同意を反映した画像を選んでください。「貧困ポルノ」は避け、未成年の写真は明確な許可がない限り使わないでください。キャプションは詳細を過剰に開示せずに意味を付加できます:例「ボランティア主導のパントリー配布、2025年3月」。
各プログラムセクションの末尾に /programs や /impact などの詳細ページへのリンクを入れ、動機が高いときに行動できるようにコンテキストに応じた寄付ボタン(「このプログラムを支援する」)を配置してください。
寄付の流れは迅速で落ち着きがあり予測可能であるべきです—特に携帯で閲覧している場合。目標は、支援者が1分以内にギフトを完了でき、資金の使い道や支払いの成功に迷わないことです。
まずはOne-timeとMonthlyの2つをはっきり提示します。月次寄付は継続的支援を得やすいので目立たせますが、強制や罪悪感を煽らないでください。
推奨金額は寄付者の判断を早めます。小さなセット(例:$25、$50、$100、$250)を示し、金額が具体的な成果に紐づけられる場合のみそのラベルを付けます(例:「家庭向けの1回の学習支援を支える」)。金額と成果を確実に結びつけられない場合は「Most common」や「今日を助ける」など中立的なラベルを使い、必ず「Other amount」も含めてください。
追加の入力欄は寄付を減らします。フォームは支払い処理と領収書送付に必要な情報に絞ってください。
通常は必須項目を名前、メール、支払い情報に限定します。電話番号、住所、寄付の献辞、ニュースレターのオプトインなどは任意にするか、寄付後に収集することを検討してください。
モバイルでは大きなボタン、読みやすいテキスト、最小限のスクロールが重要です。支払いツールが対応していれば Apple Pay や Google Pay のようなウォレットオプションを有効にして高速決済を提供してください。
「Donate」ボタンの近くにコンパクトな安心文を置きます。具体的で簡潔に:
ここは /privacy や /contact へのリンクを置くのにも適していますが、寄付ページから離れさせないでください。
オンラインで寄付できない支援者のために、フォーム下に「その他の寄付方法」セクションを短く置きます:
別途「Ways to Give」ページを用意しているならそのリンクを置きますが、主要な寄付導線はシンプルに保ってください。
寄付直前の人は内心で「これは本物か、私の寄付は有効に使われるか?」と問います。ウェブサイトは防御的にならずにその基本を簡単に検証できるように答えられます。
寄付を決める箇所(寄付ページ、フッター、About ページ)に信頼の手がかりを置きます。
「Financials & Policies」の小さなセクションは大きな効果があります。可能なら公開してください:
これらはフッターから辿れるようにして、各ファイルが何年分で何を示すかを1行で説明します。
寄付者は連絡可能な組織を信頼します。明確な連絡先—メールアドレス、電話番号(あれば)、所在地(公共のオフィスがなければ活動地域を記載)と簡単な問い合わせフォームを提供してください。
この情報は全ページのフッターに表示し、より詳しい問い合わせ用の Contact ページも用意します。
簡潔なFAQで躊躇やサポートの問い合わせを防ぎます。取り上げる内容:
寄付ページからFAQへリンクして、寄付者が必要なときにすぐ答えを見られるようにしてください。
アクセシビリティとモバイル第一の設計は、より多くの人がミッションを理解し重要な行動を完了できるようにします—特に携帯で閲覧する人や支援技術を使う人、遅い回線の人です。
モバイル訪問者がピンチズームしたり次を探し回ったりしないように:
スクリーンリーダーはページ構造に依存します。論理的な順序の見出し(H2 → H3)を使い、「もっと」や「情報」など曖昧な見出しは避けてください。
画像には意味を説明するaltテキストを付けます。装飾的な写真は空のaltにしてスクリーンリーダーがスキップできるようにします。
マウスを使わない訪問者のために:
モバイルファーストはパフォーマンスの考え方でもあります:
WCAG のガイダンスに照らした簡単なベースラインチェックやモバイル速度テストを、ローンチ前と大きな更新後に実行すると良いでしょう。
最良の非営利サイトは、チームが更新を続けられるものです。ツールを選ぶ前に、誰がページを更新し、イベントを追加し、ニュースを投稿し、取締役が見つけた誤字を直すのか正直に判断してください。
多くの団体は次のいずれかに落ち着きます:
更新がスタッフや頻繁にサイトに触れないボランティアによって行われるなら、編集が簡単で組み込みフォームやテンプレートがあるツールを優先してください(カスタマイズ性は二の次でよい)。
よりカスタムなワークフロー(ボランティア申請、プログラム応募、寄付者ポータルなど)が必要で長い開発サイクルを避けたい場合は、チャットでページやフローを記述すると React ベースの Web アプリと Go + PostgreSQL バックエンドを生成できるようなプラットフォーム(例:Koder.ai)のようなものが助けになることがあります。プランニングモード、ホスティング/デプロイ、カスタムドメイン、スナップショット/ロールバックのような機能は、小さなチームの更新を安全にします。
ドメインは組織名にできるだけ近く、発音して伝えやすいものにします。
理想の .org が取れない場合は読みやすい小さな変化を検討し、代替ドメインはメインサイトへリダイレクトしましょう。
ホスティドビルダーを使う場合はこれらが含まれているか確認し、自前ホスティングなら次を設定してください:
寄付フローではセキュリティを任意に扱わないでください—ブラウザの警告を見た支援者は離れます。
メンテナンスは主にコンテンツの仕事です。軽量なワークフローを書き出しましょう:
月に30分のレビューでも古いイベント、切れたリンク、古いインパクト数の放置を防げます—小さな問題が静かに寄付者の信頼を下げます。
非営利のSEOは「Googleを騙す」ことではありません。地域の支援者、潜在的寄付者、ボランティア、記者があなたの活動と場所を理解しやすくすることです。
重要なページごとに明確で具体的なタイトルと短いメタ説明を用意します。役立つパターンは ミッション+都市/地域+課題 です。
例:
この方針を /donate、/impact、/volunteer、ミッションページなどに適用します。
検索エンジン(と人)は新鮮で現実的な情報を好みます。毎週投稿の必要はなく、現実的な頻度(例:月1〜2回)を目標にしてください。
良いトピック例:
各投稿は焦点を絞り、次のアクション(「この活動を支援する」→ /donate、「関わる」→ /volunteer)にリンクしてください。
内部リンクは訪問者が必要な情報に素早くたどり着くのを助け、ページ同士の関連性を示します。自然なリンクを追加しましょう:
シンプルに保ちます:
これらの小さな改善が可視性と支援者の体験に積み重なって効果を生みます。
アナリティクスは一つの問いに答えるべきです:訪問者はミッションを前進させる行動を取っているか?
意図を示す行動を追跡します。多くの非営利にとって重要なのは:
1つだけ設定するなら 寄付フォームの完了 が最も明確な指標です。
コンバージョンイベント(ゴール)を設定して支持者がどこで離脱しているか見えるようにします。寄付フローで注視すべき点:
単純なファネルとして扱います:Donate クリック → フォーム開始 → 寄付完了。各ステップが修正対象を示します。
どこからの流入が最も成果につながるかを習慣的に確認します:メール、ソーシャル、検索、パートナーリンク、報道など。訪問数だけでなく、寄付完了率やメール登録率で比較してください。
これにより推測をやめられます。検索経由がよく寄付に繋がるなら /donate と主要なプログラムページに投資してください。メールが最も多く寄付を生むなら、キャンペーンに明確な行動喚起を優先します。
チーム全員が理解できる軽量の月次レポートを作ります:
一貫性が複雑さに勝ちます。月20分のレビューで長期的に効く改善点が見えてきます。
サイトのローンチは大きな発表で終わりではなく、フィードバックループの始まりです。基本を検証して告知し、ミッションと資金調達を直接支える部分を改善し続けましょう。
公開前にデスクトップとモバイルの両方で素早く点検します:
最初から動作するとは仮定せず、実際に寄付テストを行ってください。プラットフォームにテストモードがあれば使い、なければ少額を寄付して払い戻す方法でも構いません。
確認事項:
不明瞭な点があれば今すぐ簡素化してください—寄付ページはサイトで最も簡単な部分であるべきです。
静かなローンチでも構いませんが、簡単に勢いを作れる告知を逃さないでください。
ローンチ後は摩擦を減らし信頼を高める変更に注力します。
頻繁にページやフォーム、プログラムフローを更新するなら、スナップショットとロールバックが使えるツールは安全な公開に役立ちます(忙しいスタッフ一人とボランティアで回す場合に有効です)。
あなたのウェブサイトを生きた道具として扱いましょう。特に寄付周りの小さな改善は時間とともに大きな効果を生みます。
まず1つの主要目標(例:寄付)を決め、次に1〜2の補助目標(例:ボランティア登録、認知向上)を順位付けしてから始めましょう。ナビゲーションとホームページの設計はその優先順位に沿って行い、主要な行動喚起が常に明確に見えるようにします。
実践的なテスト:初めての訪問者が10秒であなたの活動内容と次に何をすべきかを言えるかを確認してください。
多くの団体がローンチ時に必要とするページ:
必要であれば、Events、Volunteer、Financials のような補助ページを追加してください(本当に特定のオーディエンスに役立つ場合のみ)。
トップナビゲーションは6〜7項目以内に抑えましょう。項目が多い場合は「Get Involved」や「Resources」などの下にまとめてグループ化します。
目標は「行動までのクリック数を少なくする」こと:訪問者が /donate、/volunteer、/get-help に素早く到達できるようにしてください。
ワンセンテンス構成を使いましょう:
We help [who] by [what] so that [change].
その後に、問題と次に何が起きるかを説明する短い2〜4行を追加します—専門用語は避けてください。長い説明が必要なら、それは補助文として扱い、ミッションライン自体を複雑にしないでください。
ホームページは道しるべのように設計します:
セクションは短く読み飛ばせるようにし、モバイルでも機能するようにします。
プログラムはスローガンではなくサービスとして記述します:
インパクトは検証できる成果を使い、背景(制約や依存要素)を付け加えます。『ホームレスを終わらせる』のような保証は、裏付けがない限り避けてください。
寄付ページは落ち着いて手間の少ない流れにします:
「その他の寄付方法」はフォーム下に置き、チェックアウトの妨げにならないようにしてください。
実証できる信頼の印を使いましょう:
これらは /about、/contact、フッターから見つけやすくしてください—寄付を決める段階での確認ポイントになります。
ユーザーのためになる基本的なアクセシビリティに注力しましょう:
ローンチ前にキーボードだけで寄付フォームやサインアップをテストしてください。
ミッションに直結する行動を追跡します。主なものは:
毎月の確認では、ドロップオフ(例:Donateクリックは多いが完了が少ない)を探し、原因(読み込み遅延、項目過多、信頼不足)を修正しましょう。