紅茶LP 詳細 | Moonlight Web Studio

Desktop View

概要: ポートフォリオとして、紅茶をモチーフにしたオリジナルのLPを作成しました。
ターゲット: 紅茶に興味はあるものの、種類や味の多様さからあまり触れてこなかった人に向けたLPを制作しました。
制作期間: 2週間
担当: 構成 / デザイン / コーディング
使用技術: HTML5 / CSS3（レスポンシブデザイン対応）
工夫した点: 紅茶と茶器のイメージを意識した書体・色を選択しました。

飲み比べによる良さと気になる点の解消を目的とした構成を意識しました。

SP表示での情報量と視認性のバランスにこだわりました。

セット内容にgridを使うことで統一感を表現しました。
今後の改善点: ヘッダーのナビをホバーした時の動きをつけたいです。

セクションタイトルに横線や下線をつけてデザイン性をさらに持たせたいと考えています。

閲覧者の購入意欲を上げるため、レビューや飲み方などを追加してサイトのコンテンツを充実させたいです。
サイトURL: サイトを見る
改(Arata)のGitHub: サイトを見る

作成する際、特に工夫した部分です。1枚目はFV（ファーストビュー）、2枚目はContentsセクションです。

スマートフォン表示では読みやすさを重視し、余白と縦の流れを意識して調整しています。