![見出し画像](https://assets.st-note.com/production/uploads/images/23266109/rectangle_large_type_2_a3d064b605541865a16d9a2543ad3d75.png?width=1200)
超熟パンアートギャラリー #1日1サイトレビュー
【概要】
Pascoの超熟の食パンやマフィンを使った「パンアート」のギャラリーキャンペーンサイト
【ターゲット】
パンアートに挑戦してみたい女性
【印象】
・パンアートの画像がメインで画像以外の色味やアニメーションなどの動きが少ないシンプルなサイト
・カフェのような手描きのあしらいや大理石のような背景、白をベースカラーにしているなど、女性が好みそうなデザイン
・パンアート画像のパンの置き方がInstagram風で今っぽさ・おしゃれさを出している
・Instagramの投稿を載せているコンテンツで配置が少しズレているのが気になる(ミス?)
【構成】
・ヘッダー
・メインビジュアル
・パンアートの作り方:アイデアの画像をクリックすると作り方のページに飛ぶ
・ムービー:パンアートを作っている様子が映し出されている紹介動画
・#超熟パンアート をつけて投稿しよう!:Instagramのパンアートの投稿を集めたコンテンツ
・フッター
【メインビジュアル】
・フルスクリーン、全面パンアートの画像→カラフルで華やかなパンアートが目を引く
・中央に手描きカフェ風のサイトロゴ
・下部にパンアートを促すコンセプトテキスト(テキストの枠内が透過しているためパンアート画像のビジュアルを邪魔しない)
【コンテンツ】
・コンテンツは横幅いっぱいに広がらず、左右に余白を保っている
・パンアートの画像の枠が手描き風で可愛らしい
・パンアートのつくりかたコンテンツではアイデアの画像が縦2列の横は上下にずらした状態で配置→きっちり整列すると堅苦しさがあるため、ずらした方がラフさ・抜け感が出る
・アイデアのコンテンツでは作り方とポイント、他のパンアートの画像を含めたレイヤーがメインとなるパンアートの画像レイヤーの上に配置されているような感じ(メインのパンアート画像が固定されたまま作り方、ポイントなどがスクロールされる)
・ポイントはチェック柄の吹き出しで可愛らしく
・縁取り文字がよく使われている
・ホバーは画像が拡大し、透過される
・画面の右端下部にはトップページに飛べるアイコンが常に配置
【フォント】
・游ゴシック
・説明テキストは12〜13pxと小さめ
・ジャンプ率は低め→落ち着いた、シンプルな印象に
【カラー】
・ベースカラーは白(#ffffff)
・メインカラーは少し明度が高い黒(#3f3f3f)
・アクセントカラーは茶色(#462905)
・パンアートの華やかさを邪魔しないために配色は少なく、無彩色を中心に
【レスポンシブ】
SP表示では、
・グローバルナビゲーション→ハンバーガーメニューに
・画像のグリッドレイアウト→スライドレイアウト
・アイデアコンテンツでスクロールすると、メインのパンアート画像の被らない程度の上を移動→画像に丸被りの全面上を移動に
【サイトを通じてどのように目的を達成しているか】
目的:パンアートを通じて超熟商品を購入してもらう
・画像メインのパンアートギャラリーを見てもらって興味を持ってもらう
・簡潔な作り方レシピを載せ、簡単にできることを認知してもらう
・ハッシュタグ付きのInstagramの投稿を見せ、ビジュアルの可愛さ、流行っている様子を認知してもらう
→興味を持ち、挑戦する→超熟商品を購入する
➡︎結果:目的達成
この記事が気に入ったらサポートをしてみませんか?