■テーマ
カフェというテーマを決め、さらに細かいコンセプトを決めます。
カフェというテーマを決め、さらに細かいコンセプトを決めます。
・どんなカフェを想定するか？
ニュースで、日本に来た海外からの旅行客が「一般家庭で普段飲まれているようなお茶を飲む場所が欲しい」と言っていたことから、気軽に日本茶を飲めるようなカフェはどうか？という案が出ました。
しかし、海外の方だけでなく、コーヒーや紅茶が苦手な日本人にもニーズがあるのではないか？街でよく見かけるカフェはコーヒー店がほとんどなので、珍しさもあるのではないか？
そんな理由からテーマは、
「日本茶専門のカフェ」
「コーヒーが苦手な日本人向けのお店」
「コーヒーが苦手な日本人向けのお店」
としました。
■店名
和風の名前や漢字の名→お茶や茶畑を連想する、茶摘（chatumi）という名前を採用しました。
和風の名前や漢字の名→お茶や茶畑を連想する、茶摘（chatumi）という名前を採用しました。
■デザイン
１カラムのモバイルファーストのサイトデザインで、JavaScriptのフォームも実装したいです。
（この時はHTMLとCSSまでしか学習していません）
カフェという想像しやすいお店に、日本茶専門というオリジナリティを加えました。
PC表示では一部レイアウトを可変させることで見やすい工夫をしました。
１カラムのモバイルファーストのサイトデザインで、JavaScriptのフォームも実装したいです。
（この時はHTMLとCSSまでしか学習していません）
カフェという想像しやすいお店に、日本茶専門というオリジナリティを加えました。
PC表示では一部レイアウトを可変させることで見やすい工夫をしました。
■ターゲット
はじめは、
【海外からの観光客】に、「日本文化を感じてもらう和風なお店」にしようとしました。
お店の雰囲気は、
時代劇に出てくる茶屋のようなイメージなのか？
伝統的な感じではなく、立ち寄りやすいカフェにするのか？
をチームで相談した結果、モダンなオシャレな店内を想定することにしました。
はじめは、
【海外からの観光客】に、「日本文化を感じてもらう和風なお店」にしようとしました。
お店の雰囲気は、
時代劇に出てくる茶屋のようなイメージなのか？
伝統的な感じではなく、立ち寄りやすいカフェにするのか？
をチームで相談した結果、モダンなオシャレな店内を想定することにしました。
更に店内で日本文化を感じてもらうイベント開催し、予約も受け付けできるような仕掛けを予定します。
また、海外の方向けなので、できればサイト構成を多言語対応にすることにしました。
また、海外の方向けなので、できればサイト構成を多言語対応にすることにしました。
しかし、多言語対応に時間を割けるのか不明瞭でしたので、
【日本人向け】のお店にすることとしました。
・コーヒーが苦手、コーヒー以外を飲みたい日本人
・30代～50代の男女
・ほっと一息つきたい、気軽に休憩したり会話を楽しめる、カジュアルなカフェを探している方
がターゲットです。
【日本人向け】のお店にすることとしました。
・コーヒーが苦手、コーヒー以外を飲みたい日本人
・30代～50代の男女
・ほっと一息つきたい、気軽に休憩したり会話を楽しめる、カジュアルなカフェを探している方
がターゲットです。
■制作の流れ
全員でおおまかなレイアウトを考えます。
Top
トップページ。大きく画像を表示→画像がスライドして切り替わる
画像のみの案から、画像＋キャッチコピーで、よりブランドイメージが伝わるページを目指します。
トップページ。大きく画像を表示→画像がスライドして切り替わる
画像のみの案から、画像＋キャッチコピーで、よりブランドイメージが伝わるページを目指します。
About
お店のコンセプトを伝えるページ。
店主像を作り、リアリティを出しました。
お店のコンセプトを伝えるページ。
店主像を作り、リアリティを出しました。
Menu
お茶の種類や産地でメニューを作ることとします。
お茶請けや軽食をフードメニューとして作ります。
画像とテキストでのページ構成です。
トップがスライドショーなので画像2枚ずつ横に並べる案に変更しました。
お茶の種類や産地でメニューを作ることとします。
お茶請けや軽食をフードメニューとして作ります。
画像とテキストでのページ構成です。
トップがスライドショーなので画像2枚ずつ横に並べる案に変更しました。
Access
住所などの店舗情報と地図とお店の写真で構成します。
住所などの店舗情報と地図とお店の写真で構成します。
Contact
電話番号を大きく表示してわかりやすく、押しやすくします。
モバイルの場合はそのまま電話が掛けられることを想定しています。
SNSや問い合わせのアイコンを作成し、別ページ（SNS）へ誘導する仕組みも導入しました。
電話番号を大きく表示してわかりやすく、押しやすくします。
モバイルの場合はそのまま電話が掛けられることを想定しています。
SNSや問い合わせのアイコンを作成し、別ページ（SNS）へ誘導する仕組みも導入しました。
News
季節メニューやイベント情報を発信
→ ボツ（Top画面をすっきりさせたかったのでナシにしました。）
季節メニューやイベント情報を発信
→ ボツ（Top画面をすっきりさせたかったのでナシにしました。）
Evevt
店内で行われるイベントの情報
→ ボツ（ターゲット像を海外から国内へ変更したため不要としました。）
店内で行われるイベントの情報
→ ボツ（ターゲット像を海外から国内へ変更したため不要としました。）
■サイトデザイン
ロゴ
ハンバーガーメニュー 右側からスライド表示させる。画面全体ではなく４分の３程度で半透明にする。
ロゴ
ハンバーガーメニュー 右側からスライド表示させる。画面全体ではなく４分の３程度で半透明にする。
ナビ（PC)
画面上に常に表示させる
画面上に常に表示させる
お問い合わせのバナー
文字のみの案から、ボタンっぽくCSSで実装する案に変更。よりクリックしやすいデザインにする。
リンク先は「名前、電話、メール、文章、カレンダー」ラジオボタンで「問合せ、予約」を切替可能。
PHPで実装予定。
文字のみの案から、ボタンっぽくCSSで実装する案に変更。よりクリックしやすいデザインにする。
リンク先は「名前、電話、メール、文章、カレンダー」ラジオボタンで「問合せ、予約」を切替可能。
PHPで実装予定。
画像
それぞれが画像を集め、全員で選抜する。
メニューの画像は1：1にして画像をメインで見せる。
それぞれが画像を集め、全員で選抜する。
メニューの画像は1：1にして画像をメインで見せる。
お問合せフォーム
問い合わせと予約の２パターン作成します。
フォームの一部がラジオボタンにより切替えられます。
フォームの一部がラジオボタンにより切替えられます。
MySQLのテーブルも2つ作成し、ラジオボタンを基準に格納される仕組みにしました。
送信後、確認画面を表示して送信ボタンで送信完了ページへ移動します。
送信されたデータは対象のテーブルに格納され、管理画面で確認・削除が可能です。
管理画面へはログインが必要でIDとPWを入力するようにしました。
問合せ・予約それぞれ一覧ページがあります。
ページでは閲覧と削除の画面へボタン移動でき、テーブルの表示と削除ができるようにしました。
ページでは閲覧と削除の画面へボタン移動でき、テーブルの表示と削除ができるようにしました。
格納先の条件分岐に悩みましたが、人数（name="people"）が予約時にしか入力できないのでこれを起点にしました。
