三國茶サイト https://sangokuchaho.hirasaa.com/
概要
スクール課題グループ｜コンペ方式のクライアントワーク
三丹地域の茶葉を使った新ブランドのサイト。ECサイトへの動線になり、地域の魅力も発信できるような多角的なサイト。 インバウンド対応としてEnglishページ実装。
リリース前なので、ブランド名、ロゴ、商品写真は差し替えてあります。
使用ツール・言語
Photoshop / Illustrator / Premiere Pro / Figma / VSCode / HTML / CSS / JavaScript
制作期間
2023年08月〜2023年10月
制作にかかった期間
2ヶ月
担当内容
Webデザイン / コーディング(三丹地方のモノ・コトページ、Englishページ) / 動画制作 / ディレクション
制作過程・ポイント
ECへの動線という要望のほかに、地域とのリンク、ウェルネス事業、インバウンド、YouTubeチャンネルの紹介等、今後の広がりを視野に入れたいとのことでしたので、密にヒアリングを行いホームページとしての落とし所を探っていきました。
まだ決定していない事柄も多かったため、あまりカッチリとコンテンツを決めず『三丹地方のモノ・コト』といった地域ページを設けるなど、余白のあるものをご提案しました。
問題・解決
ひと目でお茶のサイトであると印象付けたいのでファーストビューは動画に。ECへの動線を重視したいのでトップページはパララックスビューでスクロールを促し、商品一覧までの距離を短くしています。
インバウンドを意識してカラーは着物に使うような色調で統一し、和柄のあしらいやタイポグラフィを用いて華やかなジャパンモダニズムを目指しました。
結果
サイトの構成やあしらいの雰囲気をご評価頂きました。
反省点としては、メインカラーが濃く、写真の色が映えない結果になってしまったことです。また決まっていない事柄に関しても、もっと踏み込んだご提案をして、バナーやコラムの設置をすべきでした。
サイトは採用には至らなかったのですが、ファーストビュー動画が今後セミナーや事業発表の場で流すPR動画として採用されました。
左：修正前 右：修正後
全体が深い色だったのをファーストビューのみに。シンプルになったところは要素を交互に配置して動きを感じられるよう意識しました。
