ＬＰ制作「糀甘酒」

サンプルURL（https://ag237-10.deau-ag.com/hakkoya/）

■ 制作主旨

高効能・高品質を特長とする「糀甘酒」の魅力を伝えるLPを制作しました。
健康を意識する30～70代女性に向け、やさしく親しみやすい印象を重視しています。【訓練校課題】

■ ターゲット・ペルソナ

架空の発酵食品メーカー「HAKKOYA様」をクライアントと想定。
ネット販売促進を目的とし、健康志向の30～70代女性をターゲットとしています。

■ 制作フロー

① 目的・ターゲット整理

• クライアント想定：発酵食品メーカー「HAKKOYA様」
• 目的：ネット販売促進
• ターゲット：健康を意識した30〜70代女性

② 構成検討（情報整理）

• 商品特長（高効能・高品質）
• 甘酒の効能・魅力
• アレンジの楽しさ
• 安心感・信頼感を与える情報配置

③ デザイン制作

• 余白を活かしたレイアウト
• 落ち着いた配色で高品質感を演出
• スマートフォン閲覧を前提としたデザイン設計

④ コーディング

• HTML／CSSでレスポンシブ対応
• 画面幅に応じたレイアウト調整
• CSSは役割ごとに整理し、コメントを付与

⑤ JavaScript実装

• ハンバーガーメニューの開閉制御
• メニュー選択時・背景クリック時に自動で閉じる仕様
• 処理を関数化し、可読性を意識

⑥ 検証・調整

• Chrome検証ツールで表示確認
• 文字サイズ・配色・余白の微調整
• 今後の改善点を整理

※デザイン・実装ともに「見た目」と「使いやすさ」の両立を意識して制作しています。

■ 工夫点・反省点

余白を活かしたレイアウトと落ち着いた配色により、高品質感を演出しました。
スマートフォン閲覧を前提としたレスポンシブ対応を行い、画面幅に応じてナビゲーション表示を切り替えています。
スマートフォンサイズではJavaScriptで制御するハンバーガーメニューを実装し、操作性に配慮しました。
CSS・JavaScriptは可読性を意識して整理・関数化しています。
今後は配色や文字サイズの統一感をさらに高めていきたいと考えています。

■ 作品概要

使用ソフト：TetraPad（HTML・CSS・JavaScript）、Chrome検証ツール、ChatGPT、Copilot
制作時間：33.5時間（授業5時間＋自宅28.5時間／約7日間）
※素材準備・ワイヤーフレーム・デザインカンプ制作時間は含まず