Fancy Candy
不思議なCandyを売る架空の店舗のWebサイト制作
Keywords：web site , Fictitious , Candy
目的・背景
- 子供のころは、ヒーローショーなどのイベントで空想を楽しんでいた。しかし、大人になるにつれ、その機会は減少していく。
⇒空想の世界をWebサイトで再現する。
- アメにした理由⇒コミュニケーションツールとして優れているから
調査
調査の目的
- よりリアルなWebサイト制作のために実際に商品を販売しているサイトを調査する
⇒主にサイト構成・ロゴについて行う
調査結果
①サイト構成
- メインビジュアル
実際の商品写真を必ず使用している
写真とイラストを併用しているものも多い
- 色や動作がどのページでも統一感がある
- サイトマップ
トップページ、商品紹介、自社の紹介、お知らせページが必ずある
②ロゴ
- 読みやすく印象に残るフォントを使用している
- 商品のカタチを一部使用するなどして商品イメージを伝えている
コンセプト
- サイト名のFancyの意味である自由で空想的なおもしろい商品の販売
- 実際にあるのではないかと錯覚させられるサイト
制作物
サイトマップ
- リアルなサイト制作のため、調査で使用されていたものを参考に制作
Webサイト（試作）
- 編集しやすくカテゴリやキーワードで内容をまとめやすいWordPressを利用
- メインビジュアルは夢が詰まっていると感じられるイラストを制作
- 商品紹介のページも同様にイラストを制作
Webサイト
- 自由度の高いhtml&cssでの制作に変更
- メインビジュアル、商品写真の撮影
- サイト内のフォントを丸文字風のものにした
- レスポンシブデザインに対応
まとめ
- 試作での問題点であったサイトのリアルさを商品の写真を撮影することで表現
- html&css を使用し自由度があがったのでサイトの動きやフォントの変更を行った
- 架空であることを説明するトップページを制作しよりサイトを楽しめるようにした
- 自由で空想的な商品の制作をした
- 商品内容は、より詳細に記載し実際に食べているところを想像しやすくした
→コンセプトであるリアルかつ空想的な商品を販売するサイトを制作することができた
参考文献・資料
- 「HTML&CSSとWebデザインが１冊できちんと身につく本」
服部雄樹、技術評論社、2020年7月発行 - サーティワンアイスクリーム
- キッコーマン豆乳
- Lilionte
- Ameya
使用ツール
- html&css
- illustrator
- Photoshop
- Atom
- GitHub
sub.jpg
second.png
