【初心者のAIブログ制作記録】
つまずき・失敗・疑問から分かったこと

01

最初は、ChatGPT PlusとCodexの役割が分からなかった

最初につまずいたのは、ChatGPT PlusとCodexの使い分けです。

ChatGPT Plusでは、文章を作ったり、構成を考えたり、画像をどこに入れるか相談したりできます。

一方で、Codexは、実際のHPファイルやHTML、CSSを編集するために使います。

最初は、次のようなことが分かりませんでした。

• ChatGPTに頼めばHPに直接反映されるのか
• Codexに文章作成まで全部任せるのか
• 画像挿入はどちらに頼むのか
• HTMLやCSSはどこで直すのか

02

プロンプトを作っても、思った通りに反映されないことがあった

ChatGPTにCodex用プロンプトを作ってもらい、それをCodexに貼れば、すぐに思った通りになると思っていました。

しかし、実際にはそう簡単ではありませんでした。

• 見出しの位置が思った場所と違う
• 文章が一部省略される
• 既存記事の構成が変わってしまう
• 画像が表示されない
• 記事一覧の見た目が崩れる
• キー操作の表記が他のページと統一されない

そこで、Codex用プロンプトには次のような条件を書くことが大切だと分かりました。

• 既存記事を壊さない
• 本文を省略しない
• 画像を勝手に生成しない
• 記事一覧を勝手に変更しない
• どの見出しのどこに入れるか指定する
• 作業後に確認することを書く
• 禁止事項を書く

03

初心者向け記事では、細かい手順を削らないことが大切だった

初心者向けの記事を作るとき、最初は文章を短くすれば読みやすいと思っていました。

しかし、実際には、初心者に必要なのは短さだけではありません。

たとえば、どこをクリックするのか、どのキーを押すのか、どの順番で確認するのか、表示されないときは何を見るのか、失敗したときにどこへ戻るのかが必要です。

そのため、記事ではキー操作も、他の文章に溶け込まないように表記する必要がありました。

• Ctrl + C
• Ctrl + V
• Shift + Enter
• Ctrl + F5

初心者向けの記事では、細かすぎるくらいの説明が役に立つことが分かりました。

04

画像挿入で大きくつまずいた

特に大きくつまずいたのが、スクリーンショット画像の挿入です。

記事の各テーマごとに、実際の画面画像を入れようとしました。

• 01の説明に対応する画像
• 03の説明に対応する画像
• 04の説明に対応する画像
• 05の説明に対応する画像
• 06の説明に対応する画像

ChatGPTに画像を見せて、Codex用プロンプトを作ってもらい、Codexに任せました。しかし、画像は表示されませんでした。

最初は、画像サイズが大きすぎるのか、画像形式が違うのか、ファイル名が悪いのか、日本語名や空白が原因なのかと思いました。

そこで画像に名前を付け直し、形式も変えて保存し直しました。しかし、それでも表示されませんでした。

05

画像が表示されなかった原因として分かったこと

ChatGPTに相談して分かったのは、画像はHTMLに書くだけでは表示されないということです。

画像を表示するには、次の条件がそろっている必要があります。

• 画像ファイル本体がHP制作フォルダ内にある
• 画像が images などの正しい画像フォルダに入っている
• HTMLの src と画像の保存場所が一致している
• ファイル名が完全に一致している
• 拡張子が一致している
• Codexがその画像ファイルを見られる状態になっている

たとえば、HTMLに次のように書いてあっても、

<img src="images/chatgpt-guide-01.png" alt="ChatGPTの画面操作説明画像">

実際に次の画像ファイルが存在しなければ、ブラウザには表示されません。

images/chatgpt-guide-01.png

画像名を変えるだけでは不十分で、画像ファイル本体の場所とHTMLの指定を合わせる必要があると分かりました。

06

うまくいかないときは、元に戻す判断も必要だった

画像が表示されないまま、何度も修正を重ねると、記事内に不要なHTMLやCSSが残ることがあります。

• 表示されない画像タグ
• 存在しない画像パス
• 使われていない画像用CSS
• 不自然な空白
• どれが必要か分からないコード

そのため、途中で一度、画像挿入前の状態に戻すことにしました。

これは失敗ではなく、作業を整理するために必要な判断でした。初心者の場合、分からないまま進めるよりも、一度戻して原因を切り分ける方が安全です。

07

画像は先に整理してから入れるべきだった

今回分かった大きな学びは、画像をいきなり記事に入れようとしないことです。

まずは画像を整理する必要があります。安全な流れは、次の順番です。

1. スクリーンショット画像を用意する
2. 画像名を英数字に変更する
3. HP制作フォルダ内の画像フォルダに入れる
4. 画像ごとの対応表を作る
5. どの記事のどこに使うか決める
6. 1枚ずつ記事に挿入する
7. ブラウザで表示確認する
8. 表示されない場合は画像パスを確認する

特に、複数枚の画像をまとめて入れようとすると、どの画像がどこの説明に対応しているのか分からなくなります。

chatgpt-guide-01.png：01の説明に使う画像
chatgpt-guide-03.png：03の説明に使う画像
chatgpt-guide-04.png：04の説明に使う画像

このように、対応表を作ることが大切だと分かりました。

08

記事一覧ページの見た目でもつまずいた

記事本文だけでなく、学習ブログ・記事一覧ページでもつまずきました。

記事カードの画像が表示されなかったり、他の記事カードとサイズが合わなかったり、文字が切れたりしました。

そこで、画像を表示するべきか、いったん画像を外すべきか、画像なしでも見やすくできるか、カードの高さをそろえるか、タイトルや説明文を切らさないようにするかを考える必要がありました。

見た目を整える作業は、文章を書く作業とは別の難しさがありました。

09

AIブログでは、内容だけでなく見せ方も大切だった

ブログ作成では、文章の内容だけでなく、見せ方も大切です。

• 見出しの付け方
• 画像の位置
• キー操作の表記
• チェックリスト
• 注意ボックス
• コードブロック
• スマホでの見やすさ

特に初心者向けのブログでは、文章だけでなく、画面の流れや操作の見え方も重要です。

10

マーケティングや言葉選びにも悩んだ

AIブログを作る中で、記事の内容だけでなく、言葉選びにも注意が必要だと感じました。

AIや副業に関する記事は、自己啓発っぽくなりやすいです。

• AIで稼ぐ
• 誰でも簡単
• すぐに収益化
• 今すぐ始めないと損

このような言葉を使いすぎると、読者に不信感を与える場合があります。

そのため、「AIを使って作業を効率化する」「初心者が学びながら試す」「できたこと、できなかったことを記録する」「改善しながら進める」という言い方の方が自然だと分かりました。

11

失敗や疑問そのものが記事の材料になると分かった

最初は、つまずいたことや失敗したことは、ただの作業ミスだと思っていました。

しかし、ブログを作っていく中で、それ自体が記事の材料になると分かりました。

初心者が本当に知りたいのは、きれいに完成した手順だけではありません。

• どこで迷ったのか
• なぜできなかったのか
• どう質問したのか
• どんな返答があったのか
• どうやって整理したのか
• 次にどうすればよいのか

12

乗り越えられた部分

まだ分からないことは多いですが、少しずつできるようになったこともあります。

• ChatGPT PlusとCodexの役割を分けて考えられるようになった
• Codex用プロンプトに禁止事項を書くようになった
• 既存記事を壊さない指示を入れるようになった
• キー操作を kbd タグで統一するようになった
• 画像は先に整理する必要があると分かった
• うまくいかないときは元に戻す判断ができるようになった
• 疑問をChatGPTに投げて、記事内容に変えられるようになった

最初は「できなかったこと」でも、整理していくと「次に気をつけること」に変わっていきました。

ANALYSIS

初心者だからこそ見えたこと

SUMMARY

まとめ

ブログを作り始めてから今まで、たくさんのつまずきがありました。

ChatGPT PlusとCodexの使い分けに迷い、Codex用プロンプトの作り方に悩み、画像挿入で失敗し、記事一覧の見た目にもつまずきました。

しかし、そのたびにChatGPTへ質問し、原因を整理し、どう進めるべきかを考えてきました。

初心者だからこそ、分からない場所で止まります。でも、その止まった場所は、同じ初心者にとって知りたい場所でもあります。

だから、つまずきや失敗は無駄ではありません。むしろ、ブログの大事な材料になります。

これからは、うまくいったことだけでなく、できなかったこと、悩んだこと、質問したこと、乗り越えたことも記録していくことで、初心者に寄り添ったブログを作っていけると感じました。