生成AIの登場によるホームページ制作最新事情

生成AI登場によるホームページ開発事情

数あるサイトの中から弊社のサイトを訪問していただき誠にありがとうございます。 今回はAIやSNSが一般化した現在において、ホームページ制作について見てみたいと思います。

生成AIの登場に伴い、多くの言語、画像、動画コンテンツなどが誰でも簡単に制作できるようになりました。それらの複合コンテンツであるWEBサイト（ここではホームページと呼びます）も当然ながらその対象となり、将来は誰でも簡単に高いクオリティのホームページを制作することが可能となると考えられます。 例えば、現時点でChatGPT単体でも可能ですが、開発に関する周辺知識がある程度求められ、誰でも可能とは言えません。よってノーコードサービス（後述）などを利用して作ることが一般的です。 ここでは、現在の最新事情を検討していきたいと思います。

ホームページ作成の一般的な手順

プロジェクトの目標と要件によって細かい部分は異なりますが、基本的なWEBサイト制作の手順は次のとおりです。

• 目的と目標を定義: プロジェクトを開始する前に、その目的と目的を明確に定義することが重要です。何を達成したいのか、ターゲットは誰かなど、市場調査を実施して競合と業界の動向を理解するなどの検討が必要です。簡単なカテゴライズとしては、コーポレートサイト、採用サイト、ECサイトなどに分けることができ、サイトのデザインと必要な機能を選定することに寄与します。
• コンテンツと基本構造計画: 目的に基づいて、コンテンツと構造を計画します。例えば、ワイヤーフレームのスケッチや、サイトのさまざまなページやセクションをレイアウトするサイトマップの作成などで全体像を掴みます。またコンテンツ戦略を策定し、コンテンツの作成と編成に関する計画を立てることも重要です。 ユーザーがサイト内の回遊についても検討することが必要です。この基本構造は、後工程では変更が難しいため、慎重に行う必要があります。
• プラットフォームまたはテクノロジーを選択: 1,2の結果に基づき、実際にホームページを開発・運用するプラットフォームとテクノロジーを選定します。有名なところではWordPressなどのコンテンツ管理システム、Shopifyなどの電子商取引プラットフォーム、スクラッチ開発におけるHTML、CSS、JavaScript、VueやReactなどのフロントエンドプラットフォーム,Ruby on RailsやDjangoなどのバックエンド フレームワークなどの活用で開発を効率よく進めることができます。
• デザイン・ユーザーインターフェイス(UI)をデザイン: ブランドガイドライン、配色、タイポグラフィ、画像、その他のUI要素を考慮して、Webサイトの各ページのビジュアル デザインを作成します。 Adobe XD、Figma などのツールを使用して、モックアップやプロトタイプを作成できます。
• フロントエンドの開発: HTML、CSS、JavaScript を使用して、UI デザインに命を吹き込むフロントエンドコードを開発します。 Webサイトが応答性があること、つまり、さまざまな画面サイズやデバイスに適応できることを確認してください。BootstrapやReactなどのサードパーティのライブラリとフレームワークを統合して、開発を合理化し、機能を強化することもできます。
• バックエンドの開発: 必要に応じて、フォーム送信、データベース統合、動的コンテンツ生成などの機能をサポートするために必要なサーバー側ロジックを構築します。 選択したテクノロジーに応じて、Python、Ruby、PHP、Nodeなどの言語でのコードの作成が必要になる場合があります。
• テストと最適化: 複数のブラウザ、オペレーティングシステム、デバイスで Webサイトをテストします。 コードの縮小、画像の圧縮、キャッシュ戦略の実装により、パフォーマンスを最適化します。 すべてのユーザーがコンテンツに簡単にアクセスできるように、Webサイトがアクセシビリティ基準を満たしていることを確認してください。
• デプロイと運用・保守・分析: 開発が完了したらホスティングプロバイダーまたはクラウドサービスにデプロイします。トラフィック、エンゲージメント指標、ユーザーからのフィードバックを定期的に監視して、改善すべき領域を特定します。 最適なパフォーマンスとセキュリティを確保するために、サイトを定期的に更新および保守する必要があります。またバグを修正し、セキュリティの脆弱性に迅速に対処します。

各ステップでは、計画、セキュリティ、Web開発のベストプラクティスの理解が必要です。

ホームページの種類

上記の中では特に1,2の上流部分が重要で、その内容によってホームページの種類が決まります。以下にビジネスでよく利用されるホームページの種類を挙げます。

• コーポレートサイト: 企業や組織の窓口となるいわゆるホームページと呼ばれるものになります。企業や組織について、ステークホルダーが初めにコンタクトすることが多いため、ここでイメージや印象が形成されることが多く、あまりに簡易的なものはイメージの悪化にもつながる可能性もあり、注意が必要です。コーポレートブランディングやその発信の起点とすることもできます。
• リクルートサイト: 新卒や中途採用専用のホームページです。コーポレートサイトに含まれることもありますが、より深く企業情報の発信をしたり、求職者に興味を持ってもらうコンテンツの配信を行う場合に構築されます。分離することで更新も行いやすくなり、柔軟性を高めることができます。有能な人材募集にはもはや必須となっています。
• コンテンツ管理システム (CMS): これらのプラットフォームは、広範なコーディング知識を必要とせずに Webサイトのコンテンツを管理するための、事前に構築されたテンプレートと使いやすいインターフェイスを提供します。 人気のある CMSフレームワークには、WordPress、Wixなどがあります。用途としては、企業情報発信や、ブログの発信、動画、画像コンテンツ、サービスの配信などが挙げられます。
• 電子商取引プラットフォーム（EC）: オンラインストアを構築する場合は、Shopify、Baseなどの電子商取引プラットフォームの使用を検討することができます。 これらのプラットフォームは、事前に構築されたテンプレート、支払いゲートウェイの統合、在庫管理機能などを提供しており、簡単にECサイトを構築できます。
• ランディングサイト（ページ）: 特定のサービスや商品を広告し、成約に結びつけることを目的としたサイトです。基本的には１ページで構成されることが多く、簡潔に顧客への訴求を行います。

その他、商品やサービスをまとめたサービスサイト、企業や組織のブランドを高めるブランディングサイト、キャンペーンサイトやポータルサイト,会員向けサイト、社内向けサイト、ポータルサイトなどもあります。

ホームページ作成方法の選定

自らホームページを構築する場合、これらを完全に遂行するためには、労力と時間、技術的専門知識などリソースが必要となります。プロジェクトの目的にもよりますが、これらを解決するサービスが選択可能です。作成に関する方法は以下となります。

• 自社でスクラッチ開発（白紙から開発）
• 生成AIで開発
• ノーコードツールを利用して開発
• 他社に依頼して制作　

難易度は１が最高で、費用は４が最高となります。それぞれのメリットとデメリットを見ていきます。

自社でスクラッチ開発（白紙から開発）:

HTML,CSS.Javascriptやフロントエンドフレームワーク、バックエンドフレームワークを利用して自社で開発します。

メリット：

• OSSを利用すれば費用はほとんどかからない。
• 自由にカスタマイズ可能
• 将来のメンテナンスやカスタマイズが楽

デメリット：

• 専門知識がある人材が必要。
• リリースまでに時間がかかる。
• 運用からトラブル対応まで自社で行う必要がある。

生成AIで開発:

ChatGPTなどの生成AIを活用しながら自社で開発します。

メリット：

• OSSを利用すれば費用はほとんどかからない。
• 自由にカスタマイズ可能
• 将来のメンテナンスやカスタマイズが楽
• 完全自動は現時点では難しいが、不足する知識を補いながら開発が可能。

デメリット：

• 生成情報の正確性を見極める必要があるため最低限専門知識がある人材が必要。
• 使わないよりは早いが、リリースまでに時間がかかる。
• 生成AI特有のリスク（誤情報によるセキュリティリスク、著作権侵害、倫理など）に対応する必要がある
• 運用からトラブル対応まで自社で行う必要がある。

ノーコードツールを利用して開発:

コードを打つ必要がないノーコードツールを利用して開発します。これらを活用することで誰でも簡単にホームページを所有できます。

メリット：

• 費用は月額で予算に合わせて利用できる。
• 専門知識がそれほど必要なく、プランによってはサポートがある。
• プランによっては運用・分析もサポートされるケースがある。
• AI利用によるプランも存在。

デメリット：

• 月額費用がかかり、プランによってはトータルコストが膨らむ可能性がある。
• 全てをサービス会社に依存することになり、サービス停止などのリスクがある。
• デザインやUIについて、サービスにもよるが自由度では他に比べて比較的低い傾向がある。

他社に依頼して開発:

フリーランスや、WEB制作会社などに依頼して開発します。

メリット：

• 予算にもよるが、比較的オリジナリティある高品質なサイトが構築可能。
• 基本合意がしっかりしてあれば、お任せで本業に集中できる。
• 運用・分析などにも対応する場合、本業に集中できる。

デメリット：

• 内容にもよるが、費用が最もかかる。
• 不誠実な会社や、個人や、イメージが噛み合わないなど、依頼先選定コストがかかる。

どれも一長一短があるため、最適な選定はそれぞれの事情と予算に合わせてということになります。またビジネスにおけるスタート期か成熟期などによってもその選定は異なるでしょう。すでにサイトをお持ちの場合は、画像などのデジタル資産の有効活用等も考える必要があります。

作成方法選定時の注意

外部サービスを利用して制作する際に追加して留意すべき点がいくつかあります。

• 拡張性と柔軟性：ビジネスの成長に合わせてトラフィックの増加に対応し、新しい機能に対応できるように拡張できるかどうか。
• サポートとコミュニティ： 十分なサポートがなければ、トラブルを生む可能性があります。またそれがなくても強力な開発者コミュニティにより、一般的な問題の解決策を見つけやすくなり、ベストプラクティスを常に最新の状態に保つことができます。
• 長期的なメンテナンスコスト： 追加のメンテナンスコストはかからないかどうか。セキュリティ対応が不十分な場合バグ修正やセキュリティ パッチが必要になる場合があり、その対応が必要です。
• チームまたは潜在的な開発者のスキル： 選定方法は自ずとそのスキルレベルによって決定されます。経験がない場合は、その習得に時間がかかります。しかし、簡単に始められるものはスキルも育たず、サービス会社に依頼し続けなければなりません。長期的な視点からの選定が必要です。

ホームページ作成時に想定される課題

どの方法を選ぶにしても、ホームページの開発には、小さいトラブルから大きな障害に至るまで、さまざまな課題や問題が伴うことが想定されます。発生する可能性のある一般的な問題をいくつか示します。これらの問題を想定し、方法を選定することが求められます。

• ブラウザ間の互換性: レンダリングエンジンとディスプレイ解像度の違いにより、Webサイトがさまざまなブラウザやデバイス間で正しく表示され、機能することを確認するのは困難な場合があります。
• セキュリティの脆弱性: WebサイトはSQLインジェクション、クロスサイトスクリプティング(XSS)、分散型サービス拒否(DDoS)などのサイバー攻撃から保護する必要があります。 堅牢なセキュリティ対策の実装は複雑で時間がかかる場合があります。これは開発時だけではなく運用ステージにおいても検討される必要があります。
• パフォーマンスの最適化: 読み込み時間が遅いと、直帰率が高くなり、ユーザー エンゲージメントが低下する可能性があります。サイトのパフォーマンスを最適化するには、画像圧縮、コードの最小化、遅延読み込みなどの技術が必要です。
• ユーザーエクスペリエンスとデザイン: シームレスで直感的なユーザー エクスペリエンスを作成することは、特に Web サイトに複雑な機能がある場合、またはユーザーからの大量のデータ入力が必要な場合に困難になることがあります。 シンプルさと機能性のバランスを取るのは難しい場合があります。
• アクセシビリティへの準拠: 障害を持つ人々がサイトにアクセスできるようにするには、画像にaltタグを追加すること、ビデオにクローズドキャプションを提供すること、キーボード ナビゲーションが適切に機能することを確認することが含まれます。 アクセシビリティ標準に準拠すると、開発プロセスに追加の作業と複雑さが追加される可能性があります。
• コンテンツ作成: 対象読者の共感を呼ぶ、魅力的で有益でよく書かれたコンテンツを作成するのは困難な場合があります。 高品質のコンテンツは、トラフィックを促進し、検索エンジンのランキングを向上させ、信頼性を確立するのに役立ちます。
• プロジェクト管理: サイト開発プロジェクトの管理には、デザイナー、開発者、関係者、クライアント間の調整が必要です。 範囲、期限、成果物に関して全員の意見を一致させておくことは、ロジスティック上の課題となる場合があります。
• 技術的負債: ベスト プラクティスを見落としたり手抜きをしたりすると、開発プロセスの早い段階で近道を行ったために後で問題が発生する「技術的負債」が生じる可能性があります。 技術的負債に対処するには、既存のコードのリファクタリング、アーキテクチャ上の決定の再考、さらにはWebサイトの一部の完全な再構築が必要になる場合があります。

こうした問題が発生する前に予測対応することで、効果的に対処するための準備を整え、最終的にはサイトの品質を高め、開発をよりスムーズにすることができます。

最新のWEBテクノロジー

Web開発テクノロジーは急速に進化し続けており、よりリッチで高速、インタラクティブなWebサイトを作成するための機会を提供しています。 Web開発の現在の状況を形成する主なトレンドをいくつか紹介します。

• Jamstack: Jamstack は Javascript、API、Markup の略で、従来のモノリシック サーバーの代わりに静的サイトジェネレーター、クライアント側JS、およびAPIサービスを重視するWeb開発の最新のアプローチを指します。 このアーキテクチャは、従来のLAMPと比較して、パフォーマンス、セキュリティ、およびスケーラビリティが向上しています。
• プログレッシブWebアプリ(PWA): PWAはネイティブモバイルアプリとWebアプリケーションの利点を組み合わせており、ユーザーはWebアプリをホーム画面に直接インストールし、プッシュ通知を受信し、オフライン機能を楽しむことができます。
• サーバーレスコンピューティング: サーバーレスコンピューティングにより、開発者はインフラストラクチャのプロビジョニング、スケーリング、管理について心配することなくコードを実行できます。AWS Lambda、Azure Functions、Google Cloud Functions などの Functions-as-a-Service (FaaS) プロバイダーを使用すると、開発者はイベントに応答する小さなモジュール形式のコードを作成して、運用オーバーヘッドを削減できます。
• コンテナ化: コンテナ化により、開発者はソフトウェアとその依存関係をパッケージ化できるため、環境全体で一貫した展開が可能になります。DockerやKubernetes などのツールは、大規模なコンテナ管理を簡素化するために人気を集めています。
• シングルページアプリケーション (SPA): SPAは単一の HTML ページを読み込み、ユーザーの操作に基づいてそのページのコンテンツを動的に変更することで、高速でアプリのようなエクスペリエンスを実現します。 React、Angular、Vue.js などのフレームワークを使用すると、SPA を効率的に構築できます。
• ヘッドレスCMS: Webサイトのバックエンドとフロントエンドを分離することで、柔軟性が向上し、コンテンツの更新が容易になります。ヘッドレスCMSセットアップでは、バックエンドはコンテンツリポジトリとしてのみ機能し、RESTfulAPIまたはGraphQLクエリを介してJSONペイロードをフロントエンドに配信します。 例としては、Strapi、Prismic、Contentful などがあります。
• 静的サイトジェネレーター(SSG): SSG はマークダウンソースまたはテンプレートソースから静的 HTMLファイルを生成し、パフォーマンスを向上させ、サーバーの負荷を軽減します。 これらはJamstackアーキテクチャとうまく統合されており、GatsbyJS、Hugo、イレブンティなどの例が注目を集めています。
• レスポンシブデザイン: モバイルの使用量は増加し続けており、デバイスの種類や方向に応じてレイアウト、スタイル、動作を調整するレスポンシブデザインのアプローチが必要です。 メディアクエリ、グリッドシステム、柔軟なフォントサイズなどの技術により、応答性が向上します。
• バージョン管理システム (VCS): Gitは依然としてバージョン管理の主要なツールであり、チーム間のコラボレーションを促進し、変更を追跡し、変更の履歴記録を維持します。
• 人工知能(AI)と機械学習(ML): AIおよびMLアルゴリズムは、パーソナライズされた推奨事項、自然言語処理、チャットボット、予測分析のためにWebサイトに統合されています。

これらの最新のWeb開発テクノロジを理解し、組み込むことで、全体的なユーザーエクスペリエンスが向上し、開発プロセスが合理化され、革新的で競争力のあるWebサイトを開発することが可能となります。

生成AIによるWEB開発の特徴

生成AIを使用してWebサイトを開発することは可能ですが、これはまだ比較的新しい分野です。 生成AIは、Web開発の特定の側面、特にコードの生成とUIの設計に関連する側面を自動化できます。 生成AIがサイト開発を支援できる方法をいくつか紹介します。

• 自動コード生成: 生成AIモデルは、ボタン、フォーム、メニューなどの標準コンポーネントのコード スニペットを自動的に生成できるため、開発者の時間と労力を節約できます。 これらのモデルは、大規模なデータセットからパターンと構造を学習し、それらの洞察を適用して構文的に正しいコードを生成できます。
• インテリジェントなフロントエンドプロトタイピング: 生成AIは、色、テーマ、レイアウト設定などの指定されたパラメーターに基づいて初期デザインドラフトを作成できます。 ユーザーは、生成されたプロトタイプを操作して、望ましい結果が達成されるまでさらに反復することができます。
• スタイルの転送: 生成AIは、あるデザイン要素から別のデザイン要素にスタイルを転送し、学習したパターンと美学を適用して、視覚的に一貫したWebサイトを迅速に作成できます。
• パーソナライズされたエクスペリエンス: 生成AIモデルはユーザーの行動を分析し、Webサイトのコンテンツを適応的に変更することで、ユーザーエクスペリエンスを強化し、エンゲージメントを高めることができます。
• カスタマイズ可能なテンプレート: 生成AIモデルによって作成された事前に設計されたテンプレートは、Webサイト開発の開始点として機能し、技術者以外のユーザーでもシンプルなサイトを効率的に作成できます。

生成AIによるWEB開発の課題

生成AIはWebサイト開発の加速と簡素化を約束しますが、次のような限界と課題もあります。

• 品質保証: AIによって生成されたコードは時間を節約できますが、精度、効率性、さまざまなブラウザーの種類やバージョンとの互換性を確保するには、徹底的なテストが不可欠です。
• 限られた創造力: AIは、定義された制約内で人間の創造性を模倣することはできますが、真に独創的なアイデアを生み出したり、無制限の設計問題を独自に解決したりするのは困難です。 通常、結果を検証し、プロジェクトの目標との整合性を確保するには、人間による監視が必要です。
• 著作権・倫理的懸念: AIの能力が高まるにつれて、著作権侵害、知的財産の所有権、公平性に関して倫理的懸念が生じます。 盗作を回避し、AIによって生成されたコンテンツの帰属が適切に帰属するように注意する必要があります。
• セキュリティリスク：生成AIの出力に問題がないとは言い切れません。現にセキュリティリスクを内包した回答を行うことが確認されています。そのため、それに対処することができなければ問題を深刻にする可能性があります。

近い将来想定されるWEB開発の進化

Webサイトの開発に使用される方法論は、主に人工知能、自動化、ローコード/ノーコード プラットフォームの進歩、コンポーネント ライブラリとフレームワークの改善によって、今後数年間で大幅な変化が起こると予想されます。 近い将来のWeb開発手法の進化に関するいくつかの予測は以下のようなものとなります。

• ローコード・ノーコードプラットフォーム: ローコードノーコードプラットフォームの成長により、経験の浅い開発者、非技術専門家が Web開発に積極的に参加できるようになり、プロセスが民主化され、焦点が変わる可能性があります。 従来のフルスタック開発者から民主的開発者へと変貌する可能性があります。
• ビジュアルプログラミングインターフェイス: テキスト形式ではなくコード構成のグラフィック表現を利用するビジュアル プログラミングインターフェイスの採用が増えることで、初心者にとってWeb開発が容易になり、参入障壁が軽減されます。
• コンポーネントライブラリとフレームワークの改善: マテリアルUI、Ant Design、Bootstrap などのコンポーネント ライブラリとフレームワークの進歩により、開発プロセスが迅速化され、開発者はカスタマイズや微調整に重点を置きながら、機能豊富な Webサイトをより迅速に構築できるようになります。
• より効率的なコラボレーション: 新しいコラボレーションツールとワークスペースにより、開発者間のリアルタイムのコラボレーションが可能になり、透明性、コミュニケーション、同時進行が促進されます。
• 人工知能の活用の拡大: AIは、自動化されたコードの提案、インテリジェントなデバッグ、エラー予測、レコメンダーシステムにおいてより大きな役割を果たし、開発者がより効率的に障害を克服できるようになります。
• 継続的な導入と統合: 継続的な統合やデリバリーなどのDevOpsプラクティスが普及し、開発ライフサイクルが合理化され、機敏で漸進的な改善が促進されます。
• 標準化とモジュール性: モジュールとコンポーネントの業界全体の標準化により、移植性と相互運用性が促進され、プロジェクト間を移動する際のコンテキスト切り替えの負担が軽減されます。
• プログレッシブWebアプリケーション(PWA) への移行: パフォーマンス、インストール、信頼性の点での利点を考慮すると、プログレッシブ Web アプリケーション開発は今後ますます注目を集め、方法論の選択に影響を与えると考えられます。
• プライバシーとセキュリティの重要性の高まり: プライバシーとセキュリティへの懸念の高まりにより、Web 開発手法には、より強力な暗号化方式、安全な送信プロトコル、透明性のあるプライバシーポリシーが組み込まれるようになる可能性があります。
• 使いやすさと包括的なデザインの重視: 方法論ではアクセシビリティ、包括性、ユーザー エクスペリエンスが優先され、より共感的で多様性があり、責任あるデザイン原則への移行が推進されます。 この分野が進化し続ける中、常に変化するデジタル環境で成功を目指す開発者のみならずノンプログラマーのビジネスユーザーにとって、開発の最新情報を常に把握し、それに応じて適応することは引き続き重要です。

まとめ

生成AIの進化は、この分野において劇的な変化をもたらすことが想定されます。これは利用ユーザーおよび開発者に大きな変化を及ぼします。誰でも簡単に安くホームページを持つことができる時代が訪れるでしょう。しかし、その一方均質化（コモディティ）が起こり、差別化するには依然人の手が必要となるでしょう。それはデザインのみならず、技術バックグランド、文化的バックグランド、観念的バックグランド、ビジネス的バックグランドなど多岐にわたります。特に細やかな感性などAIに表現しにくい部分がますます重要となると考えれます。その意味で、現在と本質は変化せず、そのクオリティは依然制作する者の手にあり続けるでしょう。
弊社では、自社開発のサポート、弊社によるフルスタックの制作までお客様の事情に合わせたサポートを行っております。お気軽にお問い合わせください。

生成AIの利用は責任が伴います。注意して利用してください。生成されたコードがセキュリティ対応がされていないことなどがあります。