LogoMark.png

江崎悠芽/卒業研究I のバックアップの現在との差分(No.0)


#author("2021-09-07T15:23:24+09:00","default:member","member")
*Fancy Candy
不思議なCandyを売る架空の店舗のWebサイト制作


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

-''[[江崎悠芽>江崎悠芽]]''
-'''Keywords:web site , Fictitious , Candy'''
-[[旧サイト>http://claftmagic.wp.xdomain.jp/]]
-[[新サイト>https://yume-22.github.io/fancycandy/]](制作中)
~
[[江崎悠芽/卒業研究Ⅰプレゼン]]
[[概要PDF>https://drive.google.com/file/d/1yTPqkfAZWolSx4673ZPs1eAczNolvet7/view]]


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
-架空のアメを販売するサイト
-実際には存在しない夢のある商品を販売していく
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
子供の頃は、ヒーローショーなどのイベントで空想を楽しむ機会が多くあった。しかし、大人になるにつれその機会は映画やマンガなどの形式化されたエンターテイメントだけになる。そこで、空想の世界をWebサイトで再現していく。
-アメにした理由
--コミュニケーションを取るきっかけ
--ちょっとした休憩になる
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
-架空ならではの商品の販売
--定番商品としてちょっとしたおもしろさのあって買いやすい値段のアメ
--特別商品として少し高級ですがみなさんの夢を叶えられるようなアメ
--期間限定でその季節のイベントなどで活躍するアメ
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
-[[web site>http://claftmagic.wp.xdomain.jp/]]
-[[新サイト>https://yume-22.github.io/fancycandy/]]
-[[GitHub>https://github.com/yume-22/fancycandy]]
-[[素材写真>https://drive.google.com/drive/folders/16Qlg9WbP0kO89g-WiWxqwjeQB5CZ8bLM?usp=sharing]]
~

//***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
-html&css
-WordPress
--テーマ:lightning
-illustrator
-Photoshop
-Atom
-GitHub
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2021.04.09 ~ 2021.12.17
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};

サイトのリアルさを商品の写真を撮影することで表現できました。また、html&cssを使用し自由度をあげることができました。後期は、レスポンシブデザインやサイトの詳細ページを充実させていく予定です。また、javascriptを使用しより動きがあり見やすいサイトにしていきます。
~
~


**Survey

//***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};

-[[買うと幸せになる自販機>https://j-town.net/tokyo/column/gotochicolumn/312862.html?p=all]]
-[[サーティワンアイスクリーム>https://www.31ice.co.jp/]]
-[[キッコーマン豆乳>https://www.k-tounyu.jp/cp/soybody/]]
-[[Lilionte>https://www.choco-ne.com/]]
-[[Ameya>http://ameya-nishihara.com/]]
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

-[[WordPressテーマの使い方>https://lightning.nagoya/ja/setting]]
-[[JavaScript>https://www.webcreatorbox.com/tech/javascript-particles]]
-「HTML&CSSとWebデザインが1冊できちんと身につく本」
 服部雄樹、技術評論社、2020年7月発行
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール>https://docs.google.com/spreadsheets/d/1s02H5ci0FIuLIfCVM8Z77HklXtXkQmgRoEB2kpqdb2U/edit?usp=sharing]]
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
%%-Atomダウンロード%%
%%-GitHubダウンロード%%
%%-Atom、GitHub連携%%
%%-ロゴデザイン%%
%%-メインビジュアル作成%%
%%-商品写真撮影%%
-サイト制作

~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2021.07.28
***学科合同プレゼン
-購入ボタンを押した際に、動画や画像で実際の効果を感じられるようにする
-ソーシャルデザイン学科であることを活かす設定等があるといい
~
~

**2021.07.15
***試作
-概要制作チェック
--サイトマップ
--図の枠線なし
--図と文字の距離
--レスポンシブデザイン
--アメの種類
--ロゴ(図)を大きく
--制作の目的
~
~

**2021.07.08
***試作
-概要制作
https://drive.google.com/file/d/1uFPtDWZ-Lujo3l7xCH3DaDlFiA2K6MNX/view

~
~

**2021.07.01
***試作
-サイト制作
[[ハンバーガーメニュー>https://tamotech.blog/2020/08/04/jquery-humburger-menu/]]
[[レスポンシブデザイン>https://www.kagoya.jp/howto/webhomepage/responsive/]]
~
~

**2021.06.25
***専攻別プレゼン
今後の課題
-メニューのレスポンシブデザイン
-サイトのフォント
-メインビジュアルのアメの位置
-アメの柄(ストライプ)を活かすデザイン
-ロゴとメニューの距離感
~
~

**2021.06.24
***試作
-ロゴ制作
集めたフォントの中からサイトイメージに合うものを下記ポイントを踏まえて制作
--躍動感ある文字
--アメ=丸いというイメージがあるので丸文字風のもの
--きれいや大人っぽいよりかわいらしい雰囲気
⇒「Coquette」というフォントを使用することに決定
[[ロゴ制作参考サイト>https://veerle.duoh.com/design/colorful-pattern-masking-in-illustrator]]
-写真撮影
-サイト制作
~
~

**2021.06.17
***試作
-ロゴ制作
--Adobeフォント集め
--サイトイメージに合うものを模索
-アメ撮影
[[素材写真>https://drive.google.com/drive/folders/16Qlg9WbP0kO89g-WiWxqwjeQB5CZ8bLM?usp=sharing]]

-参考サイト
[[アメ写真>https://pixta.jp/tags/%E3%81%82%E3%82%81?keyword=%E3%81%82%E3%82%81&exclude=&search_type=1&option%5Brows%5D=200&is_favorite=0&option%5Bsort%5D=0&option%5Bis_japanese%5D&option%5Bmodel_release_only%5D=0&option%5Bhead_count%5D&option%5Bsell_flat%5D=0&option%5Bexclusive_status%5D&option%5Bsold%5D=2&option%5Billust_type%5D&option%5Bcolor_codes%5D=&option%5Bgeneration%5D&option%5Bgender%5D&option%5Brace%5D&option%5Bemotion%5D&option%5Bshape%5D%5B%5D&option%5Bsize_category%5D&option%5Bcomposition%5D&option%5Bprice_type%5D=0]]
[[ピエールエルメ>https://www.pierreherme.co.jp/product/?category=macarons]]
[[季のせ>https://www.tokinose.co.jp/kashi/]]
[[シャトレーゼ>https://www2.chateraise.co.jp/products/list_11.html]]

~
~

**2021.06.10
***試作
-イベントページの作成
-Atom、GitHub連携中
~
~

**2021.06.03
***試作
-写真撮影用の素材集め
[[素材写真>https://drive.google.com/drive/folders/16Qlg9WbP0kO89g-WiWxqwjeQB5CZ8bLM?usp=sharing]]
-ロゴ制作
~
~

**2021.05.21
***中間発表
-GitHubのページをこのサイトからいけるようにする
-写真を撮影してみる
-アニメーション等の動きをいれる
~
~

**2021.05.20
***試作
-GitHubダウンロード
-[[新サイト>https://yume-22.github.io/fancycandy/]]
→『HTML&CSSとWebデザインが1冊できちんと身につく本』を読みながら制作中
-スケジュール更新
~
~

**2021.05.13
***面談
-html,css等を使いサイト制作
→Atomダウンロード
自由度を上げることでサイトにリアルさを出していく
-アメのパッケージ制作&パッケージをダウンロードできるようにする
~
~

**2021.04.30
***調査
-[[レスポンシブデザイン>https://www.kagoya.jp/howto/webhomepage/responsive/]]
-[[特徴>https://n-works.link/blog/webdesign/responsive-web-design]]
-[[テンプレートサイト>https://www.site-convert.com/archives/1310]]

-スケジュール制作
~
~

**2021.04.23
***調査
-[[Web広告について>https://ferret-plus.com/12028]]
-[[広告の種類>https://media-radar.jp/contents/meditsubu/columns-webad/]]
-[[選び方>https://www.ecmarketing.co.jp/contents/archives/732]]
-[[広告の用語>https://www.tosho.co.jp/3106/]]
-[[バナーデザイン>https://degipro.com/blog/design-banner/]]
-[[デザイン集>https://liskul.com/cr_webdesign13-5629]]
~
~

**2021.04.16
***調査
-[[商品撮影方法>https://meetsmore.com/services/product-photographers/media/30502]]
-[[スマホでの撮影>https://baseu.jp/11278]]
-[[食品商品>https://baseu.jp/16688]]
-[[シズル感>https://meetsmore.com/services/restaurant-photographers/media/20993]]
-[[アメの写真>https://pixta.jp/tags/%E3%82%A2%E3%83%A1]]
-[[キャッチコピー>https://www.akibare-hp.jp/kouza/hp_howtomake-catchcopy/]]
~
-スケジュール制作
~
~

**2021.04.09
***テーマ
情報デザイン研究Ⅱの内容を引き継ぐ
-[[情報デザイン研究Ⅱ>http://design.kyusan-u.ac.jp/socialdesign/?%E6%B1%9F%E5%B4%8E%E6%82%A0%E8%8A%BD/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]]
-[[作ったサイト>http://claftmagic.wp.xdomain.jp/]]
~
***調査
-[[サーティワンアイスクリーム>https://www.31ice.co.jp/]]
シンプルでありつつかわいくて見やすい
-[[キッコーマン豆乳>https://www.k-tounyu.jp/cp/soybody/]]
動きがあってかわいい
-[[スノーサンド>https://www.snowsand.jp/]]
スノーサンドという店名にあるように雪を感じられるようにサイトが統一されている
-[[IGNIS>https://www.ignis.jp/io/]]
パステルカラーで統一されていてかわいい
-[[楽駄屋>https://dagasiya.com/]]
ポップで見ていて楽しい雰囲気がある
-[[ねこねこチーズケーキ>https://nekonekocheesecake.allhearts.company/]]
ロゴがかわいくて動きもあって楽しい
-[[Lilionte>https://www.choco-ne.com/]]
商品であるチョコとラムネに合わせて丸を多く使っていてふわふわしてる
-[[Ameya>http://ameya-nishihara.com/]]
写真がきれいで見やすい
~
~

~