スグ食べ

デジタルハリウッドWEBデザイナー専攻の中間課題です。有機野菜の宅配サービスで、初回お試しセットを購入してもらうことを目的としています。デザインとコーディングを担当しました。Youtuberが紹介している商品をなぜか買ってしまう要因が、「自分が使っているところを想像できるから」と仮定して、料理のレシピを追加しています。今回はレシピのみにしましたが、Youtubeショート動画でスグ食べの野菜を使った料理動画を投稿して、それらをLPに載せる方法も効果的ではと考えています。

デザイン : 2週間
コーディング : 2週間

制作ツールとライブラリ

jquery

サイトを見る

概要

既存のスグ食べWEBサイトは存在するが、新たにリスティング広告を出すことになったため、より訴求力の高いLPが必要になった。そこで、食への関心が高い人をターゲットとして、無農薬の有機野菜のお試しセット購入へ導きたい。

課題や要望

‐新鮮なヘルシーな野菜を取り扱うため、安心感と信頼感のイメージを強めたい
‐ナチュラルで明るく清潔感が欲しい
‐お試しセットの購入が目的

ターゲット

‐成長期の子どもや働き盛りの夫がいる母親
‐食に対してお金をかけることができる家庭
‐ていねいな暮らしなど食にこだわる自分が好きな人

アイデア・戦略

オーガニックなイメージをサイト全体で表現

有機野菜を取り扱い、新鮮さや清潔感をイメージしやすいとして、落ち着いたナチュラルな印象を持つアースカラーに絞り配色を考えました。そのなかでも、豊かな自然や安らぎのイメージがあるオリーブ色やカーキ色を採用しました。また、フォントは清潔感を伝えやすい「しっぽり明朝」を採用していますが、印象が固くなりすぎないように要所で筆記体を活用しています。

ユーザーに伝えたい情報の優先順位

‐無農薬の有機野菜であること
‐身体によい野菜を作っている農家を選んでいること
‐産地直送で新鮮
‐旬のものが味わえる

料理しているイメージが湧きやすいコンテンツ

購入の意思決定を促す要素として、自分がその製品を使用しているイメージが具体的に想像できることがあげられます。野菜の場合は、主な使用用途としては料理になります。自分が料理した食材が食卓に並び家族が喜んでいるところをイメージしやすくなるコンテンツがあると購買意欲を促しやすいのではと考えました。そこで、お試しセットの野菜を使用したレシピ集を取り入れました。

デザインの実装

キーワードは「ていねいな暮らし」

毎日の何気ない瞬間を、「今」に集中して過ごす。特別ではないことを、特別を感じられるというイメージから、ありきたりの暮らしが感じられる写真をチョイスして、ファーストビューをデザインしました。自然で安心感と高級感のある印象を伝えたいため、カーキ色とオリーブ色、明朝体を採用しました。

訴求したいメッセージが目に飛び込んでくるように

「本当の意味での産地直送」「安心安全のオーガニック農作物」「たくさんの旬な野菜との出会い」などユーザーに伝えたいメッセージは、文字に装飾を加えて注目しやすくし、視線誘導されやすいようにデザインしました。

安心感を与えるために丹精込めて農家さんが野菜を作っていることを伝える

2000年代に輸入品の食品管理が問題となって、日本人の食べ物への衛生管理や農薬物に対しての意識が大きく変えられた経緯があります。そのため、食べ物については信頼できるか？安全か？と厳しい目で見られる傾向があり、農作物に対して「有機野菜」「無農薬」「国産」「農家の顔が見える」などの言葉や表現を使うことは、購買者に安心感を与える要素になります。今回の制作では、農家さんのメッセージを添えることで、ユーザーが安心して購入する後押しする効果をねらいました。また、メッセージ部分に筆記体を使うことで、温かみのある印象を与えることができたと考えています。

サービスを利用しているイメージを持たせる

商品のレビュー動画を見て、自分が使っているとこを想像するとついつい買ってしまった。という現象があります。これは、商品やサービスを「自分に関連づけて考える」ことで、より強い関心を持つようになる。自己関連付け効果や今スグ「使ってみたい」「試したい」と目の前の欲求を満たすことを優先する即時報酬バイアスなどが関連していると言われます。
そこで、農作物の場合は料理しているとこ、または作った料理で家族が喜んでいるところをユーザーに想起させることで購買意欲を高められると考え、レシピのセクションを設けました。また、PCサイズでは格子状に表示して画面サイズの小さいSP版ではスライダー表示することで、スクロール量を減らしクリックして欲しい購入ボタンに至る前にサイトから離脱してしまうことを防ぐ狙いがあります。

サイトを見る

学び

今回は、特に視線誘導を意識しながら、サイトを初めて見る人がどのような順番で情報を得て、どのような印象を受けるのかを考えながらデザインしました。その中で、視線を留めるには周囲との差が重要なことが実感できました。見せたい部分だけ周囲と異なる色相を使う、明るさに違いを持たせる、鮮やかさを変える、情報の密度を変えるなど、動かすなど所謂「メリハリ」「コントラスト」を効果的に活用することでユーザーの視線をコントロールして情報伝達をスムーズにできるのだと学べました。

参考記事

【jQuery】シンプルなモーダルウィンドウの実装方法

【jQuery】FAQで使うシンプルなアコーディオンサンプルコード

【slick】スライドの総数と現在のスライドが何番目か表示させる方法

「丁寧な暮らし」ってどんな暮らし？憧れの「時間と手間をかける生き方」を実践する方法をご紹介