ついにこの日がやってきました…！開発してきた私のこのAIサイトが、ついに本番環境デビューです！🎉 コードなんて書いたことなかった私が、AIとの二人三脚でここまで来れたなんて、まるで夢のようです。この感動を、同じように「自分には無理かも…」と思っているあなたと分かち合いたくて、この記事を書きました。
「ノーコードじゃなきゃ無理！」って思ってた私が、AIと出会って、コードの世界に足を踏み入れたんです。そして、ついに自分のサイトを公開するなんて…！
なぜAIとサイトを作ろうと思ったのか？
これまで私は、ノーコードツールを使ってアプリやWEBサイトを作っていました。キャリアコンサルタント用のHPも業者さんに作ってもらってた。でも、どうしても「もっと自由な表現がしたい！」「ノーコードの限界を超えたい！」という気持ちが強くなってきたんです。そんな時、ChatGPTをはじめとするAI技術の進化を知り、「これだ！」と直感しました。
最初は「AIにコードなんて書けるの？」「私に使いこなせるの？」と不安だらけでしたが、思い切って挑戦してみることに。結果は…大成功！
AIと二人三脚でサイトを作る方法：ステップバイステップガイド
それでは、私が実際にAIとどのようにサイトを作ってきたのか、ステップバイステップでご紹介します。初心者の方でも分かりやすいように、具体例を交えながら解説していきますね！
ステップ１：サイトの目的と構成を明確にする
まず最初に、どんなサイトを作りたいのか、目的を明確にすることが大切です。誰に、何を届けたいのか？どんな機能が必要なのか？などを具体的に考えましょう。
私の場合は、「AIに関する情報発信を通じて、AIをもっと身近に感じてもらう」「自分自身のAIとの成長を残したかった」という目的で、ブログ形式のサイトを作ることにしました。SEO対策も意識して、キーワードを洗い出しました。
ステップ２：AIツールを選定する
AIを使ってサイトを作る方法はいくつかありますが、今回は私が実際に使った方法をご紹介します。
- ChatGPT：アイデア出し、文章作成など、あらゆる面でサポートしてくれます。
- genspark：コード生成、アイデア出し、文章作成など、あらゆる面でサポートしてくれます。
- GitHub： コードの保存、バージョン管理に
- その他： 画像生成AI、デザインAIなど、必要に応じて様々なAIツールを活用しました。
ステップ３：gensparkに指示を出す（プロンプトエンジニアリング）
AIを最大限に活用するためには、**gensparkに適切な指示を出す（プロンプトエンジニアリング）**が重要です。具体的に、どんなコードを書いてほしいのか、どんな文章を書いてほしいのか、明確に伝えましょう。
例：
- 「HTMLとCSSで、シンプルなヘッダーを作成してください。ロゴ、ナビゲーションメニュー、検索ボックスを含めてください。レスポンシブデザインに対応してください。」
- 「〇〇に関するブログ記事のタイトルを10個提案してください。SEO対策を意識して、クリック率が高くなるような魅力的なタイトルにしてください。」
ステップ４：AIが生成したコードを検証・修正する
AIが生成したコードは、必ずしも完璧ではありません。**必ず自分で検証し、修正する必要があります。**最初はコードの意味が分からなくても、AIに質問したり、インターネットで調べたりしながら、少しずつ理解を深めていきましょう。
ステップ５：ローカル環境でテストする
生成されたコードをローカル環境で実行し、動作確認を行います。Visual Studio Codeなどのエディタを使うと便利です。ブラウザで表示を確認し、レイアウトや機能に問題がないかチェックしましょう。
ステップ６：サーバーにアップロードする
ローカル環境でのテストが完了したら、いよいよサーバーにアップロードします。レンタルサーバーを契約し、FTPソフトなどを使ってファイルをアップロードしましょう。
ステップ７：本番環境で動作確認をする
サーバーにアップロード後、本番環境でサイトが正常に動作するか確認します。ブラウザでURLにアクセスし、全てのページが正しく表示されるか、全ての機能が正常に動作するかチェックしましょう。ローカルでうまくいっていたことも本番に切り替えると崩れることも多かった！
ステップ８：SEO対策を行う
サイトを公開したら、SEO対策を行いましょう。Google Search Consoleに登録し、サイトマップを送信したり、キーワードを設定したりすることで、検索エンジンからの評価を高めることができます。私の場合は管理画面にAIを搭載しSEO対策も行っています。
ステップ９：改善を繰り返す
サイトは公開して終わりではありません。アクセス解析を行い、ユーザーの行動を分析し、改善を繰り返すことで、より良いサイトに育てていきましょう。
AIとの二人三脚で得られたもの
今回のサイト制作を通じて、私は本当に多くのことを学びました。
- プログラミングの基礎知識： HTML、CSS、JavaScriptなど、基本的なコードの書き方を習得！とまでは行きませんが、ノーコードの時の知識も活かし少しずつコードの見方に慣れてきたかな。まだまだコードについての理解は浅いです。
- AIの活用方法： AIツールの得意不得意を知っているからこそ、いろんなツールをうまく活用して作成しました。
- 問題解決能力： エラーが発生した際に、AIと解決までやり取りするのですが、うまく行くこと行かないことたくさんありました。うまく行かないときの指示の出し方はだんだん上手くなりさらにAIとうまく付き合えるようになりました。
- 自信： コードを書いたことのない私でも、AIと協力すれば、自分のアイデアを形にできるという自信を持つことができました。
今後の展望
今回のサイト公開は、あくまでスタート地点です。今後は、さらにコンテンツを充実させ、AIを活用した新しい機能も追加していきたいと考えています。また、今あるキャリアコンサルタント（メンタルヘルス）のHPの再構築や皆さんのお役に立てるようなアプリの構築に役立ててまいります！
最後に
「自分には無理かも…」と思っているあなたも、ぜひAIとの二人三脚に挑戦してみてください。最初は難しく感じるかもしれませんが、一歩ずつ進んでいけば、必ず目標を達成できるはずです。AIは、あなたの可能性を広げる強力なパートナーです！
そして、このサイトが、あなたのAI活用の一助となれば幸いです。これから、このサイトを通じて、AIに関する様々な情報を発信していきますので、ぜひチェックしてくださいね！
これからも、AIと共に成長していく私を、応援よろしくお願いします！😊
