作品メイン画像

画像をタップして詳細を見る

WEB

有志チーム制作

「フードドライブってなんですか?」
WEBサイト制作

北海道情報大学WebDesignContestへの応募を目的として「フードドライブ」を北海道の若者に訴求することをテーマに制作しました。

制作日数

4か月 (2025年 2月 - 5月)

制作学年 / 制作人数

大学3年生次 / 2名

制作技術

HTMLcssJavascriptFigma

担当

サイト設計 / デザイン / イラスト制作

実際のサイトはこちら ↗

制作の背景

課題

食品ロス問題は環境問題の中でも身近に感じられる題材でありながら、その具体的な取り組みであるフードドライブの認知度は依然として低い。特に若年層においては名前すら知らない人が多く(むすびえ2024年度認知度調査より)、情報にアクセスする機会自体が不足している。

目的

フードドライブを知ってもらうこと、そして詳細な知識を持ったうえで実際に取り組みたいと思わせること。

ターゲット

大学生 → まず「知る」ことを目標とした認知獲得
社会人(20代) → 知識をもとに「実際に取り組む」行動喚起

デザインコンセプト

「北海道の若者のためのフードドライブ紹介サイト」をコンセプトとし、フリー素材を使わず独自の写真・素材で制作することで、リアリティと信頼感を担保。必要に応じて実際の企業・団体への取材や活動への参加も行い、現場感のあるコンテンツを目指す。

情報設計

離脱率を下げるために、アニメーションを増やし、いつの間にか参加方法について見終わっているような設計を目指した。

制作プロセス

完成までの流れを紹介します。

Phase 01

ヒアリング

企画・リサーチ

テーマの設定とリサーチ。デザインコンセプトを設定し、アイデアを広げた。

Phase 02

設計・会議

設計・ワイヤー

ターゲットやサイト制作の目的、掲載内容、フードドライブについての情報収集。

Phase 03

デザイン

デザイン

Figmaを使ったUIデザイン。ビジュアルの方向性を決定。イラストの制作。

Phase 04

実装・運用

実装・完成

コーディング・実装・テスト。フィードバックを反映し完成させた。

こだわりと成果

Point 01

こだわった点

素材は自ら制作することにこだわり、実際の活動団体様へコンタクトを取り、活動写真を使わせていただくなど、できるだけオリジナルコンテンツを制作することを意識しました。
また、ターゲットを2層に分けて設計しました。大学生には「知る」、社会人には「動く」という異なるゴールを設定し、同一サイト内でもそれぞれに適したアプローチができるよう、情報設計を行いました。
さらに、道内在住の若者が実際に行動に移しやすいよう、北海道内の情報に絞ってコンテンツを構成しています。

Point 02

苦労した点

企画段階において認知度の低さを示す根拠については、フードドライブの認知状況を客観的に示すため、信頼性の高い調査データを収集し、整理する必要がありました。
また、北海道に対象を絞る理由についても、単に活動のしやすさだけでなく、その妥当性をどのように言語化するかが課題となりました。
地域性や行動のしやすさといった観点に加え、ユーザーにとっての「身近さ」や実際の参加につながりやすい範囲であることを、客観的に説明できるよう検討を重ねました。

Point 03

学んだこと

社会課題を「自分ごと化」してもらう難しさについても実感しました。環境問題として広く認知されているSDGsの文脈においても、フードドライブはまだ十分に知られていないのが現状です。
そのため、すでに知っている人に向けた発信ではなく、知らない人向けの入口として引き込む設計の重要性を学びました。
また、ターゲットによって同じ情報であっても、知ってもらうことを目的とする大学生と、行動してもらうことを目的とする社会人とでは、見せ方や言葉の選び方が異なり、そうした違いを、企画の段階から意識して設計する必要があると学びました。
また、イラスト素材について、親しみやすさと、フリー素材のような使いやすさを意識して制作しましたが、制作後のフィードバックで大学生~20代ターゲットにしては幼い印象を受けるという指摘をいただき、素材制作についてもっと思案すべきだったと痛感しました。

← Previous 株式会社大宮ホーロー北海道製作所公式Webサイトリニューアル Next → 安田ゼミWEBサイト制作
メインビジュアル 1枚目