【考察】 「LPアーカイブ」でお気に入り数No.1のLPをトレースしてみた
🔰 はじめに
今回は、評価が高いLPを集めたポータルサイト「LPアーカイブ」の中で、お気に入り数No.1の「オランジーナ」のLPをトレースさせていただきました。
トレースや考察は初めての経験でしたが、多くの学び・気づきが得られました。
感想や考察を以下にまとめました。以下お読みいただけると幸いです。
🎯 トレースしたLP
💡 【結論】 トレースで学んだこと・感想
✅ 見やすいページづくりに大切な「余白の取り方」「要素の配置」「文字の大きさ」を学びました。
さらに、「小さな文字」「狭い余白」でも、"見やすさは確保できる" ことを再認識できました。
✅ ページ全体の統一感を出すには、「パーツ1つ1つに目的を持たせてデザインすることが重要」と感じました。
最後に、深く考えるほど、デザインの創意工夫が見て取れ、私自身もこんな素晴らしいサイトを作りたいという尊敬の念を抱きました。
❤️ ページ全体から感じた印象・世界観
「爽やかさ・軽快さ」が強く感じられました。
「情報が見やすく、スッキリとした印象」を受けました。
商品に込められた「飲むことで軽やかな気分になってほしい」という願いがページからも伝わってきたように思います。
また「情報が見やすい・スッキリとした印象」は、各パーツを以下のような工夫で表現することで実現しているのでは？と考えました。
💭 パーツ別の考察
▶️ レイアウト
ページの中央に沿って情報が整理され、視線が散乱しないレイアウトと感じました。これにより、ユーザーはストレスなく情報を理解しやすいのでは？と考えました。
▶️ カラー（レイアウト全体）
メインカラーは淡い青・空色で統一されています。まるで雲の中にいるような印象をユーザーに与えることで「軽快さ」を演出しているのでは？と考えました。
アクセントカラーは赤や黄色が使用されています。フランス国旗の赤や青、また商品カラーのオレンジを使うことで、ユーザーは違和感を覚えず、ページ全体で一体感ある印象を受けるのでは？と考えました。
▶️ 余白
余白は小さめです。しかし、(1) 情報が分離されている (2) 情報量が絞られている結果、見やすい印象と感じました。
この余白の取り方は、スクロール量を少なく、情報をまとめるための工夫なのかな？と考えました。
▶️ フォントファミリー
「手書き風のフォント」と、読みやすい「ヒラギノ角ゴ」が使用されています。これにより「軽やかな印象」が演出されているのでは？と考えました。
▶️ フォントサイズ
14~16pxと大きすぎないサイズですが、文量が控えめなため読みやすさが保たれています。
見出しも小さめで、全体としてジャンプ率が低く作られています。この結果、ユーザーはノイズ感を持たず、スムーズに情報を理解しやすいのでは？と考えました。
▶️ カラー（フォント）
メインカラーは青で、フランス国旗と同じ色です。黒は使用されていません。アクセントカラーにはオレンジや水色が用いられ、商品と同じ色です。ホバーアクションもオレンジです。
レイアウトカラーと同様に、商品と関連性を持った色使いによって、ページ全体として統一感のある印象が演出されているのでは？と考えました。
▶️ あしらい 1
炭酸の気泡のシュワシュワ感が表現されていて、「爽やかさ」を感じさせるとともに、飲んだ時のイメージがしやすく(これをUXという?)、ユーザーの理解を助ける効果があるのでは？と考えました。
▶️ あしらい 2
ファーストビューの見出しやヘッダーの文字に影が付けられています。これは、少しでも文字を目立たせる意図かな？と考えました。
▶️ カラー（あしらい）
既出の色をベースとして、透明度を上げた色や、淡い色が使用されています。これは、「軽やかさ」を演出するため？と考えました。