当サイトの静的LP

概要

当サイトのLPをポートフォリオとしても活用するために制作

使用技術

HTML / SCSS / JavaScript / gulp / PHP（PHPMailer）

制作ポイント

• 「お悩み → 解決策 → 選ばれる理由 → 実績 → 料金 → 制作の流れ → FAQ → 相談フォーム」の順に並べ、読み進めるほど疑問が減っていくようにしました。
• 相談への導線を切らさないように PCは画面右端、スマホは画面下部に追従CTAを配置。ファーストビューとフォームが見えている間だけ自動で隠れるので、邪魔にならず、常にフォームにアクセスできる。
• 入力でつまずかせないフォームにするために、 未入力や形式間違いは該当の入力欄を赤枠にして発見しやすくしています。予算の選択肢も用意し、最初のやり取りで話が進みやすいようにしています。
• キーボードでも操作できる — FAQのアコーディオンや追従CTAはマウスを使わなくても開閉・移動できるよう、aria 属性とフォーカス制御を入れています。
• サイト内の画像はWebPで書き出し（OGP画像のみJPG）、ファーストビューの画像だけ先読みする設定にして、表示を軽くしています。

URL