【自主制作】AIチャットボット導入LP
デザインデータをもとに、保守性を考慮したコーディングとWordPress実装を担当しました。
※Basic認証 ID: user / PW: 12345
Overview
- 担当範囲
- コーディング、WordPress構築、運用設計 Design: acoco1102様（BtoB ランディングページ ワイヤーフレーム）
- 制作期間
- 9日間
- 課題
- 非エンジニアも管理画面から運用や修正を行えるよう制作
- 解決策
- ACF Blocksを利用し、管理画面からレイアウトが組めるカスタムブロックを実装。
ブロック単位での追加や編集を可能に。
Features
直感的に更新できる管理画面
ACF Blocksを活用し、管理画面から直接コンテンツを編集できるよう構築しました。
プレビューを確認せずとも、管理画面上のレイアウトで直感的に更新が可能です。
LP全体の要素をオリジナルブロック化
「ヒーロー」「導入事例」「よくある質問」など、LPに必要な全セクションをコンポーネントとして独自ブロック化しました。
パズルのようにパーツを組み合わせるだけで、誰でも簡単に直感的なページ構築が行えます。
レイアウトが崩れないリスト追加
クライアント側で何件でも自由に追加・編集できるリピーター機能を実装。
パーツが4件、5件と増えた場合でも、CSSのコントロールにより自動で3件ずつ綺麗に折り返され、デザインが崩れない設計です。
外部プラグイン連携とセクション制御
定番プラグイン「Contact Form 7」を組み込みつつ、管理画面より表示有無の切り替えを可能に。
急なメンテナンス時や運用の切り替え時には、チェック1つでセクション丸ごと非表示に切り替えられます。
リアルタイムで確認できるヘッダー連動
テーマカスタマイザーを拡張し、ヘッダーボタンの文言やリンク先を管理画面から変更できるようにしました。
変更内容は右側の画面へリアルタイムに反映され、キャンペーン等の急な運用変更にもノンコードで即座に対応可能です。
Tech Stack
- Frontend HTML5 / Sass / JavaScript
- CMS WordPress / PHP / ACF Blocks
- Tools VSCode / GitHub / Figma
このプロジェクトの詳細を確認する
※Basic認証 ID: user / PW: 12345