個人事業主やフリーランスとして活動を始め、ウェブ上での「店舗」となるホームページを作ろうと考えた時、多くの人が3つの壁にぶつかります。
業者への依頼は、費用が高い…
本格的なサイトを制作会社に頼むと、数十万円以上のコストがかかることも珍しくありません。
テンプレートは、デザインの自由が利かない…
WixやSTUDIOのようなノーコードツールは手軽ですが、「この部分だけ、もう少しこうしたい」という、細かなカスタマイズが難しいのが現実です。
ゼロからの学習は、時間がかかりすぎる…
HTMLやCSSを今から学ぶのは、あまりにも時間がかかります。
個人がホームページをゼロから作ることは案外ハードルが高いのです。この「費用」「自由度」「技術」という悩みを、一気に解決する方法が、本記事で解説する生成AIとHubSpotを活用するという新しいホームページの作り方です。 この記事では、プログラミング経験がなくても、AIを使いこなせれば、誰でも格安で「理想のホームページ」を実現できる、具体的なステップを解説します。
なぜ、ホームページに「HubSpot」を選ぶのか？
「ホームページ作成ツール」と聞いて、多くの方がWordPressやWix、STUDIOといったサービスを思い浮かべるかもしれません。おそらく、HubSpotの名前を挙げる方は、非常に少数派でしょう。 ただ、ホームページ作成に特化したツールを選んでしまうと、月々の費用が嵩むだけでなく、ツール間の連携やデータの管理も非常に大変になります。
HubSpotを土台に選ぶ最大の理由は、こうした問題を根本から解決してくれる、オールインワンのプラットフォームだからです。ホームページ作成はもちろん、その後のマーケティング活動に必要な、ありとあらゆる機能が一つになっています。具体的には、以下のようなことが可能になります。
フォーム作成と顧客データ蓄積
「お問い合わせ」や「資料請求」のフォームを簡単に設置でき、お客様の情報は、自動でHubSpotの顧客リスト（CRM）に蓄積されます。
メールマガジン配信
CRMに蓄積された顧客リストに対して、メールマガジンやステップメールなどを配信できます。
データの可視化と分析
蓄積された顧客データを元に、どのページから問い合わせが多いのか、どんなお客様がサイトを訪れているのかなどを分析し、グラフなどで分かりやすく表示（ダッシュボード作成）できます。
ここで紹介した機能は、HubSpotができることのほんの一例に過ぎません。 HubSpotは、顧客とのやり取りの記録、タスク管理、SNS投稿の予約など、あなたのビジネスにおいて必要な機能が全て備わっているツールです。
生成AIを「デザイナー兼Webコーダー」として活用する
次に、生成AI（ChatGPT、Gemini、Claudeなど）の役割です。 AIは、「あなたのデザインの意図を汲み取り、それをHTMLとCSSという言語に翻訳してくれる、優秀なデザイナー兼Webコーダー」です。 生成AIを上手く使えば、デザインやプログラミングに全く精通していなくても、以下の手順で進めていけば理想のホームページを作ることができます。
【実践】参考サイトを「お手本」に、理想のホームページを作る4ステップ
お待たせしました。ここから、具体的な制作手順に入ります。
ステップ1：理想の「お手本サイト」を見つける
このステップで最も重要なのは「ゼロから作ろうとしない」ことです。
まず、あなたが「素敵だな」「分かりやすいな」と感じるホームページを、2〜3つ探してみましょう。同業である必要はありません。大切なのは、レイアウト、色使い、雰囲気など、自身のホームページに使用したいと思うデザインや構成を見つけることです。
ステップ2：お手本を元に、生成AIに「デザインの再現」を依頼する
お手本となるデザインを見つけたら、それを元に、生成AI（ChatGPT, Gemini, Claudeなど）に「このデザインを再現して」と具体的な指示を出します。
ここで非常に重要なポイントがあります。 可能であれば、Claudeの「アーティファクト」や、Geminiの「Canvas」のような、コードを書きながらリアルタイムでプレビューが見れる機能を使うのがおすすめです。プレビューでデザインを確認しながら、「ここの文字をもう少し大きくして」「このボタンの色を変えて」といった修正指示を都度出していけるので、理想のデザインに効率的に近づけることができます。
【AIへの指示文（プロンプト）の例】
3つの料金プランを横並びで比較する表をHTMLとCSSで作成してください。
お手本：（参考サイトのスクリーンショットを貼り付けるか、URLを提示）
要件
- 各プランに、プラン名、価格、箇条書きで5つほどの機能説明を入れたい。
- 中央の「おすすめ」プランだけ、枠線の色を変えて少し目立たせてください。
- HTMLとCSSのコードは分離して、レスポンシブデザインでお願いします。
ステップ3：HubSpotの「カスタムHTML」にコードを実装し、修正する
AIが生成したコードをHubSpotに実装していきましょう。
ステップ1：デザインマネージャーを開く
HubSpotの管理画面上部のナビゲーションから、「コンテンツ」→「デザインマネージャー」と進みます。 ここが、あなたのサイトの裏側、すべてのデザインファイルを管理する場所となります。
ステップ2：ファイルを新規作成する
次に、新しいページの設計図となるファイルを作成します。
デザインマネージャーの画面右上にある「新規ファイルを作成」をクリックします。
ステップ3：テンプレートタイプを「ページ」に設定する
ダイアログが表示されたら、「ページ」を選択します。 次に、テンプレートの名前（例：「カスタムLPテンプレート」）と、ファイルの保存場所を決定します。 「作成」ボタンを押すと、コードを書き込むためのエディター画面が開きます。
ステップ4：コードを貼り付ける
エディター画面には、HubSpotのテンプレートとして機能させるための、いくつかの初期コードがすでに入力されています。 それらを全て削除して、AIが生成したコードを貼り付けてみましょう。
もし「ここの余白をもう少し広げたい」といった微調整があれば、それも再度AIに「このCSSの見出しの下の余白を少し空けて」と依頼すれば簡単です。AIと対話しながら、細部を修正していくのがこの手法の醍醐味です。
まとめ
いかがでしたでしょうか。
この方法を使えば、「業者への高額な費用」と「テンプレートの窮屈さ」という２つの壁を乗り越えることができ、あなただけの理想のデザインを、驚くほど低コストで実現できます。
最後に、この方法を試す上での、一番のコツをお伝えします。 それは「エラーを恐れないこと」です。
AIが書いたコードですから、表示が崩れたり、最初はうまく動かなかったり、なんてことは日常茶飯事です。大切なのは、そこで諦めるのではなく、そのエラー画面やメッセージを、もう一度AIに見せて「ここ、おかしいみたい。直してくれる？」と対話をしながら理想のアウトプットに近づけることです。
この「AIとの二人三脚」ができれば、テンプレートの制約に縛られることも、業者に高い費用を払うこともなく、あなたの「こうしたい」という想いを、驚くほど低コストで、自由に形にできるようになります。
ホームページ作りは、もはや専門家だけのものではありません。まずは練習のつもりで、トップページだけでも作ってみてください。
弊社ではHP制作の代行もしております。ぜひ無料カウンセリングで詳細をお聞かせください。