LogoMark.png

江崎悠芽/卒業研究Ⅰプレゼン の変更点


#author("2021-07-28T00:13:59+09:00;2021-07-28T00:13:33+09:00","default:member","member")
#author("2021-07-28T11:41:49+09:00;2021-07-28T00:13:33+09:00","default:member","member")
*Fancy Candy
不思議なCandyを売る架空の店舗のWebサイト制作
'''Keywords:web site , Fictitious , Candy'''

~

//ここにMain Visual
#image(sub.jpg,left,100%)
~
~
~
~
~
~


***目的・背景

-子供のころは、ヒーローショーなどのイベントで空想を楽しんでいた。しかし、大人になるにつれ、その機会は減少していく。
⇒空想の世界をWebサイトで再現する。
~
-アメにした理由⇒コミュニケーションツールとして優れているから
~
~
~


**調査
***調査の目的

-よりリアルなWebサイト制作のために実際に商品を販売しているサイトを調査する
⇒主にサイト構成・ロゴについて行う
~
~

***調査結果
①サイト構成
-メインビジュアル
実際の商品写真を必ず使用している
写真とイラストを併用しているものも多い
~
-色や動作がどのページでも統一感がある
~
-サイトマップ
トップページ、商品紹介、自社の紹介、お知らせページが必ずある

#image(1.png,left,30%)
#image(2.png,left,30%)
~
~
~
~

②ロゴ
-読みやすく印象に残るフォントを使用している
-商品のカタチを一部使用するなどして商品イメージを伝えている

#image(3.png,left,20%)
#image(4.png,left,20%)
#image(5.png,left,10%)
~
~
~

***コンセプト

-架空であることを活かした夢のある商品の販売
-実際にあるのではないかと錯覚させられるサイト
~
~
~

**制作物
***サイトマップ
-リアルなサイト制作のため、調査で使用されていたものを参考に制作

#image(map.png,left,50%)
~
~
~
~

***Webサイト(試作)
[[試作サイト>http://claftmagic.wp.xdomain.jp/]]
~

-編集しやすくカテゴリやキーワードで内容をまとめやすいWordPressを利用
-メインビジュアルは夢が詰まっていると感じられるイラストを制作
-スライドショーを使用
-商品紹介のページも同様にイラストを制作
-お客様の声という購入者の感想が見られるページを制作
~
~

***Webサイト
[[Fancy Candy>https://yume-22.github.io/fancycandy/]]
~

-自由度の高いhtml&cssでの制作に変更
-メインビジュアル、商品写真の撮影
-サイト内のフォントを丸文字風のものにした
-レスポンシブデザインに対応

#image(6.png,left,30%)
~
~
~
~

***ロゴ
-躍動感やアメの丸みが伝わるように丸文字にしかわいらしいフォントを使用
-色や文字をサイトの雰囲気に合わせた

#image(logo.png,left,40%)
~
~
~
~

***商品企画
価格や効果を変え、3つのテーマに分類した
~
①定番商品(全10種)
-お試しで買いやすい値段設定
-少しの間、感情を動かす効果
~

②特別商品(全10種)
-高価だが、夢を叶えられるアメ
~

③期間限定商品(全5種)
-季節ごとのイベントで役立つアメ
~
~
~

***まとめ
試作では、WordPressでのサイト制作、イラストでの商品紹介を制作した。問題点は、サイトのリアルさがないことである。なので、商品の写真を撮影した。
html&cssを使用し自由度が上がったことで、サイトの動きやロゴを変更した。
ロゴの制作を行ったため、よりリアルなサイトになった。

今後は、レスポンシブデザインやサイトの詳細ページを充実させていく。
また、JavaScriptを使用することでより動きがあり見やすいサイトにする。
~
~
~
~
~

***参考文献・資料
-「HTML&CSSとWebデザインが1冊できちんと身につく本」
 服部雄樹、技術評論社、2020年7月発行
-[[サーティワンアイスクリーム>https://www.31ice.co.jp/]]
-[[キッコーマン豆乳>https://www.k-tounyu.jp/cp/soybody/]]
-[[Lilionte>https://www.choco-ne.com/]]
-[[Ameya>http://ameya-nishihara.com/]]
~
~
~

***使用ツール
-html&css
-WordPress
--テーマ:lightning
-illustrator
-Photoshop
-Atom
-GitHub
~