Haruka Kawada

sugutabe(LP)

web site(スクール課題)
サムネイル

食にこだわる方に届ける

スクールの中間課題として作成。既にヒアリングシートがある状態で、ワイヤーフレームからの作成となります。食にこだわる方や主婦に、クライアントが大切にしていることを伝えつつもLPなのでコンバージョンまでの導線を明確に出来るように構成しました。
内容
スクールの中間課題。MVには新鮮でみずみずしい野菜を置くことで「すぐ食べ」の良さを初手視覚から伝えられるようにしました。
目的
食へのこだわりが強い層に響くような内容にして、お試し購入に導く。
ゴール地点
ユーザの商品購入
ターゲット
まだ成長期の子どもがいるママ。
働き盛りの夫にも、まだまだ元気でいてほしいと思っている妻。
そこそこ食にお金をかけられる(普通のスーパーの1.5~2倍程度)。
食にこだわる自分が好き。「ていねいな暮らし」が好き。
サイトコンセプト
新鮮さ・信頼感・安心感・健やかさ・ヘルシー
訴求したいこと
1. 無農薬・有機野菜・オーガニック野菜
2.「身体にいいものを販売している(いいものを作っている農家をセレクトしている)」 ブランディング
3. 産地直送(だから新鮮でおいしい)
4. 旬のものが味わえる
クライアントからの要望
ナチュラルで明るく、清潔感がある感じ。 LPなので、ある程度リッチなデザイン(ディティールに凝ったもの)にしたい。 でもギラギラした昔ながらのLPにはしてほしくない。 お試しセットのボタンが目立つようにしてほしい。 ターゲットユーザーはスマホもよくみるので、スマホでも使いやすくしたい。
制作期間
ワイヤーフレーム : 4日間
デザイン : 2週間
コーディング : 1週間
使用ツール
Photoshop / illustrator / DreamWeaver

情報設計

  • (01)

    訴求したい順に導線を組む

    訴求したい事項を念頭に置き、LPの流れに沿って情報設計をしました。商品の説明やメリットなど、ユーザーが欲しい情報は上部に置き、よくある質問や品質保証などについては下部の配置しております。

  • (02)

    購入ボタン配置

    商品購入が目的のため商品購入ボタンは間を開けて繰り返し配置し、スマートフォンの場合はボタンが追従してくるため気になればいつでも購入ボタンが押せる作りになっています。また、ボタン配置は押しやすさを考慮して右側に配置しました。

  • (03)

    関連するセクションはまとめる

    商品のこだわりである農家やオーガニック農家の説明、栽培方法の違いはバラバラに配置せずに纏めることで一つの流れを作っています。

デザイン

  • (01)

    「信頼感・安心感」

    この商品がユーザーに与える「信頼感・安心感」とは何かを考えた結果、「新鮮で無農薬で身体にいい野菜を販売している」ことと考え、写真を多く配置し、配置する写真も全てに野菜が入っている写真にしました。

  • (02)

    「ナチュラル、清潔感」

    「ナチュラルさ」=親しみやすさ、素朴さと捉え(架空クライアントのため、実在クライアントの場合はここの言葉の定義をもう少し深堀したいです。)白と薄いベージュをベースカラーにし、見出しのあしらいを手書きにしたり、各コンテンツを丸みを帯びた形にしました。

  • (03)

    購入ボタンに一工夫を

    アクセントカラーとして購入ボタンのみ赤を利用し、他要素と色で差別化をしています。また、ボタンに動きをつけることで目に留まるようにしました。

PCカンプ

SPカンプ

OTHER

  • サムネイル

    web site

    design / coding

  • サムネイル

    web site

    design / coding

  • サムネイル

    web site

    design

  • サムネイル

    web site

    design

  • サムネイル

    web site

    design

  • サムネイル

    banner

    design

  • サムネイル

    banner

    design

  • サムネイル

    banner

    design

  • サムネイル

    banner

    design

  • サムネイル

    illustration

    illustration

  • サムネイル

    other

    illustration / Design