Webデザイン/コーディング
[フラワーショップ] PetitFleur
※コーディングはHome及びSeviceページのみ
課題内容
| 案件概要 | 名称 ： Petit Fleur（フラワーショップ） |
|---|---|
| 目的 | 「母の日フェア」のイベントを機にWebサイトを作成したい ECサイトでの販売より、Webページを見てお客様に来店してほしいのでスマートフォンに対応したレイアウトも考えてほしい |
| イメージカラー | 白、緑、茶色 |
| デザイン要望 | グリッドタイプを採用するがレイアウトは指定しない 特集やキャンペーンにお客様を誘導できるように目立たせる ユーザビリティと美しさを両立させた見やすいサイトを意識する |
| 画面サイズ | 幅960px 縦任意 |
| ターゲット層 | 主婦、家族、学生など |
| 店の売り | 花束のアレンジメント、ギフト、季節の草花や花鉢、インドアープランツ、オシャレなガーデニング、グッズの店頭販売など |
| 構成要素 | [トップページ] サイトロゴ/ヘッダー/グローバルナビ/フッター/メインビジュアル/お知らせ/母の日フェアのバナー/店舗情報など [商品紹介ページ] 母の日フェアの紹介/取り扱い商品の紹介など ※今回実際にコーディングするのは上記2ページのみ |
| コンセプト | イメージカラーの白をベースとし、メインカラーに茶色、アクセントカラーに緑色を使用した。フッター部分の背景色を茶色にして、トップページのメイン画像を緑色が多く使用されている草花の画像にする事でそのページ自体を土から生える植物をイメージしたレイアウトにしている。実際にデザインした2ページ共にあまり情報を詰め込み過ぎないように意識し、余白も多めにとってある。店舗情報と取り扱い商品の一覧案内を目立たせることで、少しでも多くのユーザに来店してもらえるようにしている。 |
| 制作環境 | windows7 Illustrator CS5 Photoshop CS5 |
| 制作時間 | デザイン…約14時間 コーディング…約16時間 (2016年03月16日～03月25日) |