01 WEB DESIGN FOR FOOD MAKERS

食品製造・飲料メーカー向けホームページ制作おいしさを、
選ばれる情報に。

食べてみたい人にも、
仕入れを考える人にも。

商品の魅力と、購入・取引に必要な情報を整理。
企業サイト・EC・採用・更新運用まで支援します。

今のサイトと、販売先・商品のことからお聞かせください。

包装済みの商品を確認する食品製造スタッフのイメージ

02 BUSINESS & WEBSITE

同じ商品でも、知りたいことは違います。

「食べたい」の先と、
「取り扱いたい」の先をつくる。

展示会で商品を知った仕入れ担当者。店頭で買った商品をもう一度探しているお客様。どちらも同じ企業サイトへ訪れますが、知りたい情報は異なります。商品の写真と会社案内だけでは、購入場所や取引の始め方が伝わらないことがあります。

食品メーカーには、直販、卸を通じた販売、業務用商品など、さまざまな販売の形があります。農林水産省の資料でも、製造から流通・消費まで複数の経路が示されています。参考資料[2] ホームページも、実際の販売先と営業の進め方に合わせて設計することが大切です。

みやあじよは、誰に、どの商品を、どのように届けたいかから伺います。一般のお客様には味・食べ方・商品情報・購入先を。取引先には規格・供給条件・相談窓口を。入口を整理し、営業にも通販にも使えるサイトを考えます。

商品と用途を知る購入・取引の条件を確かめる購入先・相談窓口へ

03 WHAT TO COMMUNICATE

商品の魅力と、判断に必要な情報を。

味を伝える写真から、仕入れの規格、商品情報の更新まで。食品・飲料ならではの確認事項を、見せ方と制作内容に落とし込みます。

01 TASTE

食べたくなる理由を、選べる情報に。

閲覧する方の疑問どんな味で、いつ、どう食べるとよい商品だろう。

素材や製法への思いは、その商品を選ぶ理由になります。ただ、「こだわりのおいしさ」だけでは、初めての人は味を想像しにくいものです。甘さ、酸味、香り、食感など、商品の特徴を確かめ、食べる場面や合う料理と一緒に紹介します。飲料なら飲み方や食事との合わせ方も、選ぶ手がかりになります。

写真はパッケージだけでなく、中身、盛り付け、一食分の量が伝わるものを組み合わせます。開発・営業の方には、どんな人に選ばれているか、よく聞かれる味の違い、勧めている食べ方を取材。原料の産地や製法は資料で確認し、商品の特徴につながる範囲で原稿にします。

掲載する情報

味の特徴
甘さ・香り・食感・ほかの商品との違い
食べる場面
日々の食卓・贈り物・忙しい日の一品
使い方
調理・解凍の手順、盛り付け、合わせる食材

たとえばレトルトスープなら、袋の外観、器に盛った状態、具材の大きさを紹介。「温めるだけ」の説明に、確認済みの温め方と一袋の量を添えます。華やかな写真と、届く商品の内容が食い違わないようにします。

みやあじよがつくるもの商品ごとの取材項目、味を伝える原稿、撮影するカットの一覧、食べ方の紹介ページを制作します。

02 PRODUCT INFORMATION

原材料も、届く条件も、購入前に確かめられるように。

閲覧する方の疑問食べられる原材料か。いつ届き、どう保存すればよいのか。

購入前には、原材料・アレルゲン・内容量・保存方法などを、スマートフォンでも読める文字で確認できることが大切です。小さなラベル写真だけに情報を任せず、商品詳細に整理して掲載。消費者庁の情報提供ガイドブックも参考に、商品の種類と販売方法に合う項目を決めます。参考資料[1]

期限の説明では「製造日からの期間」と「出荷時に確保する残りの期間」を混同させません。常温・冷蔵・冷凍の配送、開封前後の保存、地域別の送料や発送日も、実際の運用を確認して案内します。情報が未確認のまま「安心」「長持ち」などの言葉で埋めず、商品資料と掲載内容を担当者に照合いただきます。

掲載する情報

商品の中身
原材料・アレルゲン・内容量・栄養成分等
期限と保存
期限情報の基準、開封前後の扱い、保存条件
届くまで
温度帯・送料・発送の目安・注文の締切

商品詳細に「商品情報」「お届け・保存」の欄を設け、買う前に確認できる位置に配置。詰め合わせは箱全体の紹介に加え、中に入る各商品の情報へ進めるようにします。

みやあじよがつくるもの商品ラベル・規格書をもとに掲載項目を設計し、情報の確認・差し替えまで見据えた商品ページをつくります。

03 WHOLESALE

仕入れの検討には、規格と供給の情報を。

閲覧する方の疑問自店の売り場や厨房で扱えるか。継続して仕入れられるか。

仕入れ担当者が知りたいのは、味だけではありません。一袋の容量、ケース入数、保管する温度帯、調理方法、取引や配送の単位が分かると、売り場・厨房・保管場所に合うかを検討できます。一般向けの購入画面に業務用の条件を詰め込まず、法人向けの商品一覧と詳細を用意します。

営業の方に、見積もり前に確認する条件、規格書の渡し方、サンプルの受付、取引開始までの手順を伺います。卸価格や供給量など公開しにくい情報は、無理に一覧へ載せず、相談時に確認する項目として案内。ケース単位と配送単位、常備品と受注生産品を分け、実際の取引に沿った説明にします。

掲載する情報

商品の規格
容量・入数・荷姿・商品コード・温度帯
使うための情報
調理手順・使用例・保存・規格書の提供方法
取引の条件
発注/配送単位・納期の確認・サンプル・取引開始

業務用スープなら「袋当たりの容量」と「ケース入数」を別の欄に置き、加温方法と提供例を添えます。相談ボタンでは商品名を分かるようにし、数量・納品先・希望時期をまとめて伝えられる構成を考えます。

みやあじよがつくるもの一般向けと業務用の分類、比較できる規格表、取引の案内、営業が回答しやすい相談項目を設計します。

04 MAKING & QUALITY

つくる過程を、取引の判断材料へ。

閲覧する方の疑問どのようにつくられ、どんな確認を経て出荷されるのか。

原料の受け入れから製造、包装、出荷まで、実際に説明できる工程を写真と短い文章で紹介します。設備名を並べるだけでなく、どの工程で何を確認するかを示すと、取引先が品質管理の説明を読み進めやすくなります。認証を掲載する際は、名称だけでなく対象工場や適用範囲も確認します。

OEM・PBなど他社ブランドの製造を受ける場合は、商品分野、配合開発や試作の対応、包装の種類、相談から製造までの流れを別に案内します。自社商品があることだけで受託製造も可能とは判断しません。受けられる数量や時期、原料・包材の手配は、実際の担当範囲に合わせて整理します。

掲載する情報

製造の紹介
受入れ・製造・包装・出荷の工程と役割
品質の確認
検査・記録・問い合わせ窓口、認証の対象範囲
受託する場合
対象食品・開発/試作・包装・数量等の相談条件

工程紹介は「写真 → している仕事 → 確認すること」を一組にします。OEMのページでは、自社商品と受託事例を分け、取引先名やレシピ、工場内の撮影範囲は掲載許可を確かめます。

みやあじよがつくるもの製造・品質担当者への取材、工程の図解、掲載できる写真の整理、受託製造の案内ページを制作します。

05 PEOPLE

食品をつくる仕事を、働く人の目線で。

応募する方の疑問どんな作業を担当し、入社後はどのように覚えるのか。

商品を知っていても、工場でどんな仕事をするかまで分かるとは限りません。製造、包装、品質管理、出荷など、募集する職種に分けて、一日の仕事と担当する工程を紹介します。作業中の服装や職場環境も、応募前に知っておきたい情報です。

現場の方には、最初に覚える作業、衛生に関する教育、教える担当者、忙しい時間帯を伺います。勤務地・勤務時間・交替勤務・繁忙期などは募集条件と照合し、よい面だけに偏らない説明に。求人媒体から来た人が、仕事内容を確かめて募集要項と応募へ進めるようにします。

掲載する情報

仕事内容
担当工程・一日の流れ・部署の連携
覚える過程
最初の作業・指導担当・衛生教育
働く条件
勤務地・時間帯・募集条件・選考の流れ

包装スタッフの紹介なら、始業準備、包装内容の確認、作業後の片付けなど、実際の一日を聞き取ります。「未経験歓迎」の一言に、最初に何を学ぶかを添えます。

みやあじよがつくるもの職種別の取材・原稿・写真構成、募集情報の更新欄、採用ページまたは採用サイトをご提案します。

06 UPDATE

商品が変わったら、案内もそろえて更新。

閲覧する方の疑問会社サイトと通販ページで、説明が違っていないだろうか。

原材料、内容量、パッケージ、販売期間が変わると、企業サイト、EC、商品カタログに同じ変更を反映する必要があります。ページごとに情報を持っていると、古い説明が残ることも。まず何をどこで管理し、誰が確認して公開するかを整理します。

商品コードや改訂日を手がかりに、新旧の商品情報と画像を照合する運用を考えます。終売・欠品・季節商品の扱いも先に決め、ページを消すだけでなく、再販案内や後継品への案内が必要かを確認。外部のECや商品管理システムとの連携は、接続方法と費用を調べてから範囲を決めます。

掲載する情報

更新する内容
原材料・規格・画像・販売期間・カタログ
確認する人
商品/品質担当の確認、公開担当の役割
変更後の案内
終売・欠品・後継品・規格書の改訂

原材料が変わるときは、確認済みの資料、商品画像、Webの掲載欄を一組で点検。更新画面には必要な項目をまとめ、商品紹介を追加するたびにレイアウトから作り直さない運用にします。

みやあじよがつくるもの商品データの登録項目、更新手順、確認担当を整理し、WordPressの入力画面と運用方法を設計します。

04 HOW THE WEBSITE WORKS

買う人と、仕入れる人。それぞれの選び方に沿って。

家庭用と業務用の商品を扱う食品メーカーを例に、ページの役割と移動を示します。直販やOEMの有無に合わせ、必要な入口を選んで設計します。

今回の構成例

自社商品の紹介と、一般販売・法人取引をつなぐサイト商品例:レトルトスープ。一般販売と業務用販売の構成例です。

トップページ:目的に合う入口へ
商品を購入したい家庭用商品 → 商品詳細食べ方・商品情報 → EC/販売店
仕入れを相談したい業務用商品 → 規格・取引案内荷姿・供給条件 → 法人窓口
働くことを知りたい職種・現場 → 募集要項仕事内容・条件 → 応募
目的に合う次の一歩へ 商品名と用件が伝わる案内に

製造・品質・会社情報は、商品ページからも確認できる共通情報に。OEMを受ける会社では、法人向けの案内から専用ページへつなぎます。

PAGE 01 / トップページ

商品を知った、その先に進みたい入口を。

トップでは、何をつくる会社かと、代表的な商品を写真・短い紹介で伝えます。その近くに「商品を探す」「法人のお客様」「採用情報」を配置。一般のお客様が卸の相談フォームに入ったり、仕入れ担当者がECの購入操作に迷ったりしない案内にします。

季節商品や新商品は、紹介して終わりにせず、詳細や販売先までつなぎます。製造・品質への取り組みと会社情報はその後にまとめ、卸先が会社を確認するときにも読める構成に。取引に関するお知らせと一般向けの販売情報は、内容が分かる見出しで区別します。

設計のポイント販売を増やしたい相手に合わせて入口の順番を決めます。法人取引が中心の会社では、業務用商品と取引案内を先に見せます。

食品メーカーのサイトトップページ
FOOD & DAILY LIFE

毎日の食卓に、
温かい一品を。

家庭用・業務用のスープをご紹介します。

新商品・季節の商品製造と品質への取り組み
商品ごとの食べ方と購入先をご案内家庭用の商品を見る →
食品メーカーのサイト構成例|トップページ

PAGE 02 / 一般向け商品詳細

食べる場面を想像し、必要な情報を確かめる。

商品名と写真、味の紹介を先に置き、食べ方、内容量、原材料等の商品情報へ続けます。パッケージを探している人にも、料理の写真から興味を持った人にも、同じ商品だと分かる写真構成に。味の違うシリーズは、特徴を比べて選べるようにします。

購入の案内には、価格・送料・発送などを確認できるECへのリンクを置きます。企業サイトで決済しない場合は「オンラインショップで購入」と行き先を明示。店頭販売のみなら、取扱店の案内にします。企業サイト側に価格や在庫を重複掲載するかは、更新できる体制から判断します。

設計のポイント商品情報を小さな写真やPDFだけに閉じ込めず、画面上でも読みやすく掲載。購入前に確認したい情報を、案内ボタンの近くからたどれるようにします。

食品メーカーのサイト一般向け商品詳細
PRODUCT / 家庭用スープ

野菜のスープ

味の特徴と、おすすめの食べ方を紹介。

写真
パッケージ・盛り付け・中身
商品情報
原材料・アレルゲン・内容量等
お召し上がり方
確認済みの温め方と保存方法
お届けについて
温度帯・発送・期限情報の確認先
シリーズの味を比べる商品について問い合わせる
購入条件はショップで確認オンラインショップへ →
食品メーカーのサイト構成例|一般向け商品詳細

PAGE 03 / 業務用商品詳細

厨房や売り場に合うか、規格から検討できる。

業務用の商品詳細では、用途と調理例の次に、容量・ケース入数・荷姿・温度帯を掲載します。商品一覧でも主要な違いを見渡せるようにし、家庭用の一袋と業務用のケースを取り違えない表示に。商品コードや規格書の案内があると、社内での検討や営業への問い合わせにも使えます。

その下に、取引の進め方、供給条件を確認する窓口、サンプルの案内を置きます。サンプルの有償・無償や受付条件は実運用を確認して記載。価格・納期を個別に回答する商品は、必要な数量や納品先を伝えて相談できるようにします。

設計のポイント法人の買い方に合わせた画面をつくります。一般向けECと同じ購入ボタンを置くことが、必ずしも適切とは限りません。

食品メーカーのサイト業務用商品詳細
BUSINESS / 業務用スープ

業務用 野菜のスープ

厨房での調理・提供方法と商品規格。

商品規格
一袋の容量/ケース入数/荷姿
保管と調理
温度帯・保存方法・加温手順
供給について
発注単位・配送単位・納期の確認
検討用の資料
規格書・商品コード・使用例
取引開始までの流れ製造と品質の情報
商品名・数量・納品先を添えて仕入れについて相談 →
食品メーカーのサイト構成例|業務用商品詳細

PAGE 04 / 用件別の窓口

用件が分かると、必要な確認も変わる。

商品の食べ方を聞きたい方に、会社名や発注数量を必須で求める必要はありません。一方、卸の相談では、商品・数量・納品先が分かると確認を始めやすくなります。用件を選ぶと入力項目の例が切り替わる画面で、その違いをご覧いただけます。

購入後の注文変更は利用したショップへ、品質に関する相談は担当窓口へなど、受け付けた後の対応も確認して案内します。OEMは対応する会社にだけ入口を設け、試作や包装の相談範囲を事前に説明。問い合わせを受ける部署と、返信までに必要な情報を整理します。

設計のポイント入力項目を増やしすぎず、初回に必要な情報に絞ります。会社ごとの受付体制に合わせ、窓口の数と案内を決めます。

食品メーカーのサイト用件別の窓口

お問い合わせの内容

用件を選ぶと、確認する項目の例が切り替わります。

確認したいこと
商品名・質問の内容
購入済みの場合
購入先、必要に応じて商品情報
返信先
お名前・連絡先
入力項目を示す構成例です
食品メーカーのサイト構成例|用件別の窓口
SALES

商談でも使える商品紹介。

展示会や営業の後に案内するページを決め、商品情報・規格・窓口を一緒に確認できるようにします。紙のカタログからも、対象商品の詳しい説明へ進める構成を考えます。

OPERATIONS

企業サイトとECの役割。

商品の魅力と法人取引は企業サイト、価格・在庫・注文はECなど、役割を先に整理。二重入力をどこまで減らせるか、既存システムと担当者の作業を確認します。

05 SELECTED WORK

商品を知るところから、購入と運用まで考えた実績。

ワインとコーヒーのEC制作をご紹介します。写真で商品の背景を伝えること、企業紹介から購入へつなぐこと、出荷や継続購入の運用を考えることが参考になります。

飛鳥ワイン株式会社のホームページ制作実績

飲料・たばこ・飼料製造業

飛鳥ワイン株式会社

つくり手の風景を、購入につながるECへ。

ワイナリーの写真を活かしたデザインと、商品の購入につながるECサイトを制作。出荷伝票の作業も伺い、CSVを用いた運営の改善をご提案・実装しました。

  • 写真を活かす
  • ECサイト
  • 出荷運営の整理
制作内容を見る
Encore! Coffee Roasteryのホームページ制作実績

飲料・たばこ・飼料製造業

Encore! Coffee Roastery

商品の背景から、継続して買う仕組みまで。

企業紹介とECをつなげ、写真やイラストで焙煎への思いを伝えるサイトを制作。運用の要望に合わせ、定期購入や予約の仕組みをカスタマイズしました。

  • 企業紹介とEC
  • 商品写真
  • 購入機能の設計
制作内容を見る

06 WHY MYAJO

商品の説明と、売り方の整理からご一緒に。

01 / LISTEN

営業と通販の話を聞く。

商品資料に加え、商談や購入前に寄せられる質問を伺います。誰がどの商品を検討するかを整理し、一般向けと法人向けの情報の分け方を考えます。

02 / CONTENT & DESIGN

原稿と写真を一緒に。

味や食べ方は写真と文章に、商品規格は読みやすい項目に。食品の情報を確認する担当者と内容を照合しながら、商品を選ぶための画面をつくります。

03 / OPERATION

販売後の運用も考える。

商品追加、季節販売、情報変更を誰が行うかまで確認。掲載実績で取り組んだECと企業紹介の連携や出荷運営の視点を活かし、必要な機能を検討します。

みやあじよの考え方を知る

07 SERVICES

必要な支援を、必要なところから。

商品ページの見直しから、企業サイト・通販・採用の制作まで。売り方と運用できる体制に合わせて、取り組む範囲をご提案します。

製造業全般のサイト制作を見る

08 SCOPE & PROCESS

商品と売り方を伺い、制作範囲を決めます。

商品数と、
情報を整える仕事からお見積もり。

既存の商品データを使えるか、写真や原稿をつくるか、ECと企業サイトをどのようにつなぐかで制作範囲は変わります。商品情報の確認、画像、ページ、更新機能、既存データの移行を分け、必要な作業をお見積もりします。

まず主力商品と法人取引の案内を整え、季節商品や採用を追加する進め方も可能です。希望する公開時期と、社内で原稿や表示内容を確認できる方をお聞かせください。

ご相談で確認すること

商品と販売先
商品数・一般販売/卸の比重・増やしたい取引
手元の資料
商品ラベル・規格書・写真・カタログ
必要な機能
商品更新・EC・相談窓口・採用情報
運用と移行
既存ショップ・URL・更新/内容確認の担当
  1. 01

    聞く

    商品と販売先、営業や通販の運用で困っていることを伺います。

  2. 02

    整理する

    購入者と取引先に必要な情報を分け、商品資料を確認します。

  3. 03

    提案する

    構成、原稿・写真・機能の範囲、費用と進め方をご案内します。

  4. 04

    つくる

    画面と原稿を制作し、商品情報や取引条件を確認いただきます。

  5. 05

    運用する

    商品追加と変更の手順をご案内し、保守・改善を支援します。

初回から資料をすべてそろえる必要はありません。現在のサイトと商品が分かるものをもとに、整理する範囲からご相談いただけます。

09 READ MORE

商品を伝えるサイトづくりの参考に。

コラム一覧を見る

10 FAQ

制作前のよくあるご質問。

Q1直販をしていないメーカーでも相談できますか?
A

はい。法人向けの商品紹介、取引条件、規格書の案内、相談窓口を中心に構成できます。一般のお客様向けには取扱店や購入先を案内し、EC機能を持たせない形も検討します。

Q2既存のECサイトを残して、企業サイトだけ直せますか?
A

可能です。商品の説明を企業サイトとECのどちらで管理するかを整理し、商品ごとのリンクや更新の負担を確認します。外部サービスとの自動連携は、現在の仕組みと接続条件を調べてからご提案します。

Q3原材料やアレルゲンの情報も原稿にしてもらえますか?
A

商品ラベルや確認済みの規格書をもとに、掲載項目と画面を整えます。原材料や表示内容の正しさは貴社の担当者に確認いただき、制作側の推測で補いません。商品が改訂された際の更新方法も一緒に決めます。

Q4卸価格や製造数量を公開したくない場合はどうしますか?
A

公開する情報と、個別の商談で伝える情報を分けます。Webでは商品規格、取引の流れ、相談に必要な条件を示し、価格や供給量は窓口で確認する構成が考えられます。会員限定の仕組みが必要かは、利用人数と運用方法から検討します。

Q5工場の採用ページも依頼できますか?
A

はい。企業サイト内の採用ページと独立した採用サイトの両方をご相談いただけます。募集職種の仕事、入社後の教育、職場環境、勤務条件を整理し、求人媒体からの確認にも役立つ内容をつくります。

Q6商品が多い場合、全部の掲載から始める必要がありますか?
A

主力商品や問い合わせの多い商品から始める方法もあります。商品分類と登録項目を先にそろえ、追加・終売・季節販売を管理できる形を考えます。取扱いがない商品まで掲載したり、未確認の情報を先に公開したりすることは避けます。