Fancy Candy
不思議なCandyを売る架空の店舗のWebサイト制作
Keywords:web site , Fictitious , Candy
目的・背景
- 子供のころは、ヒーローショーなどのイベントで空想を楽しんでいた。しかし、大人になるにつれ、その機会は減少していく。
⇒空想の世界をWebサイトで再現する。
- アメにした理由⇒コミュニケーションツールとして優れているから
調査
調査の目的
- よりリアルなWebサイト制作のために実際に商品を販売しているサイトを調査する
⇒主にサイト構成・ロゴについて行う
調査結果
①サイト構成
- メインビジュアル
実際の商品写真を必ず使用している
写真とイラストを併用しているものも多い
- 色や動作がどのページでも統一感がある
- サイトマップ
トップページ、商品紹介、自社の紹介、お知らせページが必ずある
②ロゴ
- 読みやすく印象に残るフォントを使用している
- 商品のカタチを一部使用するなどして商品イメージを伝えている
コンセプト
- 架空であることを活かした夢のある商品の販売
- 実際にあるのではないかと錯覚させられるサイト
制作物
サイトマップ
- リアルなサイト制作のため、調査で使用されていたものを参考に制作
Webサイト(試作)
- 編集しやすくカテゴリやキーワードで内容をまとめやすいWordPressを利用
- メインビジュアルは夢が詰まっていると感じられるイラストを制作
- スライドショーを使用
- 商品紹介のページも同様にイラストを制作
- お客様の声という購入者の感想が見られるページを制作
Webサイト
- 自由度の高いhtml&cssでの制作に変更
- メインビジュアル、商品写真の撮影
- サイト内のフォントを丸文字風のものにした
- レスポンシブデザインに対応
トップページ
- 架空を楽しむという部分が薄れてしまっていたため、サイトにはいる際に架空であることを説明するページを制作した
- 最初から FancyCandyのサイトだと本当にあるのではないかと騙してしまう危険性があるからだ
ロゴ
- 躍動感やアメの丸みが伝わるように丸文字にしかわいらしいフォントを使用
- 色や文字をサイトの雰囲気に合わせた
商品企画
価格や効果を変え、3つのテーマに分類した
①定番商品(全12種)
- お試しで買いやすい値段設定
- 少しの間、感情を動かす効果
②特別商品(全11種)
- 高価だが、夢を叶えられるアメ
③期間限定商品(全5種)
- 季節ごとのイベントで役立つアメ
まとめ
試作では WordPress での制作やイラストでの商品紹介を制作した。その際に問題点であったサイトのリアルさを商品の写真を撮影することで表現した。また、html&css を使用し自由度があがったことでサイトの動きやフォントを変更を行った。ロゴの制作もしたためよりサイトをリアルにすることができた。
後期では、架空であることを説明するトップページを制作しよりサイトを楽しめるようにした。また、写真の雰囲気とサイトの雰囲気を背景色や文字の色を変えることで統一させた。商品内容は、より詳細に記載し実際に食べているところを想像しやすくした。
参考文献・資料
- 「HTML&CSSとWebデザインが1冊できちんと身につく本」
服部雄樹、技術評論社、2020年7月発行 - サーティワンアイスクリーム
- キッコーマン豆乳
- Lilionte
- Ameya
使用ツール
- html&css
- WordPress
- テーマ:lightning
- illustrator
- Photoshop
- Atom
- GitHub