webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

要件定義の雛形

2月29日
1.サイトの概要:
スマホに特化した、サブスク型のコーヒー豆のお取り寄せサービスの紹介ページ

2.クライアントの情報
会社名:Coffee Journey
タグライン:おうちで楽しむ本格コーヒー体験
サービスの特徴:
全国各地の有名なコーヒー店から厳選した世界各地のコーヒー豆をセットにして毎月1回お届けするサブスクリプションサービスを提供。コーヒー豆のセット内容は毎月変更され、季節やイベントに合わせて特別なコーヒーやスイーツも提供される。
会員限定の情報や、新商品や人気商品の先行予約、コーヒー店の割引券など、会員限定の特典も充実している。
配送はクール便にてコーヒー豆の品質が保たれるように配慮されている。


3.サービスの詳細内容
毎月届く、Coffee Journeyのコーヒーセット。
全国の選りすぐりのお店から
自慢のコーヒー豆を毎月1回お届け
このサービスでしか味わえない極上の香りと味を
自宅で堪能しませんか?

毎月異なるコーヒーが届く
おうちカフェの定期便。
月々1,980円(税込)
毎月の月初めに配送


ページ構成:4ページ
・トップページ
・お申し込みページ
・確認ページ
・完了ページ



掲載するコンテンツ
・PC用ナビゲーション(枠外)
・ヘッダー(枠外)
・ロゴ(自作、枠外)
・メインビジュアル(縦長)
・お知らせ
・メインコピー
・SP用ナビゲーション
・サービスの詳細情報(CTAボタン)
・商品の画像
・ご登録の流れ(CTAボタン)
・コーヒーショップの紹介(scroll snap)
・フッター

ナビゲーションの構成
・トップ
・コンセプト
・サービス
・アイテム
・オーダー
・ショップ

用意する画像
・メインビジュアル(縦Mサイズ)
・コーヒー・コーヒー豆の写真8枚(横sサイズ)
・動画


ご登録の流れ
step1
登録ボタンから名前と
メールアドレスを入力

step2
来たメールのURLから
お届け先とお支払い方法を入力

step3
登録完了ページが
表示されたら完了



ポイント
・パーティクルを使った表現
・曲線を使った表現
・お申込みページの作成
・snap-scrollの導入
・ティッカーアニメーション
・動画をファーストビュー以外で使う

https://pixabay.com/ja/videos/%E7%94%9F%E5%9C%B0-%E5%A5%B3%E6%80%A7-%E5%83%8D%E3%81%8F-%E8%A3%85%E7%BD%AE-43653/

参考サイト
https://coffee-city-fes.com/osaka/