Fancy Candy
不思議なCandyを売る架空の店舗のWebサイト制作
- 江崎悠芽
- Keywords:web site , Fictitious , Candy
- 試作サイト
- 新サイト
江崎悠芽/卒業研究プレゼン
概要PDF
Overview
Introduction / What is This
- 架空のアメを販売するサイト
- 実際には存在しない夢のある商品を販売していく
Background and Purpose
子供の頃は、ヒーローショーなどのイベントで空想を楽しむ機会が多くあった。しかし、大人になるにつれその機会は映画やマンガなどの形式化されたエンターテイメントだけになる。そこで、空想の世界をWebサイトで再現していく。
- アメにした理由
- コミュニケーションを取るきっかけ
- ちょっとした休憩になる
Concept
- 架空ならではの商品の販売
- 定番商品としてちょっとしたおもしろさのあって買いやすい値段のアメ
- 特別商品として少し高級ですがみなさんの夢を叶えられるようなアメ
- 期間限定でその季節のイベントなどで活躍するアメ
Output
Tools
- html&css
- WordPress
- テーマ:lightning
- illustrator
- Photoshop
- Atom
- GitHub
Term
2021.04.09 ~ 2021.12.17
Conclusion / Summary
サイトのリアルさを商品の写真を撮影することで表現できました。また、html&cssを使用し自由度をあげることができました。後期は、レスポンシブデザインやサイトの詳細ページを充実させていく予定です。また、javascriptを使用しより動きがあり見やすいサイトにしていきます。
Survey
Precedent
Technique / Technology
- WordPressテーマの使い方
- JavaScript
- 「HTML&CSSとWebデザインが1冊できちんと身につく本」
服部雄樹、技術評論社、2020年7月発行
Project Management
Schedule
ToDo
-Atomダウンロード
-GitHubダウンロード
-Atom、GitHub連携
-ロゴデザイン
-メインビジュアル作成
-商品写真撮影
-サイト制作
worklog
2021.12.16
制作
説明パネル制作
2021.12.09
制作
- ポップアップ式にしてみる
- 購入ボタンではなく試食・お試しボタンにする
2021.12.04
学科合同プレゼン
- 実際に体験できる方がいい
- 自分の夢をもっと詰め込んでもいい
2021.12.02
制作
- サイト背景の調整
- 最終調整
2021.11.25
制作
- サイト背景制作
- サイト内不具合の確認・調整
2021.11.18
制作
- 写真サイズの変更
- 背景の調整
- 概要の修整
2021.11.11
制作
- トップページ背景の色変更
- ボタンの距離感を修正
- 戻るボタンの見直し
- 全体を見直し修正
2021.11.04
制作
- ボタンと文字の距離を調整
- ロゴの縁を修正
- 写真の修整
サイドバーの調整
2021.10.28
制作
- トップページの構成の変更
→背景色調整中 - サイト背景調整
- 画像サイズ・色の調整
- サイトバーを追加
- 概要の修正
2021.10.21
制作
- 商品紹介ページの構成の変更
- 詳細ページの編集(前ページ)
- 個々のページトップの写真サイズの変更
- お客様の声ページの作成
2021.10.14
制作
- 購入ページの作成
- 商品紹介ページの構成を変更
- 商品内容の追加
アメ内容
2021.10.07
制作
- 架空であることを示す最初のページを作成
- 商品情報追加
- メニューの距離感を修正
- ボタンをホバーした際の色を変える
- サイト内フォントの変更
- 文字同士の距離感の調整
2021.09.30
制作
2021.09.23
制作
- 背景の作成
- 種類ごとにボタンを作成
- JavaScript挑戦中
夏休み期間中
制作
- 商品ページの制作
- 個々の商品ページに移動するボタン
- メニューを見やすく
- 架空であるサイトを示すページの制作