制作概要
架空のプリザーブドフラワーショップ
のWebサイトを制作しました。
使用ツール:Illustrator、Photoshop、Dreamweaver
制作ページ数:20ページ
制作期間:6日間
制作時期:2020年2月
テーマ
シンプル&エレガント
テキストと画像だけで、装飾はほとんどない、余白多めのシンプルデザイン
だけどエレガントに見えるように、フォントや配置などを工夫
テーマカラー:ワインレッド&ゴールド
ゴールドはブラウザ上では一色で表現できないため、実質的にブラウンになってしまっているが、ここではゴールドとする
色はこの2色だけ
リンクやボタンなど押せるところはワインレッド
そうじゃないテキストはゴールドと統一
ターゲット
仕事にプライベートに日々忙しくすごしている女性
そんな女性の日常に、高級感のある花が癒しの空間を演出する
花に少し興味はあるけれど、すぐに枯らしてしまうのではという心配から手を出せないでいた
生け花と違い水やり不要なため、忙しくても手軽に花のある生活を楽しめる
ゴール
来店数の増加と通販の成約
ラウンジスペース併設でカフェの営業をスタートしたため、より多くの来店を目指す
加えて、生け花の販売からプリザーブドフワラーの販売に変えたことで、通販もしやすくなり通販もスタート
駆け出しの通販なので、まずは数件でも成約を目指す
ディレクトリマップ
ワイヤーフレーム
左がトップページ、右がサブページ用です。
解説
コンテンツが全てふわっとなるように制作しました。
スライダーもふわっと切り替わり、スクロール時もコンテンツがふわっと現れます。
マウスのホバー時もリンクの色がふわっと変わります。
スライダーやコンテンツのイメージ画像も全て周りをほわほわさせました。
しかし商品画像だけはほわほわさせず、違いを出しました。
商品の個別ページを含む全ページ、合計20ページを制作しました。
商品の個別ページへはホームからでも商品の一覧ページからでも飛べるように設計しました。
商品の個別ページでは一覧ページより少し大きい画像を使用しました。
サブの写真を2枚配置し、ファンシーボックスで3枚の画像を閲覧できるように設計しました。
サイトロゴの下部にパンくずリストを入れて、ユーザビリティを高めました。