【Webレビュー】No. 10 にんべん コーポレートサイト
URL
制作会社
株式会社Baigie
企業について
にんべん
創業300年以上の老舗鰹節専門店。伝統的な製法で本格的な鰹節を製造している。手間と時間がかかる希少な製法でできる本枯鰹節を製造・販売している。職人による手作業で製造を行い、見た目にも味にも美しい鰹節を造る。若い世代へ技術を軽食する活動を行っている。多様なプロダクトで海外へもマーケットを広げ、日本の食文化を広める活動もしている。
第一印象
サイトの目的はプロダクトの認知向上とネットショップへの誘導ではないか。自社の情報や取り組み以上に、プロダクトの情報が多い。
「レシピはキラーコンテンツ」とムーテレでもあったように、レシピの情報があることで「これ作ってみようかな」「これ食べたいな」となり購買意欲につながる。レシピは商品の製造元ならではのコンテンツであり、ストロングポイントになる。
創業300年を超える老舗でありながら、非常にキャッチーで今風な印象を受ける。白を基調とした明るい配色とアクセントの赤がそう感じさせているのではないか。それでいて、明朝体のフォントと整列が整っていること、落ち着いた白を背景に使うことでキャッチーになりすぎないようになっている。
海外への展開も行なっていることから、英語への切り替えも可能になっている。
ターゲット
新たににんべんを知り、より知りたいと思っている人
だし系の調味料を求めている主婦
元々のにんべんのファン
使用フォント
メイン…ヒラギノ角ゴ Pro
現代的な明るさがありながら、オーソドックスなデザイン。クセのないやや広めのフトコロと、各線両端のアクセントで、可読性と存在感を両立している。明るく潰れにくい。日常のあらゆるシーンでかなり使われている。
ヒラギノ明朝との混植を意識してデザインされているため、↓との相性◎。
サブ…ヒラギノ明朝 ProN
現代的でシャープな表情の中に、伝統的な筆文字の美しさをマッチさせた華やかで上品な書体。起筆、送筆、収筆（とめ、はね、はらいなど）の各部に美しい筆づかいを取り入れつつ、日常的に使えるベーシックな明朝体として、デジタルならではの緻密さと一貫したデザイン性を持つ。暗くなりがちな明朝体でも程よい明るさを持つ。
SNS名…Times New Roman
配色
ベース…白（#F8F8F5）やや明度を落とした白
メイン…白（#F1F1EB）…明度と再度を下げた白 粘土の色？グレーみがある
アクセント…赤（＃E7190A）…明度と再度を落とした赤 落ち着いた印象を感じる 朱色？
サイト構成
ホーム
商品情報
レシピ
店舗情報
にんべんとは
企業情報
お客様窓口
トップページ構成
ヘッダー…グローバルナビ、英語への切り替えボタン、検索窓、ECサイトへのリンク
メインビジュアル
商品情報
店舗情報
レシピ
ECサイト
ブランドサイト（外部）
レシピサイト（外部）
ニュース
にんべんとは
関連リンク
フッダー
デザインポイント
メインビジュアル…5枚の写真をスライド。ゆったりとズームするアニメーションで優雅な印象。工場、レストラン、港、店舗、家庭の写真を使用しており、にんべんの取り組みを視覚的に表現している。
商品情報…プロダクトの写真の背景に実際に使用した料理を見せることで、視覚的なわかりやすさとを向上させている。また、魅力的な料理で購買意欲を引き立てている。（単純に美味しそう）
レシピ…「今月のレシピ」や「お勧め」を赤丸で入れることで、アクセントにもなっており、アイキャッチの役割になっている。クリックしてみたくなる。
ECサイトの入口には暖簾を横幅いっぱいに表示している。「お店の入口」感を高めている。プロダクトの画像も見せることで、暖簾の先で何が手に入るのかがわかりやすくなっている。
スライダー…次のコンテンツをチラ見せすることで、スクロールしたくなる。
整列された中に、たまに両サイドのPaddingを極端に小さくするブロックがあることで、キャッチーな印象が出ているのではないか。
このサイトの目的はECサイトへの誘導であるから、「企業について」の表示順が下にし、プロダクトの情報やレシピの表示順をあげているのではないか。
実装ポイント
スライダーの感覚が5秒で、ちょうど下に行こうとするタイミングで動くため、目が止まる。
この記事が気に入ったらサポートをしてみませんか？