-sample site-
はんしん農園
コーポレートサイト
Webデザイン/コーディング/レスポンシブ
一目見て「美味しそう」「親しみが湧く」と思ってもらえるサイトを目指しました。仕様書をもとに理念がしっかり伝わるサイトを意識して作成しています。
野菜のおいしさと、安心を伝える。
| 概要 | はんしん農園 コーポレートサイト制作(架空サイト) |
|---|---|
| 制作期間 |
リサーチ・分析：4時間 デザイン ：8時間 コーディング ：21時間 |
| 担当範囲 | Webデザイン/コーディング/レスポンシブ |
| 使用ツール | Photoshop/illustrator/Xd/VScode |
| URL | http://takushima.starfree.jp/oyasai/index.html |
PROCESS
01 目的・ゴール
目的
注文を受注するために、理念やブランドイメージを訴求するサイトの作成。
ゴール
理念の浸透、認知度向上、注文件数の増加、新規顧客獲得
02
ターゲット・ペルソナ
ターゲット
無農薬野菜に関心のある家庭。
ペルソナ
職業 :
35歳女性/専業主婦/27歳で結婚
家族構成:
旦那は38歳/SE職/年収580万円/48万円×12ケ月
子供は2人/長女5歳/次女1歳
趣味 :
アイシングクッキー/専用Instagramアカウントあり/たまにフリマに出展/ママ友からオーダーで作成することも
悩み :
旦那がオーガニックにうるさい。初めは鬱陶しかったが子供が生まれてから無農薬を意識するように。子供の野菜嫌いが悩み/絵本やおもちゃなどで野菜に興味を持ってもらおうとしている。
DESIGN
01 配色
見るだけで明るい気持ちになるビタミンカラー
メインカラー：
見るだけで明るい気持ちになるビタミンカラーを使用。目に優しく少しトーンを抑えています。
アクセントカラー：
赤は視覚的に訴える力が一番強い色のため、特に注目させたいボタンに使用しました。
ベースカラー：
柔らかいベージュは絹綿を想起させる色です。赤ちゃんの衣類にも使われるため安心感を演出しました。
02 フォント
メインにはまるで絵本を読んでいるかのような気持ちになる「RocknRoll One」を使用。跳ねた文字が楽しさを演出し、親しみやすさを感じさせます。
細かいテキスト部分には柔らかく可愛らしさを感じる日本語フォント「Kiwi Maru」を使用し、可読性を高めました。
RocknRoll One
Kiwi Maru
03 ロゴ
「100年先もつづく農業をめざして」というはんしん農園の想いを汲み取り、お野菜で数字の「100」を表現しました。ロゴのフォントは「Stick」を使用し、幼い子供が一生懸命に書いた文字を演出。子供から大人まで愛されるデザインを目指しました。
SUMMARY
振り返り / 今後の展開
ハンバーガーメニューを初めて実装したサイトになります。ハンバーガーを開いた際に背景の明度を落としたり、開いても楽しくなる仕掛けを入れました。自身の得意とするデザインが、線が細く繊細な印象を与えるものが多いので、強い色味とポップさを強く打ち出すデザインを意識しました。
デザインから実装までのスケジュール管理をしっかりと行い、当初の目標が1ヶ月でしたが約半月で完成させることができました。今回レスポンシブはスマホのみとなっているので、今後はタブレットもレスポンシブし、さらに正確で素早いコーディングに結びつけたいと思います。