2011年9月10日（土曜日）に行われたWCAN 2011 Autumn セッション0で発表したプレゼン資料。Webデザイン学科2年生。

1. cafe and salon OHANA
トライデントコンピュータ専門学校
Webデザイン学科
鈴木良
山口紗和
WCAN 2011 Autumn session A-0

2. 自己紹介
鈴木良 // @rsuzuki13
寡黙なプログラマー ツイート数がZERO
見かけによらずクラブミュージックが好き
山口紗和 // @saawaa_y
TumblrとTwitterを連携してるのを忘れ、
スパムと間違えられた経験あり(´・ω・｀)
最近は某プリンスさまっ♪がマイブーム

3. 学校紹介
・Webデザイン
・グラフィックデザイン
・情報デザイン
・webマーケティング、企画
・マークアップ
・FLASH // Action Script
・PHP // Java Script
・グループ実習 etc...

4. cafe and salon OHANA
愛知県名古屋市中村区
太閤4-3-2
052-710-8616
名古屋駅から徒歩約10分

5. cafe and salon OHANA
・ハワイアンカフェと
サロン併設している
・夫婦で経営
・オーナーが制作した
Webサイトを持っている
・知識は簡単なHTMLとCSSのみ

6. チーム内訳
・ディレクション
打ち合わせやタスク管理等を中心に行う
・デザイン
TOP、カフェ、サロン、EC等のデザイン
・コーディング
システム構築作業etc...

7. 現在のサイト
http://www015.upp.so-net.ne.jp/CafeSalonOhana/index.html

8. 制作目標・要望
・HTML、CSSの基礎は分かるので
私たちにしか出来ないデザインや仕掛けのあるサイトを
・新たにショップオリジナルグッツ等を販売する
ＥＣサイト作っていきたい
・サロンの予約フォームを出来るのであれば制作してほしい

9. サイト制作

10. デザインコンセプト選定
「木目」 「紙質」 「オレンジ系」

11. リニューアル後のサイト
http://ohana.main.jp/

12. サロン予約システム

13. サロン予約システム
・既存の予約システムを参考にしつつ自力で、一から制作
・個人情報のセキュリティの面や
カット、カラー、どのメニューを行うかの所要時間の差
・「使いやすさ」と「セキュリティ」を重視

14. 入力① ⇒ 入力② ⇒ 確認
・名前
メールアドレス
電話番号 を入力
・メニューを選択
カット
カットカラーパーマ
縮毛矯正 etc…

15. 入力① ⇒ 入力② ⇒ 確認
・カレンダーから時間を選択
・メニューにより選択される時間が変更

16. 入力① ⇒ 入力② ⇒ 確認
・名前 メールアドレス 電話番号 予約時間を確認
・送信ボタンで予約完了

17. 管理者用画面 / 予約システム
・予約一覧や予約編集などの
データ管理
・サロンのメニューや
予約開始時間、
終了時間などが変更可能

18. 予約カレンダー
・ 予約の一覧をカレンダーで
見せることで、
どの時間に予約が
入っているのか分かる

19. システム設計
・表示用とシステムファイルを分けて管理しやすく
・入力欄の右横・データ入力の際は
XSS、SQLインジェクションの対策
・トランザクションも用いてデータの安全性に
配慮したにボタンをつけ使いやすさに配慮

20. ECサイト制作

21. ECサイト
・オリジナルの雑貨や
シャンプー等を販売する
・システムにEC-CUBEを使い、
デザインの部分だけ変更

22. 総括

23. ご清聴ありがとうございました