■概要
S＆Bのスパイスとハーブの手作りキットを紹介したブランディングサイト。スパイスやハーブを使った料理をしてみたい、だけど買ったハーブを使い切れるか自信が無い人に、1回の使い切りタイプとして楽しむことが出来る。
■ターゲット
・スパイス・ハーブ好き
・手間を掛けずにスパイス・ハーブを使った本格的な料理にチャレンジしてみたい人
・スパイス・ハーブに挑戦してみたいけど、何から始めたらいいのか分からない人
■FV
色んな種類のスパイス・ハーブが一面に並べられたヒーローイメージで、水色を背景色にすることでハーブ・スパイスの写真や中央の文字が引き立っている。食欲を落とす色として食べ物に青系の色はあまり使われないが、ハーブとのコントラストが際立ち、ユーザーを惹きつけるFV。
ざっくばらんに並べられているように見えるが、配色を考えて並べられているためとてもお洒落。ハーブの下のマット？の少し皺がある感じが、特別ではなく自宅でも楽しめるという親しみを感じられる。
中央にあるテキストのフォントやリボン型の図形は丸みがあり、柔らかな印象を与える。
ハンバーガーボタンは、キラッと光るような白の図形を右上に配置。ナビゲーションの周りにMenuの文字を回転させることで目立たせている。
■特徴
各セクションを丸みの帯びたシェイプで区切っていて、彩度の高い背景色を使用。明るい背景を使うことで、ポップで楽しく料理を楽しめる雰囲気を感じられる。
全体的に余白がたっぷり取られていて、スパイスの画像を所々に配置することで、ハーブの存在感をアピールしつつ、余白のバランスが取られている。
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
・ラインアップ
各商品にカーソルを持ってくると、使われているハーブが袋から飛び出してくる。下のview moreも同様のアクション。どんな種類のハーブをいくつ使っているのか、説明文を見ずに視覚的に伝えている。
全体的に色味の強い配色のため、ホバーした場所が分かりやすいよう写真を大きくしたり、明暗や文字配色の工夫をしている。
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
・おいしいカレーの作り方
出来上がりのカレーを中央に切り抜き画像で配置。シャドウを入れることで立体感が出る。お皿の周りには、使われているスパイスをあしらいとして配置。文字やスパイスの画像は、視線誘導を意識した配置になっている。皿の周りに沿うように文字が並び、料理出来上がりの楽しい雰囲気が伝わる。
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
・カレーにあうトッピングレシピ
スパイス＝カレーだけに使うものというのを払拭するように、副菜レシピがたくさん紹介されている。スパイスを余らせがちの人や、カレーがあまり得意ではない人でもスパイスの楽しみ方を知ることが出来る。
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
snsアイコンはカーソルを持ってくると、クルリと１回転する。アイコンの色もホットでスパイシーなイメージの赤を使用。
ページの最後までくると、右端にtopに戻るボタンが出てくるが、こちらもマウスを持ってくると、キラキラしたあしらい出てくるホバーアクションが付けられており、細部までこだわりを感じる。
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
■フォント
・テキスト：ヒラギノ角ゴ ProN
・欧文：futura-pt-condensed
■配色
背景色は、赤・黄・水色のテクスチャを背景画像として使用。
・テキスト：#000, #fff
・アクセントカラー：#D53F1B
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE
せろりのセオリー/ Webサイト100選 No.27 S&B CRAFT STYLE