USAGI
hako

紅茶のオンラインレッスン申込みサイト

  • Web Design
  • Illust
imac
PCモックアップ
spイメージ デザインカンプモバイル

リニューアル提案から全体のサイトのデザインの制作~WordPressまでを実装

サイト名 Tealamp Tea School

※改修中の為現在非公開


デザイン/コーディング
Adobe XD・Photoshop / HTML・CSS・WordPress
制作期間 2021年7月-8月
▼ 案件概要
TealampTeaSchoolは紅茶全般のレッスンをオンラインで実施している紅茶サロンです。元々のサイト内での二重の情報、コンテンツのバラツキなどの課題を整理し、ユーザーが見たときに一貫した情報を把握できるようにリニューアルの提案を行いました。
▼ ターゲット
30代~40代女性 共働きで子供がいる。子育て世代真っただ中で、自分の時間があまり確保できていない。
限られた時間の中で、自分の時間を満喫させたいが、子供を最優先に考えているため、自分の趣味にはそこまで多額を使おうとは考えていない。
▼ デザインのポイント
ブログの更新性が元々高いのでそこを活かして、紅茶が好きな人もコラムなどを読んで楽しめるサイトにしました。「サイト自体がティータイムの時間に寄り添うものである」をコンセプトに、必要な情報だけを残し、世界観を統一しました。

世界観の統一

ブランディングサイト寄りの案件だった為、クライアントの意向をメインにデザインの世界観を統一しました。ティータイムは「誰でも好きな時間に、好きなように過ごす」というメッセージを込めて背景色を朝~夕方をイメージグラデーションの背景を採用しています。登場する女性のイラストたちもあえて表情はなくし、着ている服も様々な季節感のものを描きました。アクセントになっている鳥・猫・街並みのイラストは、紅茶サロンの発祥地のイギリスにゆかりのあるものにしております。

Wordpress実装

レッスン告知やブログは更新頻度が高いので管理がしやすいものを希望、というクライアントの意向もあり、全てのページにWordpressを実装しました。オンラインレッスンという無形商品のため、「サイト上で希望者が希望のレッスンを申込みをしてからBASEの該当URLを送る」という方法をとっておられました。その場合は既存のFreeプラグインだけだと実装ができないため、[イベント予約]と[フォーム作成]の2つのプラグインを組み合わせてデザイン通りの仕組みを構築しました。また、クライアント側の更新方法のマニュアル動画も作成しました。

各種制作物

サイトの制作にあたり、ロゴ・レッスン修了証・アイキャッチ画像の制作も行いました。ロゴは「Tea」「Lamp」「Time」を連想させるものからアイディア出しを行い、クライアントと数を絞りながらブラッシュアップをしていきました。現在は、茶葉販売用のサイトも継続で作成中になります。

関連ブログ