LogoMark.png

鹿毛鈴菜/情報デザイン研究II のバックアップの現在との差分(No.0)


#author("2021-12-15T14:42:16+09:00","default:member","member")
#image(withthe.png)
𝗪𝗲𝗯𝗦𝗶𝘁𝗲・・・・・・・ [[WordPress>http://withthe.wp.xdomain.jp]]
-''鹿毛鈴菜''
-'''Keywords:webサイト, ブランディング'''
-[[WordPress>http://withthe.wp.xdomain.jp]]

~


**概要
***これは何?
前期ブランディングしたものをブラッシュアップして、さらにwebサイト制作に取り組む
//&color(red){これは何か・・を簡潔に};
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
現在では、コロナウイルスの流行などにより急速なオンライン化や、直接お店に足を運べないなどの理由から、ショップの運営や紹介のためのウェブサイトは必需品であると思ったため
~

***コンセプト
-「誰の日常にも取り入れやすい雑貨をコンセプトにした、『With The』のブランディングデザイン」が前期に掲げたコンセプトだったので、男女共に気軽にサイトを訪れられるようなデザインにする
-ブランドの雰囲気が伝わりやすいデザイン性のあるwebサイト
//&color(red){基本的な考え方、枠組み、視点など};
~

***成果物の仕様
-ショップ紹介サイト
--[[WordPress>http://withthe.wp.xdomain.jp]]
#image(wp.png,center,40%)
-販売サイト
//--[[base>https://withthe.base.shop]]

#image(base.png,center,40%)

//-動きのあるページにして、インパクトを残し、ブランディングしたコンセプトが伝わりやすいものにしたい
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
~

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

***制作ツール
-Illustrator
-WordPress
-base
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~

***プロジェクトの期間
-📅 2021.9.15 - 2021.12.22
~

***まとめ

~
-ショップを作る際に参考にするために沢山のサイトを見てきましたが、ショップのロゴやコンセプトを一貫して固めることで、より洗練されたデザインになることが分かりました。
~

-調査をしていくと、ネットショップを作る際には、商品ページに重点を置くよりも、まず最初に目につくトップページや紹介ページのデザイン性を高めることが商品の売上を左右することが分かりました
~
~
~


**調査

***現状調査
-現在コロナウイルスの流行で、急速なオンライン化や、直接お店に足を運べないなどの理由から、webショップ、webサイトの需要が高まっている。そんな時、商品の雰囲気やコンセプトをうまく伝えるためにはやはり、そのwebサイトの外観や文字などの細部へのこだわりなどが必要である。

***ネットショップのデザインのポイント
-ネットショップのデザインは多くの場合、「第一印象のデザイン」「行動のデザイン」の2つからなっていて、これらが複雑に絡み合うことによって作られています。
~
-「第一印象のデザイン」の例
---目を引くバナー
---綺麗な写真
---見やすいサイトデザイン
~
-「行動のデザイン」の例
---分かりやすいリンクやボタン
---より「見たい」と思わせるコンテンツへの導線
---迷わずに済む購入の流れ
~
-ネットショップの場合、多くのお客様はまずトップページにアクセスし、その後個別の商品ページへと移動していきます。
したがって、個別商品ページに力を入れるよりもまずはネットショップのトップページをしっかりとデザインし、良い印象を持っていただく必要があります。
***[[こちらより抜粋>https://officialmag.stores.jp/entry/kaigyo/netshop-design]]

~
-[[喫茶酒店パーク>https://parkfukuoka.com/]]
--無駄がないデザイン
-[[PERPANEP>https://www.kokuyo-st.co.jp/stationery/perpanep/]]
--色味が統一されていて、コンセプトがわかりやすい
-
-
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
--[[𝟏𝐠𝐮𝐮>https://1guu.jp]]
--[[𝐛𝐨𝐛>http://worldbpb.com/product/list.html?cate_no=90]]
--[[喫茶酒店パーク>https://parkfukuoka.com/]]
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
~

***技法・技術情報
-情報デザイン演習ⅢA
//|48|4|48|c
//|#YouTube(XbMLnYGL2TA)||#youtube(jxIpYOOh-TU)|

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

~
~

**プロジェクト管理

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

***ToDo
-試作を繰り返す
-デザインを随時見直す
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};


***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

#hr
CENTER:''𝗪𝗼𝗿𝗸𝗶𝗻𝗴''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~
~
**2021.12.15
~
**2021.12.8
***試作
-[[WordPress>http://withthe.wp.xdomain.jp]]
#image(wp.png,center,40%)
~
**2021.12.1
***試作
-[[WordPress>http://withthe.wp.xdomain.jp]]
~
**2021.11.24
***試作
-baseでサイトを開設しました
//--[[base>https://withthe.base.shop]]
#image(base.png,center,40%)
~
**2021.11.17
***試作
-[[WordPress>http://withthe.wp.xdomain.jp]]
~
**2021.11.10
~

[[こちらより抜粋>https://officialmag.stores.jp/entry/kaigyo/netshop-design]]

***ネットショップのデザインのポイント
-ネットショップのデザインは多くの場合、「第一印象のデザイン」「行動のデザイン」の2つからなっていて、これらが複雑に絡み合うことによって作られています。
~
-「第一印象のデザイン」の例
---目を引くバナー
---綺麗な写真
---見やすいサイトデザイン
~
--「行動のデザイン」の例
--分かりやすいリンクやボタン
より
---「見たい」と思わせるコンテンツへの導線
---迷わずに済む購入の流れ
~
-ネットショップの場合、多くのお客様はまずトップページにアクセスし、その後個別の商品ページへと移動していきます。
したがって、個別商品ページに力を入れるよりもまずはネットショップのトップページをしっかりとデザインし、良い印象を持っていただく必要があります。

~
***試作

-[[WordPress>http://withthe.wp.xdomain.jp]]
~
--商品数を増やす
--ショップは別サイトで作る
~
**2021.10.27
***試作
-緑をメインにしたデザインで作ってくていましたが、前期に作っていたコンセプトに変更しました。
#image(wt.png,center,20%)

-[[WordPress>http://withthe.wp.xdomain.jp]]
~

**2021.10.20
***試作
~
-[[wix>https://genews2001.wixsite.com/withthe-site]]
~
**2021.10.13
***試作
~
-[[xd>https://xd.adobe.com/view/4dde1885-7743-46ad-8674-9622cc57ef7a-188d/]]
#image(wtxd.jpg,center,40%)
**2021.10.6
~
~
webサイト作成について詳しくないので調べてみます
~
***作成方法を考える
-アニメーションを取り入れるならCSSもしくは、JavaScriptを使った2つの方法が主流
~

~
***CSS
-まずCSSは、画面上で何かアニメーションをシンプルに動かしたい場合に使用します。
例えば、文字の大きさや色を変えたり、配置や背景を変更したり。
ホームページにとりあえず何か動きをつけたい場合は、一番手軽な方法です。
~
~
***JavaScript
-対してJavaScriptは、アニメーションを細かく制御したい場合に使用します。
例えば、停止、一時停止、巻き戻し、バウンス、スローダウンなど。
手間はかかりますが、その分ユーザーのアクション合わせてアニメーションの効果を細かく設定できるので、クオリティの高いアニメーションを作ることができます。
~

**2021.9.29
***shopwebサイトについて
-web上での買い物は実際に触れたり見たりすることができないため、サイト上のみで「この商品が欲しい」と思わせて「購入」してもらわなければならない。そのためには、良いサイトのデザインが大切になってくる。
~
-重要な3つのポイント
--全体的に見やすい
--商品が買いやすい
--商品のイメージに合っている
~
[[参考ページ>https://shop-pro.jp/yomyom-colorme/28529]]
~
**2021.9.22
***調査
-参考サイトや気に入ったサイト
--[[𝟏𝐠𝐮𝐮>https://1guu.jp]]
--[[𝐛𝐨𝐛>http://worldbpb.com/product/list.html?cate_no=90]]