NPOのWebサイトを Google Stitch でリニューアルした、3ヶ月の記録

2026.04.12

NPOのWebサイトリニューアルは、予算との戦いだ。

知人に頼まれて、地域の子ども支援NPOのWebサイトリニューアルに関わることになった。「プロのデザイナーに依頼する予算はないが、古くなったサイトを何とかしたい」という状況だった。

私はフロントエンド開発の経験はあるが、専業デザイナーではない。そこで Google Stitch を使ってデザインの部分を補いながらリニューアルを進めることにした。3ヶ月の記録を書く。

NPOのWebサイトが持つ固有の難しさ

NPOのWebサイトには、商業サービスとは異なる設計上の難しさがある。

まず、ターゲットが多様だ。支援を求める子どもや保護者、ボランティアを募集する相手、寄付を検討している支援者、行政や連携機関——それぞれが異なる情報を求めてサイトを訪れる。一つのサイトで複数のニーズに応える設計が必要だ。

また、「信頼感の醸成」が重要だ。支援活動の透明性、実績の可視化、スタッフの顔が見えること——これらが離脱率に直結する。見た目が古くてわかりにくいサイトは、本来届けられたはずの支援者を遠ざける。

Google Stitch をどう使ったか

最初にNPOのスタッフへのヒアリングを行い、「どんな人に来てほしいか」「何を伝えたいか」を整理した。その上で、主要ページのUIを Google Stitch で生成するフローを取った。

トップページは「温かみがあり信頼感のある、子どもの支援をテーマにしたNPOのWebサイト。寄付ボタンを目立たせ、活動写真を大きく使うレイアウト」というプロンプトから始めた。生成された複数のバリエーションをスタッフに見せると、「こういう雰囲気のサイトにしたかった」という反応が得られた。

活動紹介ページは「タイムライン形式で活動実績を時系列で見せるページ。温かいイラスト調のアイコンを使用」というプロンプトで生成。ボランティア募集ページは「フォームを中心に据えた、ハードルの低さを感じさせるデザイン」という方針で作った。

スタッフとのやり取りに使えたこと

Google Stitch を使ってよかった場面の一つは、「スタッフと議論するときのビジュアル共有」だ。

デザインの経験がないスタッフに「どんなサイトにしたいか」を言葉だけで聞いても、なかなか具体的な答えが出ない。ところが Google Stitch で3パターンのビジュアルを作って見せると、「これは違う」「この雰囲気が近い」という反応が自然に出てきた。

「見せてから聞く」アプローチで、ヒアリングの質が上がり、方向性の合意が早くなった。ビジュアルが「共通言語」になってくれた。

3ヶ月でリニューアルを完了した

ヒアリング1ヶ月、デザイン・実装2ヶ月という流れで、3ヶ月でリニューアルを完了した。デザイン費用はゼロ（私のボランティア対応）、実装は既存のCMSを活用したため、実質的な費用は最小限に抑えられた。

リニューアル後3ヶ月で、サイト訪問者のページ滞在時間が旧サイト比で約1.4倍に、寄付ページへの遷移率が約1.8倍になった。Google Stitch が直接的な原因とは言えないが、デザインの刷新が結果につながった手応えがある。

NPO・非営利領域での活用可能性

今回の経験から、Google Stitch は「予算が限られているが品質を上げたい」という非営利・中小規模の団体に特に価値があると感じた。

プロのデザイナーを雇えないからといって、古くて信頼感のないサイトを使い続けることは、本来届けられたはずの支援や共感を失うことにつながる。ツールの力を借りてデザインのハードルを下げることは、社会的に意義があると思う。

よくある質問

Q1. NPOのWebサイトで特に気をつけたデザイン上のポイントはありますか？

「信頼感」と「アクセシビリティ」を特に意識しました。フォントサイズを大きめに設定し、コントラスト比を確保し、操作に慣れていない人でも迷わないナビゲーションを心がけました。また、「顔が見える」情報（スタッフ紹介・活動写真）を充実させることで信頼感の醸成を図りました。

Q2. Google Stitch で生成したデザインをCMSに実装するにはどうしましたか？

生成されたHTMLとCSSを参考にしながら、既存CMSのテンプレートをカスタマイズする形で実装しました。生成物をそのまま貼り付けるのではなく、「スタイルの参考」として使いながら、CMSの構造に合わせて書き直すアプローチを取りました。

Q3. デザイン経験のないスタッフでもビジュアルの判断ができましたか？

「好き嫌い」「合う合わない」のレベルでは判断できました。複数のバリエーションを見せて「どちらが近いか」を選んでもらうことで、方向性を絞り込みました。「良いデザインとは何か」を一から説明するより、実物を見て選んでもらう方が圧倒的に早いです。

Q4. ボランティアでの対応だったとのことですが、他のNPOにも同様の支援ができますか？

Google Stitch を使うことでデザイン作業の負荷が下がり、以前より短時間でリニューアルを進められるようになりました。ただし、ヒアリング・スタッフとの合意形成・実装・テストのプロセスはどうしても工数がかかります。「ツールがあれば即座にできる」ではなく、「ツールがあるから時間を短縮できる」という理解が重要です。