ホームページのリニューアル
当事務所のホームページをリニューアルいたしました。
リニューアルの背景
旧サイトは開業時に急ごしらえで制作したもので、以下の課題を抱えていました。
- デザインの統一感が不十分
- SEO対策が不十分で検索に引っかかりにくい
- お知らせの更新作業が煩雑（結果、更新頻度が低下…）
これらを解消するため、思い切って全面リニューアルを決断しました。
技術スタックの刷新
| 項目 | 旧サイト | 新サイト |
|---|---|---|
| フレームワーク | Flask | Nuxt.js |
| スタイリング | Bootstrap | Tailwind CSS |
| コンテンツ管理 | 静的ページ手動更新 | sqlite3 |
モダンな技術スタックを採用することで、保守性と拡張性が大幅に向上しました。
AI活用の舞台裏
今回のリニューアルでは、AIアシスタント（Claude）を活用して制作を進めました。その過程で得た知見を共有します。
大原則：小さく分けて、確認しながら進める
最初は設計書を作って一気に作らせようとしましたが、これは失敗でした。大量のコードを一度に生成すると、デバッグが追いつかなくなります。
結局、以下のように工程を分割して進めることで、着実に完成へと近づけました。
- トップページの制作
- 各ページの制作
- リンク・導線の確認
- ブログ機能の実装
- お知らせ欄との連携
- お問い合わせフォームの制作
- デザインの微調整
デザインの伝え方に工夫が必要
AIは文章の理解は得意ですが、「CSSを読んでレイアウトを把握する」のは苦手なようです。
そこで活用したのが Figma MCP という連携機能。旧サイトのデザインをFigmaに取り込み、それをAIに読み込ませることで、デザインの再現精度が格段に上がりました。
人間の目でチェックすべきポイント
AIに任せきりにせず、以下の点は特に注意してチェックしました。
- セキュリティ対策：ログイン処理など、基本的なセキュリティ対策が甘い場合があり、手動で強化
- デザインの「AIっぽさ」：どうしても無難で特徴のないデザインになりがち。他社サイトを参考に、具体的な指示を出して調整
特にトップページのファーストビューは、何度もやり取りを重ねて仕上げました。
おわりに
リニューアルを通じて、より見やすく、情報を更新しやすいサイトになりました。
今後はお知らせやブログの更新頻度も上げていく予定です。電気設備に関するお役立ち情報なども発信していきますので、どうぞよろしくお願いいたします。
ご質問やご相談がございましたら、お気軽にお問い合わせフォームよりご連絡ください。