-2025/11/29のアジェンダ-
1限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作の準備
2限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作のポイント
3限目
実技 ECサイトデザイン実習④
課題制作
4限目
実技 ECサイトデザイン実習④
課題制作
5限目
実技 ECサイトデザイン実習④
課題制作
本日のテーマ
早速作ってみましょう。
制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
制作物１：ワイヤーフレーム（医薬品、医薬部外品、化粧品の製造会社を行う公式企業サイト）
・使用ソフト：Photosho
・制作時間：30分
メモ：
・Photoshopデータ アートボードサイズ1260×2200pixel
長方形（Webサイズ）960×800pixel
①ユーザーの趣味・志向
ー健康な肌を目指している。
ー安全で誰もが簡単に使用できる商品を好む。
ースーパーやコンビニ、薬局で気軽に手に入る。
ーボタニカルスキンケア商品を探している。
②自社の強み
ー”肌悩みを抱えている方に寄り添う。心強い味方であり続ける。”理念を持つ会社。
ー肌悩み、トラブルを年齢問わず使うことができる。
ー長い歴史の中での実績と信頼をご提供する。
③LPの目的
ー”肌悩みを抱えている方に寄り添う。心強い味方であり続ける商品を紹介、販売する広告が目的。
ー製品名から探すか肌悩みから探すかとすることで初めての商品購入でも検索しやすさを大切にしている。
④必要なコンテンツ
・製品情報
・スキンケア情報
・会社情報
・ご紹介
・お客様相談室
ペルソナ例
性別：女性
年齢：40代
職業：水仕事をしている
家族構成：４人家族。夫と子供2人（8歳と10歳）
趣味：押し花作り
悩み：手荒れ、乾燥肌、手湿疹の症状が出ている。また家族も乾燥肌で悩んでいる。