サステナ宣言作成AIサービスと企業Webサイトの開発

🚀 サービス概要
事業内容からその事業にあったサステナビリティ宣言計画書を生成AIを即時に作成することができるサービスです

💻 サービスサイト
https://app.trashtech.jp

🏢 クライアント様
Trash Technologies株式会社

🌳 担当者様
代表取締役 ⽊部 剛 様

💡 当社スコープ

• サービスの構築
• LPの構築

🧱 体制

• ディレクター：1名
• デザイナー：1名
• エンジニア：1名

🪐 期間

• プロダクト開発 : 1ヶ月
• LPの作成：1ヶ月
• バナーの作成：1週間 

プロジェクト概要

Trash Technologies株式会社様（以下、Trash Technologies様） から新規顧客との接点構築のために何かサービスを作れないかというご相談をいただきました。

コミュニケーションを重ね、企業に必要なサステナ宣言のお手伝いをするところから新しい顧客との接点を作ることになりました。

当初の課題

• 再資源の対応を考えている企業のとの接点を持ちたい。
• 再資源とテクノロジーを掛け合わせた企業イメージを構築したい。

Trash Technologies様からのヒアリングを行い、UX設計、UIデザイン、開発までの担当いたしました。

また、サービスだけでなく、訴求するためのサービスLPやTrash Technologies様のホームページに掲載するためのバナーの作成を行いました。

成果物（1ヶ月）

• サステナ宣言AIサービス (Web)
  ・リード獲得をするためのサービスの提案・構築
• サービスLP
  ・サービスを訴求するためのLPの提案・作成
• 広告バナー
  ・サービスへ遷移するためのバナーの提案・作成

①サービス構築

📍開発プロセス

1. お客様のご要望を詳しくヒアリング
2. ペルソナとユースケースの作成
3. ユーザー体験を整理 ユーザージャーニー作成
4. UIモデリング・オブジェクト分析
5. ワイヤーフレームの作成
6. デザイン作成
7. 実装

1. お客様のご要望を詳しくヒアリング

Trash Technologies様の現状とニーズを詳しくヒアリングし、以下の課題を明確化しました。

• サステナ宣言を考えるうえで課題となるポイントは何か。
• サステナ宣言の作成を通してどのようなやりとりをできるようにしたいか
• サステナ宣言がでいると使うユーザはどのようなポイントが嬉しいのか

2. ペルソナとユースケースの作成

ヒアリング内容をもとに、実際の利用シーンを想定したペルソナを設定し、具体的なユースケースを整理しました。

3. ユーザー体験を整理 ユーザージャーニー作成

整理したユースケースをもとに、ユーザーの具体的な行動フローを可視化したユーザージャーニーを作成しました。

4. UIモデリング・オブジェクト分析

ユーザージャーニーを通じてTrash Technologies様と認識を合わせた内容をもとに、UIのモデリングとオブジェクト分析を作成しました。

5. ワイヤーフレームの作成

ユーザージャーニーやオブジェクト分析をした内容をもとに、具体的な画面設計に落とし込んだワイヤーフレームを作成しました。

6. デザイン作成

ワイヤーフレームを基に、ユーザー体験を考慮したデザインを作成しました。Trash Technologies様のご要望に沿ったカラーを取り入れ、直感的で操作しやすいUIの実現を目指しました

開発について

技術スタック

Amplify Gen2 / vite / Nest.js /Type Script

全体的な基盤については、Amplify Gen2を採用して高速開発を行いました。

構成図

②WEBサイトの更新（サービスLPとサイト内バナーの作成）

サービスや会社に対する木部さんの想いや考えをお伺いしながら、コーポレートサイト全体のデザインリニューアルの一部として更新を行いました。

• コーポレートサイト全体のデザインリニューアル
• サービス展開にあわせたページの追加（ランディングページ4種類）
• サービスを訴求するバナーの追加

🚩デザインヒアリングのSTEP（今回の場合）

1. 文言のラフ
2. ワイヤー
3. デザインラフ
4. デザインのブラッシュアップ

これらのSTEPをアウトプットベースでお客様に共有しながら、内容も含めデザインを詰めていきました。
実際のヒアリング工程の一部↓↓

💻実際に作成したページはこちら↓↓

コーポレートサイト
https://trashtech.jp/

サステナビリティ宣言計画書のランディングページ
https://trashtech.jp/sustainable-sengen

ネクストアクション

• Jクレジットの生成支援

📣お客様の声

Trash Technologies株式会社 代表取締役 ⽊部 剛 様のインタビューはこちら👇