Webサイト制作実績

架空のNPO法人「Fuwamoco PROJECT」公式サイト

Fuwamoco PROJECT トップページのスクリーンショット

「Fuwamoco PROJECT」は、私が企画構想からデザイン、実装までを手掛けた、架空のうさぎ保護NPO法人の公式サイトです。しかし、これは決して私一人だけで創り上げたものではありません。

このサイトの文章、デザインの一部、そしてゲームのアイデア。その全てに、私の最高の「共同制作者」であるAIが深く関わっています。これは、就労支援の課題として、「もし、限られたリソースの中で、福祉の現場から新しい価値を発信するWebサイトを創るなら?」という問いに対し、人間とAIが手を取り合って応えた、一つの「答え」なのです。

1. 制作の背景と想い:なぜ「うさぎ」と「福祉」だったのか

このプロジェクトは、私が就労支援B型事業所に通う中で生まれました。近年、ペットとしてのうさぎの人気が高まる一方で、その飼育放棄や不適切な飼育といった悲しい現状も耳にするようになりました。私たち人間にとって、可愛らしく癒しを与えてくれるうさぎですが、彼らは繊細で、私たちとは異なる独自の生態を持っています。

「もっと多くの人に、うさぎの本当の姿を知ってほしい」

その強い想いを形にするため、そして私自身のWeb制作スキルを証明するための課題として、この架空のNPO法人サイトは生まれました。

このプロジェクトに込めた願い

ぴょんぴょんと跳ね回る姿、一心不乱に牧草を食べる様子、そして、リラックスしてウトウトと眠る姿。一つ一つの行動には、彼らが生きていくための知恵や、私たち人間には想像もつかない繊-細な感情が込められています。

このサイトが、訪れた方々にとって、うさぎという生き物を見つめ直し、その特性や魅力を再発見する場所となること。そして、このサイトとの出会いを通して、うさぎへの理解が深まり、より良い共生関係を築いていくきっかけとなれば、制作者として、これほど嬉しいことはありません。

2. 担当範囲と使用技術

本プロジェクトでは、以下の全ての工程を一人で担当いたしました。

  • 企画・構想:NPO法人の理念、ビジョン、事業内容の設計
  • 情報設計:サイト全体の構造、各ページのコンテンツ設計
  • デザイン:ロゴデザイン、UI/UXデザイン、カラー設計
  • ライティング:サイト内の全テキスト、代表挨拶などの執筆
  • 実装:HTML, CSS, JavaScriptによるコーディング
  • ゲーム開発:JavaScript製の3マッチパズルゲームの実装

使用技術: HTML5, CSS3, JavaScript, Font Awesome

3. デザインと機能のポイント

温かみと信頼感を両立するデザイン

NPO法人としての信頼性を損なわないよう、クリーンで整理されたレイアウトを基本としつつ、温かみのあるイラストや丸みを帯びたデザインエレメントを多用し、「福祉」と「動物」というテーマにふさわしい、親しみやすさを表現しました。

ユーザー参加を促すインタラクティブ要素

サイトを訪れた人が、ただ情報を受け取るだけでなく、楽しんで参加できるように、JavaScriptで実装した「3マッチパズルゲーム」を搭載しました。これは、福祉現場における「楽しみながら学ぶ・参加する」というコンセプトをWeb上で表現したものです。

4. 制作したページ一覧

このプロジェクトで制作した、全9ページのWebサイトです。それぞれのページが、NPO法人の活動を多角的に伝え、ユーザーとの接点を生み出す役割を担っています。