サンプルサイト：https://hizumippc.github.io/20260731houseclean/ デザイナーとの共同自主制作として実施。 デザイナー：N_STiLE https://www.foriio.com/pandasan686 デザイナーが顧客想定・カンプ制作を担当し、私がUI/UX・マーケティング観点からの改善提案とコーディングを担当しました。 ■設計・改善の考え方 「訪問者がどこから来て、何を見て、どう問い合わせに至るか」の導線を意識して設計 コーポレートサイトとして、訪問者が自分の目的に合った情報へ最短でたどり着けることを優先 ■情報設計・導線 元のカンプはコーポレートサイトとして制作されていたが、一部セクションにLP的な要素が混在し役割がどっちつかずになっていた コーポレートサイトとしての役割を明確化し、セクション構成を整理 「お悩み・ご要望」セクションはLP向きの訴求のためFAQとして再構成し、問い合わせへの背中を押す内容に刷新 ヘッダーは「ロゴ／電話／お問い合わせ」の役割を分離し、何を押せばいいか迷わせない設計に 「商品・サービス」メニューはホバーでドロップダウン展開し、各サービスへ2クリック以内でアクセスできる導線を確保 お問い合わせの経路はフォーム・電話・LINEの3つを用意し、ユーザーの状況や時間帯に合わせた接触を可能に ■デザイン改善 イラストと写真が混在していた素材を写真に統一し、信頼感・プロらしさを優先 視線誘導を意識し、コンテンツのまとまりを整理 左右に交互配置されていたレイアウトを「左：テキスト、右：画像」に統一し、視線の動きを減らして読みやすく 見出しを中央揃えから左揃えに変更（縦線の飾りは左揃えの方が自然に機能するため） スライダーや見出しを画像と重ならない位置に分離し可視性を向上 カンプになかったフッターを新たに設計・制作（ナビ・ロゴ・SNSアイコン・コピーライトを配置） ■SNS・レビュー埋め込みの削除判断 Instagram埋め込みはフォロワー獲得目的でない場合は効果が薄いと判断し、フッターのアイコンリンクに変更 Googleレビューは公式の無料埋め込みツールがなく、レビュー数が少ないと信頼感を損なうリスク・低評価が表示されるリスクがあるため削除 ■実装 キャンペーンバナー：JavaScriptで無限ループのスライダーを実装（3枚表示・5秒自動送り・左右ボタン操作対応） FAQ：アコーディオン形式で実装 レスポンシブ：画面幅100px単位で崩れを確認し970px・800px・700px・600pxの4ブレイクポイントを設定。どの幅でも違和感なく表示されるようシームレスに移行するよう調整 FVキャッチコピーバナー・フッターロゴは別途デザインも担当 使用技術：HTML / CSS / JavaScript