Works webdesign
back
next
Port folio site by Ayu Kamioka
メンズシャンプーの仮想LP
担当部分
デザイン、コーディング
制作期間
1ヶ月半(デザイン3週間、コーディング2週間)
使用技術
Photoshop、HTML/CSS、jquery
要望
- 目的：商品の売り上げ向上のためLPを作成する
- キャッチコピー：「悩みに特化したメンズシャンプー」
- グローバルメニュー
- お悩みポイント
- 商品をアピールするポイント
- ターゲット：頭皮と髪の悩みが気になり出すことが多い30代男性
- メインカラー：商品に使われている色と、メンズ用とわかりやすくするために青を使用
- InstagramなどのSNSを載せてほしい
- ロゴを作成して欲しい
コンセプト
このLPを見たユーザーにネットから商品を購入してもらうことを目的として制作しています。商品の内容が細かく伝わるようなコンテンツの順番や、ユーザーの閲覧離脱を減らすため出来るだけトップページのみで内容が伝わるようデザイン作りを心がけました。
ペルソナ
すぎもと あきら
杉本 晃さん
性 別：
男性
年 齢：
31歳
職 業：
不動産営業職
勤続年数：
入社6年目
年 収：
517万円
趣 味：
漫画を読むことや
ジムに行くこと
家族構成：
独身
猫を飼っている。
現在は恋人がいる
一人暮らし
性 格：
明るく真面目で負けず嫌いなところがある性格。買い物はインターネットですることが多い。
情 報：
年齢や仕事場での身だしなみ、恋人がいるため清潔感も気にすることが増えてきたため自身の頭髪にあったシャンプーを探している。
デザインコンセプト詳細
30代男性をターゲットとしているため、ベースとして明度の低い青と無彩色を組み合わせて落ち着いた雰囲気になるよう作成しました。
家でもプロ級の仕上がりになるようなメンズ向けのヘアケア商品を開発している会社を想定したロゴ名にしているため、プロのような洗練されたイメージを感じさせるよう文字にグラデーションをかけて、光沢感のあるデザインに仕上げました。
メインビジュアルはPhotoshopで画像を組み合わせて作成しました。ユーザーにこの商品を覚えてもらうため大きく商品の画像を配置しています。画像同士を組み合わせた違和感を無くすため背景のぼかし、反射や影などにこだわって商品の魅力が引き立つよう工夫しました。
今後、通販サイトでランキング受賞するなどのユーザーが商品を買う際の強いアピールになる要素はトップページの右下にお知らせとして配置することを想定としています。
このLPでの目的であるネットでの購入を促すため、商品一覧のコンテンツは初めに配置し、どこから商品が購入できるかの誘導をわかりやすくしています。
ユーザーが商品を購入する際の重要な部分であるため、目立たせながら尚且つサイトの雰囲気に合うような吹き出しで作成しました。
タイトルなどメインの文字のフォントにはメンズ向けの商品であるため、男性的なイメージの強いゴシック体のフォントを使用しています。
無機質で固い印象が強かったため、画像を薄くぼかして、見る人が飽きないための工夫をしています。
大胆な斜めカットのあしらいや直線的な図形を使用することで、男性的でダイナミックな印象が出るよう制作しました。
この商品で洗髪した場合の頭皮のイメージ図を用いて、より商品のポイントの説得力が上がるようにしました。
特にユーザーに伝えたい商品のアピール部分に、文字と対比になる色の背景色を追加して文字を強調させる工夫をしています。
Q＆Aの部分は文章量の多さからの見にくさや、ページ移動の手間があるとユーザーの閲覧離脱が増えてしまうため、アコーディオンパネルで作成し、ユーザーが見たい情報のみを見れるようにしました。
最後まで閲覧した後でもすぐにトップページにもどれるようにボタンを作成しています。
コメント
商品に使用されているモノクロカラーと青色を使用することを想定としています。様々なデザインに取り組めるよう、他の作品にはなかった条件のターゲット層からサイトを作成しました。