食品・飲料メーカーのホームページデザイン事例｜用途別の選び方と制作のポイント

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

ビールとグッズの通販、業務店向けの取引案内、FAQを掲載しています。タップルームは2027年開業予定と案内されています。

自社で取り入れる場合：一般購入者と業務用の取引希望者を分け、開業予定の施設を営業中の店舗と区別します。

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

和菓子・洋菓子を種類、価格、贈答用途から選べる通販サイトです。電話・FAX注文、包装、配送先の指定についても案内しています。

自社で取り入れる場合：商品選択と贈答の手続きをつなげます。受付日の記載にはページ内で相違があるため、利用時は店舗へ確認してください。

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

京生湯葉で包むフードを提供する表参道の店舗です。メニュー、店舗情報、FAQ、問い合わせ先を日本語・英語で案内しています。

自社で取り入れる場合：店舗所在地、営業案内、メニューを来店前に確認できるようにします。翻訳の有無と、全条件を各言語で確認できるかは別に検証します。

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

未利用野菜を粉末に加工するブランドで、商品ラインナップ、共創事例、OEMの企画・製造・パッケージ支援を案内しています。

自社で取り入れる場合：法人向けの相談内容と対応範囲を整理し、一般向け通販と同じ購入手順を前提にしないようにします。

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

ニッスイの各国での取り組みを、記事やインタビューで紹介する特設コンテンツです。企業サイト側にはオンラインストアへの案内もあります。

自社で取り入れる場合：読み物の役割と商品購入の入口を区別し、記事の取材時点や更新対象を管理します。

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

洋菓子・和菓子の商品、季節商品、店舗、オンラインショップ、ケーキ予約を案内しています。店舗限定の商品もあります。

自社で取り入れる場合：店頭販売、通販、予約の対象を商品ごとに分け、受け取り方法と販売期間を明記します。

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

チーズタルトに加えてスフレやクッキーなどのチーズ菓子を紹介しています。店舗、オンラインストア、モバイルオーダーの案内があります。

自社で取り入れる場合：店舗限定・通販限定を区別し、商品の保存方法や日持ち、受け取り条件を購入先で確認できるようにします。

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

福井県永平寺町の日本酒店で、酒の紹介、試飲・購入、アクセスや営業案内を掲載しています。年齢確認の案内もあります。

自社で取り入れる場合：来店案内と抽選・予約などの販売条件を整理します。年齢確認の表示だけで、サイト全体の運用を確認済みとは扱いません。

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

むか新のこがしバターケーキを紹介するサイトです。食べ方、取扱店舗、通販、贈答・法人向けの案内があります。

自社で取り入れる場合：商品紹介と注文方法をつなぎ、包装や数量など用途ごとの相談内容を示します。受賞情報は対象商品・年・根拠を確認して掲載します。

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

不二家の洋菓子を商品別に紹介し、価格、素材に関する読み物、店舗検索などを案内しています。

自社で取り入れる場合：商品説明と店舗での取扱いを区別し、販売時期・店舗による違いを更新できるようにします。

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

ジェラートの商品、ギフトカード、FAQなどを掲載するオンラインストアです。商品ごとに原材料などを案内しています。

自社で取り入れる場合：贈答用と自宅用の注文条件を整理し、原材料やアルコールなど商品選択に必要な情報を購入前に確認できるようにします。

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

みりん、日本酒、ウイスキー、調味料やギフトを扱う相生ユニビオの通販サイトです。レシピ、利用ガイド、電話注文も案内しています。

自社で取り入れる場合：調味料と酒類を区別し、商品用途、容量、贈答条件を整理します。レシピから参照する商品が現行品かも確認します。

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

壺芋ブリュレと「おすそ分け」を紹介し、オンラインショップ、SNS、問い合わせ先へ案内しています。

自社で取り入れる場合：紹介ページから販売先へ進めるようにし、現行商品・在庫・配送条件は販売先で更新します。今回、全商品と在庫の照合は行っていません。

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

熊本あか鶏・九州うまかハーブ鶏を、部位やセットから選べる通販サイトです。レシピと業務用の案内もあります。

自社で取り入れる場合：重量、数量、保存・配送方法を商品ごとに管理します。出荷停止などのお知らせを購入前に確認できるようにします。

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

季節のフレーバーを展開する羊羹ブランドです。過去のフレーバー、取扱店、オンラインストアを案内しています。

自社で取り入れる場合：過去の商品紹介と現在購入できる商品を区別し、販売期間と再販の有無を明記します。

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

冷蔵の作り置き料理を定期配送するサービスです。LINEからの注文、プラン、週ごとのメニュー、支払い・休止の案内があります。

自社で取り入れる場合：外部の注文窓口も購入導線として扱い、定期配送の頻度、変更・休止、支払い条件を確認して申し込める構成にします。

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

COCの企業サイトで、SNOWS、CHEESE WONDERなどのブランド、会社情報、採用、問い合わせ先を紹介しています。

自社で取り入れる場合：企業の紹介と各ブランドの商品購入を分け、取引・採用・購入それぞれの入口を整理します。

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

米・雑穀の商品を用途やセットから選べる通販サイトです。定期購入、贈答、法人向けの案内、レシピを掲載しています。

自社で取り入れる場合：単品・定期購入・法人取引の条件を分け、送料の地域別例外を含めて注文前に確認できるようにします。

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

チョコレートブランドの紹介に加え、オンラインショップ、店舗、カフェやレストランの予約、採用情報を案内しています。

自社で取り入れる場合：通販・来店・飲食予約の対象を区別します。新店のお知らせは開業予定と営業中を更新し、過去の予定を残さないようにします。

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

ういろうなどの菓子、季節商品、店舗、通販を案内しています。店舗限定商品や販売再開のお知らせもあります。

自社で取り入れる場合：商品ごとの取扱先と販売期間を整理し、過去の期間限定店舗を現行店舗と誤認しないよう情報を管理します。

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

犬・猫向けのペットフードブランドです。対象動物やライフステージによる商品案内、給与量の計算、販売店・オンライン購入先を掲載しています。

自社で取り入れる場合：人向け食品とは分けて参考にします。商品を選ぶための条件と使用案内を対応させ、健康に関する表現を根拠なしに転用しません。

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

赤の大きな文字「NITTOH PICNIC 100」が、最初の画面の中心を占めている。

背景はクリーム色で、赤・緑・紫・オレンジのカードが下に並ぶ。

右に「13/100」の進み具合を示す数字があり、カテゴリーのタグが画面中ほどにある。

自社で取り入れる場合：周年や企画ごとに、ブランドの色を絞った特設ページを作る。数字で進み具合を見せる場合は、更新できる体制を先に決める。

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

キッチンで食材を持つ女性の写真を、角丸の枠で画面いっぱいに使っている。

白い大きな文字の見出しを、写真の左下に置いている。

右下に、購入者向けの「ユーザー登録」の丸いボタンがある。

自社で取り入れる場合：商品を使う場面の写真を1枚撮り、見出しは短い1文にする。購入後の登録など、既存客向けの入口は丸いボタンで分けて置く。

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

土のついた生姜の接写を、全面に敷いている。

「強い生姜 夏。」の白い大きな文字を、左と右に分けて置いている。

購入への入口は右上に黄色の縦長のタブで、案内は縦書きのナビにまとまっている。

自社で取り入れる場合：商品の実物を、加工する前の姿で大きく撮る。文字は短く、大きくして、購入への入口は画面の隅に固定する。

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

粉糖を振る手元と、並んだ焼き菓子の写真を、暗めの動画で映している。

中央に筆文字のロゴだけを置き、ほかの文字を置いていない。

縦書きのナビが右上にあり、お知らせは左下に1行だけ出ている。

自社で取り入れる場合：製造の工程を短い動画にして背景に使う。ロゴ以外の文字を絞り、案内は縦書きのナビと1行のお知らせにとどめる。

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

半分に割った菓子と、流れるキャラメルの写真を大きく置いている。

背景は白と灰色の波模様で、ロゴは画面の下に黒の大きな文字で置いている。

最初の画面の下にCookieの同意バーが出ている。

自社で取り入れる場合：断面が見える商品写真と、ブランドの模様を決める。同意バーの高さを見込んだ配置にして、ロゴが隠れないようにする。

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

紅茶と焼き菓子を、淡い紫のテーブルクロスの上で撮った写真が画面の大半を占める。

黄色の丸い点の装飾を、左下に置いている。

ナビの右端に、黄色のボタン「Online Shop」がある。

自社で取り入れる場合：背景の色を商品に合わせて1色決め、通販への入口だけを別の色のボタンにして目立たせる。

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

黄色の背景に、焼き色のついた菓子の断面を大きく半円で見せている。

ナビは5項目で、ロゴは濃い紺の太い文字にしている。

左にInstagramの縦文字、右に「SCROLL」の縦文字を置いている。

自社で取り入れる場合：商品の断面や質感を寄りで撮り、背景は1色にする。文字は紺1色に絞ると、写真が主役になる。

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

菓子をかじる人物の写真に、白い大きな文字「A Bite Coffee」を重ねている。

ナビはハンバーガーメニューで、右に「1/4」のスライド番号がある。

画面の下側は、背景色に溶けるようなぼかしをかけている。

自社で取り入れる場合：商品を食べる場面の写真を決め、店名を大きな文字にして重ねる。ナビは項目が少ないなら、メニューに畳んでよい。