【ナノバブル水素水サーバー】の紹介LP

使用スキル

ejs / Sass / jQuery / JavaScript

CSS設計手法

BEM

概要

全1ページ

ナノバブル水素水を手軽に作れるサーバー、水素ポットの紹介LPで、Figmaで作成されたデザインのコーディングを担当しました。

仕様書に従い、主に下記を実装しました。
・「どんなお部屋にもピッタリ」は、画面幅が狭まった際、横にスクロールできるように
・「使い方はいろいろ」は、スライダーで実装し、左右に動かせるように
・「他のお水との比較」の表は、画面幅が狭まった際、横にスクロールできるように
・「お客様の声」は、一覧をスライダーで表示の上、アイテムの中身はアコーディオンで開閉できるように
・Q&Aはアコーディオン表示

仕様書にはありませんでしたが、実務を想定した実装を行うため、下記を追加実装しました。
・ヘッダー項目が多いため、ブラウザ幅に合わせてコンテンツを絞って表示されるように
・ドロワーメニューはどの端末で見ても崩れにくくするため、インフォメーション部分は下部固定に
・CTAボタンをより目立たせるため、アニメーションをつけて強調