BLOOM

架空のプリザーブドフラワー店のサイト

PCのアイコン

PC版のみ

架空のプリザーブドフラワー店のサイト

作品ページへ

全9ページ

作品について

説明
架空のプリザーブドフラワー店のサイト(職業訓練課題)
担当箇所
ロゴ・デザイン・コーディング
制作期間
2週間
制作意図
職業訓練校にて池袋にある架空のプリザーブドフラワー店のサイト制作の課題です。
初めてのサイト制作。
使用ソフト
Dreamweaver / Illustrator / Photoshop
画像
職業訓練校で用意された物

企画案

クライアント要望
シンプルで、日常のほんの少しの高級感を感じられるような雰囲気がほしい。
従来の生花販売との違いを出せればなおいい。
ロゴは覚えやすく、末長く親しまれるような汎用性のあるロゴを ぜひご提供ください。
ペルソナ
池袋が行動範囲内の32〜42歳の女性。
知人への贈り物としてプリザーブドフラワーを探している方。
デザイン
高級感を感じられる様にシンプルでスッキリしたサイトにする。
カラー
グレーにブラウンを混ぜた色でお花屋さんらしく優しい雰囲気と高級感を併せ持つカラーに。
サイト自体も真っ黒等強い色は避けました。
背景にも薄いグレーを乗せて高級感と柔らかさを。
フォント
欧文にはシンプルで高級感と可愛さを持つフォント。
日本語にもシンプルなフォントを。
両方共にグレーとブラウンを混ぜた文字色にしたので視認性は良いフォントを選びました。

コーディングをして

サイトの特徴
高級感を持たせる為に余白を多めに取りました。
A0S等の動きもふんわりゆっくりめにスピード設定しています。
ペルソナが37歳(±5歳)なので、ある程度のWebリテラシーをお持ちと考えサイトの英語表記には日本語訳は書きませんでした。
気をつけた点
とにかくシンプルと高級感を意識しました。
ゴチャゴチャ感を無くす為に英語は大文字のみで統一感を出しました。
ヘッダーのナビにはホバーすると下線が動くアニメーションにしてボタンと分かる様に。
ファーストビューで「池袋のプリザーブドフラワー店」と分かるようにヘッダーに表記しました。
プリザーブドフラワーはまだ一般的に認識度が低いのでどんな商品か分かる様にファーストビューのイメージは大きく配置しました。
配置順
プリザーブドフラワーの認知度は高くないのでその説明
「CONCEPT」→「ABOUT PRESERVED FLOWER」
その後に商品のラインナップ
「PRODUCTS」
と言った流れで配置しサイト訪問者に認知・理解してもらえる様な順序にしました。
リンク
リンクは全て貼ってあります。
ヘッダーとフッターのロゴはクリックするとトップページに戻るようにしてあります。