使用ツール：Figma、Photoshop
制作期間：約3日
課題内容：ハーブショップのLP制作
制作範囲：ワイヤーフレームとデザインカンプ
◎制作物
◎要件定義
▶︎事業内容
地方にある品揃え豊富の大型ハーブショップの紹介。ハーブに関連したレッスン、ワークショップの紹介。
▶︎事業のターゲット
ハーブや自然に癒されたい方。ハーブの商品を購入したい方。休日にゆっくり出かけ非日常を楽しみたい方。
▶︎制作目的
ハーブショップの魅力を伝えて行きたいと思ってもらえる。ハーブに親しみハーブの商品を購入したいと思うようにするサイト。
▶︎サイトのターゲット
ハーブの商品を購入する方。体験レッスンをしたい、作って思い出になるものが欲しい方。おしゃれ、インスタ映えを狙っている方。ハーブのイベントを楽しみたい方。
◎情報設計
▶︎雰囲気を伝える
ハーブの香りまで伝わってくるような魅力のある写真を使用してイメージできるようにしました。
▶︎Shopで買い物をする
商品はどんなものがあるか大きい画像で分かりやすくしました。
▶︎Lessonに来てもらう
アクセントカラーで分かりやすくしてクリック率を上げる工夫をしました。
→CTAセクションはアイコンを使用してすぐに見て分かりやすくしました。
◎ビジュアルデザイン
テーマカラー：ターゲットよりハーブに興味のある方に向けて落ち着いていて、青系の淡い色を使用することによって洗礼されたイメージを出しました。アクセントカラーはオレンジを使用しボタンを分かりやすくしました。
地図：サイトのデザインに合った地図をIllustratorで作成しました。地方で移動が車やバスになるので広い地図の作成はアイコンを使用することによって周辺のバス停や場所の情報を分かりやすく、場所の文字は大きくして見やすい地図を心がけました。
◎制作で学んだこと
1. 土台をしっかり作って理解すること
→ワイヤーフレームの制作を行う前にまず、目的やターゲットについての土台を作って理解することで、軸がブレることなく効率よく制作ができることが分かりました。
2. デザインの配置を考えること
→デザインを考える時には同じ系統や有名なデザインの既存のサイトを参考にしました。 文字の大きさだったり余白を決めてデザインすることによって全体にまとまりのあるデザインになったと思います。