𝗪𝗲𝗯𝗦𝗶𝘁𝗲・・・・・・・ WordPress
- 鹿毛鈴菜
- Keywords:webサイト, ブランディング
- WordPress
概要
これは何?
前期ブランディングしたものをブラッシュアップして、さらにwebサイト制作に取り組む
背景と目的
現在では、コロナウイルスの流行などにより急速なオンライン化や、直接お店に足を運べないなどの理由から、ショップの運営や紹介のためのウェブサイトは必需品であると思ったため
コンセプト
- 「誰の日常にも取り入れやすい雑貨をコンセプトにした、『With The』のブランディングデザイン」が前期に掲げたコンセプトだったので、男女共に気軽にサイトを訪れられるようなデザインにする
- ブランドの雰囲気が伝わりやすいデザイン性のあるwebサイト
成果物の仕様
- ショップ紹介サイト
- 販売サイト
メンバー
鹿毛鈴菜
制作ツール
- Illustrator
- WordPress
- base
プロジェクトの期間
- 📅 2021.9.15 - 2021.12.22
まとめ
- ショップを作る際に参考にするために沢山のサイトを見てきましたが、ショップのロゴやコンセプトを一貫して固めることで、より洗練されたデザインになることが分かりました。
- 調査をしていくと、ネットショップを作る際には、商品ページに重点を置くよりも、まず最初に目につくトップページや紹介ページのデザイン性を高めることが商品の売上を左右することが分かりました
調査
現状調査
- 現在コロナウイルスの流行で、急速なオンライン化や、直接お店に足を運べないなどの理由から、webショップ、webサイトの需要が高まっている。そんな時、商品の雰囲気やコンセプトをうまく伝えるためにはやはり、そのwebサイトの外観や文字などの細部へのこだわりなどが必要である。
ネットショップのデザインのポイント
- ネットショップのデザインは多くの場合、「第一印象のデザイン」「行動のデザイン」の2つからなっていて、これらが複雑に絡み合うことによって作られています。
- 「第一印象のデザイン」の例
- 目を引くバナー
- 綺麗な写真
- 見やすいサイトデザイン
- 「行動のデザイン」の例
- 分かりやすいリンクやボタン
- より「見たい」と思わせるコンテンツへの導線
- 迷わずに済む購入の流れ
- ネットショップの場合、多くのお客様はまずトップページにアクセスし、その後個別の商品ページへと移動していきます。
したがって、個別商品ページに力を入れるよりもまずはネットショップのトップページをしっかりとデザインし、良い印象を持っていただく必要があります。
こちらより抜粋
先行事例
技法・技術情報
- 情報デザイン演習ⅢA
プロジェクト管理
スケジュール
ToDo
- 試作を繰り返す
- デザインを随時見直す
NotToDo
𝗪𝗼𝗿𝗸𝗶𝗻𝗴
2021.12.15
2021.12.8
試作
2021.12.1
試作
2021.11.24
試作
- baseでサイトを開設しました
2021.11.17
試作
2021.11.10
ネットショップのデザインのポイント
- ネットショップのデザインは多くの場合、「第一印象のデザイン」「行動のデザイン」の2つからなっていて、これらが複雑に絡み合うことによって作られています。
- 「第一印象のデザイン」の例
- 目を引くバナー
- 綺麗な写真
- 見やすいサイトデザイン
- 「行動のデザイン」の例
- 分かりやすいリンクやボタン
より- 「見たい」と思わせるコンテンツへの導線
- 迷わずに済む購入の流れ
- ネットショップの場合、多くのお客様はまずトップページにアクセスし、その後個別の商品ページへと移動していきます。
したがって、個別商品ページに力を入れるよりもまずはネットショップのトップページをしっかりとデザインし、良い印象を持っていただく必要があります。
試作
- WordPress
- 商品数を増やす
- ショップは別サイトで作る
2021.10.27
試作
- 緑をメインにしたデザインで作ってくていましたが、前期に作っていたコンセプトに変更しました。
2021.10.20
試作
2021.10.13
試作
2021.10.6
webサイト作成について詳しくないので調べてみます
作成方法を考える
- アニメーションを取り入れるならCSSもしくは、JavaScriptを使った2つの方法が主流
CSS
- まずCSSは、画面上で何かアニメーションをシンプルに動かしたい場合に使用します。
例えば、文字の大きさや色を変えたり、配置や背景を変更したり。
ホームページにとりあえず何か動きをつけたい場合は、一番手軽な方法です。
JavaScript
- 対してJavaScriptは、アニメーションを細かく制御したい場合に使用します。
例えば、停止、一時停止、巻き戻し、バウンス、スローダウンなど。
手間はかかりますが、その分ユーザーのアクション合わせてアニメーションの効果を細かく設定できるので、クオリティの高いアニメーションを作ることができます。
2021.9.29
shopwebサイトについて
- web上での買い物は実際に触れたり見たりすることができないため、サイト上のみで「この商品が欲しい」と思わせて「購入」してもらわなければならない。そのためには、良いサイトのデザインが大切になってくる。
- 重要な3つのポイント
- 全体的に見やすい
- 商品が買いやすい
- 商品のイメージに合っている
参考ページ