農業・林業・造園のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

兵庫県三木市の米農家集落での滞在を案内しています。農の営みや滞在の説明、アクセス、FAQ、外部予約サイトCHILLNNへの入口に加え、オンラインショップもあります。

自社で取り入れる場合：体験と宿泊、商品の購入を分けて案内します。季節やプランによる違い、交通手段、食事、予約・キャンセル条件を整理し、外部予約先の内容と合わせます。

公式案内から比較できる点

兵庫県姫路市の造園・外構工事会社です。庭・植栽と外構・エクステリアの施工実績、庭づくりの考え方、依頼の流れ、会社情報、問い合わせを案内しています。

自社で取り入れる場合：施工例ごとに敷地条件や依頼範囲を説明します。施工直後と成長後の植栽、季節による違い、施工後の管理を区別し、相談時に必要な図面や写真を案内します。

公式案内から比較できる点

湯前町森林組合と水上村森林組合の合併により生まれた、熊本県の森林組合です。森林の整備、伐採、集出荷、加工などの仕事と、各部門の職員インタビュー、採用、木材市況を案内しています。

自社で取り入れる場合：森林所有者の相談と求職者の応募を分け、窓口を明示します。職員の経験談と現在の募集条件を区別し、賃金などの目標を達成済みの実績として紹介しないようにします。

公式案内から比較できる点

本社は神奈川県横浜市港南区の鶏卵・加工品販売会社です。公式沿革では1979年に販売と生産を分社化し、生産は横浜ファームが担う形になったと説明しています。商品、グループ農場、環境への取り組み、採用、オンライン購入を案内しています。

自社で取り入れる場合：販売会社の本社とグループの生産拠点を区別します。商品の説明と注文方法をそろえ、食品の保存・調理・期限については商品ごとの表示や適切な根拠に基づいて案内します。

公式案内から比較できる点

福岡市に本社を置き、園芸、花、農業、農産物・食品、消費者向け商品、物流など複数領域を展開しています。事業・ブランド、グループ・拠点、採用、サステナビリティを案内する企業サイトです。

自社で取り入れる場合：資材だけの会社としてまとめず、事業領域と相談先を整理します。実証中の取り組み、導入済みのサービス、将来の目標を分け、法人と一般消費者が必要な情報へ進める構成にします。

公式サイトの画面で確かめられる点

ファーストビューは、収穫期の果樹園で祖父と孫が手をつなぐ写真を、角の丸い枠で大きく見せている。

上端に中央配置のロゴを置き、左にカート・地図・問い合わせのアイコン、右にメニューを置いている。

写真の下には、色の違うりんごの絵が横一列に並んでいる。

自社で取り入れる場合：作り手の顔が分かる写真を1枚決め、ロゴと最小限のアイコンメニューだけを重ねる。購入と問い合わせへの入口は最初の画面に残す。

公式サイトの画面で確かめられる点

ファーストビュー全面に、木箱の上のトマトを真上から撮った写真を置いている。

右端に縦書きのキャッチコピーと、トマトのキャラクターを配置している。

下部に、緑色の手描き風の文字でナビゲーションを並べている。

画面内にファンクラブ会員募集の吹き出しが出ている。

自社で取り入れる場合：主力の作物を1種類に絞った写真を全面に使い、ファンクラブや予約の告知は吹き出しで1か所にまとめる。

公式サイトの画面で確かめられる点

破れた紙のような縁取りの帯に、筆文字のロゴとメニューを置いている。

主役は、田植え機で作業する本人の写真である。

写真の右下に、野菜セットの価格と購入ボタン2種（全国発送・京都市内）を重ねている。

右端に黄色の「野菜を買う」ボタンを固定している。

自社で取り入れる場合：作業中の写真を主役にし、売る商品の価格と購入ボタンを最初の画面に重ねる。配送エリアが分かれる場合はボタンも分ける。

公式サイトの画面で確かめられる点

ファーストビューは、阿蘇の風景写真に手描きの山と気球の絵を重ねている。

縦書きのキャッチコピーを白抜きで空の部分に置いている。

下部に、帽子の人物の絵とロゴを中央に配置している。

メニューは最初の画面には出ていない。

自社で取り入れる場合：風景写真に手描きのイラストを重ね、地域の景色を見せる構成にする。メニューを見せない場合は、2画面目以降に導線を置く。

公式サイトの画面で確かめられる点

緑の帯にロゴ、メニュー、検索、カート、会員登録を並べている。

その下に、母牛と子牛が向き合う写真が全幅で入っている。

写真の右下に明朝体のキャッチコピー「乳製品の原点は、自然のまま」を重ねている。

写真の下に「山地酪農について」への細長いボタンがある。

自社で取り入れる場合：牛の写真を全幅で使い、考え方を伝える1行のコピーを重ねる。通販機能はヘッダーに集約し、理念ページへは別のボタンで案内する。

公式サイトの画面で確かめられる点

白地に、手描きのイラスト（稲穂・トラクター・カエル）を散らしている。

写真は、波打つ形に切り抜いたスライドで、農業体験の子どもの写真が中央に出ている。

右上に黄色の「購入はこちら」を大きく置き、メニューにも小さなイラストが付いている。

自社で取り入れる場合：写真の切り抜きとイラストの色数を1色（黄）に絞り、購入ボタンだけを大きく目立たせる。体験や研究の記事はスライドで並べる。

公式サイトの画面で確かめられる点

ファーストビューは、縁側でみかんを食べる3人の写真を、輪郭が波打つ形で見せている。

右に縦書きのキャッチコピーがあり、「うまいもの」と「毎日」を橙色にしている。

ヘッダーに橙色のタグ状のメニュー4つとメールのアイコンがある。

左下と右下に、みかんを載せた緑色の手描きの丘が入っている。

自社で取り入れる場合：生産者家族が食べている写真を使い、色は橙と緑の2色に絞る。メニューは事業紹介・会社概要・お知らせ・ショップの4つに限る。

公式サイトの画面で確かめられる点

ファーストビューは、紺色の背景に、重なる円弧のような形が入っている。

中央にぶどうと鳩のロゴ、園名、「since 2023」を白で置いている。

メニューは右端の縦書き（葡萄園紹介・品種紹介・直売所・お問い合わせ）である。

写真は最初の画面には出ない。

自社で取り入れる場合：ロゴと色（紺）だけで最初の画面を作る手もある。その場合は、品種と直売所の案内を縦書きのメニューに置き、写真は2画面目から見せる。