この記事について

今回ご紹介するのは、横浜市で浜なしや浜ぶどうの栽培をご家族と行っていらっしゃいます、中村園様のECサイトとロゴ制作です。中村園様は代々受け継いだ土地で、お客様に新鮮でおいしい果実を届けています。中村園様が販売する浜なしや浜ぶどうは、横浜で人気のブランドとして広く親しまれております。昔から購入いただいているお客さま、遠方からお買い求めに来られるお客様まで多くの方が購入をしにいらっしゃいます。

今回、中村園様の浜なし・浜ぶどうの魅力や販売状況を、従来のお客様から遠方のお客様にまで、より多くの方に届けられるようにしたいというご要望をいただきました。また、直売所以外にも、お電話・FAX・メールなど複数の窓口から注文を受けており、管理が煩雑になりやすいことから、「注文窓口を一つにまとめたい」というご希望もありました。そこで、ECサイトの制作を行い注文窓口を一つにまとめることと、この機会にロゴも新しく制作しました。

 直売所や注文窓口の情報が分かりやすくまとまるよう工夫し、果物の魅力や中村園様らしい親しみやすい雰囲気が伝わるデザインを意識しています。

 

ご相談のきっかけと、訪問でのヒアリング

 神奈川県内のデザイン事務所の中で探していただき、カズミアの柔らかいデザインの雰囲気を気に入ってくださり、ご連絡をいただいたのがきっかけです。

まず打ち合わせのため、デザイナーとディレクターの二人で現地に訪問。実際に育てている浜なし・浜ぶどうを見せていただきました。

中村園様の直売所を最初に見学させていただき、どのように販売されているかを拝見しました。従来のお客様だけでなく、県外からもお客様が訪れるほどなのだとか。その様子から、中村園様の浜なし・浜ぶどうのおいしさを実感いたしました。

実際に果樹園を案内していただき、栽培の様子も拝見しました。
中村園様は、他の農園の方よりも多くの種類の浜なし・浜ぶどうを育てております。それは、長い期間にわたってさまざまな品種を販売することで、食べ比べて楽しんでほしい、多くの人に浜なしや浜ぶどうを味わってほしいという思いがあります。
中村園様は今後も新しい種類の果実を育てたいとおっしゃっており、栽培に対する熱意をひしひしと感じました。

中村園様の果樹園はお祖父様の代から受け継がれていますが、栽培技法には新しいものも積極的に取り入れています。
従来の平棚栽培からジョイント栽培に切り替えることで、1列に果実が実り、収穫がしやすくなったとのことです。
こうした新しい技術や知識は、同業者の方々が参加する講習会や勉強会に参加することで取り入れているそうです。他の農園の方と情報を交換しながら、常に学び、少しずつ工夫を重ねる姿がとても印象に残りました。
中村園さんのこうした姿勢が、おいしい果物を作り、多くの人に愛される理由なんだと感じました。

果樹園を見学させていただいた後、中村園様の事務所で打ち合わせをしました。お話をお伺いし、印象に残ったことは、新しい技術を取り入れること、常に学び続ける姿勢を一貫して持っていらっしゃること。代々受け継がれているものを受け継いでいくだけではなく、ブラッシュアップしていく。

中村園様の浜なし・浜ぶどうへの想いや、お客様への気持ちを、サイトやロゴマークに込めて、これまでのお客様や県外から来てくださるお客様にも伝えられたらいいなと思い、制作を始めました。

なんと最後に、浜なしをお土産にいただきました！とても甘くて、本当においしかったです！中村園様のお話を聞いたあとに食べた浜なしは、さらに特別に感じました。

 

情報整理と方向性

打ち合わせでいただいたご意見をもとに、改めて目的を整理し、目指す方向を検討しました。

浜なしや浜ぶどうを栽培、販売していることが一目で伝わるように意識。また、中村園様が大切にされている「地域や人とのつながり」「浜なし・浜ぶどうへの想い」。直売所の営業時間や販売状況など、届けたい情報をサイトを通してお客様にわかりやすく伝えられるサイトを目指しました。

今回のホームページ制作は、テーマデザインを使用したサイト制作となっております。テーマデザインプランとは、ターゲットを想定した「デザインフォーマット」の中から選んでもらうプランです。お選びいただいたデザインは、そのまま使用するのではなく、お客様の「らしさ」を出すために必ずアレンジを加えています。そのため、「デザインフォーマット」と言っても、オリジナルのようなサイトを作ることができるのが特徴です。

今回中村園様は、「水彩」をお選びになりました。丸みのあるデザインが、イメージに合っているという理由からです。他にも、「モノクロ」の、わかりやすくてシンプルな感じも良いとのご意見をいただき、わかりやすさも大切にしたいと考えました。

親しみや丸みのある雰囲気を持たせながらも、シンプルで見やすく、しっかり情報が伝わるデザインを目指しました。

 

制作の流れ

ロゴデザインとコンセプト

デザインの方向性が固まり、サイトを制作する前に、中村園様のブランディングの象徴となるロゴマーク（お店を象徴する図形やシンボル）から制作を進行いたしました。ロゴマークが、今後のデザインのテーマでもあり、象徴するものであると考えたためです。初回のご提案では、イメージをすり合わせるために6つの案をご提示しています。

• A案 「老舗のような信頼感」と「親しみやすさ」を両立するロゴマーク。
• B案 「なんか気になる」を大事にした印象にのこるロゴマーク。
• C案   記号的な形状で、目に留まりやすく、広報物にも展開しやすいロゴマーク。
• D案 「わかりやすさ」と「親しみ」を重視した ロゴマーク。
• E案 「未来」と「親しみ」を感じられるロゴマーク。
• F案 「浜なし×浜ぶどう」の「新鮮さ」を感じられる爽やかなロゴマーク。

6案をご提示し、さまざまなご意見をいただきました。その中で方向性が少しばらけてしまったため、改めて既存のロゴを参考にお送りさせていただき、方向性の整理をしました。また、前回のロゴマーク作成時に出たほかのアイデアもあわせてお送りしました。

参考資料をもとに、中村園様とすり合わせをし、進める方向をはっきりさせました。そして、その方向に合ったアイデアを3つご提案しました。

• A案 「未来」と「懐かしさ」を感じられるロゴマーク。
• B案 「わかりやすさ」と「親しみ」を重視したロゴマーク。
• C案   つながりを象徴する、
人のあたたかさを感じられるロゴマーク

3案をご提示し、フィードバックをいただきました。いただいたご意見をもとに、ブラッシュアップをした案と新しい案をお送りしました。

• A案 「未来」と「懐かしさ」を感じられるロゴマーク。
• B案   土から果実、そして未来への想いを込めたロゴマーク

こちらでご提示した2案のうちB案をお選びいただきました。ロゴマークが決定した段階で、ロゴタイプ（会社やお店の名前を、オリジナルの形やバランスでデザインした文字）についてのフィードバックをいただきました。そこで句読点の有無や実際に使用した場合のイメージなども共有いたしました。

全体の方向性としては、「自然・伝統・未来をやさしくつなぐ」がテーマになります。ロゴが決まったことで、方向性がより明確になり、全体の雰囲気が確立してきたと感じました。

 

ワイヤーフレームとイラスト

お選びいただいたデザインテーマをもとに、中村園様との打ち合わせで必要だと感じた項目や情報を取り入れたワイヤーフレーム（ホームページの設計図）を3案ご提示。そのままテンプレートを使うのではなく、中村園様に合う形にリメイクすることで、オリジナリティを出しました。

• A案
  上部の写真を大きく使用し、果物をアピール。商品を上部に配置することで、目的の情報に素早くたどり着けます。
  
• B案
  上部の写真の形を特殊にして印象を残すデザイン。お知らせを上に配置することで、商品の販売状況や直売所の情報が見やすく、地域の方や購入者が購入前に必要な情報を受け取りやすい構成です。
• C案
  上部の写真は固定でやや小さめに配置。形が印象的で親しみやすさを感じます。お知らせは写真付きですが、やや落ち着いた印象で、華やかさとシンプルさを兼ね備えた構成です。

中村園様と方向性をすり合わせ、「何を誰に一番見てほしいか」などを確認しながら、C案の表現（カラムやイラストの配置など）をベースに、構成の順序やお知らせ部分はB案を組み合わせる形で構成を修正いたしました。

また、ワイヤーフレームを作成する際に、イラストの進行も同時に進めました。作成したタッチ案を3案ご提示しました。
また、A案のイラストはワイヤーフレームの中でも使用しています。実際にイラストを使用したものを見ると、イメージがつきやすいと思ったためです。
A案がデザインに合っているかを確認するのではなく、内容や要素、配置場所の確認としての意味で、使用しております。

• A案   鉛筆のような手描き風のタッチ
• B案   少しおしゃれな印象のシンプルなタッチ
• C案   ラフな線のペンのようなタッチ

イラストについては、ワイヤーフレームに配置していたA案がイメージにあっているとのことで、そのまま活用いたしました。
実際に使用されている機材や道具をイラストに使ってほしいとのことで、一部修正が入りました。実際の機材や道具をイラストに反映することで、より説得力が生まれ、正しい情報を相手に伝えることができると思います。

また、イラストの点数に限りがあったため、シンプルで活用しやすいモチーフを選び、何度も登場しても違和感のないように工夫しました。

 

デザインとアニメーション

ロゴが確定したこととテーマプランもお選びいただいていたことで、デザインの方向性が固まってきました。その方向性にあったデザインとして、まずファーストビュー（ページを開いたときに最初に見える画面部分）を４案ご提案させていただきました。

ご覧いただいた結果、A案がイメージに合っているとのことで、A案をお選びいただきました。また、中村園様とのやり取りの中でB案の色味を気に入っていらっしゃったため、A案をベースに色味やお写真の形を調整するなど、複数のバリエーションを作成しご提案をいたしました。

この中でA案をお選びいただきました。果実の形をイメージさせるモチーフで、一目で何のお店か分かるファーストビューを表現できたのではないかと思います。写真横のイラストもカタカタと動かすことで、親しみやすさだけでなく、風に揺れているような自然の豊かさも感じられる表現ができたのではないかと思います。

また、メニューの上にアイコンを付けることで、可愛らしくポップでありながら、分かりやすいデザインにすることができたかと思います。

 

使用した写真については、中村園様から素敵なお写真を沢山いただきその中から、実際の直売所や浜なし・浜ぶどうの農園の様子、果物を食べているシーンや果物と触れ合っている様子などを選びご提案いたしました。

理由としては、「自然・伝統・未来をやさしくつなぐ」というテーマのもと、人と果物がその土地を通してこれからもつながっていく様子や、これまで受け継がれてきた美味しさが、これからも紡がれ、さらに豊かになっていくようなイメージを持っていただきたいと考えたためです。

また、人が写っていることで、つながりや親しみがより感じられるのではないかと考え、中村園様にご相談をさせていただきました。その結果、左右の小さな葉っぱの写真部分であれば使用しても良いとのことで、そちらのみに人物が入る形にしました。スライドで表示することで、中村園様の空気感や雰囲気を、多くの人に伝えることができると考えました。

また、当初は、実際に使用している機械や道具なども写真で見せることで、取り組みについてより知っていただきたいという思いもありました。しかし、購入に来られる方にまずは浜なしや浜ぶどうの美味しさを知ってもらうことを優先し、ファーストビューなどでは使用しませんでした。その代わりにイラストで表現することで、堅くなりすぎず、必要な情報をきちんと届けられる構成にしました。

お知らせやブログの見出しにもイラストを活用し、中村園様らしい温かみを表現しました。また、ざらっとした質感を感じるラインの表現をサイト全体で使用し、自然な質感が伝わるように意識しました。

中村園様の想いの部分については、TOPでは簡潔にお伝えし、気になってボタンを押してもらえるよう、中村園様が特にこだわっている部分や、多くの品種を栽培されているという他とは違う特徴などをアピールする原稿をご用意いただきました。また、イラストを用いて周囲を少し賑やかに表現することで、注目してもらえるようにいたしました。実際に作業している様子のイラストも配置することで、内容の補足になるとともに、見る人に安心感を持ってもらえればと思いました。

ボタンのデザインにも、ざらっとした質感を感じられる表現を取り入れています。また、キャッチコピー下の装飾部分では、ご希望であった丸みのある表現を取り入れ、ロゴマークの形を活用することで、サイト全体に統一感が出るようにしました。

直売所については、TOPページ内で詳しい情報を確認できるようにしてほしいというご要望があったため、シンプルに必要な情報をまとめて掲載しました。マップと2カラムで表示することで、より具体的で分かりやすい構成にしています。

また、購入しに来る方と直売所のイラストを配置することで、実際に買い物に訪れる雰囲気が伝わるようにしました。人物はアニメーションで動くようにし、実際に歩いているような表現にしています。

見出し部分では「いらっしゃいませ」という吹き出しを取り入れました。お店の方の挨拶をイメージしています。下では情報をシンプルに伝えているため、親しみやすさやあたたかみも感じてもらえるように意識しました。

商品一覧部分については、写真とカテゴリー、概要を中心に、シンプルな構成で表現しています。必要な情報のみに絞り、すぐに購入へ進めるようにしました。

カテゴリーを選択すると一覧ページへ移動できるため、欲しい商品をすぐに探せるようになっています。

今回はカラーミーの「どこでもカラーミー」を活用した制作だったため、どこまでデザインを反映できるかは、実際に試してみないと分からない部分もありました。

そのため、コーダーさんと何度か話し合いを重ね、実際にカラーミー用のコードを作成しながら検討を進めました。当初は、1品種につき詳細ページを1ページで想定していましたが、グラムやサイズごとに価格が変わるため、切り替えでの対応は難しいと判断しました。そこで、同じ品種でもkgごとに商品を登録する形で解決いたしました。

また、写真の角の丸みなど、細かい部分にもこだわりました。右上で使用しているイラストは、浜なし・浜ぶどうそれぞれに合わせて切り替わるように調整しています。

フッター部分では、お問い合わせ関連の情報を大きく配置し、連絡しやすいようにしています。購入窓口を一つにまとめたいという目的もありますが、これまで長く購入してくださっているお客様にはご高齢の方も多く、ネットからの注文が難しい場合があるのも事実です。

そのため、ECサイトでの購入を基本としつつも、難しい場合にはすぐに連絡が取れるよう、お電話番号もフッターに大きく表示しています。

また、とても魅力的なお写真をご提供いただき、お問い合わせのうえ使用させていただいております。祖父様がドローンを趣味でされているとのことで、ご協力いただきました。素敵なお写真をありがとうございました！

 

実装

主に直売所の営業については、お知らせ記事を活用していくとのことで、WordPressのブロックエディタを用いてパーツをご用意しました。基本的に下層ページはWordPressで構築しています。

中村園様の世界観を維持できるよう、文字サイズやコンテンツ幅、余白のバランスなどを整理しました。H5の見出しでは、梨や葡萄、てんとう虫のアイコンを使用し、遊び心を取り入れています。

また、イラスト入りの記事パーツも作成しています。今後、直売所の営業情報だけでなく、ブログの運営もされるかもしれないとのことで、ご用意しております。

 

大切にしたこと

今回大切にしたことは、中村園様の思いをしっかり汲み取り、サイトに反映させることです。中村園様との打ち合わせや直接の訪問を通じて、本当に求めていらっしゃることは何かを丁寧に考えることを重視しました。

オンラインでのお打ち合わせでは、どうしても伝えきれないことがあると思います。実際に果樹園や直売所を訪問した際の空気感や、伺った内容、ふとした言葉などから、中村園様がどのように考えていらっしゃるかを大切にしながら制作を進めました。

 

悩んだこと

今回悩んだことの一つは、カラーミーの活用方法でした。私自身、カラーミーを使用するのは初めてだったため、まず仕組みを調べることから始めました。どこまでデザイン面を反映できるかなどは、コーダーさんにアドバイスをいただきながら進めていきました。

また、中村園様にカラーミーについてご説明する機会もあったため、説明できるだけの知識を身につける必要がありました。自分が分からないことは、中村園様も疑問に思う可能性があると考え、「どこでもカラーミー」を活用した商品登録については、きちんと調べてご説明できるよう準備しました。

 

中村園様からいただいた声

前から、直売所のお知らせや宅配のご案内を、もっと分かりやすくお客様にお伝えしたいと考えていました。ホームページ（ECサイト）の制作は初めてで不安もありましたが、農園の雰囲気が伝わる、親しみやすくオリジナル性のあるデザインにしたいと思っていました。
カズミア様のデザインは温かみがあり、親しみやすい雰囲気が農園の魅力に合っていると感じ、依頼しました。担当の小森様と片山様が農園へ見学と打ち合わせに来てくださり、実際にお話ししてみて、とても話しやすく、安心してお任せできました。

制作の過程では、まとまりきっていない思いも丁寧にくみ取ってくださり、分かりやすい形にまとめていただきました。農園の雰囲気を表現したオリジナルのイラストも制作していただき、やわらかく温かい世界観がより伝わる仕上がりになったと感じています。ホームページも、農園らしさと親しみやすさがしっかり伝わるものになりました。これからこのホームページを通して、直売や宅配のご案内を多くのお客様にお届けできることを楽しみにしています。

制作事例もご覧いただけますので、よければこちらもチェックしてみてください！

ホームページ制作事例はこちら
ロゴ制作事例はこちら

 

これからの制作に向けて

今回お打ち合わせを通して、直接伺いお話を聞くことの大切さを強く感じました。実際に中村園様のお仕事現場で手仕事の様子を拝見することで、オンライン上や資料だけでは気付けない魅力があるなと感じました。空気感や歴史が形としてイメージしやすくなったように思います。

直接の訪問や対面での打ち合わせが難しい場合もありますが、お客様の雰囲気や言葉だけでは伝わらない情報も、重要であると改めて感じました。

これまで以上に、打ち合わせでは丁寧に対応し、 お客様の空気感や言葉に表れない情報にも意識を向けながら、お悩みにしっかり向き合っていきたいと思います。

 

カズミアがお手伝いできること

カズミアでは、ホームページ制作だけでなく、その世界観を象徴するロゴ制作までお手伝いしています。

大切にしている想い、これからの展望、受け継いできた歴史など、お客様の込めたい思いを反映し、世界に一つだけのロゴマークを作成いたします。
ロゴやデザイン、イラスト、動きの演出まで、チームで一貫して制作することで、細かい部分までお客様らしさを感じられるホームページを作ることができます。

自分たちの歴史や想いを形にしたい方、自分たちらしい表現を探している方は、どうぞお気軽にお問い合わせください。