健康食品LPのデザイン改善で実践した10のテクニック｜WebP変換からSVG図解まで全公開

健康食品のランディングページ（LP）は、商品の魅力を伝える最前線だ。しかし多くの中小企業のLPは、テンプレートを少しカスタマイズしただけの「どこかで見たデザイン」に留まっている。私たちは酪酸菌青汁LP（aojiru.kyotanishokai.co.jp）の全面リデザインを通じて、限られたリソースでもプロフェッショナルなLPに仕上げる10のテクニックを確立した。

この記事では、実際に実装したコードと具体的な数値データを全面公開する。特別な有料ツールは使っていない。フリー素材、標準的なHTML/CSS/JavaScript、そして少しの工夫があれば、誰でも再現できる内容だ。

フリー素材画像の戦略的な活用

LPデザインで最初にぶつかる壁が「画像素材」の問題だ。プロのカメラマンに撮影を依頼すれば数十万円。かといってアイコンやイラストだけでは訴求力に欠ける。

酪酸菌青汁LPでは、Unsplashのフリー素材画像を全面的に採用した。ポイントは単に「きれいな写真を選ぶ」のではなく、ブランドカラーとの親和性を基準に選定したことだ。酪酸菌青汁のブランドカラーは深い森のグリーン（#388e3c）。この色と調和する自然風景や植物の写真を厳選し、ヒーローセクションの背景に全面配置した。

従来のアイコン+テキストの構成では、どうしても「素人感」が抜けない。写真を大胆に使うことで、ファーストビューの印象が根本的に変わる。実際のヒーローセクションでは、朝日に照らされた草原の写真（Unsplash ID: u8nhXxs149Y）をフルスクリーンで配置し、その上に白テキストをオーバーレイしている。

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}

filter: brightness(0.55) で写真を暗くすることで、白テキストの可読性を確保している。この数値は実際に複数パターンを検証して決めたもので、暗すぎず明るすぎない絶妙なバランスだ。Unsplashの写真はライセンスフリーで商用利用可能なため、法的リスクもない。

WebP変換による画像軽量化

LPの表示速度はコンバージョン率に直結する。Googleの調査によれば、ページ読み込み時間が1秒から3秒に増えると直帰率が32%増加する。健康食品LPでは高品質な製品画像が不可欠だが、画像のファイルサイズが表示速度の最大のボトルネックになる。

酪酸菌青汁LPでは、全製品画像をPNGからWebPに変換し、97%のファイルサイズ削減を実現した。具体的には、メインの製品画像（product-hero-full）が719KBから23KBになった。この差は、モバイル回線での表示体験を劇的に改善する。

変換にはGoogle公式のcwebpコマンドラインツールを使用した。品質パラメータは80に設定しており、目視では品質劣化を判別できないレベルだ。

HTMLでの記述は、<picture> 要素でフォールバックを用意するのが定石だが、2026年時点ではWebPのブラウザサポート率が97%以上に達しているため、直接 <img src="image.webp"> で配信している。

ただし注意点がある。WebP変換の効果は画像の内容によって大きく異なる。写真系の画像は高い圧縮率が得られるが、テキストを含むスクリーンショットやシャープなエッジのあるグラフィックでは、PNGのほうが適切な場合もある。実際のプロジェクトでは、全画像を一括変換するのではなく、変換後の品質を1枚ずつ確認することを推奨する。

SVG図解で専門情報を視覚化する

健康食品LPの難しさは、科学的なメカニズムを一般消費者にわかりやすく伝えることだ。テキストだけで「酪酸菌が短鎖脂肪酸を産生し、腸管上皮細胞のエネルギー源となる」と説明しても、ほとんどの人は読み飛ばしてしまう。

酪酸菌青汁LPでは3種類のSVG図解を制作し、専門的な情報を直感的に理解できるようにした。

1つ目は酪酸菌メカニズムのサイクル図。 酪酸菌の摂取から腸内環境改善までの流れを循環的に表現している。SVGの <circle> と <text> 要素を組み合わせ、CSSアニメーションで段階的に表示させた。

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <circle cx="200" cy="200" r="150"
    fill="none" stroke="#388e3c" stroke-width="2"
    stroke-dasharray="942" stroke-dashoffset="942"
    class="cycle-ring">
    <animate attributeName="stroke-dashoffset"
      from="942" to="0" dur="2s"
      fill="freeze" begin="0.5s"/>
  </circle>
  <!-- 各ステップのノード -->
  <g class="cycle-node" transform="translate(200, 50)">
    <circle r="30" fill="#e8f5e9" stroke="#388e3c"/>
    <text text-anchor="middle" dy="5" font-size="11">酪酸菌</text>
  </g>
  <!-- 以下、4方向にノードを配置 -->
</svg>

2つ目は栄養素の棒グラフ。 大麦若葉とモリンガの栄養素含有量を、一般的な野菜と比較するグラフだ。データの正確性を担保するため、数値は文部科学省の日本食品標準成分表を参照している。

3つ目は競合比較レーダーチャート。 3サイトのベンチマーク分析に基づいて、デザイン・情報量・信頼性・ユーザビリティ・CTAの5軸で比較した。SVGの <polygon> 要素で五角形を描画し、各軸のスコアに応じて頂点座標を計算している。

SVG図解の最大のメリットは、レスポンシブ対応が完全に自動であることだ。ラスター画像（PNG/JPEG）と異なり、SVGはどの画面サイズでも鮮明に表示される。Retinaディスプレイ対応のために2倍サイズの画像を用意する必要もない。さらに、SVGはテキストデータなのでGzip圧縮が非常に効きやすく、通信量の観点でも有利だ。

スクロールリビールアニメーション

ページを開いた瞬間にすべてのコンテンツが表示されるLPと、スクロールに応じてコンテンツが現れるLPでは、ユーザーの体感品質がまったく異なる。後者は「コンテンツが自分のために用意されている」感覚を生み出し、読了率の向上に寄与する。

酪酸菌青汁LPでは、IntersectionObserver APIを使ったスクロールリビールアニメーションを全セクションに適用した。実際のコードは以下のとおりだ。

var revealEls = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window && revealEls.length) {
  var revealObs = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (e.isIntersecting) {
        e.target.classList.add('is-visible');
        revealObs.unobserve(e.target);
      }
    });
  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
  revealEls.forEach(function (el) { revealObs.observe(el); });
} else {
  // フォールバック: IOに非対応のブラウザでは即座に表示
  revealEls.forEach(function (el) { el.classList.add('is-visible'); });
}

設計上のポイントが3つある。

threshold: 0.1 は「要素の10%がビューポートに入ったら発火」の意味だ。これを0.5（50%）にすると、ユーザーがかなりスクロールしないとアニメーションが始まらず、「壊れている」と誤解される。逆に0にすると1pxでも見えた瞬間に発火するため、アニメーションの「登場感」が薄れる。0.1は検証の結果たどり着いたバランスだ。

rootMargin: '0px 0px -40px 0px' は下方向に40pxのマージンを設定している。これにより、要素がビューポートの下端から40px手前に来た時点で発火する。画面の端ギリギリで発火するより、少し余裕を持たせたほうが自然な印象になる。

そして unobserve による1回限りの発火。一度表示されたコンテンツが再び非表示になるのは、ユーザーにとって不快な体験だ。スクロールで戻ったときにコンテンツが消えていたら、「さっき見たはずの情報がない」と混乱する。1回発火したら監視を解除することで、この問題を防いでいる。

対応するCSSは以下のとおりだ。

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

translateY(30px) で30px下からスライドインする動きを加えている。この距離が大きすぎると「飛び出してくる」印象になり、小さすぎると動きが感じられない。30pxは「ふわっと現れる」自然な動きを実現する値だ。

数値カウントアップアニメーション

「97%軽量化」「4.4の評価」「30包入り」といった数値データは、LPの説得力を支える重要な要素だ。しかし数値がただ静的に表示されているだけでは、ユーザーの目に留まりにくい。数値がゼロからカウントアップするアニメーションを加えることで、数値への注目度と記憶定着率を大幅に高められる。

酪酸菌青汁LPで実装したカウントアップアニメーションのコードを紹介する。

function animateCounter(el) {
  var target = parseFloat(el.getAttribute('data-count'));
  var suffix = el.getAttribute('data-suffix') || '';
  var prefix = el.getAttribute('data-prefix') || '';
  var decimals = (target % 1 !== 0) ? 1 : 0;
  var duration = 2000;
  var startTime = null;
  function step(ts) {
    if (!startTime) startTime = ts;
    var p = Math.min((ts - startTime) / duration, 1);
    // Ease-out cubic: 減速しながらカウントアップ
    var eased = 1 - Math.pow(1 - p, 3);
    var val = (eased * target).toFixed(decimals);
    el.innerHTML = prefix + val
      + (suffix ? '<small>' + suffix + '</small>' : '');
    if (p < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

このコードの核心は 1 - Math.pow(1 - p, 3) というイージング関数だ。線形（等速）のカウントアップは機械的で退屈な印象を与える。イーズアウト・キュービックを適用すると、最初は速くカウントが進み、目標値に近づくにつれてゆっくりになる。この「減速感」が、数値に重みと説得力を加える。

HTML側のマークアップはdata属性で制御する設計にした。

<span class="stat-value" data-count="97" data-suffix="%">0</span>
<span class="stat-value" data-count="4.4" data-suffix="★">0</span>

このdata属性方式のメリットは、HTMLを編集するだけで任意の数値とサフィックスを設定できる点だ。JavaScriptのコードを変更する必要がないため、非エンジニアでもLPの数値を更新できる。

セクションラベルの英語+日本語2段構成

デザインの洗練度を手軽に上げるテクニックとして、セクション見出しの2段構成がある。英語のサブラベルを小さく配置し、その下にメインの日本語見出しを大きく表示する構成だ。

酪酸菌青汁LPでは、全セクションにこのパターンを適用した。

.section-label {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--green-700);
  font-weight: 600;
}
.section-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.3;
  margin-top: 0.5rem;
}

letter-spacing: 0.2em の英語ラベルが「高級感」の正体だ。文字間隔を広げた大文字の英語テキストは、ファッションブランドやホテルのWebサイトでよく見られるデザインパターンで、洗練された印象を与える。一方で、日本語の本文テキストに同じ letter-spacing を適用すると可読性が著しく低下するため、ラベル部分にのみ限定している。

clamp(1.5rem, 4vw, 2.2rem) は、CSSのclamp関数を使ったレスポンシブなフォントサイズ設定だ。画面幅に応じて1.5remから2.2remの間で自動調整されるため、メディアクエリを書かなくても適切なサイズになる。

ウォーターマークテキストの演出効果

ウォーターマークテキストとは、セクションの背景に薄く大きな文字を配置するデザイン手法だ。雑誌のレイアウトでよく使われるテクニックで、Webでも効果的に機能する。

酪酸菌青汁LPでは、各セクションの背景に英語のキーワード（「MECHANISM」「NUTRITION」「QUALITY」など）を font-size: 8rem で配置し、opacity: 0.04 で極めて薄く表示している。

.section-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--green-900);
  opacity: 0.04;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.1em;
}

pointer-events: none と user-select: none が重要だ。これらを指定しないと、ウォーターマークテキストがクリックやテキスト選択の邪魔になる。また opacity: 0.04 という極端に低い値にしているのは、ウォーターマークはあくまで「空気感」を演出するものであり、コンテンツの可読性を妨げてはならないからだ。0.1程度ではまだ存在感が強すぎ、本文テキストと干渉する。

ダークセクションの導入

LPが白背景の連続だと、ユーザーは視覚的な単調さから「流し読み」に移行しやすい。ダークセクションを戦略的に挟むことで、視覚的なリズムを生み出し、重要なメッセージに注目を集められる。

酪酸菌青汁LPでは、製品の品質訴求セクション（「国産100%・無添加・GMP認証工場」）にダークセクションを採用した。背景色はブランドカラーの最も深いグリーン（#1b3a1e）を使い、テキストを白系（#e8f5e9）に反転させている。

.dark-section {
  background: var(--dark);
  color: var(--green-50);
  position: relative;
  overflow: hidden;
}
.dark-section .section-label {
  color: var(--green-300);
}
.dark-section .section-title {
  color: #fff;
}

ダークセクションを効果的に使うためのルールがある。まず、LP全体の中でダークセクションは1〜2箇所に限定すること。多用すると特別感が薄れ、逆に読みづらいLPになる。次に、ダークセクションの前後に十分な余白（padding）を設けること。白背景からいきなりダーク背景に切り替わると、視覚的なショックが強すぎる。酪酸菌青汁LPでは、ダークセクションのpaddingを通常セクション（80px）より大きい100pxに設定し、ゆとりのある切り替えを実現した。

ヘッダーのスクロール連動エフェクト

固定ヘッダーのデザインは、スクロール状態によって変化させるのが現代的なLPの標準だ。ページ上部では透明で存在感を消し、スクロールすると背景色とぼかし効果（backdrop-filter）を適用して可読性を確保する。

酪酸菌青汁LPで実装したヘッダースクロール連動のコードはシンプルだ。

var header = document.querySelector('.site-header');
if (header) {
  window.addEventListener('scroll', function () {
    var scrollY = window.pageYOffset;
    if (scrollY > 80) {
      header.classList.add('header-scrolled');
    } else {
      header.classList.remove('header-scrolled');
    }
  }, { passive: true });
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s;
}
.site-header.header-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

{ passive: true } オプションは、このイベントリスナーが preventDefault() を呼ばないことをブラウザに伝える。スクロールイベントは高頻度で発火するため、このオプションがないとブラウザはスクロールのたびに「このリスナーがスクロールを止めるかもしれない」と判断し、描画をブロックする。結果としてスクロールがカクつく原因になる。passive: true を指定するだけで、スクロール体験が目に見えて改善される。

backdrop-filter: blur(12px) は、ヘッダーの背後のコンテンツをぼかすCSSプロパティだ。rgba(255, 255, 255, 0.92) の半透明白背景と組み合わせることで、Apple風のすりガラス効果が実現できる。12pxというぼかし量は、背後のテキストが完全に読めなくなる程度で、ヘッダーのテキストとの干渉を防いでいる。

全ページCTA配置の設計思想

LPのコンバージョンを左右する最も重要な要素がCTA（Call to Action）ボタンの配置だ。「CTAはページ下部に1つ」という設計は、長いLPでは致命的な機会損失になる。

酪酸菌青汁LPでは、全セクションの末尾にCTAを配置する方針を採用した。ヒーローセクション、成分説明、メカニズム解説、お客様の声、価格比較、FAQ——どのセクションでコンバージョン意思が生まれても、すぐにアクションできる設計だ。

ただし、全セクションにCTAを置くと「しつこい」印象を与えるリスクがある。酪酸菌青汁LPでは、CTAのデザインを2段階に分けることでこの問題を解消した。

メインCTA（ヒーロー、価格セクション）は高い視覚的インパクトを持つデザインにした。

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: var(--amazon);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 15px rgba(255, 153, 0, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 153, 0, 0.5);
}

セカンダリCTA（中間セクション末尾）はテキストリンク+矢印の控えめなデザインにした。これにより、CTAが常に視界に入りつつも、コンテンツの読書体験を妨げない絶妙なバランスを実現している。

Amazonの「カートに入れる」ボタンのオレンジ（#ff9900）をCTAカラーに採用したのは意図的だ。Amazon購入ページに遷移することが明確に伝わり、ユーザーの心理的ハードルを下げる効果がある。

ベンチマーク分析から始めるリデザインプロセス

ここまで個別のテクニックを紹介してきたが、これらは闇雲に適用したわけではない。リデザインの起点は、3サイトのベンチマーク分析だった。

酪酸菌青汁LPのリデザインでは、健康食品EC大手3社のLP（具体的なサイト名は非公開）を分析対象とした。分析の軸は以下の5項目だ。

ファーストビューの構成では、3社中2社がフルスクリーン写真+オーバーレイテキストを採用しており、アイコン+テキスト構成は1社のみだった。この結果から、フリー素材写真の全面活用を決断した。

ページ速度では、Google PageSpeed Insightsでモバイルスコアを計測した。上位サイトは90点以上を維持しており、WebP変換と画像最適化の重要性が裏付けられた。

アニメーションの使用状況では、3社すべてがスクロール連動のアニメーションを実装していた。ただし過剰なアニメーション（パララックスの多用やページ遷移アニメーション）は1社のみで、他の2社は控えめなフェードインに留めていた。この分析結果を踏まえ、酪酸菌青汁LPでもフェードイン+カウントアップに限定し、装飾過多を避けた。

CTA配置では、3社すべてが複数箇所にCTAを配置していた。うち1社はすべてのセクション末尾にCTAを配置するパターンで、コンバージョン率が高いと推測された（サイトの成長速度から間接的に判断）。

構造化データでは、3社中2社がProductスキーマを実装し、Google検索でリッチリザルト（価格・評価の星表示）を獲得していた。この分析結果を受け、酪酸菌青汁LPでもProductスキーマを実装し、AggregateRating（平均評価4.4、レビュー数18件）を含めた。

このベンチマーク分析は、リデザインの方向性を「感覚」ではなく「データ」で裏付けるために不可欠なプロセスだった。3社の共通パターンは業界のベストプラクティスと見なし、差異があるポイントは自社の状況に合わせて判断した。

まとめ：10のテクニックを実装した結果

酪酸菌青汁LPの全面リデザインで実践した10のテクニックを振り返る。

フリー素材画像の戦略的活用は、ブランドカラーとの親和性を基準にUnsplash写真を選定することで、プロフェッショナルなファーストビューを実現した。WebP変換による97%のファイルサイズ削減は、モバイルでの表示速度を劇的に改善した。SVG図解の3種制作は、科学的メカニズムを視覚的に伝達する手段として機能している。IntersectionObserverによるスクロールリビールアニメーションは、コンテンツの「登場感」を演出し、読了率の向上に寄与した。数値カウントアップアニメーションは、イーズアウト・キュービックの減速感で数値の説得力を強化した。

英語+日本語2段構成のセクションラベルは、letter-spacing一つで印象を変える手軽なテクニックだ。ウォーターマークテキストは opacity: 0.04 という繊細な設定で空気感を演出した。ダークセクションの戦略的導入は、視覚的リズムを生み出し、重要メッセージへの注目を集めた。ヘッダースクロール連動はbackdrop-filterで現代的なすりガラス効果を実現し、全ページCTA配置はメイン/セカンダリの2段階デザインで「しつこさ」を回避しつつ機会損失を防いでいる。

これらのテクニックは、有料ツールや高額な外注に依存しない。HTML、CSS、JavaScriptの標準的な機能と、フリー素材の組み合わせで成り立っている。地方の中小企業であっても、自社のリソースで十分に実装可能だ。重要なのは、個々のテクニックを闇雲に適用するのではなく、ベンチマーク分析に基づいて「なぜそのテクニックが必要か」を明確にしてから取り組むことだ。実際のLPは aojiru.kyotanishokai.co.jp で確認できる。