画像をタップして詳細を見る
01 / Overview
WEB
個人制作
いちご屋 WEBサイト制作
大学2年生時に、北海道情報大学WebDesignContestビギナー部門への応募を目的として「季節外れのいちごの販売数を減らす」というテーマで制作しました。
初めて一人ですべて作った作品です。レスポンシブ対応はしておらず、1280幅のみの対応です。
画像をタップして詳細を見る
01 / Overview
WEB
個人制作
大学2年生時に、北海道情報大学WebDesignContestビギナー部門への応募を目的として「季節外れのいちごの販売数を減らす」というテーマで制作しました。
初めて一人ですべて作った作品です。レスポンシブ対応はしておらず、1280幅のみの対応です。
01.5 / Background
課題
いちごは旬（春〜初夏）以外の季節でも、クリスマスなどのイベント需要により大量に栽培されているが、冬季の栽培は温度管理に多くの灯油を使用し、CO2の大量排出に繋がってしまっている現状がある。
目的
季節外れのいちごの販売数削減のため、旬の時期に美味しいいちごを楽しんでもらうこと。
冷凍保存商品を活用して一般家庭でも旬のいちごを長く楽しめる仕組みをつくること。
ターゲット
20〜40代の女性で、食や環境への意識がある層。料理やスイーツ作りが好きで、素材にこだわりたい人。
デザインコンセプト
いちごを連想させる配色でサイト全体を統一。女性がターゲット層なので丸みを付けたデザインを採用。
情報設計
旬の冷凍いちごの魅力と環境への影響を「知る」コンテンツで共感を生み、「商品一覧・詳細」でスムーズに購買へつなげる複数ページ構成。
02 / Process
企画段階から完成までの流れを紹介します。
Phase 0①
デザイン
ターゲットやコンセプトに合うように、いちごらしさや丸みを帯びたデザインを心がけて制作を行った。
Phase 02
実装
コーディングの勉強したてだったため、教科書やインターネットの教材を見くらべながらコーディングを行った。クラス名など拙いが、ここでmarginとpaddingについてや様々な書き方について実践を行うことができた。
03 / Outcome
こだわった点
デザインを一から制作するのは初めてであったため、基礎を学びながら試行錯誤を重ね、「いちごらしさ」を表現することを意識してデザイン制作を行いました。
苦労した点
コーディングを考慮せずにデザイン制作を行ったため、メインビジュアルの配置や子ページにおける背景の重なり表現の実装に苦戦しました。
最終的には表現と実装のバランスを取りながら、自身の技術で実現可能な範囲を見極めて実装を行いました。
学んだこと
大学内コンテストへの応募を目的として制作を行ったものの、初期段階における情報設計が不十分であったため、制作過程で要素を後付けする必要があり、整合性を保つのに苦戦しました。
この経験から、企画段階での情報設計の精度が制作全体の質に大きく影響することを実感しました。