【事例つき】農家・農園のホームページの作り方｜効率的な作成方法とスキマ時間に情報発信するコツ

自宅でベランダ菜園を始めました。栽培から収穫まで多くの時間と手間がかかる野菜づくりを体験して、スーパーや八百屋でかんたんに手に入れることができる野菜や果物のありがたみを感じました。
今回は農家・農園のホームページの作り方を解説します。ターゲット設定や目的の明確化など、遠回りと思われるような作業も最終的にはホームページの質に関係します。お申し込み前に下準備をしてからホームページ作成に取り掛かりましょう。

ホームページに訪れるのはどんな人？ターゲットを絞り込もう

やみくもに作り始めてもホームページ作りはうまくいきません。まずはあなたの農家・農園のホームページに訪れる人を思い浮かべてみましょう。ホームページを作り始めるまえにターゲットを明確にします。ご自身の農園のお客様はどのような方でしょうか。直売店や通販で購入された方の年齢層やライフスタイル、過去にお客様とどのような会話をしたのか、言われて印象的だったことなど、ご自身の経験からターゲットを洗い出しましょう。

（例）山形県山形市在住 、35歳、会社員、妻（パート）、未就学児の子ども1人、持ち家、趣味は洗車、健康意識が高い

絞り込んだターゲットの疑問点に答えられるようにホームページで情報を提供しましょう。ターゲットを明確にしてポイントを押さえて訴求することで、訪問者のニーズ・期待に応えられる質の高いホームページに成長します。

農家・農園のホームページを作る目的を明確にしよう

次に「なぜホームページが必要なのか？」あなたのホームページで解決できることを明確にしましょう。訪問者は知りたいことがあるからあなたのホームページに訪れます。訪問者の「知りたい」を解決するためにどのような情報を提供すべきかをターゲットの視点で絞り込むとよいでしょう。

ご自身の農園や農作物の価値を定義する単語を書き出しておくこともおすすめします。
「強み」「売り」をリスト化しておくことは、ホームページやネットショップでご自身の農園のブランド価値や理念を表現するときに役立ちます。ホームページで前面に押し出すべき言葉を洗い出しましょう。例として書き出しましたがリストに載っていない言葉が浮かんだら追加していきましょう。

※（参考）キネレット・イフラ著「UXライティングの教科書ユーザーの心をひきつけるマイクロコピーの書き方」11６の価値

洗い出した単語を元にサンプルホームページ「グーペ農園」のブランド価値を定義しました。

以上をふまえて農家・農園のホームページに必要な構成を考えました。

※各項目のリンクをクリックするとサンプルホームページが表示されます。
※ナビゲーション名はホームページ上のメニューの名称、機能名はグーペの管理画面の機能名称です。

ナビゲーション名	機能名	用途
最新情報	お知らせ	農園の様子など最新情報を発信
グーペ農園について	フリーページ	農園の特徴や理念を紹介する
商品紹介	メニュー	農作物や加工品を紹介する
スタッフ紹介	スタッフ紹介	農家・農園のスタッフを紹介する
直売・店頭販売	フリーページ	お店の様子や場所を案内
オンライン販売	カラーミーショップ	農作物や加工品を販売するオンラインショップ
求人	求人	農園スタッフの求人を募集する
アクセス	店舗情報	農園の場所や開園・閉園時間を案内する
お問い合わせ	お問い合わせ	お問い合わせを受け付ける
観光農園-予約（非表示）	イベント予約	観光農園の入場を事前予約制にする

農家・農園のホームページを作ってみよう

それでは農家・農園のホームページを作っていきます。

スライドショーやメニューページに掲載するための写真を揃えましょう。農作物や農園、スタッフの写真などを準備しておきます。ピントが合った明るい写真を用意しましょう。農園やスタッフの様子がありのままに伝わる写真が好ましいです。スライドショーの画像は縦横の比率を揃えたものを用意してください。

▼テンプレート別スライドショーの仕様について

ナビゲーションメニューを変更しよう

「農家・農園のホームページに必要な構成要素」に合わせてナビゲーションメニューの名称変更、追加、並べ替えをしました。上記で考えた構成表に合わせてメニュー名を変更します。

ナビゲーションメニューを変更する方法
1. 管理メニューの「各種設定：ナビゲーション」で【設定】をクリック
2. 表示名を変更して【保存】をクリック

▼ナビゲーションを設定する(新設定画面)

使っていない機能は非表示にすることでホームページのメニューがすっきりとして分かりやすくなります。ナビゲーションメニューは訪問者が迷わず情報にたどり着けるように情報を整理しましょう。【設定】の横にある▼にカーソルを合わせると「非表示の項目に移動」のリンクが表示されるのでクリックして非表示にします。

サンプルサイトでは観光農園の予約ページを公開設定を【ON】にして、ナビゲーションメニューからは非表示にしています。予約の案内や予約ページへのリンクは「直売・店頭販売」のページに記載しています。公開設定を活用することで、機能は生かした状態でホームページのナビゲーションメニューからは非表示にできるのでバランス良くメニューを配置できます。

公開設定は非表示の項目で【設定】をクリックして「公開する」ボタンをONに変更して【保存】をクリックします。

▼ナビゲーションメニュー 非表示にした項目へのアクセス

Before	After

フリーページを使って直売・店頭販売のページを作ろう

フリーページ機能を使って野菜や果物の直売・店頭販売のページを作成しました。店頭販売をしている場合は外観の写真や地図を掲載してお店の雰囲気を紹介しましょう。フリーページにGoogleマップを掲載する場合は編集モードをHTMLに変更して埋め込みコードを貼り付けます。

フリーページにGoogleマップを掲載する方法
1. Googleマップで検索をする
2. 埋め込みたい情報が表示されたら「共有」をクリック

3. 「地図を埋め込む」をクリック

4. 埋め込み用のHTMLが表示されるので「HTMLをコピー」をクリック

5.グーペ管理面のフリーページで編集モードを「HTML入力」に切り替える

6. HTML内の地図を表示したい箇所に「４」でコピーしたタグを貼り付けて「更新」ボタンをクリック

7. 編集モードを「リッチエディタ」にして「更新」することで、簡易入力エディタ（リッチエディタ）での編集が可能になります。

スタッフ紹介で生産者の顔や想いを発信しよう

スタッフ紹介で生産者の顔や農業の想いを発信するページを作成します。顔写真は横顔や農作業をしている姿でもかまいません。作り手の人となりを伝えて訪問者に親近感を持ってもらいましょう。サンプルホームページでは訪問者（ターゲット）に自分の考えを言及するための質問事項を用意しました。
農家になったきっかけや、農業をやっていてよかったこと、嬉しかったこと・大変なことなど、自分で自分にインタビューするつもりで回答していきましょう。質問に回答しつつさらに内容を深堀りすることで、考えが明瞭になり魅力溢れる紹介文を作ることができます。

完成した紹介文はインタビュー形式（対談形式）ではなく、ご自身の回答をもとに一人称形式で文章化するのもよいでしょう。一人称形式にまとめることでご自身の考えや思いが主観的でより説得力をもった表現なります。

ネットショップを開設して販路拡大しよう

ネット通販を検討している方にはグーペの姉妹サービス「カラーミーショップ」をおすすめします。カラーミーショップのフリープランは初期費用・月額費用が0円で、売上があったときのみ決済手数料が発生します。売上が無ければ費用は一切発生しないため、まずネットショップを開設してみたいという方が挑戦しやすいプランです。

▼フリープランとはなんですか

カラーミーショップには「どこでもカラーミー（カートJS）」という外部サービスにカートボタンを設置する機能があります。「どこでもカラーミー」を使うことでグーペのホームページにもカートボタンを設置することができます。

▼どこでもカラーミーを利用する

サンプルページではどこでもカラーミーを使わずに、ホームページからネットショップへ外部リンクを設定しています。

外部リンクの設定方法
1. 管理メニューの「ナビゲーション」から【項目を追加】にカーソルを合わせて【外部リンク】をクリック


2.「表示名」や「リンクURL」を登録。リンク先の表示は「新しいタブで開く」を選択して【保存】をクリック

▼外部リンクを設定する

SNSと連携してスキマ時間に情報発信

TwitterやFacebookで情報発信している方は、外部サービス連携を使って各SNSとホームページを連携しましょう。外部サービスと連携することで、お知らせやメニュー投稿時にSNSにも同時投稿ができます。ホームページでお知らせやメニューを投稿した時に、都度SNSで発信する手間が省けるため毎日の運用を軽減します。

ホームページとSNSを連携する方法
1. 管理メニューの「外部サービス連携」より連携したいSNSアイコンをクリック（サンプルホームページではTwitterと連携しています）

2.【Twitterに接続】をクリック


3. Twitterの認証画面に遷移するので【連携アプリを認証】をクリック


4. 連携が完了するとグーペの管理画面に遷移します

ホームページにツイートボタンやフォローボタンを設置する場合はボタンを【ON】にします。サンプルホームページでは投稿内容によって切り分けたいので「投稿時に選択する」としました。

5.同時投稿にチェックを入れると「お知らせ」や「メニュー」の公開と同時にSNSに発信します

ホームページで「お知らせ」や「メニュー」公開した後にSNSへ発信したい場合はチェックを外しておきます。
「お知らせ」や「メニュー」を投稿後にチェックを入れて【更新】ボタンをクリックするとSNSへ発信ができます。

6.同時投稿後に「確認する」をクリックすると実際の投稿を見ることができます

▼管理画面：外部サービス連携を設定する　※管理画面にログインが必要です

農家・農園のホームページ事例

「グーペ」をご利用の農家・農園のホームページを紹介します。

「わさびのマルキチ」さんのホームページを見る

静岡県伊豆市にあるわさび農家「わさびのマルキチ」さんのホームページ。
スライドショーのわさび田やマルキチのわさびの紹介ページ、ギャラリーで紹介されている画像を眺めていると鼻がツーンとするわさびの刺激を感じます。実際に商品を手に取ったり試食したりすることができる実店舗と違いホームページでは視覚情報がメインとなります。商品の魅力が十分伝わる明るく綺麗な写真を用意しましょう。

その他にもわさびのレシピの紹介やわさび栽培の仕事、わさびの豆知識を知れるページなど、マルキチさんのホームページでしか読めないコンテンツが豊富で訪問者が飽きない工夫をされています。

「鈴木農園」さんのホームページを見る

静岡県三島市のマンゴーを中心としたフルーツ農園「鈴木農園」さんのホームページ。
ロゴやスライドショーのイラスト、ファビコン、各ページに配置されたパーツ素材まで、各要素の色やテイストに統一感があり鈴木農園さんのブランド価値が十分に伝わる作りになっています。

メニューページを開くと「みずみずしいフルゥツ」の名のとおり、甘い香りが漂うかのような光沢のあるマンゴーの写真を掲載されています。栽培や収穫方法のこだわりについても写真と文章で紹介しており、時間をかけて丁寧に作られたフルーツであることを感じ取れます。

カラーミーショップを使ってネットショップも運営されています。ホームページと同じロゴ画像やパーツ素材を使用することでデザインの差を抑えられておりホームページからネットショップに遷移しても違和感がない作りになっています。

農家・農園のホームページをグーペスタッフが作ってみました

以上をもとにグーペスタッフが農家・農園のホームページを作ってみました。

テンプレートはシングルカラムの「slider」を利用しました。メニューが上部に表示されるシングルカラムのテンプレートはPCで見た時とスマートフォン・タブレットで見た時のデザインの差を抑えられるのが特徴です。ホームページのフォント（書体）は丸みがかった「Rounded M+ 1c」に変更をしています。フォントを変更するだけでホームページの印象もがらっと変わります。ホームページのターゲットに印象づけたいイメージを意識してフォントを変更しましょう。

フォント（書体）の方法
管理メニューの「各種設定＞デザイン」から【編集】ボタンをクリック

▼テンプレートのかんたん編集方法

「農家・農園のサンプルホームページ」を見る

まとめ

今回は農家・農園のホームページを作成する上で考え方や作成のコツをご案内しました。ターゲットや目的の策定、ブランド価値の明確化など作り始める前の下準備してからお申込することで15日間の無料期間をフル活用してホームページ作成に取りかかれます。本記事が多忙な農家のみなさまのホームページ作成・運用を効率化するヒントになれば幸いです。