概要
職業訓練課題：仮想クライアントのWEBサイト制作
架空の通販専門のクッキー缶サイト（実店舗はない設定）
企業名・店舗名：pieni
目的
認知拡大と既存客のリピート
ターゲット
・20-40代女性
・自分へのご褒美や友人や家族などへのプレゼントにも贈りたい
・通販はスマホから使用する
・インスタ映えする画像をアップしたり、見たりするのが好き
・ナチュラル、シンプル、かわいい、北欧、インテリア、雑貨、コスメ、カフェなどが好きなスマホユーザーがターゲット
ペルソナ
・32歳 / 女性
・千葉市在住の都内勤務会社員、結婚2年目、家事は分担制
・趣味はYouTubeや配信サイトで動画を見ること
・甘いものが好き
・たまに夫と登山したり、年に1回は夫婦で海外旅行をする
・何か好きなことで副業ができたらいいと考えている
サイズ
スマホ：幅375px
デスクトップ：幅1440px
使用ツール
Figma / Photoshop / illustrator / VScode
使用言語
HTML / CSS / Java Script
製作期間
企画・デザイン：50時間
コーディング：31時間
URL
Website：URL
デザインカンプ
キャッチコピー
pieni（ささやか）な幸せつめこんで
北欧テイストのクッキー缶
印象
クッキー缶、北欧、プレゼント、ナチュラル、かわいい、ほっこりする
素材
生成Ai画像、フリー素材
カラー
ベースカラー：温かみと可読性を考慮したミルクティー
メインカラー：落ち着きと親近感がありサイトの世界観に合っているマイルドショコラ
アクセントカラー：親近感や温かみの中にやわらかな爽やかさを出すドルフィングレイ
フォント
Libre Baskerville：落ち着きと可読性があるため使用
デザイン
・シンプルナチュラルなほっこりしたお店の雰囲気が伝わるデザインを心掛けました
・サイトの造りはシンプルですが、FVでクッキーがくるくる回転したり、各商品ページでの画像を自動スクロールで流す動きで「楽しい」が伝わるようにしました
・丸いフォルムやなみなみウェーブ、とり・ハリネズミなどの北欧テイストのあしらいをさりげなく施してお店の世界観を出しました
・デザインカンプの曲線はシンプルさを重視していましたが、お店の核である『温かみ』や『親近感』をより強調する必要性を感じ、曲線を増やして視覚的なやわらかさを向上させました