デザインレビュー 9/23
PAN&パンド
概要：焼きたて冷凍パンのサービスサイト
印象面
パンのように柔らかくも少しの高級感も大切にしたサイト。
それが顕著にわかるのがフォント。フォントタイトルが筑紫A丸ゴシックを使いつつ、説明文では筑紫明朝体を使用している。
上下に囲んだ弧を描いているあしらいも高級に見える。
全体的な各セクションはやわらかい表現のサイトだが、
パンを使用した4つのシーンの紹介では、あえてタイトル説明文を筑紫明兆を使い、少しだけ贅沢さを感じる食事の写真掲載し、フォントも筆記体担っている。
冷凍パンに関する説明部分は斜線をいれることでより凍った印象をあたえつつ、上下は山波の装飾を入れて固すぎないように演出している。
各セクションの傾向として、白い背景の場合鮮やかな写真や商品を乗せたりなど、写真を強調するようにしている。
以下個人的に好きな装飾・表現。
メインビジュジュアルの動画ボタンを囲む丸い線。間を開けることで抜け感を感じます。
丸斜め線が子供の頬を赤くしたようなデザインで可愛い。
クッキーみたいな丸が柔らかさだけでなく、可愛さを出している印象
冷凍しないパンとしたパンの比較を写真をあえて薄くして表現している。シンプルで簡単にできることだけどわかりやすい。
機能面
コンバージョンボタンが上部に配置されておりいつでもCVできるようになっている。ボタンはあえて使っていない赤色の文字で装飾されている。
別ページに飛ぶボタンには、黒色にして、斜線を入れて目立つようにしてある。コンバージョンはあえて詳細ページに飛ばして回遊させてからを目的にしている可能性あり。
カラー
ベース：ホワイト
メイン：薄めの黄色の土色 #FBFAF4
アクセント：黒（完全な黒） 黒がかった赤＃ab4338
フォント
ベース：筑紫明朝PR 6pn
メイン：筑紫A丸ゴシック
英：Linotte-SemiBold（下記のタイトル英文のみ）
レスポンシブ
ブレイクポイント：800px
可変：横配置が縦配置に変化。
この記事が気に入ったらサポートをしてみませんか？