Loading...

制作概要

f.bloomモックアップ

架空のプリザーブドフラワーショップ
のWebサイトを制作しました。

使用ツール:Illustrator、Photoshop、Dreamweaver

制作ページ数:20ページ

制作期間:6日間

制作時期:2020年2月

サイトはこちら

テーマ

シンプル&エレガント
テキストと画像だけで、装飾はほとんどない、余白多めのシンプルデザイン
だけどエレガントに見えるように、フォントや配置などを工夫

テーマカラー:ワインレッド&ゴールド
ゴールドはブラウザ上では一色で表現できないため、実質的にブラウンになってしまっているが、ここではゴールドとする
色はこの2色だけ
リンクやボタンなど押せるところはワインレッド
そうじゃないテキストはゴールドと統一

ターゲット

仕事にプライベートに日々忙しくすごしている女性
そんな女性の日常に、高級感のある花が癒しの空間を演出する

花に少し興味はあるけれど、すぐに枯らしてしまうのではという心配から手を出せないでいた
生け花と違い水やり不要なため、忙しくても手軽に花のある生活を楽しめる

ゴール

来店数の増加と通販の成約

ラウンジスペース併設でカフェの営業をスタートしたため、より多くの来店を目指す

加えて、生け花の販売からプリザーブドフワラーの販売に変えたことで、通販もしやすくなり通販もスタート
駆け出しの通販なので、まずは数件でも成約を目指す

ディレクトリマップ

f.bloomディレクトリマップ

ワイヤーフレーム

左がトップページ、右がサブページ用です。

f.bloomワイヤーフレーム

解説

コンテンツが全てふわっとなるように制作しました。
スライダーもふわっと切り替わり、スクロール時もコンテンツがふわっと現れます。
マウスのホバー時もリンクの色がふわっと変わります。

スライダーやコンテンツのイメージ画像も全て周りをほわほわさせました。
しかし商品画像だけはほわほわさせず、違いを出しました。

商品の個別ページを含む全ページ、合計20ページを制作しました。
商品の個別ページへはホームからでも商品の一覧ページからでも飛べるように設計しました。

商品の個別ページでは一覧ページより少し大きい画像を使用しました。
サブの写真を2枚配置し、ファンシーボックスで3枚の画像を閲覧できるように設計しました。

サイトロゴの下部にパンくずリストを入れて、ユーザビリティを高めました。

ロゴ

f.bloomロゴ

ロゴも制作しました。

作品ページはこちら