【Codexに指示するときの考え方】
ページ分割・リンク導線・デザイン調整の基本

01

記事が長くなってきたらページを分ける

ブログ記事や説明文が増えてくると、TOPページだけに全部入れるのは見づらくなります。

たとえば、ChatGPTの導入手順、OBSの導入手順、画像保存方法、Codexの使い方などをすべてTOPページに入れると、ページが長くなりすぎます。

その場合は、内容ごとに別ページを作ると分かりやすくなります。

例：

TOPページ
├─ ChatGPTの導入手順ページ
├─ OBSの導入・ダウンロード手順ページ
├─ Codexの使い方ページ
├─ 画像保存方法ページ
└─ AIブログ制作の記録ページ

このように分けると、読者が目的の記事を探しやすくなります。

02

ページを分けるだけではなく、導入文とリンクを作る

ページを分けるときに大事なのは、ただ新しいページを作るだけでは不十分ということです。

新しいページを作っても、TOPページや記事一覧ページからリンクがなければ、読者はそのページにたどり着けません。

そのため、Codexには次のように指示します。

記事が増えてきたので、TOPページ以外に新しいページを作成してください。

ただし、ページを分割するだけではなく、TOPページや記事一覧ページから新しいページへ移動できるように、導入文とリンクを設置してください。

たとえば、OBSの導入手順を別ページにする場合、TOPページには短い紹介だけを置きます。

OBSの導入方法を詳しく知りたい方は、以下のページでダウンロード手順から初期設定まで確認できます。

そして、リンクを設置します。

<a href="obs-install-guide.html">OBS導入手順を見る</a>

このようにすると、TOPページはすっきりし、詳しい内容は別ページで読めるようになります。

03

Codexへの指示例：ChatGPTの導入手順ページを作る

Codexに新しいページを作ってもらう場合は、内容、目的、リンク設置までまとめて伝えると安全です。

例：

#指示

ChatGPTの導入手順を説明する新しいページを作成してください。

#ページタイトル

【初心者向け】ChatGPTの導入手順

#新規ファイル名

chatgpt-start-guide.html

#記事の目的

この記事は、ChatGPTを初めて使う人に向けて、アカウント作成、ログイン、基本画面の見方、最初の質問方法を分かりやすく説明するページです。

#本文に入れる内容

・ChatGPTとは何か
・ChatGPTを使う前に準備するもの
・アカウント作成の流れ
・ログイン方法
・最初の質問方法
・画面の見方
・無料版とPlusの違いに触れる場合は、表示内容が変わる可能性があること
・初心者がつまずきやすいポイント
・まとめ

#リンク設置

新しいページを作るだけではなく、TOPページまたは記事一覧ページに、このページへの導入文とリンクを追加してください。

#重要ルール

・既存記事を削除しないでください。
・既存リンクを壊さないでください。
・既存画像を削除しないでください。
・新しい画像を勝手に生成しないでください。
・記事本文を短く省略しすぎないでください。
・スマホ表示でも読みやすくしてください。

04

短い内容はTOPページ、長い内容は別ページにする

すべてを別ページにする必要はありません。

短い説明なら、TOPページに1項目として置いても大丈夫です。

たとえば、

OBSとは何か

のような短い説明なら、TOPページに入れても問題ありません。

しかし、

OBSのダウンロード方法
インストール手順
初期設定
録画方法
音声トラブル
画面が映らない場合

のように内容が多い場合は、別ページにした方が見やすくなります。

考え方は次の通りです。

短い説明 ＝ TOPページに置く
長い説明 ＝ 別ページに分ける
詳しい手順 ＝ 専用記事にする

05

何を書けばいいか思いつかないときの方法

記事を作成していると、何を書けばいいか分からなくなることがあります。

その場合は、ChatGPTに次のように聞くと整理しやすくなります。

このテーマで初心者が疑問に思いそうなことを質問形式で出してください。

または、

このテーマの記事に追加した方がよい項目を、初心者向けに考えてください。

たとえば、ChatGPTの導入記事なら、次のような疑問が出てきます。

・ChatGPTは無料で使えるの？
・Plusに入らないと使えないの？
・ログインできないときはどうするの？
・最初に何を質問すればいいの？
・スマホでも使えるの？
・画像はどうやって保存するの？
・Codexとは何が違うの？

この疑問をそのまま記事の小見出しにすると、初心者向けの記事を作りやすくなります。

06

自分が操作して分からなかったことを記事にする

記事のネタは、特別な知識だけではありません。

自分が実際に操作していて、

分からなかったこと
迷ったこと
失敗したこと
表示されなかったこと
Codexにうまく伝わらなかったこと
元に戻す必要があったこと

も、すべて記事の材料になります。

たとえば、

画像を保存したのに表示されなかった
Codexに画像の場所が伝わらなかった
記事カードの形が崩れた
index.htmlの意味が分からなかった
ChatGPT Plusで作った画像をHPに入れる方法が分からなかった

こうした経験は、同じ初心者にとって役立つ内容になります。

自分の疑問をそのまま記事にすると、リアルで分かりやすいブログになります。

07

main画像のデザインをページ全体に反映させる

ホームページのメイン画像に、金色の枠、シナプス、光の粒、AIらしい線などが入っている場合、その雰囲気をページ全体に反映させると統一感が出ます。

Codexには、次のように指示すると分かりやすいです。

main画像のデザインを参考にして、ページ全体のデザインを調整してください。

金色のライン、やわらかい光、シナプスのような線の雰囲気を、見出し、カード、区切り線、ボタン、背景などに反映してください。

ただし、文章やリンクは変更しないでください。

大切なのは、色だけを変えるのではなく、デザイン全体に雰囲気を反映させることです。

たとえば、

・見出しの下に金色のラインを入れる
・カードの枠線を少し金色にする
・ボタンに金色のアクセントを入れる
・背景に薄い光の粒を入れる
・区切り線をシナプスのような細い線にする

などです。

08

Codexへの指示例：main画像に合わせてデザイン調整する

#指示

main画像のデザインを参考にして、ホームページ全体のデザインを調整してください。

#参考にする雰囲気

・金色のライン
・シナプスのような細い線
・AIらしい光の粒
・落ち着いた高級感
・黒や深い色に金色が映える雰囲気

#反映してほしい場所

・見出し
・記事カード
・ボタン
・区切り線
・背景
・mainセクション
・記事一覧カード

#重要

色だけでなく、デザイン自体もmain画像の雰囲気に合わせてください。

#禁止事項

・文章を変更しないでください。
・記事タイトルを変更しないでください。
・リンク先を変更しないでください。
・画像を勝手に差し替えないでください。
・記事カードを削除しないでください。
・記事本文ページを変更しないでください。

09

背景アニメーションはシンプルにする

AI系のホームページでは、背景に動きがあると雰囲気が出ます。

ただし、動きが多すぎると、読者が文章を読みづらくなります。

そのため、背景アニメーションは控えめにした方が安全です。

おすすめは、次のようなものです。

・光の粒が少しだけ動く
・ドットがゆっくり漂う
・背景の動きは目立ちすぎない
・数は少なめ
・本文の邪魔をしない
・スマホでは重くならないようにする

Codexには、次のように指示します。

Bodyの背景アニメーションは、もっとシンプルにしてください。

ドットの数を少なくし、光の粒がゆっくり動くような控えめなアニメーションにしてください。

本文や記事カードの読みやすさを優先してください。

10

Codexへの指示例：光の粒アニメーションを作る

#指示

main画像のドットや光の粒の雰囲気を参考にして、ページ背景に控えめなアニメーションを追加してください。

#アニメーションの方向性

・光の粒のような小さなドット
・数は少なめ
・ゆっくり動く
・派手にしすぎない
・本文の読みやすさを邪魔しない
・背景として自然に見える
・スマホ表示で重くなりすぎない

#修正対象

body背景またはmain背景に追加してください。

#重要

現在の文章、記事カード、リンク、画像パスは変更しないでください。

#避けたいこと

・粒の数を多くしすぎない
・動きを速くしすぎない
・背景を派手にしすぎない
・本文の上に重なって読みにくくしない
・ページ全体が重くなるようなアニメーションにしない

11

記事を増やすときはリンク導線を必ず作る

新しいページを作るときは、必ず読者がそのページに移動できる導線を作ります。

導線とは、リンクや案内文のことです。

たとえば、TOPページに以下のような案内を入れます。

ChatGPTの導入手順を詳しく知りたい方は、こちらの記事で初期設定から最初の質問方法まで確認できます。

そして、リンクを置きます。

<a href="chatgpt-start-guide.html">ChatGPTの導入手順を見る</a>

この導線がないと、新しいページを作っても読者が見つけられません。

初心者向けに覚えるなら、

ページを作る
↓
導入文を書く
↓
リンクを置く
↓
クリックして移動できるか確認する

です。

12

Codexに指示するときの基本セット

Codexに依頼するときは、次の項目を入れると伝わりやすくなります。

1. 何をしたいのか
2. どのページを直すのか
3. どこに追加するのか
4. 何を変更してよいのか
5. 何を変更してはいけないのか
6. スマホ表示も確認すること
7. 作業後に報告してほしいこと

特に大事なのは、変更してはいけないものを書くことです。

文章を変更しない
リンクを壊さない
画像を削除しない
他ページを変更しない
記事一覧を勝手に書き換えない

このように書いておくと、Codexが余計な変更をしにくくなります。

13

【完全初心者向け】Codexに安全に指示するための補足

ここまで、ページ分割、リンク導線、デザイン調整の考え方を整理してきました。

この補足では、同じ内容を繰り返すのではなく、完全初心者が実際にCodexへ依頼するときに迷いやすい「作業範囲の決め方」と「確認のしかた」をまとめます。

Codexは、ホームページやブログのHTML、CSS、リンク、画像の設定などを編集してくれる便利な機能です。しかし、最初のうちは、何をどう頼めばよいのか分からないことがあります。

たとえば、次のような疑問が出やすいです。

・どのページを直してほしいのか、どう伝えればいいのか
・記事本文だけ追加したいのに、他の場所まで変わらないか
・TOPページと記事一覧ページの違いが分からない
・新しい記事ページを作っただけで、読者はそこへ行けるのか
・画像を作っただけで、HPに表示されるのか
・CSSを触ると何が変わるのか
・表示が崩れたときに、どう戻せばよいのか

このような疑問は、初心者だからこそ出てくる大切な疑問です。分からないまま作業を進めると、本文、リンク、画像、記事一覧カード、CSS、デザインが思わぬ形で変わってしまうことがあります。

・新しい記事ページを作る
・記事一覧ページに追加する
・TOPページにもリンクを置く
・画像を入れる
・デザインも変える
・スマホ表示も直す

1. 新しい記事ページだけ作る
2. 記事一覧ページにカードを1つ追加する
3. TOPページに導入文とリンクを追加する
4. 画像を入れる
5. デザインを調整する
6. 表示を確認する

今回変更してよいのは、指定した記事本文の追加だけです。

今回変更してよいのは、学習ブログ・記事一覧ページ内の指定した記事カードだけです。

以下は変更しないでください。

・既存本文
・既存見出し
・既存リンク
・既存画像
・画像パス
・記事一覧ページ
・TOPページ
・他の記事ページ
・CSS
・カードデザイン
・レイアウト

TOPページ：
サイトの入口になるページ

記事一覧ページ：
いろいろな記事カードが並んでいるページ

記事本文ページ：
1つの記事を詳しく読むページ

1. 画像ファイル本体がHP制作フォルダ内にある
2. HTMLの画像パスが正しい
3. ファイル名と拡張子が一致している

<img src="images/sample-image.png" alt="説明画像">

画像が表示されない原因を確認してください。

HTMLのsrc、画像の保存場所、ファイル名、拡張子、CSSで非表示になっていないかを確認してください。

まだ新しい画像は追加しないでください。

1. 本文を追加する
2. 表示を確認する
3. リンクを追加する
4. 表示を確認する
5. 必要な場合だけデザインを調整する

#指示

まだ修正はしないでください。

まず、現在のページ構造を確認し、どのファイルのどの部分を変更すればよいか調査してください。

#確認してほしいこと

・対象ページのファイル名
・修正が必要なHTML部分
・修正が必要なCSS部分
・変更すると影響が出そうな場所
・作業前に注意する点

#重要

今回は調査だけです。
HTML、CSS、画像、リンクはまだ変更しないでください。

□ 指定した文章が追加されている
□ 既存本文が消えていない
□ リンクが正しく移動できる
□ 画像が表示されている
□ 記事一覧カードが崩れていない
□ PC表示で読みやすい
□ スマホ表示で横にはみ出していない
□ 余計なページが変更されていない

今回の修正で、どのファイルのどの部分を変更したか確認してください。
まだ追加修正はしないでください。

今回の修正を取り消して、修正前の状態に戻してください。

ただし、記事本文、リンク、画像、画像パスは勝手に変更しないでください。

#指示

〇〇ページに、以下の文章を追加してください。

#追加する場所

〇〇見出しの直後に追加してください。

#追加する本文

ここに追加する文章を入れます。

#変更してよいもの

・指定した本文の追加
・必要な見出しタグの設定
・既存デザインに合わせた改行や段落調整

#変更してはいけないもの

・既存本文
・既存リンク
・既存画像
・画像パス
・記事一覧ページ
・TOPページ
・他の記事ページ
・CSS
・カードデザイン

#作業後の確認

・指定場所に追加されているか
・既存本文が消えていないか
・リンクが壊れていないか
・スマホ表示で読みやすいか

SUMMARY

まとめ

Codexに指示するときは、ただ「作って」と伝えるだけではなく、目的と範囲をはっきり書くことが大切です。

記事が増えてきたら、TOPページに全部入れるのではなく、内容ごとにページを分けます。

ただし、ページを分けるだけでは読者がたどり着けないため、TOPページや記事一覧ページに導入文とリンクを設置します。

また、何を書けばいいか思いつかないときは、ChatGPTに初心者が疑問に思いそうなことを出してもらうと、記事のネタになります。

デザイン面では、main画像の雰囲気をページ全体に反映させると、サイトに統一感が出ます。

ただし、背景アニメーションや光の粒は派手にしすぎず、本文の読みやすさを優先することが大切です。

初心者向けに覚えるなら、次の流れです。

記事が増える
↓
内容ごとにページを分ける
↓
TOPページや記事一覧に導入文とリンクを置く
↓
ChatGPTで疑問や項目を出す
↓
Codexに範囲を決めて指示する
↓
ブラウザで表示確認する

この流れを意識すると、AI活用サイトやChatGPTブログを少しずつ整理しながら育てていけます。