前回の記事では、ChatGPTを使って

・シンプルな企業サイト
・FAQ（よくある質問）ページ

この2つを実際に作成してみました。

※実際に作成したファイルダウンロード可能です。　「企業サイト」「FAQページ」

「文章を書くAI」というイメージが強かったChatGPTですが、
実際に触ってみると、

・サイト構成
・デザイン
・HTMLの出力

まで含めて、かなり実用的なレベルに来ていることが分かりました。

今回はその続きとして、

「作ったFAQページをどうやって改善・拡張していくのか？」

という部分を検証していきます。

具体的には、

・FAQを後から追加する方法
・自分で少しカスタマイズする方法
・作成したFAQページを英語対応にする方法

このあたりを実際に試していきます。

① FAQをChatGPTに追加してもらう方法

まずは一番シンプルな方法です。

前回作成したFAQページに対して、

「新しい質問を追加したい」

というケースです。

やり方としては非常にシンプルで、

・追加したい質問と回答を考える
・その内容をChatGPTにそのまま渡す

これだけです。
※前回から時間が経つと元のフォーマットから変更される場合があるので
念のため作成されたファイルを添付するようにしました。

【プロンプト】

以下の2つのFAQを追加して、再度出力してください。
※念のため前回のファイル添付します。
Q：持ち運び中に割れたりしませんか？屋外でも安心ですか？
A：
持ち運びを想定して、外箱とボトルは衝撃に配慮した仕様を想定しています。
とはいえガラス製品のため、長距離の移動時はクッション材入りのバッグなどをご利用いただくとより安心です。
花見会場までの短距離移動であれば、通常の持ち運びでも問題ないレベルです。

Q：どんな食べ物と合わせるのがおすすめですか？
A：
軽やかな味わいなので、
・お花見弁当
・焼き鳥（塩）
・だし巻き卵
などの和食と特に相性が良いです。

また、桜の香りがあるタイプは、
・いちごスイーツ
・和菓子（桜餅など）
と合わせても春らしい楽しみ方ができます。

実際にやってみると、

・既存のFAQの形式に合わせてくれる
・見た目の構造も崩れない
・自然な形で追加される

といった形で、かなりスムーズに反映されます。

この方法の良いところは、

「HTMLを理解していなくても追加できる」

という点です。

通常であれば、

・どこに追加するのか
・タグ構造はどうなっているのか

などを考える必要がありますが、

それをすべてChatGPT側が吸収してくれます。

② 自分で少しHTMLを触りたい場合のやり方

次に、「少しだけ自分で触ってみたい」というケースです。

実務的には、

・デザインを少し変えたい
・表示順を変えたい
・一部のテキストだけ修正したい

といった場面はよくあります。
せっかくだから自分で書き換えられたらやってみたいって場合ですね。

この場合も、無理に自分で調べる必要はなく、

ChatGPTにそのまま聞いてしまう

のが一番早いです。

例えば、

・どこを書き換えればいいのか
・どの部分がFAQのコードなのか
・どうやって項目を追加するのか

といった内容をそのまま質問します。

【プロンプト】

今後追加が増える可能性があるので、自分でファイルを書き換える場合は、
どのファイルのどの部分をどのような書き換えればいいのかわかりやすく教えてください。

すると、

・該当箇所の説明
・修正方法
・具体的なコード例

まで含めて教えてくれます。

一瞬難しそうに感じますが、Excelの表で行をコピーして挿入とかそんな操作を
普通に行ってる人なら説明を読みながらやれば結構簡単にできますね。

ここで感じたのは、

「調べる作業そのものが不要になる」

という点です。

従来であれば、

・検索して
・記事を読んで
・試して

という流れでしたが、

「自分の環境に合わせてピンポイントで答えてくれる」

というのはかなり大きいです。

③ FAQページを英語対応にしてみる

次に、少し応用として

「作成したFAQページを英語対応にする」

ということをやってみます。

最近はインバウンド需要も増えているため、

・英語でも情報を見られるようにする
・海外のユーザーにも対応する

といったニーズはかなり増えています。

とはいえ、

・翻訳
・ページ構成の変更
・表示の切り替え

などを考えると、少しハードルが高い印象があります。

そこで今回も、

前回作成したFAQページをベースに
英語対応＋言語切り替えボタンの追加

をChatGPTに依頼してみます。

【プロンプト】

同じフォーマットで英語版のサイトを作成してください。
画面の右上に日本語⇔英語の切り替えボタンを追加して切り替えられるようにしてください。

すると、しっかりとした英語対応のFAQページが出力されました。
※実際に作成されたファイルを「こちら」にアップしてありますのでダウンロードしてみてください。

さらに今回のポイントとして、

画面の右上あたりに
日本語⇔英語の切り替えボタン

も自動で実装されていました。

正直、最初は

「英語ページを別で作ってリンクする」

という形になると思っていました。

しかし実際には、

同じHTMLページ内に日本語と英語が両方用意されており、
ボタンで切り替える仕組み

になっていました。

これにより、

・ページ遷移なしで切り替え可能
・見た目も自然
・実装もシンプル

という形になっています。

このあたりは、

「人間が思いつく実装とは少し違う最適解」

を出してくるのが面白いところです。

ここまで使ってみた感想

今回、前回の続きとして触ってみて感じたのは、

「作る」だけでなく「育てる」こともできる

という点です。

・追加
・修正
・拡張

といった作業も含めて、

ChatGPT一つで完結できる範囲がかなり広がっている

と感じました。

まとめ

今回は、

・FAQの追加方法
・簡単なHTML編集の考え方
・FAQページの英語対応

この3つを中心に検証してみました。

結論としては、

WEB制作の専門知識がなくても、かなりのところまで作れる

という印象です。

使ったプロントもほとんど話し言葉で専門用語もあまり使っていません。

もちろん、

・細かいデザイン調整
・本格的な運用

となると専門知識は必要ですが、

・簡単なサイトを作る
・情報をまとめて公開する
・試しに作ってみる

といったレベルであれば、

「PCが使える＋ChatGPTが使える」

これだけで十分対応できる時代になっています。

また、プロンプトについても、

「よく見るサイトを参考にしてイメージを伝える」

これだけで、かなり精度の高いものが出てきます。

「難しそう」と思っていた部分が、
実際にはかなり身近になっているのを感じました。

今回はここまでですが、
今後も実際に触ってみた内容をベースに、
AIの活用方法を分かりやすく紹介していきます。