【1日1サイトレビュー】#136 AJINOMOTO オリーブオイル

■AJINOMOTO オリーブオイル https://www.j-oil.com/oliveoil/

JオイルミルズのAJINOMOTOオリーブオイルのサイト。

・1カラムの構成でナビゲーションメニューはページ上部に固定。メニューは5つのみで端的にまとまっておりページ内、階層ページに遷移するものがある。

・ポパイの世界観とオリーブオイルの紹介がマッチしている。赤、黄、緑を中心としたハッキリとした配色でイラストやパーツにはくっきりと縁が付いているので操作がしやすいと感じた。鮮やかな色というよりは少し彩度が低い印象。黒や深いグレーも組み合わせられている。

・レシピページではレシピの写真がゆっくり回転するような動画？になっている。アコーディオンの開く速さなど、トップページとの雰囲気にギャップが出ないように工夫されていると思った。

・文字や写真が飛び出すアニメーションが多用されていて賑やか。イラストとMOREのリンクボタンの区別がつくようにリンクボタンには大きく動くアニメーションが付けられている。ページ右下のトップへ戻るリンクはキャラクターが上へ飛びあがっていくような動きで工夫されている。

フォント：M PLUS Rounded 1c
カラー：ベースカラー黄#F7CA00、文字、見出し赤#CE111B、背景緑#01511E、文字白#FFFFFF、文字、ライン黒#000000、グレー#443036、背景肌色#F8E2CA