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.07.28
学科合同プレゼン
- 購入ボタンを押した際に、動画や画像で実際の効果を感じられるようにする
- ソーシャルデザイン学科であることを活かす設定等があるといい
2021.07.15
試作
- 概要制作チェック
- サイトマップ
- 図の枠線なし
- 図と文字の距離
- レスポンシブデザイン
- アメの種類
- ロゴ(図)を大きく
- 制作の目的
2021.07.08
試作
2021.07.01
試作
- サイト制作
ハンバーガーメニュー
レスポンシブデザイン
2021.06.25
専攻別プレゼン
今後の課題
- メニューのレスポンシブデザイン
- サイトのフォント
- メインビジュアルのアメの位置
- アメの柄(ストライプ)を活かすデザイン
- ロゴとメニューの距離感
2021.06.24
試作
- ロゴ制作
集めたフォントの中からサイトイメージに合うものを下記ポイントを踏まえて制作- 躍動感ある文字
- アメ=丸いというイメージがあるので丸文字風のもの
- きれいや大人っぽいよりかわいらしい雰囲気
⇒「Coquette」というフォントを使用することに決定
ロゴ制作参考サイト
- 写真撮影
- サイト制作
2021.06.17
試作
- ロゴ制作
- Adobeフォント集め
- サイトイメージに合うものを模索
- アメ撮影
素材写真
2021.06.10
試作
- イベントページの作成
- Atom、GitHub連携中
2021.06.03
試作
- 写真撮影用の素材集め
素材写真 - ロゴ制作
2021.05.21
中間発表
- GitHubのページをこのサイトからいけるようにする
- 写真を撮影してみる
- アニメーション等の動きをいれる
2021.05.20
試作
- GitHubダウンロード
- 新サイト
→『HTML&CSSとWebデザインが1冊できちんと身につく本』を読みながら制作中 - スケジュール更新
2021.05.13
面談
- html,css等を使いサイト制作
→Atomダウンロード
自由度を上げることでサイトにリアルさを出していく - アメのパッケージ制作&パッケージをダウンロードできるようにする
2021.04.30
調査
- スケジュール制作
2021.04.23
調査
2021.04.16
調査
2021.04.09
テーマ
情報デザイン研究Ⅱの内容を引き継ぐ
調査
- サーティワンアイスクリーム
シンプルでありつつかわいくて見やすい - キッコーマン豆乳
動きがあってかわいい - スノーサンド
スノーサンドという店名にあるように雪を感じられるようにサイトが統一されている - IGNIS
パステルカラーで統一されていてかわいい - 楽駄屋
ポップで見ていて楽しい雰囲気がある - ねこねこチーズケーキ
ロゴがかわいくて動きもあって楽しい - Lilionte
商品であるチョコとラムネに合わせて丸を多く使っていてふわふわしてる - Ameya
写真がきれいで見やすい