手がけたもの
My Work
デザインスクール授業課題 LPサイト(すぐ食べ LP)
自主制作 | LPサイト(授業課題)
デザイン/コーディングサイトURL
サイトはこちら
全体概要
Overview
-
概要
デザインスクールでの授業課題として、制作しました。仮想クライアントとしてクライアントのヒアリング内容を下に要件定義し制作したLPサイトになります。
-
制作期間
3週間程
-
制作担当
デザイン/コーディング
情報設計
Information Architecture
-
問題と課題
既存のサイトは存在するが、リスティング広告を出すことなったため、現状のサイトはブランディングページがない。訴求力の高いランディングページが必要。
-
目的
食へのこだわりが強い層に響くような内容にして、なにはともあれお試し購入へ導きたい。
-
ターゲット
・まだ成長期の子どもがいるママ。
・働き盛りの夫にも、まだまだ元気でいてほしいと思っている妻。
・そこそこ食にお金をかけられる(普通のスーパーの1.5~2倍程度)。
・食にこだわる自分が好き。「ていねいな暮らし」が好き。
-
コンセプト
①サイトコンセプト及びデザインコンセプト
新鮮さ・信頼感・安心感・健やかさ・ヘルシーをキーワードとしてコンセプト。
※条件の指定あり -
クライアントの想いや感情
・無農薬・有機野菜・オーガニック野菜をアピールしたい。
・身体にいいものを販売していることをブランディングしたい。
(いいものを作っている農家をセレクトしている)
・産地直送(だから新鮮でおいしい)をアピールしたい。
・旬のものが味わえる。 -
ディレクション
・ナチュラルで明るく、清潔感がある感じ。
・LPなので、ある程度リッチなデザイン(ディティールに凝ったもの)にしたいが、ギラギラした昔ながらのLPにはしてほしくない。
・お試しセットのボタンが目立つようにしてほしい。
・ターゲットユーザーはスマホもよくみるので、スマホでも使いやすくしたい。
・現在あるロゴを使用してほしい。
企画書
Proposal
デザインスクールでの授業課題のため、企画書は作成していません。
制作工程
Creation Steps
デザイン設計
Design
-
カラー
・メインカラー:#FFFCE8
・ベースカラー:#141414
・アクセントカラー:#30764E
※その他複数カラー使用 -
レイアウト
レイアウト構成として、「メインビジュアル」「スグ食べが選ばれる3つの理由」「お試しセットへの誘導」「よくある質問」は構成要素として必要でした。そのため、どのようにしたらユーザに、クライアント要望をイメージ及び認識してもらえるか。それらを考えて、構成しました。
-
トンマナ
・30代の女性、夫婦ともに働いている
健康的な生活を送っており、食にこだわりを持っている
食にお金を掛けることができる
・30代前半の女性
4人家族の子供が2人いて、育ち盛りの子供のために
健康を目的として野菜を高くても購入したい
プログラム設計
Program
-
機能
・購入ボタンや商品のアクセント等の機能を実装
-
設計構築
要件定義を行い、そこからデザインツールでデザインを作成。
デザインカンプをもとにHTMl及びCSSでコーティング。
レビュー
Reviews
-
反省と改善
本制作での反省点は、デザインの「言語化」ができなかった部分になります。クライアントの要望を言語化させて、それをデザインに起こすことにとても時間が掛かりました。また、LPを実際に制作するにあたり、そもそもあまりLPの特徴や詳細を認識しないまま制作に移ったので、とても完成にとても時間が掛かりました。今回の改善点として、「デザイン化↔言語化」をできるようにする。また、「事前の情報収集をしっかりしておく」ことだと考えました。
-
結果と振り返り
特定の条件や要望があり、それを言語化させてデザインに起こすことがとても難しいと痛感しました。実際に要望をデザイン化させた時に、なぜこのデザインなのか説明できなければ、ただの自己満足のサイトになるということが理解できました。
デザインカンプ
Design Comp
-
SC版デザイン
-
PC版デザイン
最後までお読みいただき、
誠にありがとうございました。
ご感想やご依頼・ご相談などございましたら、お気軽に下記のフォームよりご連絡いただければ幸いです。
少しでもご興味を持っていただけましたら、
ぜひお気軽にお問い合わせください。
ご連絡はこちら