スイーツブランドWebサイト

デモサイトはこちらです↓ https://preview.studio.site/live/bXqzrBG3qD

｜プロジェクトについて

スクール課題として制作した、スイーツブランド「Sweet Delight」の架空Webサイトです。

提供された素材をもとに、Studioを使用してコーディングを担当しました。

素材の良さを引き出すスイーツを扱うブランドの世界観が伝わるように、ビジュアルの魅力・情報の見せ方・動きのバランスを意識して構築しています。

｜制作の背景

目的：ブランドイメージの構築と、オンラインショップ誘導を目的としたWebサイトの再現

ターゲット：スイーツやギフトを探している幅広い世代のユーザーを想定

制作内容：提供された素材をもとに、Studioでのコーディングを担当

※本サイトはスクール課題の一環として制作したもので、実在の店舗やブランドとは関係ありません。

｜コーディングのポイント

1. 世界観を大切にした構成

写真やカラーに合わせて余白や構造を調整し、ブランドのあたたかみや上質感が伝わるよう工夫。

2. Studioのアニメーション表現を活用

メニューのホバーやニュース更新など、細かな動きでアクセントをプラス。

3. 各ページの視認性と流れを意識

ファーストビューから商品紹介、ニュース、ショップ誘導まで、ユーザー導線を自然に設計。

｜使用ツール・制作期間

使用ツール：Studio

制作期間：1日間

担当範囲：コーディング

｜制作を振り返って

ビジュアルの比重が高いサイトだったため、

ただ見た目を再現するだけではなく、「魅せ方」や「動き」も含めた再現性を大切にしました。

特に画像のトリミングや余白の調整では、スイーツの美しさを引き立てるレイアウトを意識。

ユーザーが“おいしそう！”と思わず惹き込まれるような、丁寧な実装を心がけました。