プロジェクト概要と役割

味の素冷凍食品株式会社様のコーポレートサイト内に、健康志向の高まりに応える「塩分に配慮した商品情報」を紹介するための特集ランディングページ（LP）を新規追加しました。

ターゲットは、塩分の摂取量を気にしつつも「おいしい食事」を求めている消費者です。私はこのプロジェクトにおいて、既存のウェブサイトシステムへの影響を最小限に抑えつつ、特集ページとして必要なデザインと機能性を両立させるフロントエンド実装全般を担当しました。

採用した技術スタック

• HTML5
• CSS3 (専用ファイルの追加)
• JavaScript (jQuery)
• Slick.js (カルーセルライブラリ)
• Google Fonts (Zen Maru Gothic)

サイト全体の基盤であるjQuery環境を踏襲しつつ、特集ページ固有の要件（カルーセル、アニメーション）を満たすためにSlick.jsなどを追加選定し、効率的な開発環境を構築しました。

私がこだわった設計と実装

既存システムとの「疎結合」な設計

最も重視したのは、運用中の大規模なコーポレートサイトに影響を与えないことです。既存の共通CSS（main.css）やJS（bundle.js）には手を加えず、この特集ページ（/genen/配下）専用のCSSファイル（index__2.cssなど）とJSファイル（index.jsなど）を完全に分離して読み込む構成を採用しました。

これにより、スタイルの競合（デグレード）を確実に回避し、将来的なページの更新や撤去が容易な、保守性の高い「疎結合」な実装を実現しています。

ユーザー体験を高めるレスポンシブ対応とUI演出

ターゲット層の多様な閲覧環境を想定し、PCからスマートフォンまで最適なレイアウトで閲覧できるレスポンシブデザインを精密に実装しました。

• 画像の最適化: PC用とスマートフォン用で画像を出し分けるため、has-spimg クラスやCSSカスタムプロパティ（--sp-bgimg）を用いた手法を採用しました。これにより、デバイス幅に応じて最適な画像のみを読み込み、ページの表示パフォーマンスを確保しています。
• インタラクティブなUI: 商品ラインナップ（#lineup02）にはSlickスライダーを導入し、限られたスペースでも多くの商品をインタラクティブに紹介できるよう工夫しました。
• 視線誘導のアニメーション: ページをスクロールするとコンテンツが順次フェードインするアニメーション（class="act delay200"などで制御）を実装し、ユーザーの視線を自然に誘導し、情報を読み進める楽しさを演出しました。

可読性とアクセシビリティへの配慮

健康情報を扱うページの特性とターゲット層を考慮し、可読性を高める工夫を行いました。優しく親しみやすい印象を与えるWebフォント「Zen Maru Gothic」を選定し、ページ全体のトーンを統一しました。

また、<section>, <h2>, <figure> などのセマンティックなHTMLマークアップを徹底し、ページの構造を明確にすることで、基本的なアクセシビリティ（a11y）を担保しました。