この度、Basiyのコーポレートサイトを全面リニューアルしました。今回のリニューアルでは、AI技術を開発プロセスに取り入れ、デザイン・コーディング・品質検証の各工程を効率化しています。
本記事では、リニューアルの内容と、AIをどのように活用したかについてご紹介します。
Before / After
デザインコンセプトは「誠実な距離感」。地域の中小企業や個人事業主の方が安心して相談できる、信頼感と親しみやすさの両立を目指しました。
旧サイトでは情報が詰め込み気味で、初めて訪れた方にとってはどこを見ればいいのか迷いやすい構成でした。新サイトでは、各サービスの情報を整理し、余白を活かしたレイアウトに刷新。スマートフォンでの閲覧を前提とした設計に一新しています。
また、サービスページごとに「なぜBasiyに任せるべきか」「導入の流れ」「よくある質問」を統一フォーマットで掲載し、サービス比較検討がしやすい構成にしました。
何が改善されたか
見た目だけではなく、サイトの裏側も徹底的に改善しました。Google PageSpeed Insightsによる計測結果は以下の通りです。
デスクトップではパフォーマンス95点・SEO100点を達成。モバイルでもパフォーマンス95点・アクセシビリティ96点と、高水準のスコアを記録しています。
主な技術的改善点としては：
- 表示速度の大幅改善 ― 画像をすべてWebP形式に変換し、総容量を約80%削減。CSSとJavaScriptもminify（圧縮）を実施し、ページの読み込み速度を向上させました。
- アクセシビリティの強化 ― テキストと背景のコントラスト比の見直し、キーボード操作対応、スキップリンクの実装など、すべての人が利用しやすいサイトを目指しました。
- SEOの基盤整備 ― 構造化データ（JSON-LD）の実装、各ページのメタ情報設定、パンくずリストの設置など、検索エンジンがサイト内容を正確に理解できる構造にしています。
- セキュリティ対策 ― 全PHPファイルを対象にセキュリティレビューを実施。入力値の検証やエスケープ処理を徹底し、脆弱性のないコードであることを確認済みです。
これらは、コーディングの品質が直接影響する領域です。表に見えない部分こそ、プロの仕事が問われるところだと考えています。
AIをどう活用したか
今回のリニューアルでは、AIを開発パートナーとして積極的に活用しました。具体的には、コーディングの補助、デザイン実装の検証、品質チェックの自動化に使用しています。
ただし、AIに丸投げしたわけではありません。サイトの設計方針、デザインコンセプト、セキュリティの最終判断はすべて人が行っています。意図しない挙動やセキュリティリスクがないかを検証しています。
「AIで作ったサイト」と聞くと、どこかで見たようなテンプレート的なデザインや、不自然な文章を想像される方もいるかもしれません。しかし、それはAIの問題ではなく、使い方の問題です。適切な設計指示を出し、出力を人の目で検証・調整すれば、AIが作ったことは見た目ではわかりません。
むしろ、AIの強みは人だけでは難しい網羅的なチェックにあります。今回のリニューアルでも、AIがコントラスト比の不足、メタ情報の欠落、CSSの詳細度の競合といった、人の目では見落としやすい問題を検出してくれました。これらを一つひとつ修正した結果が、先ほどの高いスコアに繋がっています。
AIを使う側のリテラシーが重要
AI開発ツールは、今や誰でもアクセスできるものになっています。しかし、同じツールを使っても、出力の品質には大きな差が出ます。その差を生むのは、指示の出し方（プロンプト設計）、出力の検証プロセス、そしてセキュリティ意識です。
AIが書いたコードにも脆弱性が含まれることがあります。Basiyでは、AIを活用した開発においても、攻撃者視点（Black Hat）と防御者視点（White Hat）の2段階でセキュリティレビューを実施。脆弱性がないことを確認した上でサイトを公開しています。
AIを「使えること」ではなく「正しく使えること」。それが、これからのWeb制作に求められるリテラシーだと考えています。
今後もAI技術を積極的に活用しながら、地域のお客様に最適なデジタルソリューションを提供してまいります。
ホームページの新規制作やリニューアルをご検討の方は、お気軽にご相談ください。
