見出し画像

コードを書かずにLPサイトを作成！LovableとAIで実現×GASで自動化

HaYo｜Notion

私は現在、副業としてNotion構築代行やレクチャーサービスを提供しております。これまでココナラやLancersなどのクラウドソーシングサービスを中心に活動してきましたが、プラットフォームに依存しない持続可能なビジネスモデルを構築したいという思いが強くありました。

特に感じていた課題として、クラウドソーシングサービスでは：

  • 手数料が発生し、収益を圧迫

  • プラットフォームのルール変更リスク

  • 直接的な顧客とのリレーション構築が難しい といった点が挙げられます。

これらの課題を解決するため、自身のLPサイトを持つことを決意しました。ただし、私にはウェブ開発の専門知識がなく、かつ制作費用も抑えたいという条件がありました。

※ 2024/12/30現在デプロイしているものです。


▼ LPサイト作成までの道のり：準備編

▽ 事前準備をするうえでのPOINT

けいたろう軍団での学び

最初に取り組んだのは、現在参加しているけいたろう軍団（弟子プロジェクト）での学びを整理することでした。このプロジェクトで学んだAIツールの活用方法が、今回のLPサイト作成でも大きな助けとなりました。

特に重要だったポイントは：

  • 音声入力を活用したプロンプトの入力

  • やりたいことをAIにまとめてもらう（企画書作成など）

  • 修正に対するアプローチ

これらの要素は、AIツールを効果的に活用する上で基本となる重要なスキルです。特に音声入力の活用は、アイデアを素早くキャプチャーし、AIとの対話をスムーズに進める上で非常に効果的でした。

▽ ツール選定の詳細な過程

Lovableの選定理由

複数のノーコードツールを比較検討した結果、Lovableを選択しました。無料プランでのテスト利用時に、最も洗練されたデザインのLPサイトが作成できたことが決め手となりました。

その他の選定理由は：

  1. 自然言語でのコード生成機能

    • 専門用語を使わずに意図を伝えられる

    • 修正要望も直感的な言葉で伝えられる

  2. コスト面での優位性

    • 月額20ドルという手頃な価格設定

    • 100メッセージ＋ボーナス50メッセージで十分な制作が可能

  3. デプロイまでの一貫した支援

    • GitHubとの連携機能

    • Netlifyへの簡単なデプロイ対応

▼ サイト設計フェーズ：AIとの対話による構成作り

▽ GeminiとのAI対話セッション

サイト構成を考えるにあたり、Geminiを活用した方法は非常に効果的でした。具体的には：

  1. 音声入力による要望の伝達

    • サービスの特徴

    • ターゲット顧客層

    • 提供価値

    • 期待する成果 これらを、思いつくままに音声入力で伝えていきました。

  2. AIによる構造化

    • 入力した情報を論理的に整理

    • セクション間の関係性を明確化

    • ユーザー動線を考慮した配置

最終的に作成されたサイトマップは以下の通りです：

サイトマップ

└── トップページ
├── ヘッダー
│   └── ナビゲーション (トップページ、Notionが選ばれる理由、サービスの特徴、サービス紹介、実績、お客様の声、発信活動、お問い合わせ)
├── メインビジュアル
│   └── キャッチコピー、リード文、ファーストビュー画像/動画
├── Notionが業務管理ツールに選ばれる理由
├── サービスの特徴
├── サービス紹介
│   ├── Notion構築代行
│   ├── Notionレクチャー
│   └── Notion運用サポート
├── これまでの実績
│   └── 実績紹介 (画像/動画、数値データなどを効果的に使用)
├── お客様の声
│   └── 顧客の声 (写真、氏名、会社名などを掲載)
├── 発信活動
│   ├── X（旧Twitter）
│   ├── note
│   └── 電子名刺
├── CTA (行動喚起)
│   └── 無料相談、資料請求などへの導線
├── お問い合わせ
└── フッター
├── 会社概要
├── 特定商取引法に基づく表示
└── プライバシーポリシー

▽ 各セクションのコンテンツ設計

サイトマップが完成した後、各セクションの具体的な内容をAIと対話しながら詰めていきました。

特に注力したポイントは：

  1. メインビジュアルセクション

    • ターゲット層に響くキャッチコピーの検討

    • 問題提起から解決提案までのストーリー作り

    • 視覚的なイメージの具体化

  2. サービス紹介セクション

    • 各サービスの差別化ポイントの明確化

    • 期待できる成果の具体例

  3. 実績セクション

    • データの可視化方法

    • 信頼性を高める表現方法

    • 更新の仕組み作り

あとはこのサイトマップと各セクション内容を反映させるようにLovableのプロンプトに入力するだけです。

▼ 実装フェーズ：Lovableでの具体的な作業

▽ Lovableでの作業の基本アプローチ

基本的な作業プロセスは以下の通りです：

  1. 音声入力による指示

    • デザインの変更要望

    • レイアウトの調整

    • 機能の追加・修正

  2. 効果的な指示の例

    • 「このセクションの余白をもう少し広げて」

    • 「文字サイズをもう少し大きくして」

    • 「これらの要素を横並びにして」

▽ AIツールを活用した指示の最適化

プロンプトの最適化

音声入力だけでは意図が正確に伝わらないケースも多々ありました。そのような場合は以下のような工夫を施しました：

  1. Geminiの活用

    • 音声入力した内容をGeminiに投げ、より構造化された指示文に変換

    • 技術的な用語を適切に補完

    • より明確な表現への言い換え

  2. Claudeの活用

    • より複雑な要望の整理

    • プロンプトの最適化

    • 具体的な実装手順の提案

【実際の作業フロー例】

具体的な作業の流れを例示します：

① 最初の指示

（音声入力）「ここのボタンをもう少し目立たせたいんですけど」

② AIによる指示の最適化

「CTAボタンの視認性を向上させるため： 
- ボタンサイズを20%増加
 - コントラストを強調 
- ホバー時のアニメーション追加
 を実装してください」

③Lovableへの最終的な指示

より技術的で具体的な指示となり、意図した通りの実装が実現

▽ 基本レイアウトの構築

Lovableでの作業は、以下のような流れで進めました：

  1. 全体レイアウトの設定

    • レスポンシブデザインの基本設定

    • カラースキームの決定

    • タイポグラフィの設定

  2. 各セクションの実装

    • ヘッダー・フッターの作成

    • メインビジュアルの配置

    • コンテンツセクションの構築

▽ モバイル対応とパフォーマンス最適化

特に力を入れたのが、スマートフォン向けのデザインです。Xで話題になっていた横スワイプ型のLPを採用しました。

  1. 横スワイプ機能の実装

    • Xで見かけた斬新なUIを参考に実装

    • スワイプの挙動調整

    • パフォーマンスとの両立

  2. 表示速度の改善

    • 画像の最適化

    • コードの軽量化

    • 読み込み順序の最適化

▽ Googleサービスとの連携

フォームやデータ連携では、以下のような工夫を施しました：

  1. お問い合わせフォーム

    • カスタムデザインの実装

    • Googleフォームとのバックエンド連携

    • 自動返信システムの構築

  2. データ可視化

    • Notionからのデータ連携

    • スプレッドシートでの加工

    • リアルタイム更新の実現

▼ Googleサービスとの連携×GASの活用

▽ Notionとの連携システム

スプレッドシートで作成したグラフをLPサイトに埋め込む

目的と全体設計

Notionで管理している案件数をLPサイトにリアルタイムで反映させるシステムを構築しました。

全体の流れ：

  1. Notionでのデータ更新

  2. Webhookによるトリガー発火

  3. GASでのデータ処理

  4. スプレッドシートでのグラフ生成

  5. iframeでのLP埋め込み

【具体的な実装手順】

①WebhookとGASを使いNotionの更新内容をスプレッドシートに反映

Claudeにやりたいことをまとめ、GASのコードを出力してもらいました。
これまでのデータは貼り付けましたが、これ以降に入力されたデータは自動的にスプレッドシートに反映されるようになりました。

実績管理

② グラフの作成及びLPサイトへの埋込

グラフをWEB公開し、PCとモバイル版の2つのバージョンを作成してLPサイトに埋め込みました。

スプレッドシートで作成したグラフ

課題解決のプロセス

  1. グラフの余白問題

    • 当初：iframeに余計な余白が発生

    • 解決策：Claudeに既存コードを投げ、CSSの最適化を依頼

    • 結果：完全に余白のないグラフの埋め込みに成功

  2. データ更新の遅延対策

    • Webhookのタイムアウト設定の調整

    • エラーハンドリングの実装

    • バックアップトリガーの設定

▽ フォームのカスタマイズ

コーティングしたGoogleフォーム

Googleフォームを直接埋め込むとLPサイトのデザインの統一感が失われてしまうため、カスタムデザインを適用することにしました。ただし、これまでの指示方法では実装できなかったため、実現するために参考となる資料を探しました。

こちらの記事を参考に実装することにしました。しかし、全く知識がないので、書いてあることが私には理解できませんでした。

そのため以下の手順で実装しました。

  1. 必要そうな値をブログの指示通りに取得

  2. 記事の内容をClaudeに張り、Lovableへの指示文を考えてもらう

  3. 値と指示文をLovableのプロンプトに入力

これだけで実装できました。結局なにをやっているか最後まで理解できませんでしたが、AIがそれを実現してくれました。

GASによる自動返信システム

中身はGoogleフォームなのでGASで自動返信システムの実装はスムーズでした。もちろんGASのコードは生成AIに書いてもらいました。コードは長いので省略いたしますが、以下のようなメールを自動で返信してくれます。

{お名前} 様

この度は、お問い合わせいただき誠にありがとうございます。
以下の内容で承りましたので、ご確認をお願いいたします。

■ご送信内容
お名前：{お名前}
会社名：{会社名}
メールアドレス：{メールアドレス}
電話番号：{電話番号}
お問い合わせ内容：
{お問い合わせ内容}

翌日までに、ご連絡させていただきます。

なお、以下の場合は回答までにお時間をいただく可能性がございます：
・ご要望内容の確認に時間を要する場合
・お問い合わせが混み合っている場合

ご不明な点がございましたら、このメールにご返信いただくか、
下記の電話番号までお気軽にお問い合わせください。

【お電話でのお問い合わせ】
080‐****‐****

今後ともよろしくお願い申し上げます。

▼ 運用と改善の計画

▽ 現状の課題

現在認識している主な課題は：

  1. パフォーマンス面

    • ページ読み込み速度の改善

    • モバイル表示の最適化

    • サーバーレスポンスの向上

  2. 機能面

    • フォーム機能の拡充

    • データ連携の安定性向上

    • セキュリティ強化

▽ 今後の改善計画

短期的な改善計画として：

  1. 表示速度の改善

    • 画像最適化の徹底

    • コード最適化

  2. ホスティング環境の見直し

    • レンタルサーバーへの移行検討

    • バックアップ体制の構築

▼ 個人事業主のためのLPサイト作成のポイント

※2024/12/30現在デプロイしているものです

今回のLPサイト作成を通じて得られた重要な知見は以下の通りです：

▽ コスト面での考察

  • 初期費用：20ドル（約3,000円）

    • Lovable月額プラン

    • 追加費用なし

  • 運用コスト

    • Netlifyの無料プラン

    • Google Workspaceの既存契約

▽ 時間投資

完成までに約20時間かかりましたが、音声入力を活用することで他の作業と並行して効率的に進めることができました。

▽ 得られた価値

  1. ビジネス面

    • プラットフォーム依存からの脱却

    • ブランディングの強化

    • 直接的な顧客接点の確立

  2. スキル面

    • ノーコードツールの習得

    • AIツールの活用力向上

    • Webマーケティングの基礎理解

▽ これから挑戦する方へ

このような形でのLPサイト作成は、技術的な専門知識がなくても十分に実現可能です。ただし、以下の点には注意が必要です：

  1. 事前準備の重要性

    • 十分な計画立案

    • 適切なツール選定

    • 必要スキルの把握

  2. 実装時の留意点

    • パフォーマンスへの配慮

    • セキュリティ対策

    • 保守性の考慮

最後に、この記事が同じように自身のLPサイト作成を考えている方の参考になれば幸いです。技術的な課題はありますが、個人事業主や副業で活動されている方にとって、十分に実現可能な選択肢だと確信しています。

ご質問やご意見がございましたら、お気軽にコメントください。この記事の内容は、実際の経験に基づいていますが、より良い方法があればぜひ教えていただけますと幸いです。

いいなと思ったら応援しよう！