【課題制作】化粧品 Webページ

■制作期間

3週間

■使用ツール

Figma

■スクール名

HerTech

目次

ー01. 要件
ー02. Webサイト
ー03. Webサイト制作過程
ー04. 制作ポイント
ー05. 制作を通して学んだ点・今後の課題

01. 要件

■クライアント設定

・化粧品を販売する株式会社美星堂

・2024年4月1日に新商品のリップクリームを販売する

■Webサイト制作目的

Instagram遷移先Webページとして詳しく商品について知ってもらい、販売に繋げる

■最終ゴール

・見込み客に商品について知ってもらい、購入に繋げることで販売数の増加を目指す

02. Webサイト

■ターゲット

・20代女性　会社員　ひとり暮らし

・職場でもプライベートでも使用できるナチュラルかつ華やかなリップクリームを探している

・通勤電車でSNSを見て情報収集をしている

■サイトのコンセプト

・女性の目を引くような華やかさと落ち着きを併せ持った雰囲気

・商品名にある「ナチュラルニュアンス」を意識し、メインカラーは自然なグレーに設定

・リップクリームの華やかさを感じられるピンクをアクセントカラーに設定

03. Webページ制作過程

①ターゲット設定

②ページコンテンツの内容決定

③使用する素材の収集

④Figmaを使用したワイヤーフレーム、デザインカンプ作成

04. 制作ポイント

■商品特徴を詳しくわかりやすく伝える構成

ユーザーはInstgram広告ですでに商品に興味を持っているため、このWebページではより詳しく商品の特徴が分かるような構成にしました。

■華やかかつ落ち着いたデザイン

・商品のキャッチコピーである「華やぎとうるおい、唇の贅沢な日常」を意識し、日常の落ち着いた雰囲気の中に少し華やかさをプラスしたデザインにしております。

■イメージしやすいデザイン

実際に女性が商品を使用している画像を採用することで、ユーザー自身が使用する際のイメージがわきやすいよう工夫しました。

05. 制作を通して学んだ点

■学んだ点

・Figmaを使用したWebページ制作の基礎

・クライアントの目的に応じたWebページ制作

・ユーザーに伝わりやすい配色

・余白の重要性

■今後の課題

・ページ制作に時間がかかったのでFigmaの操作に慣れること

・デザインの引き出しを増やす