行政・NPO・公益法人のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

自然保護に取り組む公益財団法人です。活動テーマとプロジェクト、活動報告、財務などの公開資料、自然観察指導員、企業連携、支援方法を分類しています。継続・単発の寄付だけでなく、複数の支援方法や会員の手続きも案内しています。

自団体で取り入れる場合：活動と支援方法、使途・報告を対応させます。寄付を始める人と既存会員では必要な手続きが異なるため、変更や問い合わせの窓口も設けます。

公式案内から比較できる点

森林保全を行う一般社団法人です。植林・育林、木材利用、カーボン・オフセット、講演・イベントを紹介し、法人と個人の支援方法を分けています。個人向け案内にはカードや銀行振込などの寄付も含まれます。

自団体で取り入れる場合：「あなたにできること」という入口でも寄付を扱っています。ボタンの名前から財源を推測せず、支援の種類と手順を説明します。活動実績の数値には累計の対象期間や集計方法を添えます。

公式案内から比較できる点

地域文化資本を活かす事業づくりを支援する株式会社です。公式会社概要では所在地を富山県氷見市南大町27番17号としています。トップには富山県西部・氷見・長野県白樺湖などの取り組みを紹介しています。

自団体で取り入れる場合：行政・非営利団体とは法人種別が異なる参考事例です。会社の事業と、案内されているNPO法人地域文化資本ラボを区別し、地域のビジョン・拠点・サービスの説明方法を比較します。

公式案内から比較できる点

広告・マーケティングやコミュニケーション分野の研究などを支援する公益財団法人です。研究・出版・事業の助成、助成実績、開示情報、研究広報誌、アドミュージアム東京の案内を掲載しています。

自団体で取り入れる場合：助成の種類ごとに対象者、募集期間、必要書類、提出先を整理します。過去実績と募集中の案内を分け、年度を更新しても古い応募条件が残らないようにします。

公式案内から比較できる点

とよたフィルムコミッション推進協議会の撮影支援サイトです。窓口は豊田市役所の観光誘客推進課にあり、映像制作者向けに撮影相談・ロケーション検索・食事宿泊、市民向けにロケ地・エキストラ登録を案内しています。

自団体で取り入れる場合：撮影を依頼する人と協力する人を分け、相談から実施までの流れを示します。場所の掲載だけで撮影許可が得られるとは扱わず、確認する条件や申請先を案内します。

公式案内から比較できる点

高知県日高村の一般社団法人nossonのサイトです。関係人口の創出、いきいきソーシャルアクション、ふるさと納税の委託運営、地域人材支援などを紹介し、視察や地域との関わり方の相談を案内しています。

自団体で取り入れる場合：組織全体と個別事業の役割を分けます。次の「いきかえる・いきなおす」は同じnossonが運営するプロジェクトで、別団体の実績として二重に数えないようにします。

公式案内から比較できる点

nossonが運営する日高村のプロジェクトサイトです。土佐八升豆の栽培、食品開発、農業・林業体験や交流、残渣の活用などの活動とレポート、共同研究・参加の案内を掲載しています。

自団体で取り入れる場合：取り組みの目的と検証済みの成果を区別します。食や体験によるストレスへの効果は、このデザイン事例の記事では検証していません。運営元と協力団体、参加条件を明記します。

公式案内から比較できる点

一般社団法人日本速読解力協会の講座・教室案内です。公式概要には2024年4月の名称変更と、株式会社SRJによるサイト管理・運営が記載されています。学齢・対象別の講座、教室検索、料金・申込の流れ、導入を検討する教室向け案内を分けています。

自団体で取り入れる場合：受講者と導入先で必要な情報を分けます。成果実感の割合は過去の回答結果であり、全員の学力向上や教材の効果を保証する数字としては扱わないようにします。

公式案内から比較できる点

美郷町が提供する地域の魅力を紹介するサイトです。町民の営み、文化、自然などの物語や人物紹介を掲載しています。町公式ドメイン配下の特設コンテンツで、独立ドメインの自治体サイトではありません。

自団体で取り入れる場合：行政手続きの総合案内と、地域を知る読み物の役割を分けます。このサイトについてには企画・制作SHIFTBRAIN、取材・執筆・撮影HEAPS、撮影西部裕介、イラストArtelloと記載されています。制作費や全契約範囲はクレジットだけでは分かりません。

公式サイトの画面で確かめられる点

ファーストビュー全面にクマの写真を置き、白抜きの明朝体で「ヒトとクマとの共存をめざして」と載せている。

右端に青い縦長の「支援をする」ボタンを固定し、左端には個人・法人・お問い合わせを縦書きで並べている。

ロゴとメニューは細い一行に収め、写真の外側に余白を取っている。

自社で取り入れる場合：活動の対象が一目で伝わる写真を1枚選び、支援の入口は固定ボタンで常に見える位置に置く。個人向けと法人向けの窓口は最初から分けて用意する。

公式サイトの画面で確かめられる点

クリーム色の地に、親子と子どもの実写写真をずらして配置している。

キリンやヘビなどの手描きイラストを写真の周りに散らし、やわらかい雰囲気にしている。

「月1,000円から寄付」のボタンを上部に置き、画面下にも橙色の寄付バナーを出している。

自社で取り入れる場合：利用者の写真に自団体のイラストを組み合わせると、制作物の統一感が出る。寄付の金額と入口は、ヘッダーと画面下の2か所に置く。

公式サイトの画面で確かめられる点

ファーストビューは緑一色の線画イラストで、山・街・川で人がごみ拾いをする場面を描いている。

写真は使わず、ロゴと「Keep Clean Keep Green」の手書き文字が中心にある。

メニュー、お問い合わせ、SNSは上端に丸いボタンで並べ、イラストの邪魔をしていない。

自社で取り入れる場合：活動の様子を写真で撮りにくい場合は、1色のイラストで世界観を作る方法がある。描き起こすなら活動の場面を1枚の絵にまとめて依頼する。

公式サイトの画面で確かめられる点

中央に白い丸型の枠を置き、ロゴと「地域貢献をしたいと考える企業と、支援を必要とする団体とをつなげます。」を載せている。

左右に制服姿の学生の写真を、丸や曲線の形で切り抜いて配置している。

右下に「寄付のご相談」「支援団体を探す」の2つの四角いボタンを固定している。

自社で取り入れる場合：支援する側と支援を受ける側の両方に入口が必要な場合は、画面の端に2つのボタンを固定する。色数を決めて、ロゴと同じ配色で図形を作る。

公式サイトの画面で確かめられる点

左に見出し「あなたの新しいふるさとがみつかる。」、右に相談センターの内部・入口・窓口の写真を並べている。

電話番号と営業時間を写真の上に載せ、黄色の丸い「まずは相談する」ボタンを右上に置いている。

画面下部に「重要」のお知らせを赤と薄い赤の帯で2段出している。

自社で取り入れる場合：相談窓口の写真は、建物の外観・室内・対応中の様子の3種類を用意する。電話番号と相談ボタンはファーストビューに入れる。

公式サイトの画面で確かめられる点

活動に関わる人たちの集合写真を大きく置き、角を丸くしている。

左に縦書きで「ともに歩もう、豊かな未来へ」を載せている。

右上に青緑色の「寄付で支える」ボタンを置き、日本語と英語を切り替えられる。

自社で取り入れる場合：笑顔の集合写真は、団体の雰囲気を伝えやすい。寄付ボタンはヘッダーに色付きで置き、多言語にするなら切り替えをメニューの横に入れる。

公式サイトの画面で確かめられる点

ファーストビューに4色のカードを並べ、「定年したら、ちゃんと家の事を考えたい。」など相談者の悩みを書いている。

各カードにイラストと年齢・性別の人物像を添えている。

メニューは右側に縦に並べ、「会員制度」「お問合せ」を黒いボタンにしている。

自社で取り入れる場合：相談者の悩みを人物像つきのカードで並べると、自分の場合と照らしやすくなる。数は4つ程度に絞り、詳細ページへ1つ導線を置く。

公式サイトの画面で確かめられる点

画面の左側に農作業をする2人の写真を大きく置き、縦書きのコピーを重ねている。

右側は白地で、風景写真を段違いの形に切り抜き、団体名を小さく載せている。

「相談する」「応募する」の2つの文字リンクとメニューだけを右上に置き、ほかの要素は置いていない。

自社で取り入れる場合：地域の仕事紹介は、人が働く場面の写真を1枚大きく見せる。導線は「相談する」「応募する」のように行動を表す語で2つに絞る。