フードドライブってなんですか?のサムネイル画像
コンテスト共同制作

フードドライブってなんですか?

北海道情報大学Webデザインコンテスト2025年度 最優秀賞作品。
北海道の若者向けにフードドライブについてまとめました。

制作背景

北海道の若者向けにフードドライブについて紹介するサイトです。フードドライブは「子ども食堂」などの食品ロスに関する他の取り組み事例と比べて認知度が低いうえ、特に北海道では、フードバンク(寄贈食品を提供する団体)の団体数は都道府県別で上位であるものの、食品取扱量はそれに比べて少ないという結果が出ています。
そこで本サイトは北海道の未来を担う若者にフードドライブについて知ってもらい、実際にフードドライブに取り組んでもらうことを目的として制作しました。
親しみやすさを出すために、温かみのある配色や、イラストを使用したり、ユニークなアニメーションを散りばめました。

制作時期

2025年 5月

大学1~2年

メンバー

2人(同大学の先輩 / 私)

担当箇所

企画原案、コーディング、一部デザイン

技術スタック

  • HTML/CSS
  • JavaScript
  • GSAP

Journey

  • 企画1

    企画段階①。何のサイトにするのか、ざっくりどんなデザインにしていくのか、配色はどうするのか、など。ベンチマークを探したりもしました。Figjamを使用しています。

  • 企画2

    企画段階②。内容をより細かく詰めていきます。ターゲットやサイト制作の目的、掲載内容、フードドライブについての情報収集など。

  • デザイン

    デザイン(一部)。大学のデザイン分野の先生からフィードバックをもらってデザインを改良したりしました。

  • イラスト

    このWebサイトに使われているイラストは相方の先輩が全て一から描いてくれました。大学のデザイン分野の先生からフィードバックをもらって

  • 横スクロール

    自分から「こんなことできますよ!」と相方の先輩にプレゼンしておきながら、一番実装に苦戦した横スクロールギミック(GSAP)。

全作品一覧に戻る