Webデザインの職業訓練校「デザインカンプ制作・発表」のメモ
スケジュール
7/27 デザインカンプ提出・発表（ロゴはテキストのみで可）
9/8 ロゴデザイン提出・発表
10/5 レスポンシブサイト提出・発表
STEP1．Webサイトの目的を決める
株式会社曙橋生花
事業内容：
①法人向けの生花の販売。冠婚葬祭用の祭壇を始めとしたステージ演出
②一般向けのフラワーショップ
代表取締役社長：アオキ エリカさん
✔︎ Webサイトの目的：フラワーショップのHPをつくり、一般客を集める
✔︎ Webサイトイメージ：おしゃれ、ハードルの高さを感じないアットホームな雰囲気（Smile）日曜日（Sunday）の楽しさ（Enjoy）の様な、幸せな気持ち（Happy）を届けたく
✔︎ 取り扱いの花：
①一般的な生花（チューリップやバラなど他多数）
②季節に応じた花（春夏秋冬、12ヶ月、誕生月）
③ギフト用の花（プリザーブドフラワーやソープフラワーを使った花など）
✔︎ ターゲット・ペルソナ：新宿曙橋、新宿エリア在住の女性（一般のお客さま、高価格帯よりは逆路線）
✔︎ その他：ロゴマーク、お問い合わせフォーム（あれば嬉しい：一般用、法人用）、お店のブランドカラーは緑以外（コーポレートカラーは緑）
STEP2．参考となるWebサイトを探す
他サイト
生徒作品
STEP3．構成案を作る（何のページが必要なのか）サイトマップ
顧客が抱える問題
sunday flowerの解決策
sunday flowerの信頼性
★★★ Top page ★★★
✔︎ ロゴマーク シンプルな花びら3枚
✔︎ カテゴリ（About、Products、Service、Access、Contact us）※ Blog お問い合わせボタン？
✔︎ キービジュアル（キャッチコピー、営業時間、住所、電話番号、アクセス、Twitter、Instagram）
※ 背景に花びら3枚を3色で薄く内側に傾ける
※ 笑顔、文字を混ぜて、アットホームさを出す（他は極力シンプルに。ごちゃごちゃさせない）
・About
・Products（一般的な生花、季節に応じた花、ギフト用の花）
・Service（Gift、Arrangement、Lesson classroom）
・Access（map）シンプルな地図の作成
・Contact（個人、法人）
・フッター（左：Category、中：News、右：address、Tel、Twitter、Instagram、fecebook）
※ ブログ型のページをつくりSEO対策（キーワード調査）
※ 花のある生活を想像させるページ
改善ポイント：ファーストビューに営業時間、場所、TEL
ファーストビューで何屋かわかる
最新情報の更新があり、来訪時の期待感あり
オカメインコを飼ったときの未来が見える（行動）
他社にはない3つの強み（トリのオチもある）
Twitterのアイコンがインコになっている（差別化）
お客さまの声の代わりに、お客さまからの写真がある（信頼性）
「オカメインコ 専門店」で検索1位（権威性）
★★★ About ★★★
★★★ Products ★★★
①Flowers 一般的な生花（チューリップやバラなど他多数）
②Season Flower 季節に応じた花（春夏秋冬、12ヶ月、誕生月）
③Gift flower ギフト用の花（Preserved flower プリザーブドフラワーや Soap flower ソープフラワーを使った花など）※季節に合わせたギフト
★★★ Service ★★★
Gift Set
Arrangement
Lesson classroom
★★★ Contact us（個人、法人）会社概要★★★
STEP4．スケジュール
9/21（火）XDデザインカンプ（サイトの組み合わせ）
9/22（水）XDデザインカンプ完成
9/24（金）コーディング開始
9/27（月）Top コーディング
9/28（火）About コーディング
9/29（水）Products コーディング（Kindle参考）
9/30（木）Service コーディング
10/1（金）Access、Contact us コーディング
10/2（土）予備日 コーディング（ロゴ）
10/4（月）学校
10/5（火）学校 発表
STEP5．パーツを作る
STEP6．プレゼン
✔︎ 全体像
ベースカラー → 白
メインカラー → オレンジ
アクセントカラー → 青緑
✔︎ ポイント3つ
・シンプル（おしゃれ、色少なめ、1ページ）
・笑顔を多くした（アットホーム、楽しさ、幸福さ）
・3の数字を意識する（わかりやすさ）
✔︎ 課題点
・アットホームさ（日本語が少ない） → 日本語を増やした
・地図が適当 →
・花を、知らない →
ヒアリング内容
概要ーーー
今年から、先代の社長から会社を引き継ぎました。
今までは、法人向けの生花の販売しか行って来なかったのですが、
一般向けのフラワーショップを、今年からオープンする事になり、曙橋駅から徒歩４分の所に店舗を構えました。
今回は、そのフラワーショップのホームページをお願いしたいです。
基本的には、一般のお客様にsunday flowerを知っていただいて、集客につなげていきたいです。
おしゃれ
お店の名前ーーー
お店の名前は、sunday flower
お客様に日曜日の楽しさの様な、幸せな気持ちを届けたくてつけた名前です。
取り扱っているものーーー
チューリップやバラなどの一般的な生花をはじめ、
季節に応じて用意する生花の種類を変えていこうと思っています。
また、生花だけではなく、プリザーブドフラワーやソープフラワーを使ったギフトなども販売していきたいと思っています。
ホームページの制作についてーーー
ロゴマークがまだないので、作っていただきたいです。
そのロゴで、名刺なども作りたいと考えています。
コーポレートカラーは緑ですが、お店のブランドカラーは別のもの（緑以外）が良いと思っています。
特にないので決めていただいて問題ありません。
法人向けサービスの紹介は、ほとんどいりませんが、「専用のお問い合わせフォーム」があったら嬉しいです。
その他、どの様なホームページにしたら良いかは、ある程度お任せします。
他生徒の発表メモ
１ 資格 差別化
２ ファーストビューでわかるように、サブスクリプション
３ 文字で楽しい雰囲気
４ サイトを参考にした
５ トロピカル、営業時間、写真にイメージカラー、鉢植え、料金、イベント
６ 大理石おしゃれ、スライダー、Instagram、onlineショップ
７ ワークショップ
８ 新しい（先代）、月曜日、SNSアイコンファストビュー、Tシャツ、花以外
９ 他サイト、花が必要なシーン、ベース、メイン、アクセント
10 ロゴマーク
11 シンプル
12 提案書（結論、ポイント、背景・目的、※追加設定、ターゲット、基本情報、市場背景、webの役割、具体的な施策）、リラックスした文字、幸福感、幸せ、平和、リフレッシュ、ピクニック、お出かけ、太陽、のんびり、フォント、手書き文字（adobeのフォント）、押したくなるようなボタン、TEL、予約の取りこぼし
13 チューリップ、インスタ、ボタニカリウム（差別化）、柔らかさ
14 実際のお花、アニメーション、水彩、地図、
15 コーポレートの反対色
16 全体像、3つポイント、課題感
17 認知度、Twitter、インスタ右上に、印象、花びら日曜日、ボタンオレンジ、動物園・水族館→見るだけ（展示）、ハサミ、生活が変わる未来を見せる、ボタンの色、わかりにくい英字（整理）
18 曙橋・四谷のターゲット層（20〜30代、一人暮らし、家賃10万円相場、しっかり働いている方）→カフェイメージ、外観、ブログ・SNS、アドレス、時間コンタクト、インスタ、緑・スタバ、体験談
19 ヒアリングシート、サブスク、トピックス、地図、SNS、課題感＝色・フォント
20 よりによって、アドバイス、外観・店舗内・スタッフ、花のある生活、ギフト、法人、映える指南、魅せる、生産者支援（花農家）
21 ハンバーガー
22 ぱっと見でまとめる、会社の送別会or普段使いorイベント、送別会の思い出し体験談（P/Uのしやすさ、比較）、論理性、見るだけ、気軽に、ギャラリーイメージ、今日の発信（SNS集客）
23 事前リサーチ（新宿区の住民層、子どものいない夫婦、家賃9〜10万円、駅近、競合分析、ペルソナ、カラー、サブスク※新しいサービス、値段の比較ABC）、店頭写真
24 包紙、くすんだブルー、鮮やかなオレンジ、特別な日・なんでもない日に・観葉植物、新着情報、shop,gift,diary,green,blog,会社概要,法人のお客さま、モバイルサイト
25 サイトマップ、手書きの写真
26 近所のお花屋さん、ハンバーガー（カテゴリから探せる）、スライドショー、お花のstyle、季節のお花、ギフト、右バナー、求人
27 トップ画像・ヘッダーを固定、オレンジ、ブルー、アットホーム→イラスト、539文字
28 他サイトを参考にする、花屋・オンラインショップ・アイスクリーム、業態の変化を想像→新しい状況を追加しやすいサイト制作、オレンジ、ナビ固定（店名の記憶）、アイスとの比重、毎日が日曜日だったら？、フッターのみにナビ
29 ピンク色、緑？インフォメーション、用途別、ギフト・ランキング、ワークショップ、オンラインストア、コンセプト
ロゴデザイン作成メモ
✔︎ 色
赤、黄、緑、オレンジ、白？ 明るい色ベース
緑を混ぜてもいいかも
楽しそうな雰囲気、ゆるそうな、
ベースカラー → 白
メインカラー → オレンジ
アクセントカラー → 青緑
基本に忠実
おしゃれ、ハードルの高さを感じないアットホームな雰囲気（Smile）
日曜日（Sunday）の楽しさ（Enjoy）の様な、幸せな気持ち（Happy）を届けたく
✔︎ 10/5 レスポンシブサイト提出・発表
１画像多め、読み込み、ホバーアクション、下層blog
２Instagram オンラインショップ全ページ、タブ
３タブ、常駐ギフト、いつものギフト、ご質問
４TEL
５Blog更新情報、タブ切り替え、レスポンシブ
６写真、花びら追加で修正、季節、写真はPhotoshop、スマホ
７グラデーション、メニューSNS、リクルート（スタッフ＆採用）、LP、画像Photoshop、ワクワク感、目的（集客、CVR）
８写真がフワッと、ホバーで動き、自分の絵を入れる
９me
１０ヘッダーを薄く、ロゴ → レスポンシブ、透明のボーダー？、店長メモ、PHPメール
１１目を引く画像、日本語
１２ハンバーガー（カテゴリなし）、コンタクト表示、z-index
１３綺麗な写真を多めに、zoomの吹き出し、クリックで回る、ポケモンクラブ（動くと押したくなる、たしかに）
１４ストーリー（映画、タイプライター、改行）、Googleマップ（別窓）、News（何をしているかわかる、Blog）、ライトアップ連動画像、Tシャツ、カレンダー、郵便番号（JavaScript）、送信で入力していないところ、ipad
１５#2先代から引き継いだメッセージ、DIARY、金木犀、products（サンデーフラワーの特色）、落ち着いた雰囲気
１６スライダー、カレンダー、法人お客様向けページ、レスポンシブの幅
１７ビジネス街、住宅街、地元民の人（割とお店に人がいる）、徒歩4分（ビジネス街、企業）、取扱商品、ザッと見れる、サラッとしている、スケジュール感
１８シンプルスマート、moreボタン、宅配ページ、Instagramボタン（グラデーション）、フッター、よくある質問ページ
１９スライダー、メッセージが右から、商品が下から出てくる、お持ち帰りサービス（店舗のみ）、イラストレーター（おでん）、商品ページの動き（ホバー）、テーブルの感じ、背景にNews、Twitterの色？反省点（購買意欲、CVR）
２０ハンバーガーメニュー（PC、スマホ） → 768px以下にすると全面、ロゴが上に来る、アイスクリーム（写真が1枚増える）、フッター
２１水彩の絵（1枚の写真でバックグランドで貼り付け）、斜めのvegas画像、Twitter社でアイコンを選べる
２２写真とabout、キャッチコピー、季節の花＆Instagram、vagas表情
２３地図を統一、ベーシック、アドバンスの教室、メール、電話でのお問い合わせ
２４Twitterリンク、コーポレートカラー緑
２５スライド、体験レッスンのロゴ、個人、法人の方（idで飛ばす）、会社概要、各種種別で探す、数量・カートに入れる、ロゴカラーを変える
２６スライダーバナー集、margin-topをマイナスにする＆display？
２７フッターならして配置、aboutはシンプル、店内情報写真、外観内観を入れる？下線とボタンが大きくなる、JavaScript見ているページに印が出る、サブスクプラン
２８きたろうハウス
以上です。