エンジニア向けメディアLP制作

エンジニア向けのオンラインメディアを紹介するランディングページのコーディングを担当した案件です。
若手・中堅・ベテランといったエンジニアのレベル別にコンテンツの活用方法を整理し、メディア全体の価値や掲載コンテンツの種類を分かりやすく伝える構成になっています。
デザインデータとテキスト・画像素材を支給いただき、それをもとに静的なLPとして実装しました。

• エンジニア向けの専門コンテンツが増える一方で、「どのコンテンツが誰向けなのか」が直感的に伝わりにくいという課題があった。

• 若手〜ベテランまで幅広い層のエンジニアが対象となるため、レベル感ごとのおすすめコンテンツや活用シーンを整理して見せる必要があった。

• 画像や装飾要素、セクション数が多いLPのため、スマホでの可読性 と スクロール負荷 に配慮したコーディングが求められた。

• 将来的なキャンペーンやメルマガ導線にも使えるよう、ヘッダー・フッターのCTAを分かりやすく設置する必要があった。

• デザインカンプをもとに、HTML/CSS（BEMライクなクラス設計）＋jQueryでLPをコーディング。

• 「about」「create content」「content type」「clear the task」など、多数のセクションを持つ構成を整理し、セクションごとに役割が分かるようにマークアップ。

• 若手・中堅・ベテランエンジニア向けのタブ切り替えUIを実装し、タブ選択に応じておすすめコンテンツ・事例・カード一覧が切り替わる動きをjQueryで実現。

• 円形レイアウト・フロー矢印・ステップ表示など、装飾要素の多いパーツもレスポンシブで崩れないようにレイアウトを調整。

• loading="lazy" を画像に付与するなど、LP特有の画像点数の多さに配慮し、初期表示のパフォーマンスにも気を配ったコーディング。

• PC／SPそれぞれでテキストの改行位置（<br class="hidden-pc"> など）を制御し、コピーの読みやすさとデザインバランスの両立を意識した実装。

• メディア全体のコンセプトやコンテンツの種類が、1ページで整理された形で伝えられるようになり、担当者様からは「社内説明や告知にも使いやすい」と評価いただきました。

• スマホ主体での閲覧を想定したレイアウトにより、レベル別のおすすめコンテンツや記事カードが縦スクロールでスムーズに追える構成になっています。

• 今後のキャンペーンやメルマガ登録などの導線を増やしていく際の、ベースLPとして活用いただいています。

※ 実数値（CV・流入など）はNDAの関係で非公開としています。