制作過程

1. 01.目的、依頼内容

   目的

   注文を受注するために、理念やブランドイメージを訴求するサイトを作ってほしい。

   依頼内容

   • ・ファーストビューにこだわってほしい
   • ・希望色はないが、お野菜が引き立つ色合いにしてほしい。
   • ・おいしいくて、安全な野菜をとどけたい、未来につなげたい、理念がしっかり伝わるサイトにしてほしい。
   • ・人の写真は3枚のうち、1枚は使ってほしい。そのほかの写真は、お任せする。

2. 02.ターゲット・ペルソナ設定

   特徴と強みを洗い出す

   ワイヤーフレームから農園の特徴を洗い出し、そこから売り出していく強みを決めました。まず、ワイヤーフレームから強みになりそうな言葉をピックアップし、まとめました。その中から環境と体にやさしい有機栽培で育てていることを最大の強みとして考えました。

   

   特徴と強みからペルソナを決める

   洗い出した強みから農園の所在地や依頼内容を考慮してデータを基にペルソナを設定しました。
   農園の所在地は住みやすく、ファミリー層に人気な街だったので「2人の子供を子育て中の35歳の女性」としました。それから、農園の強みから、オーガニック（有機物）が好きな人をターゲットにしたかった為、オーガニックに興味を持ったきっかけとしてコミュニティーセンターを職業として設定。
   仕事で交流する中で人に勧められ、子供の健康も考え、オーガニック食品を意識するようになった。このような人物を設定しました。実際にその人物が実在しているかのような「典型的なユーザー像」になるように意識しました。

   

3. 03.配色、フォント決め

   「お野菜が引き立つ色合いにしてほしい」という依頼内容だった為、トマトの赤色、茄子の紫、そして農園の緑をメインカラーに。
   アクセントカラーとして黄色、これらの配色はテトラード配色という配色技法を使い選定しました。
   本文などは親近感や楽しい印象を持たせるゴシック体に。欧文、和文のキャッチコピーは共に親しみやすく、可愛らしい印象のフォントを選択しました。
   全体的に自分の子供のことを意識させて農園のブランドイメージを訴求し、注文の受注を促進させるように工夫しました。

   Color

   

   Font

   Noto Sans JP

   

   Kaisei Decol

   

   Darumadrop One

   

4. 04.ファーストビュー

   文字を見せつつ、画像も大きく見せたかったので茄子の図形で画像をくり抜き、文字、図形共に印象的に魅せるように工夫しました。
   子供らしさも感じて欲しかった為、全体的にイラストを使用しました。
   ハンバーガーメニューにはフォントに合わせて線を太めに。
   独自性のあるハンバーガーメニュー、かつ誰からみてもメニューということがわかるように「MENU」という文字も入れました。

   

5. 05.メインコンテンツ

   レイアウトはタイトルと本文、写真と文字などで全体的にずらしたレイアウトで統一して、ポップな感じを表現しました。
   ファーストビューの雰囲気を継承していく為、可愛らしいイラストを選び適所に配置しました。
   文章の1文字目では文字を大きくし、少しトーンを落とした色を文字の背景に敷くことで流れを生み、文章を読んでもらえるようにしました。
   それぞれのセクションのイメージ画像は野菜の図形でくり抜き、商品の画像は、商品を見せたい為四角形の画像にしました。