よしだかなこ

メニューを開く

すぐ食べのLPのモックアップ画像

すぐ食べ

Webデザインスクールの課題として、架空のオーガニック野菜宅配サービス「すぐ食べ」の新規ランディングページ(LP)を制作しました。

  • 現状の課題

    情報量が多く、ユーザーが必要な情報を見つけにくい。また、競合サービスが多く差別化が難しい。
    初めて知るユーザーにとって、購入への安心感が不足している。

  • 制作目的

    リスティング広告の掲載開始に伴い、初めてサービスを知ったユーザーをお試し購入へ導くこと。

  • ターゲット

    成長期の子どもと働き盛りの夫をもつ主婦。
    食材や暮らしの質にこだわりがあり、多少コストをかけても安全・信頼できる商品を選びたいと考えている。

サイトを見る

ID:portfolio
パスワード:0002

すぐ食べのLPのモックアップ画像

心情の流れに寄り添ったストーリー展開で
ユーザーの背中をそっと押すLPに

工夫した点

Design process

  • 情報設計

    • LP冒頭に「共感パート」を設置し、ターゲットが抱えやすい悩みに寄り添うことで「これは自分のためのサービスかも」と引き込む導線を構築しました。
    • サービスの魅力を伝える中盤では、利用後の理想的な暮らしのビジョン(例:笑顔の家族、彩り豊かな食卓)を写真と共に描写しました。
    • 最後のセクションは「品質保証→CTAボタン」の順で構成し、迷っているユーザーの背中を押す流れに。
  • ビジュアル面での工夫

    • 光が差し込むような明るく清潔感のある写真を選び、Photoshopでトーンを調整し統一感を持たせました。
    • 色数を絞り、ロゴやFV画像から拾ったカラーで全体のナチュラルさと統一感を演出しました。
    • スクロールボタンやドロワーメニューのアニメーション速度は、ややゆっくりに設定し、ゆとりある世界観を意識しました。
    • 余白を広めにとり、落ち着きと信頼感のある雰囲気に。
  • CTAボタン

    • 高さのあるデザインでタップしやすさを意識しました。
    • また、ページ内に複数箇所設置し、ユーザーの離脱防止とコンバージョン率向上を図っています。
  • 使用ツール

    Photoshop / Illustrator / Figma / HTML / CSS / JavaScript

  • 制作期間

    2025年4月(約1ヶ月)
    企画・ワイヤーフレーム約1週間
    デザイン約2週間
    コーディング約1週間
  • 学び・振り返り

    • フリー素材からコンセプトに合う写真を選び、トーン調整によって世界観を統一する作業に苦戦。
      Photoshopによる補正作業の大切さを実感しました。
    • LPでは構成やフォント・あしらいひとつで、ページ全体の「温度感」が大きく変わることを学びました。
    • 「目的を達成するためのデザイン」であることを常に意識し、ユーザーの気持ちに寄り添った設計をすることの大切さを学びました。
サイトを見る

ID:portfolio
パスワード:0002