cafe and salon OHANA トライデントコンピュータ専門学校

Webデザイン学科

鈴木良 山口紗和

WCAN 2011 Autumn session A-0

自己紹介

鈴木良 // @rsuzuki13 寡黙なプログラマー ツイート数がZERO 見かけによらずクラブミュージックが好き

山口紗和 // @saawaa_y TumblrとTwitterを連携してるのを忘れ、

スパムと間違えられた経験あり(´・ω・｀) 最近は某プリンスさまっ♪がマイブーム

学校紹介

・Webデザイン

・グラフィックデザイン

・情報デザイン

・webマーケティング、企画

・マークアップ

・FLASH // Action Script

・PHP // Java Script

・グループ実習 etc...

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

cafe and salon OHANA

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

チーム内訳

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

現在のサイト

http://www015.upp.so-net.ne.jp/CafeSalonOhana/index.html

制作目標・要望

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

サイト制作

デザインコンセプト選定

「木目」 「紙質」 「オレンジ系」

リニューアル後のサイト

http://ohana.main.jp/

サロン予約システム

サロン予約システム

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

入力① ⇒ 入力② ⇒ 確認

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

入力① ⇒ 入力② ⇒ 確認

・カレンダーから時間を選択 ・メニューにより選択される時間が変更

入力① ⇒ 入力② ⇒ 確認

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

管理者用画面 / 予約システム

・予約一覧や予約編集などの データ管理 ・サロンのメニューや 予約開始時間、 終了時間などが変更可能

予約カレンダー

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

システム設計

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

ECサイト制作

ECサイト

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

総括

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