「世にもおいしいチョコブラウニー」LPからデザインを学ぶ
こんにちは。
webデザイナーを目指し勉強中のryskです。
学習録第12弾です。
このブログでは、参考webサイトの目的を基準に、
【構成・配色】
【フォント】
【写真・画像】
【装飾】
【効果】
の点からwebデザインを見ていき、そのデザインによって与えられる効果などを考えながら学んでいきたいと思います。
では早速始めていきたいと思います。
今回はユニークなパンなどを製造販売しているハートブレッドアンティークさんの「世にもおいしいチョコブラウニー」のLPです。
このサイトの目的は
「新商品の認知度向上」
「SNSフォロワーの獲得」
だと考えました。
この目的のためにどのようにアプローチしているのか見ていきたいと思います。
それではどうぞ。
【構成・配色】
この商品は、「アンティークワールドの森に住む黒猫の魔女の“世にもおいしい魔法”で仕上げられた」という設定が存在し、それを表現するような世界観になっています。
レイアウトはシングルカラムで、
1.アイキャッチ領域
2.キャッチコピー領域
3.商品提示領域
4.中間CV領域
5.ベネフィット（割れチョコブラウニーで得られるメリット）領域
6.アクション領域
という並びになっています。
中間CV領域とアクション領域にはそれぞれ、店舗検索ページへジャンプするボタン、インスタグラムへジャンプするボタンが設置されています。
ボタンとして、ユーザーのアクションを促しているのがこの２つに絞られているため、ここにユーザーを誘導したい制作者側の意図が感じられます。
また、要素は中央に配置し、両端に余白を作り出すことですっきりとした印象に。
そのため、視線が左右に大きく動くことは少なく、他のLPと比べるとシンプルに上から下へと視線を移動できたように感じました。
配色は、チョコブラウニーの色と合わせ、茶色（＃351c0d）をメインに、濃い茶色（＃1c0a0b）や暗めの黄色（＃b08d31）が使われています。
商品名や装飾、画像などで「不思議な」「楽しい」世界観を表現しつつ、この明度を抑えた渋めな配色で「静かな」「大人な」「少し高級な」といった世界観を表現しているように思えます。
【フォント】
フォントカラーには白、茶色、渋めの黄色で、明朝体/サンセリフ体がメインで使われ、サイズもそれほど大きくないため、「落ち着いた」「大人な」「上品な」という印象を抱きます。
一方、筆書体のような書体や、鱗のついたゴシック体といった特徴的な書体が商品名やキャッチコピー、見出しに使われており、どこか統一感の無さやまとまりのなさをを感じてしまいます。
ですが、「黒猫の魔女が存在するアンティークワールドの森」という設定の中で、この違和感はいい意味で世界観を助長しているように感じました。
また、文章の揃え方は、中央揃えです。
このサイトでは要素が中央に集められ、両端に余白が作られているため、文章も中央揃えにすることで左右の余白を均等にしています。
しかし、中央揃えは長文にはあまり適しません。
そのため、文章はあまり長くなりすぎず、行長も短めにすることでコンパクトにすることで、可読性を高めています。
また、長文や行数の多い文章は左揃えにし、中央揃えと使い分けることでユーザーに配慮したデザインになっています。
【写真・画像】
アイキャッチでは、チョコブラウニーに魔法がかけられているような２枚の写真がズームアウトしながら切り替わっており、ファーストビューでこのサイトの世界観が伝わってきます。
また、商品提示領域にはチョコブラウニーの切り抜き写真が使われています。
そうすることで、商品が強調され、素材感などが伝わりやすくなっており、ここで使われている写真からもチョコチップのぎっしり感や表面のサクサク感がこれでもかというほど伝わってきます。
また、写真にもユーザーの視線を中央に集める工夫がありました。
それは、アイキャッチを含む全ての写真の被写体を中央に配置することです。
途中、横並びでに配置されているコンテンツはあるものの、一直線上に被写体がくるレイアウトになっており、ほぼ視線が動かないので流し見でも大体の内容が頭に入ってくるようなデザインになっています。
【装飾】
商品提示領域では、ユーザーに強く訴求したい部分をアイコン化することでユーザーの目に一瞬で飛び込んできて認識できるようになっています。
そして、このアイコンの一部がチョコが溶けて垂れているようなデザインになっており、世界観を表現しています。
また、世界観を表現する上で、このLPの背景では、渦巻いたような枝の木が生い茂る森に、魔女の帽子を被った猫が描かれていました。
この渦巻く枝の木々が何とも不気味な感じを出しているのですが、同時に不思議の国のアリスのような可愛さも感じられるイラストになっています。
さらにコンテンツ・背景色が切り替わる境界でもチョコが溶けて垂れているような装飾がついており、一層世界観を強め、見ていて飽きないデザインになっています。
ボタンは、PC版では文字を枠線で囲った重くなりすぎないデザインで、ホバーするとボタン内の色が切り替わりユーザーにボタンと認識しやすいようになっている。
しかし、スマホではホバーアクションというものが存在しません。
そこで、ボタン内の色を初めからベタ塗りにすることで、ユーザーにボタンだと認識しやすいデザインにし、アクションを促しています。
【動き】
メインビジュアルのズームアウトしながら切り替わるアニメーションに加えて、各要素がスクロールに合わせて下から上へ浮かび上がるように表示され、ユーザーが飽きないような動きがつけられています。
また、ラインナップのコンテンツでは三つの商品が並んで紹介されているのですが、画面サイズが一定よりも小さくなるとスライドショーへと切り替わるようレスポンシブに対応したデザインです。
このラインナップコンテンツで使われている写真にはホバーをするとズームインするアクションがかけられており、ここでもユーザーを視覚で楽しませる工夫が見られました。
まとめ
このサイトは絵本のような世界観で作られており、印象に残りやすいデザインでした。
そこで、今回このサイトを見て思ったことは、面白い設定を作ることは、目を引くデザイン、印象に残るサイトを作る上で有効な手段の一つになるのではないか、ということです。
もちろんそれだけに囚われてはいいものは作れませんがストーリー性のある設定や世界観はユーザー印象に残るのはこのサイトを見て実感しました。
ここまで設定を作り込まないまでも、何か一つ簡単な設定を持たせることで世界観の表現に幅ができ、ユーザーの目にとまる良いデザインになるかもしれないような気がします。
ぜひ、今後の作品作りで実験してみたいと思います。
