| 概要 | 個人制作の仮想WEBサイト |
|---|---|
| 作品名 | リカレントスイーツ |
| ターゲット | 10代〜30代の女性 |
| 担当範囲 | 企画/デザイン/コーディング |
| 制作期間・制作完了日 | 企画…6時間/デザイン…16時間/コーディング…20時間・2026年3月28日 |
| 使用ツール | Figma/HTML/CSS/Vanilla JavaScript |
| 工夫・サイト設計 | このサイト制作では、「制作して終わりではなく、公開後の運用や集客まで考慮したサイト制作」を念頭に、デザイン面・コーディング面で以下の3点を特に意識して取り組みました。 1.コンセプトに基づいた世界観設計 ベージュとブラウンを基調とした配色で温かみと上品さを表現し、手書き風フォントと丸みのあるフォントを組み合わせることで、親しみやすさと手作りにこだわるスイーツ店というイメージを表現しました。2. 視覚的な楽しさと滞在時間の延長を意識したUI設計 キャッチコピーを縦書きで配置し視線を誘導し、スライダー形式のメニューやスクロールアニメーションを取り入れることで、直感的かつ楽しみながら閲覧できるようにしました。3. スマホ最適化と運用を見据えた実装 スマートフォンファーストで設計し、clamp()によるレスポンシブ対応を実装しました。Splideを用いて軽量なスライダーを構築し、OGP設定（summary_large_image）によりSNS流入とクリック率向上も意識しました。 |
| ソースコード | Git Hubへ飛びます |