「想いを繋ぎ、支援を加速させる。UX視点で再構築したNPO公式サイト」
プロジェクトの概要
クライアント: NPO法人にこまる 様
URL: https://nikomaru200.xsrv.jp/
担当範囲: サイト構成の再設計 / Webデザイン / WordPress実装 / カスタムCSS / フォーム最適化
使用ツール: WordPress , CSS, Canva
- リニューアル後すぐに求職者様との面談がパタパタと入る。⇨採用情報がうまく伝わっている
- 求職者さんとお話ししているとステキに作ってもらえていると実感。⇨雰囲気の良さが伝わっている
課題と解決策:
目的を達成するための「設計」
今回のリニューアルでは、単なる見た目の刷新にとどまらず、「ユーザーが迷わずアクションを起こせること」を最優先に設計しました。
- 課題: 既存サイトでは、活動への「寄付」や「求人応募」といった重要な導線が埋もれてしまい、ユーザーがどこから支援や参加をすればよいか直感的に分かりにくい状態でした。
- 解決策(UX/UI):
- 戦略的な導線設計: ユーザーがどのページにいても、主要なアクション(寄付・求人)へスムーズに遷移できるよう、ボタンの配置や優先順位を徹底的に整理。
- ストレスフリーなフォーム構築: フォームの入力項目を整理し、CSSによるカスタマイズで「使いやすさ」を追求。入力時の心理的ハードルを下げる工夫を施しました。
- 技術的な工夫:
- SWELLの標準機能をベースにしつつ、独自のCSSを組み合わせることで、団体の個性が光るデザインと高いメンテナンス性を両立。
- 完了後のサンクスページやメール設定まで細かく調整し、システムとしての信頼性を担保しました。
標準機能でのフォームの見え方

カスタマイズ後のフォームの見え方

デザインコンセプト
「温もりと信頼が響き合う、クリーンなデザイン」
NPO法人としての誠実さを伝える白ベースの清潔感あるレイアウトに、活動の温かさが伝わるような柔らかいビジュアルを融合。私のコンセプトである「デザインで可能性を広げる(Expand possibilities with DESIGN)」を体現し、地域社会に活動がより広がっていくような、明るい未来を予感させるデザインを目指しました。
これまでのオレンジのイメージはそのままに青い空や緑などの自然の色合いをプラス。ロゴのかわいらしさをそのままに、子供っぽすぎない統一感のあるイラストで全体を整えました。











制作を終えて:ビジネスデザイナーとしての想い
「活動の想いは人一倍あるけれど、Webでの伝え方が追いついていない」 そんな課題を持つ団体様に対し、技術(仕組み)とデザイン(表現)の両面から伴走しました。
もっち公開前のテスト送信や微調整まで徹底して「使い心地」にこだわったことで、クライアント様にも安心して運用いただける基盤が整ったと感じています。
リニューアル以前のHPも私が制作したのですが(5年前)その頃よりも活動している内容がどんどん変わり、増えていらしたのでよりまとまりを意識して制作できたのではないかと思います。出来上がるまでに多くの方にご協力をいただき素晴らしい状態に持っていくことができ、こちらも大変嬉しく感じています



Mocchiでは皆さんのHPのお悩みや今後どのように運用していきたいかなどを踏まえた設計をご提案させていただいています。





