CONCEPT WORK — 食品製造(製菓)
食品製造・製菓メーカーのホームページ制作
焼き菓子を作る製菓メーカーを想定して作ったデモサイトです。商品を知りたい一般のお客さまと、OEM・卸を相談したい取引先の方が、同じページの前半と後半で分かれるように組み立てています。
最終更新日:
公開日:
想定した企業: 株式会社ひなた製菓(架空)
本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。
デモサイトを開く →デザインの意図
背景を白ではなく生成りにする
食品のサイトは、まずおいしそうに見えるかどうかで決まります。背景を真っ白にすると焼き菓子の焼き色が沈んで見えるため、地の色をクリームにしました。商品写真の周りが少し暖かい色になるだけで、同じ写真がおいしそうに見えます。
赤と緑を1色ずつ、同じ面に置かない
商品カードのタグは、焼き菓子・ケーキ・ギフトで色を変えています。3枚とも同じ色にすると商品の違いが消え、3色を毎回そろえて出すとにぎやかになりすぎます。1枚に1色ずつ散らすのがちょうどよい密度でした。
丸みのある字面と、大きめの角丸
製菓は親しみやすさが売りになる一方で、食品である以上は衛生面の信頼も要ります。柔らかさは書体と角丸で出し、清潔感は写真と余白の取り方で出す、と役割を分けました。色で両方をやろうとすると、どちらつかずになります。
ヒーローの演出
製造ラインを通り抜けるフライスルー型のモーション映像です。角丸のフレームの中で映像が始まり、スクロールを始めるとフレームが全画面へ開いていきます。
工場の中は、普段お客さまの目に触れません。だからこそ最初に「ここでつくっています」を見せます。清潔であることを文章で説明するより、明るく整った工程が流れているのを見てもらうほうが早く伝わります。
フレームから全画面へ開く動きにしたのは、いきなり全画面の映像で始めると、菓子メーカーのサイトとしては少し強すぎるためです。額に入った絵から入り、スクロールで世界が広がる、という順番にしています。
ページ構成の考え方
ヒーロー
製造工程の映像と、ブランドのキャッチコピー。
私たちのこだわり
素材・手仕事・安心の3つ。写真は敷かず、アイコンと短い文だけで置きます。
商品ラインナップ
焼き菓子・ケーキ・ギフトの代表商品。カテゴリのタグで見分けられるようにします。
製造のようす
生地づくり・焼き上げ・包装検品の3工程。衛生管理の説明を添えます。
お知らせ
季節商品の発売や配送スケジュールの変更。
会社概要
設立・資本金・代表者・事業内容。OEM受託を事業内容に明記します。
OEM・卸のお問い合わせ
最後のCTAは一般のお客さま向けではなく、取引の相談に振ります。
食品製造のサイトには、商品を知りたい一般のお客さまと、OEM・卸を相談したい取引先の方という、性格の違う2種類の読み手がいます。
そこで前半をブランドの世界観、後半を取引の入口として並べました。一般のお客さま向けの情報を先に置くのは、取引先の方も「この会社の商品はどう見えているか」を先に確かめるからです。順番を逆にすると、一般のお客さまだけが最初でつまずきます。
ほかの業種のデモサイト
実際にご依頼いただいて制作したサイトは制作実績にまとめています。
本デモは架空企業のコンセプトワークです。実在する企業・団体とは関係ありません。掲載している社名・所在地・実績の数字はすべて架空のもので、写真は用意したイメージ素材です。