HP制作とブログ作成の学習記録

令和8年6月9日（火） ChatGPT Plus有料版を使い始める

教室でプロンプトの出し方を確認

PCスクールでChatGPT Plusの使い方を学び始めました。プロンプトをうまくまとめられず、先生の指示の出し方や手順を確認。頭の中に作りたいものがあっても、文章で伝える難しさを感じました。

帰宅後に何度も指示を繰り返す

帰宅後、何度も失敗しながら文章を作成しました。一度で完成させず、「ここを直したい」「この部分を追加したい」と少しずつ調整し、ある程度形になったところで作業を終了しました。

令和8年6月10日（水） 作成データが見つからない問題

昨日の続きが見つからず戸惑う

前日に作成したデータを見つけられず、もう一度ゼロから作り直しました。自分で削除しない限り消えないと思っていたため、保存方法に大きな不安が残りました。

保存方法を調べてアーカイブを活用

データ保存を調べ、簡単そうな方法としてアーカイブ保存を試しました。大切な文章や画像はChatGPT内だけに頼らず、別の場所にも保存する必要があると感じました。

令和8年6月11日（木） 文章をよりよくするための試行錯誤

指示を繰り返すほど文章がずれることがある

よりよい文章にするため何度も指示を出しましたが、かえって文章が不自然になり、目的から離れることもありました。AIに任せきりにせず、元の目的を自分で確認しながら進める必要があると感じました。

令和8年6月12日（金） 元文章を使いながら修正を進める

文章の形が崩れたら元文章に戻す

文章が崩れたときは、残しておいた元の文章をコピーして貼り付け、もう一度指示しました。この繰り返しで、少しずつ希望に近い文章へ整えられました。

履歴が長くなると作業しづらくなることがある

長いやり取りでは動作が重くなったり、貼り付けがうまくいかないことがありました。必要な文章や画像をコピーして新しいページへ移すことで、問題なく表示できました。

令和8年6月13日（土） 文章を見やすくするためのルール作り

見出しや項目に【】を付ける指示に苦戦

見出しや項目へ【】を付けるよう指示しても、思うように反映されませんでした。言い方を変えたり参考プロンプトを試したりし、細かく具体的に伝える必要性を学びました。

キャッチアップ画像を生成

記事用の画像を、人物なし、装飾あり、人物ありと作り分けました。画像生成も一度では理想どおりにならず、何度も修正しながら近づけました。

令和8年6月15日（日） 出力ルールの問題を解決

制約条件・テーマ・出力形式を見直す

制約条件、テーマ、出力形式を作り直すことで、文章に【】を付ける問題を解決できました。「どの見出しに何を付けるか」を明確に伝えることが大切だとわかりました。

キャッチアップ画像を複数作成

人物なし、装飾あり、人物ありなど3パターンほど作成し、画像の雰囲気によって記事の印象が大きく変わることを実感しました。

令和8年6月16日（火） Codex用の画像挿入手順を整理した日

画像をテーマごとに整理する

この日は、Codex用に使うダウンロード手順画像を、6つのテーマごとに分けて整理しました。

その後、既存ページ内にある手順画像カードのスペースへ、それぞれの画像を適切な場所に挿入する作業を進めました。

画像は、ただ挿入するだけではなく、ページ内で見やすくなるように、サイズを調整する必要もありました。

ChatGPT PlusからCodexへ作業をつなげる

作業の流れとしては、まずChatGPT Plusで文章を作成し、その内容をもとにCodex用プロンプトを作成しました。その後、作成されたプロンプトをCodexのコメント欄に貼り付け、読み込ませる形で作業を進めました。

令和8年6月17日（水） TOPページの文章を見直した日

TOPページで伝えたいことを見直す

この日は、TOPページの文章を見直しました。

「誰に向けた場所なのか」「何を学べるのか」「初心者でも安心して読める内容になっているのか」。この3つが伝わるように、文章の構成から作り直してもらいました。

文章の中には、読者の悩みに共感する内容、サイトの目的、読んだあとに得られる未来、安心感などを入れるようにしました。

訪れた人が安心できる文章にする

ただ説明するだけではなく、初めて訪れた人が、「このサイトなら自分にも関係がありそう」「ここなら少しずつ学べそう」と思えるような文章にしたいと考えました。

令和8年6月18日（木） TOPページの文章で悩んだ日

文章の正解が分からず悩む

この日は、TOPページの文章構成について、さらに見直しました。

何度も文章を作成してもらいましたが、「これでいいのか」「これが正解なのか」が分からず、かなり悩みました。

雰囲気違いの文章を比べる

そこで、作成した文章を2つのパターンに分けて作り直してみました。1つ目は、やさしく安心感のある文章です。2つ目は、対話感覚で親しみやすい文章です。

同じTOPページでも、文章の雰囲気によって、読者への伝わり方が変わることを感じました。

令和8年6月19日（金） 対象読者の幅について考えた日

年齢を限定しない読者像を考える

この日は、ブログのテーマやTOPページの印象について考えました。

これまでの文章や画像を見ると、50代を中心にした内容に見えやすく、対象者が少し狭くなっているように感じました。

自分自身は50代ですが、このブログは年齢を限定せず、AIやパソコンに不慣れな完全初心者に向けて、幅広く届けたいと思いました。

画像や文章の見え方に悩む

そのため、参考として画像を数枚生成してみました。しかし、作業を進めれば進めるほど、文章も画像も、「これでいいのかな」「もっと分かりやすい表現があるのではないか」と悩んでしまいました。

令和8年6月20日（土） ブログ記事の中身を増やしたいと思った日

記事の内容を厚くしたいと考える

この日は、ブログ記事の中身をもっと増やし、内容を厚くしたいと考えました。

ただ、何をどのように増やせばよいのか分からず、なかなか作業が進みませんでした。

読者に役立つ内容にする必要を感じる

次回の教室までに、テーマや文章を増やしたい気持ちはありました。しかし、思うように進められず、少し焦りもありました。

ブログ記事を作るには、ただ文章量を増やすだけではなく、読む人にとって分かりやすく、役に立つ内容にする必要があると感じました。

令和8年6月21日（日） 完璧にしようとして進まなくなった日

アップ前に完璧を目指してしまう

次回の教室では、ブログをアップするために必要な手続きや、できたところまで実際にアップしてみる予定でした。

そのため、今できているページを、「完璧にしなければいけない」と思ってしまいました。

まず形にして少しずつ直す大切さに気づく

しかし、完璧を目指しすぎると、逆に作業が進まなくなることも分かりました。

まだ足りない部分や直したい部分はあります。それでも、まずは今できているところまで形にして、少しずつ修正していくことも大切だと感じました。

令和8年6月22日（月） 文章だけでは見にくいと感じた日

ブログ記事の見た目について考える

この日は、ブログ記事の見た目について考えました。

文章だけだと、活字が並んでいるだけに見えてしまい、読みにくく感じる部分がありました。単調すぎると、見る側も途中で飽きてしまうかもしれません。

画像や図解で読みやすくする

そこで、各テーマや説明文の内容に合う画像を挿入するために、スクリーンショット画像を集めたり、編集したりしました。

文章だけで説明するのではなく、画像や図解を入れることで、初心者にも内容が伝わりやすくなると感じました。また、画像を入れることで、記事全体にメリハリが出て、読み進めやすくなると思いました。

令和8年6月23日（火） 教室で手直しがあり、アップはできなかった日

教室で手直しがありアップは見送る

この日は教室の日でした。

本来は、ブログをアップするために必要な手続きや、できている部分のアップ作業まで進める予定でした。しかし、手直しや修正が必要な部分があり、今回はアップまではできませんでした。

画像フォルダを整理する

また、画像フォルダの中身がごちゃごちゃになってしまっていたため、用途ごとにフォルダを分けて整理する作業を行いました。

画像をどのフォルダに入れるのか、どのように管理するのかについても、ChatGPT Plusに指示を出しながら進めました。

初心者の悩みも記事になると気づく

先生からは、「完全に完璧にしようとしなくていい」「初心者だからこそ分かる悩みや学習内容が、すべてブログの記事になる」と言われました。

その言葉を聞いて、今は完璧に仕上げることよりも、次回の教室までに足りない部分を補足し、内容を増やすことに専念しようと思いました。

令和8年6月24日（水） ブログ記事の中身を濃くしたいと感じた日

ブログ記事がまだ足りないため、次回の教室までに、ある程度中身を濃くする必要があると感じました。

そのため、自分が行っている作業や、ChatGPTとのやり取りを繰り返しながら、記事にできる内容を増やしていきました。

ChatGPTの返答でも、意味がすぐに理解できないときがあります。

そういうときは、ChatGPTに「どういう意味か」を聞き直し、理解してから次の工程に進むようにしています。

本当に基礎がまったくない状態だと、ひとつの作業にも何十倍もの時間がかかると感じます。

毎回のことですが、何を記事にするか悩みます。

その中で、自分の経験や足りない部分をもとに、ChatGPTに補足や間違いの訂正をしてもらいながら、一つひとつ作成しています。

作成した内容や作業工程は、ほかのテーマの記事としても掲載していく予定です。

令和8年6月25日（木） 頭を整理するために休んだ日

毎日AIに触ることで慣れようとしていましたが、作業を続けるうちに煮詰まってしまい、同じところをループしているように感じました。

そうなると、同じところでつまずいたり、画像などの作業工程を誤ったり、ほかの工程と混同してしまったりします。

そのため、少し頭を整理するために、この日は自主作業を休みました。

PCスクールで学びながら進めていても、これだけ大変で難しいと感じます。

経験や知識がまったくない状態で、動画などを見ながら自力でホームページを作成・構築するのは、かなり困難だと思いました。

年齢や向き不向きもあるので、一概には言えません。

それでも、初心者にとっては想像以上に時間と集中力が必要だと感じます。

一方で、大変な中でも、記事が増え、ページがそれなりの形になっていくのが目に見えてきました。

その変化を感じられることは嬉しいです。

令和8年6月26日（金） 初心者の疑問の大切さに気づいた日

新たな疑問にぶつかり、ChatGPTに質疑応答を繰り返しながら作業しました。

思うことを箇条書きのような形で打ち込んでいたのですが、送信する前に「内容がまとまっていない」と感じました。

それでも、自分では必要性があると思ったため、ChatGPTに「この内容は必要ですか」「重要ですか」と質問しました。

その返答では、初心者でなければ疑問に思わないような内容であり、かなり重要で必要な内容だと分かりました。

そのため、不足している部分を補ってもらえるように指示し、既存のHP内の適切なテーマに追記してもらいました。

初心者の疑問は、自分では小さなことに感じても、同じように悩む人にとっては役立つ内容になる可能性があると感じました。

令和8年6月27日（土） 記事文章を増やす作業を続けた日

前日の繰り返しで、記事文章を増やすことを目標に作業しました。

ブログ記事は、テーマを決め、文章を作成し、必要に応じて見やすい画像を生成するという流れの繰り返しです。

これから、まだまだ覚えることがたくさん出てくると感じています。

ただ、流れ作業のようになってしまい、内容が身につかなければ意味がありません。

そのため、新しいものを習う前に、今までの内容を少しでも確実に身につけながら進めていこうと思います。

令和8年6月30日（火）

PCスクールで、作成したところまでをインターネット上にアップするため、Star8（ドメイン）へ登録した。

ただ、結果が出るまで時間がかかり、ほかの手続きを進めることができなかったため、次回へ持ち越しになった。

そのほか、ページごとの文章構成の見直しや、画像生成などを行った。

ページによっては文章が長くなっているため、読者が途中で離脱しないように、どのように改善すればよいかを考えた。

各テーマに流れを作り、関連する記事へ自然に進めるような導線も必要だと思った。

ChatGPT Plusに改善案を出してもらっても、それが本当に正解なのか、最善なのか、自分では判断できないのが現状です。

回答そのものの意味が理解できないこともある。

その時は、回答内容をもう一度ChatGPT Plusに読み込ませて、「意味が理解できない」と伝え、さらに分かりやすく説明してもらってから次の作業へ進むようにした。

令和8年7月6日（月）

Googleの情報分析に使用する、Googleアナリティクスの登録を行った。

登録後に発行されたタグをChatGPT Plusに読み込ませて、内容を確認してもらった。

また、「FTPアップロード用に作り直してほしい」と指示し、アップロードしやすいようにファイルごとに整理してもらった。

更新日付なども確認できるため、どのファイルを修正したのか分かりやすくなった。

その後、FTPでファイルをアップロードしたところ、HPの画像やレイアウトが崩れてしまった箇所が出てきた。

ChatGPT Plusに「FTPでアップロードしたらレイアウトが崩れた」と伝え、HPのドメインと、崩れている箇所の画面コピーを貼り付けて確認してもらった。

また、ブラウザの閲覧履歴からCookieやキャッシュを削除し、もう一度サイトを読み込ませた。

ただし、Cookieを削除すると、サイトの買い物カートに入れた内容や、サインインしている状態が消える場合があるため、注意が必要だと分かった。

令和8年7月7日（火） Googleアナリティクスの設定を確認した日

Googleアナリティクスの設定ができているか確認した。

測定用のGoogleタグを、公開するHTMLページに入れる必要があるとのことで、Codexにサイト内のHTMLを確認してもらい、対象のファイルに追加してもらった。

ただ、Googleタグは同じページに何度も入れるとよくないとのことで、重複していないか、index.htmlにも入っているか、<head>内の正しい位置に入っているかも確認してもらった。

自分ではタグを見ても、どれが正しいのか分からないので、「削除していないか」「重複していないか」まで毎回確認するようにした。

今までは、とりあえず入っていればいいと思っていたが、入れる場所や重複にも注意が必要だと分かった。

令和8年7月8日（水） Google Search Consoleの登録を進めた日

Google Search Consoleの登録と、サイト所有権の確認を進めた。

Search Consoleは、自分のHPがGoogle検索でどのように表示されているか、登録されているかなどを確認するものらしい。

所有権確認のために、TXTレコードというものをDNS設定に追加する必要があった。

DNSの画面には、Aレコード、CNAME、MX、TXTなど、聞いたことのない言葉がたくさん並んでいて、正直かなり怖かった。

間違えて必要なレコードを消してしまうと、HPやメールが使えなくなる場合もあるとのことで、どこを押すのか、何を追加するのかをChatGPT Plusに何度も確認した。

DNSは、ドメインとサーバーをつなぐ案内板のようなものと説明され、少し意味が分かったが、実際の設定画面になると、やはり難しく感じた。

令和8年7月9日（木） ドメインやサーバーの図解を作成した日

ドメイン、サーバー、DNS、SSLの違いが自分でも混乱していたので、初心者向けの記事として分かりやすく説明するための図解を作成した。

HPデータを家具、サーバーを土地、ドメインを住所、DNSを案内板、SSLを玄関の鍵に例えると、文章だけよりも関係が分かりやすくなった。

自分が意味を理解できていない状態で記事にしても、読む人にも伝わらないと思うので、ChatGPT Plusの説明で分からない部分は、さらに簡単な言葉に直してもらった。

一度の説明で理解できないことも多いが、分からないまま先に進まず、例えや図にして確認すると、少しずつ頭の中でつながってくるように感じた。

令和8年7月10日（金） FFFTPについて調べ直した日

FFFTPについて調べ直した。

今までは、作成したHPをネットに送るものという程度しか分かっていなかった。

ローカル側が自分のパソコン内のファイルで、サーバー側がインターネット上に公開されるファイルとのことだった。

どのファイルを選び、どのフォルダへアップロードするのか、public_htmlとは何なのかなど、初心者には判断しにくい部分が多い。

フォルダごと送るのか、修正したファイルだけ送るのかも分からず、その都度ChatGPT Plusに聞きながら進めた。

簡単そうに見える作業でも、ファイルの場所や階層を間違えるだけで、画像が表示されなかったり、HPが崩れたりすることが分かった。

令和8年7月11日（土） FTP後の表示崩れを調べた日

FTPでアップロードした後に、画像やレイアウトが崩れた原因を調べた。

パソコン内では正常に表示されていたのに、ネットへアップすると違う表示になることがあり混乱した。

ChatGPT PlusにHPのドメインと、崩れている場所を伝え、画像パス、CSS、アップロードしたファイルの場所などを確認してもらった。

修正後も表示が変わらない時は、古い情報がブラウザに残っている場合があり、キャッシュやCookieを削除して再読み込みする方法も試した。

ただ、Cookieを削除すると、サイトへログインしていた情報や、買い物カートの内容が消える場合があるので、何でも削除すればいい訳ではないことも分かった。

令和8年7月12日（日） 画像が表示されない時の確認をまとめた日

画像が表示されない時に確認する内容を記事にまとめた。

画像ファイル本体、保存場所、HTMLのsrc、ファイル名、拡張子などを一つずつ確認する必要がある。

大文字と小文字が違うだけでも表示されない場合があり、パソコン内では表示されても、サーバー上では表示されないこともあるらしい。

自分では画像を入れただけのつもりでも、その画像がどこに保存され、HTMLがどこを見に行っているのかまで考えなければならない。

画像を挿入するだけでも確認することが多く、本当に基礎がないと一つの作業に何倍も時間がかかると感じた。

令和8年7月13日（月） 記事一覧の整理を考えた日

サイト内の記事が増えてきたので、記事一覧を整理することを考えた。

ページは増えたが、どの記事がどこにあるのか、自分でも探しにくくなってきた。

ChatGPT、HP制作、Codex、FFFTP、Google解析、ドメインやサーバーなど、テーマが増えたことで、カテゴリーの分け方も分かりにくくなっていた。

文章を減らすのではなく、見出し、カード、ボタン、ページ内リンク、折りたたみなどで整理する方法を考えた。

同じ時期に、今まで進めていたプロジェクトが表示されなくなり、エラー404のような状態になった。

これまでのやり取りが消えたのではないかと思い、かなり焦った。

作業履歴が長くなり、画像生成も多くなっていたため、新しいチャットへ引き継げるよう、重要な方針や作業内容をまとめることにした。

令和8年7月14日（火） 長い記事の分け方を考えた日

長くなっている記事を、初心者でも読みやすいように分ける方法を考えた。

ただ、文章を短くするために内容を削ると、初心者に必要な細かな説明までなくなってしまう。

そこで、概要を説明する親ページ、詳しい手順ページ、トラブル対処ページ、Codex用プロンプトページなど、役割を分ける案をChatGPT Plusに出してもらった。

「記事ページを増やしてブログ化する手順」も長くなっていたので、文章、HTML例、CSS例、チェックリストを削らずに、自然な流れで分けるCodex用プロンプトを作成した。

Codexへ指示する時は、変更してよい部分だけでなく、削除してはいけないものも細かく書く必要があると感じた。

令和8年7月15日（水） A8.netの記事を作り始めた日

A8.netの記事を新しく作るため、登録方法や使い方を調べた。

A8.netとは何なのか、登録した後に何をするのか、広告を探して提携する流れなど、自分でも分からないことが多かった。

登録画面の画像を使う場合、名前、住所、電話番号、メールアドレス、生年月日などの個人情報が写らないように、入力例やダミー情報に置き換える必要があった。

画像を何枚かに分けたり、反対に分割されている画像を一枚にまとめたり、下の部分が切れている画像を作り直したりした。

登録手順だけでなく、A8.netの仕組み、報酬が発生する流れ、公開URLとパソコン内URLの違いなど、初心者が疑問に思いそうな部分も図にした。

自分が実際に疑問に思ったことが、そのまま記事の内容になると感じた。

令和8年7月16日（木） Instagramの準備を始めた日

Instagramでサイトの内容を紹介する準備を始めた。

アカウント名や自己紹介文を考えたが、固すぎても親しみにくく、柔らかすぎても何のアカウントか分かりにくい。

サイトの内容が伝わるように、AI、ChatGPT、HP制作、ブログ作成を学んでいることを短くまとめた。

アイコン画像も何度か作成したが、写真風、企業風、手描き風、キャラクター風など、作るたびに何か違うと感じてしまった。

人物だけでなく、二頭身のキャラクターや、少しインパクトのあるデザインも試した。

画像は一度で決まることが少なく、文章以上に悩むこともある。

令和8年7月17日（金） 挑戦記録をInstagram画像にした日

「50代・未経験初心者がAI活用を学び、ビジネスにつなげるまでの挑戦記録」の記事を、Instagram用の5枚のスライド画像にした。

一枚の画像に文章を入れすぎると読みにくくなり、反対に短くしすぎると内容が伝わらない。

Instagramで表示した時に、上下や左右の文字が切れないように、大切な文字や人物を中央に寄せて作成した。

完成したと思っても、2枚目だけ作り直したり、3枚目の構図が他と似ているので変化をつけたりした。

HPの記事を、そのまま画像にするのではなく、要点を分けて順番を作る必要があると分かった。

令和8年7月18日（土） ChatGPTの記事をInstagram用にした日

ChatGPTを初めて使う人向けの記事を、Instagram用の7枚構成にした。

1枚目から7枚目まで番号を入れ、同じ配色や雰囲気になるように画像を作成した。

ただ、Instagram用にすると、タイトルの上や下が切れたり、番号や文字が端に寄りすぎたりすることがあった。

一度生成した画像でも、上下を空ける、文字を中央へ寄せる、人物を少し小さくするなど、何度か作り直した。

画像生成は便利だが、指示した通りに毎回なる訳ではなく、最終的には一枚ずつ自分で確認する必要がある。

令和8年7月19日（日） OBSの記事をInstagram投稿用にした日

OBSの記事もInstagram投稿用にした。

内容が3つのテーマに分かれていたので、3枚構成で作成した。

画像自体はできたが、Instagramへ投稿した時に、思っていたようなスライド表示にならないことがあった。

複数の画像を一度に選ばないと、一枚ずつ別の投稿になることも分かり、画像を作ること以外にも、投稿方法を覚える必要があった。

次に何を投稿するか、何枚構成が見やすいかなど、HPとは違う考え方が必要で、また新しい作業が増えた。

令和8年7月20日（月） 検索やSNSで見つけてもらう方法を考えた日

HPを作っただけでは、すぐに見てもらえる訳ではないので、検索やSNSで見つけてもらう方法について記事を作ることを考えた。

Google検索、Search Console、サイトマップ、SEO、Instagramなど、関係するものが多く、一つの記事にまとめるか、別の記事にするか迷った。

内容が重複しないように、全体像を説明するページと、実際の登録手順や使い方を説明するページに分ける案を考えた。

記事を増やすほど、関連する記事同士をどうつなぐかが重要になる。

ただ記事を並べるだけでは、読者も自分も迷ってしまうと感じた。

令和8年7月21日（火） 記事一覧のカード画像を作成した日

記事一覧のカード画像を順番に作成した。

画像全体の雰囲気をそろえるために、柔らかい3Dカートゥーン調、パステルカラー、明るい背景を基本にすることにした。

ただ、毎回ノートパソコン、コーヒー、ノート、ロボットを並べると、全部同じ画像に見えてしまう。

テーマが一目で分かるように、A8.netは提携や報酬、Excelは表やセル、トラブル記事は分岐路や警告、チェックマークなど、主役になるものを変えるようにした。

統一感を出すことと、同じ画像に見えないようにすることの両方が必要で、その加減が難しい。

令和8年7月22日（水） 画像生成の方針を決めた日

今後の画像生成の方針を決めた。

ブログカード用画像は横長にし、正方形の画像を無理に引き伸ばさないようにする。

画像の中に記事タイトルを全部入れると、カード本文のタイトルと重複してしまうので、「初心者向け」「確認」「登録」「画像生成」など、短い言葉だけにすることにした。

「ChatGPT Plus画像生成の使い方」のカード画像も作成した。

プロンプトを入力し、画像が生成され、完成した画像を選ぶ流れが一目で分かるように考えた。

画像を作るだけでなく、カード内で大きくなりすぎないか、スマホで切れないかも考える必要がある。

令和8年7月23日（木） A8.netの記事カード画像を作成した日

A8.net関係の記事カード画像を続けて作成した。

「A8.netとは」「登録方法」「登録後の使い方」「困った時の確認」など、似たテーマが何枚もあるため、画像まで似ると区別がつかなくなる。

登録は入力画面やチェック、広告検索は虫眼鏡や提携、困った時は警告や確認表など、同じA8.netでも構図を変えるようにした。

一目で記事の違いが分かる画像にするのは難しく、何度も見比べながら修正した。

令和8年7月24日（金） つまずき記録とExcelの記事画像を作成した日

「AIブログ初心者のつまずき記録」と、「ExcelでAI学習記録を管理する方法」の画像を作成した。

最初に作った画像は、どちらもパソコン、ノート、コーヒーなどが中心で、あまり変化がなかった。

これでは記事の内容が伝わりにくいと思い、つまずき記録は、迷路、分岐路、壊れたリンク、赤い警告から緑の確認へ進む流れを主役にした。

Excelの記事は、表計算のセル、カテゴリー別の整理、進捗ゲージ、カレンダー、グラフなどを主役にするようにした。

画像生成でも、何を主役にするかを最初に決めないと、いつも同じような物が出てくることが分かった。

令和8年7月25日（土） 記事一覧カードの表示を確認した日

記事一覧カードの高さや画像の表示について確認した。

カードの高さを固定すると、文章が多いカードだけ切れたり、スマホで表示が崩れる可能性がある。

文章を省略記号で切らず、カード本文が自然に縦へ伸び、ボタンだけ下にそろう形がよいとのことだった。

PCでは3列、タブレットでは2列、スマホでは1列にし、画像は同じ比率で表示するCSSを考えた。

見た目をそろえるために固定する方が簡単だと思っていたが、内容を切らずにそろえる方法もあることを知った。

令和8年7月26日（日） 記事を探しやすくする方法を考えた日

HP内の記事が増えたことで、調べたい手続きやテーマを探しやすくする方法を考えた。

Google Search Consoleの記事が入っているか確認したところ、Googleアナリティクスと同じ記事内にまとめられていた。

記事自体はあるが、Search Consoleだけを探している人には、見つけにくい可能性があると感じた。

記事一覧の上に、「やりたいことから探す」「サービス名から探す」「困っていることから探す」という入口を作る案を考えた。

ただ、いきなり記事やカテゴリーを動かすと、リンクや画像、表示が崩れる可能性がある。

そのため、まずCodexに現在の記事一覧、カテゴリー、リンク、CSS、JavaScript、Googleタグなどを確認してもらい、ファイルを変更せずに報告だけしてもらうプロンプトを作成した。

作業を進めるほど、すぐに修正するのではなく、最初に現状を確認することが重要だと感じるようになった。

令和8年7月27日（月） 学び日記を見返した日

途中で止まっていた学び日記を見返した。

毎日作業していたつもりでも、記事や画像を作ることに集中し、何をしたのか記録するところまで手が回っていなかった。

やり取りを振り返ると、HP制作だけでなく、ドメイン、サーバー、FTP、Google解析、A8.net、Instagram、画像生成など、思っていた以上に多くのことを進めていた。

その時は進んでいないように感じても、後から見ると、失敗したことや分からなかったことも含めて、一つずつ記事や記録として形になっている。

まだ自分一人で全部できる訳ではなく、ChatGPT PlusやCodexに何度も確認しながら進めている状態です。

でも、分からないことを分からないままにせず、何度も聞き直したことや、失敗して修正したことが、同じ初心者の人にとって参考になる内容になると思う。

完璧に完成してから記録するのではなく、迷ったこと、失敗したこと、進まなかったことも、今後はその都度残していこうと思います。

HPをアップロードする前のファイル整理

この日は、HPをFFFTPでアップロードすることを考えて、どのファイルを使えばいいのか整理しました。

HP制作を続けていると、画像や修正版のファイルが増えてきて、「これは今使っている画像なのか」「前の画像なのか」「アップロードする必要があるのか」が分かりにくくなってきました。

• FTPアップロード用
• 画像保存用
• 参考画像
• 作り直した画像

今までは、とにかく作ったものを保存していたので、後から見たときに自分でも分からなくなることがありました。HPを作るだけではなく、ファイルを整理しておくことも大事だと感じました。

HPにまだない記事を確認

これまでChatGPTやCodexとやり取りしてきた内容の中に、「まだHPの記事になっていないものがあるのでは？」と思い、今までの作業を見直しました。

すでに記事になっている内容と、まだ記事になっていない内容を分けて、新しいページにした方がいいのか、今ある記事に追加した方がいいのかを考える作業をしました。

記事を増やせばいいというわけでもなく、似た内容の記事が増えすぎると、逆に自分も読んでくれる人も探しにくくなると思いました。この頃から、「新しい記事を作る前に、今ある記事を確認する」ということを意識するようになりました。

FFFTPで何をアップロードするのか迷う

FFFTPを確認すると、サーバー側のファイルは以前の状態のままで、最近Codexで変更した内容はまだアップロードしていませんでした。

ここでかなり迷ったのが、「結局どのファイルを選んでアップロードすればいいのか」ということでした。更新日時が新しいファイルだけを選べばいいのか、フォルダごと送ればいいのか、画像も全部送るのか、判断がつきませんでした。

調べていく中で、更新日時だけを見るのではなく、「今回、実際に何を変更したのか」を確認して、その変更に必要なファイルだけをアップロードする考え方が大事だと分かってきました。

• 文章を直したならHTML
• 色や配置を直したならCSS
• 画像を変更したならその画像

今までは「新しいファイルを送る」という感覚でしたが、「変更した内容から必要なファイルを考える」という見方に少し変わりました。

HP画像フォルダを整理

HPで使用している画像が増え、保存場所もバラバラになってきたため、画像フォルダの整理方法を考えました。

• 記事一覧などで使うカード画像
• 記事本文で使う画像
• DNSやFTPなどの説明図
• ロゴなど共通で使う画像
• Instagram専用画像
• 参考画像
• 編集中の画像

特に迷ったのがInstagram用画像です。HPから読み込まない画像なら、公開サーバーへ送る必要はないということも分かりました。画像が増えてきたので、この整理は今後かなり大事になりそうです。

記事一覧のカード画像を作り直す

最初はテーマ名を画像の中にも大きく入れていましたが、カードの横には記事タイトルが表示されています。「同じ文字が2回出ていて少しくどい」と感じ、画像の中は文字を減らし、パソコン、フォルダ、サーバー、ChatGPT、Codex、FFFTPなど、テーマが一目で分かるイラストを中心にしました。

正方形で作った画像を横長カードに入れると、画像が小さくなったり、上下左右に余白が出たり、文字やイラストが切れたりしました。画像そのものに余白が入っている場合はCSSだけでは直らず、最初から使う場所のサイズや比率に合わせて画像を作ることが大事だと分かりました。

カード画像の余白で何度もやり直す

「余白をなくしてください」と指示しても、実際にHPで見ると余白が残ったり、横長にしてもイラスト自体が小さいままだったりしました。正方形の画像をただ横に広げるのではなく、横長画像に合わせて人物やパソコン、文字などの配置そのものを作り直す必要がありました。

object-fit: containでは画像全体が見える一方で余白が出る場合があり、coverではカードいっぱいにできますが文字や人物が切れる場合があります。「画像の問題なのか、CSSの問題なのか」を分けて考えるようになったのは少し進歩だと思います。

Codexで編集した最新ファイルが見つからない

Codexで「変更しました」という報告が出ているのに、FFFTPで最新のファイルが見つからないことがありました。Codexでの作業完了と、HPがインターネット上で更新された状態は別だと改めて確認しました。

Codexで編集 → パソコン内のファイルが変更される → FFFTPでそのファイルを確認 → サーバーへアップロード → ブラウザで確認、という流れです。Codexが「完了」と表示しても、サーバーへ送らなければ公開中のHPは変わりません。

Instagram投稿用の画像を作成

Instagramからも記事を知ってもらえるように、投稿用画像を作る作業を続けました。最近は1つの記事を7枚程度のスライドに分けています。

1. 表紙
2. 困っていること
3. 基本の考え方
4. 確認する手順
5. 具体的な説明
6. 注意点
7. まとめ

文章を全部画像へ入れると文字だらけになるため、「1枚で1つだけ伝える」ことを意識し、文字切れや画像切れを防ぐため人物や文字も中央寄りにしています。

参考画像に似すぎる問題

参考画像と構成までかなり似た画像になることもありました。欲しいのは同じ画像ではなく、色合いや柔らかい雰囲気だけを合わせた別のデザインです。

「配色や柔らかい3D感は参考にする」「構図や小物、人物の配置は変える」と指示を分けるようになりました。

AI画像の修正は全部一度に直さない

文字が多い、人物が小さい、余白が多い、横長にしたい、色を変えたいなど、気になる点を一気に指示すると別の部分まで変わることがあります。

最近は、文字 → 構図 → 比率 → 色 → 余白のように、一つずつ確認しながら直す方がよいと思うようになりました。このやり方は画像生成だけでなくHP修正でも同じなのかもしれません。

サイト名とロゴを考える

HPとInstagramに統一感を持たせるため、サイトで使う名前やロゴについても考えました。候補として「AIはじめノート」という名前を使い、ロゴも作成しました。

このサイトではChatGPTやHP制作、Codexなどデジタルの内容を扱っているので、初心者でも始めやすい感じは残しながら、デジタル寄りで、ファビコンにも使えるくらいシンプルな形という方向で何度か作り直しました。

OBSの記事を見直す

これまではダウンロード、インストール、初回設定など、OBSを使い始める前の説明が中心でした。しかし初心者が知りたいのは「インストールしたあと、どうやって録画するの？」というところです。

• OBS画面の見方
• シーンとソース
• 画面キャプチャとウィンドウキャプチャ
• 音声ミキサー
• 保存場所とテスト録画
• 音が入らないとき
• 録画前の個人情報確認

実際に1本録画して、保存した動画を見るところまで初心者が順番に進める記事にしたいと思っています。

GoogleアナリティクスとSearch Consoleの記事を確認

登録方法や設定方法はかなり内容が入っていますが、自分自身も登録した後に「で、毎回どこを見ればいいんだろう？」となりました。

Googleアナリティクスでは、今アクセスがあるか、どの記事が読まれているか、どこから来たのか、スマホかPCかを確認します。Search Consoleでは、Google検索で何回表示・クリックされたか、どんな検索キーワードだったか、どの記事が検索に出ているかを確認します。

登録できたことで終わりではなく、数字を見てHPを少し直すところまでできれば、やっと使っていることになるのかなと思いました。

次にやりたいこと

• Googleアナリティクスの見方
• Search Consoleの見方
• OBSで最初の画面録画をする方法
• AI画像を希望どおりに修正する方法
• Codexで変更した内容がHPへ反映されないときの確認方法

記事を増やすことだけを目的にせず、今ある記事と重複していないか確認しながら、自分でも後から見て分かるHPにしていきたいと思います。

カード画像の失敗を、専用の記事にする

カード画像の余白で何度も迷ったので、今度はその失敗を1つの記事にまとめることにしました。前は画像を変えれば直ると思っていましたが、実際にはCSSと画像の比率も関係していて、何から確認すればよいのか分からなくなっていました。

正方形画像を横長カードへ入れると小さく見えたため、最初はCSSを触りました。containでは画像全体が見える代わりに余白が残り、coverではカードいっぱいになりましたが、今度は文字や人物が切れました。

それでも直らず画像を単体で見てみると、画像ファイルそのものにも余白が入っていました。CSSの余白と画像の中の余白は別なので、片方だけ見ていても直らないことがあると、やっと少し分かりました。

この流れを、記事カード画像の余白をなくす方法としてまとめました。公開日は8月14日で、8月21日に内容を確認した記事が、現在の公開サイトでも開けることを確認しています。自分が何度も止まったところは、同じことで困る人向けの記事にできるのかもしれないと思いました。

1枚の画像を直すつもりが、ほかのカードまで変わる

記事カードの形を調整している途中で、「AI学習ブログ記事一覧｜PC初心者向け」のカードが以前と違う形になったこともありました。1枚だけ直しているつもりだったので、最初はなぜほかのカードまで変わったのか分かりませんでした。

確認すると、width、height、aspect-ratio、object-fit、padding、marginなどを共通のカードへ指定すると、同じCSSを使うほかのカードにも影響することが分かりました。

そこでカードを全部作り直すのではなく、正常だったカードのHTMLとCSSを見て、以前の構造へ戻す考え方で確認しました。今でもCSSだけを見てすぐ原因が分かるわけではありませんが、1枚だけの問題か、共通部分の問題かを先に分けるようにしています。

記事を作っただけでは、読んでもらう入口がなかった

新しい記事のHTMLを作ったところで終わった気持ちになりましたが、記事一覧を見ると、その記事へ行くカードやボタンがまだありませんでした。PCの中に記事があっても、読んでくれる人が見つけられなければ、ページへ入りにくいままです。

そこで記事一覧へカードを追加し、「困っていることから探す」にも「カード画像に余白が出る・画像が切れる」という入口を作りました。記事を書くことだけでなく、どこからその記事へ入ってもらうかまで確認する必要があると分かりました。

そのあと公開用ファイルを確認すると、新しい記事のHTMLだけでなく、記事一覧のHTML、記事用に追加したCSS、URLを加えたサイトマップも必要でした。どのファイルを選べばいいか分からず、また止まってしまいましたが、更新日時が新しいものを全部送るのではなく、変更した内容から必要なファイルを考えるようにしました。

FFFTPで迷ったときの詳しい確認は、HP更新でどのファイルをFTPアップロードするかと、Codexで編集したのにFFFTPに最新ファイルが表示されないときの記事にも残しています。基本的なことでも、久しぶりに作業すると左側がPC、右側が公開サーバーだったかをまた確認しています。

別サイトの検索表示が急に減った原因を調べる

AIやHP制作を学び始めたあと、練習も兼ねて、ニュースや話題を扱う別のサイトも作りました。Google AnalyticsとGoogle Search Consoleを設定し、検索からどれくらい見られているのか、どの記事が読まれているのかを見るようにしていました。

最初は検索表示回数やアクセスが少しずつ増えていたので、「ちゃんとGoogle検索から見てもらえているんだ」と思っていました。サイト全体が順調に伸びているようにも感じていました。

ところがSearch Consoleを見ると、それまで動いていた表示回数とクリック数が、8月18日ごろから急にほとんど動かなくなっていました。最初はSearch Consoleの不具合なのか、Analyticsの設定がおかしいのか、FTPで何か失敗したのか、何が原因なのか分かりませんでした。

Googleからサイトが見えなくなっていないか確認

HTTPSの問題、FTP移行の影響、インデックスから外れた可能性なども考えました。まずは、Googleからサイトを見ること自体を止める設定になっていないか確認することにしました。

トップページや記事ページが普通に表示されるか、Googlebotでも取得できるかを確認しました。そのほか、HTTP 200、index, follow、X-Robots-Tag、canonical、robots.txt、sitemap.xml、存在しないURLが404になるかも見てもらいました。

HTTPS自体には大きな問題が見つからず、PC移行やFTP中断だけが主な原因とも考えにくい状態でした。大きな技術トラブルが見つからなければ安心できると思っていましたが、実際には「それなら、なぜ検索されなくなったの？」と、さらに分からなくなりました。

サイト全体ではなく、一部の記事へアクセスが集中していた

Analyticsも見直すと、サイト全体へ平均的にアクセスが来ていたわけではなく、一部のトレンド記事が全体の数字をかなり押し上げていたことが分かりました。

自分では「サイト全体が伸びている」と思っていましたが、実際には特定の記事にアクセスが集中していました。その話題への関心が下がれば、サイト全体の数字も大きく下がって見える可能性があります。

過去の作業を見ると、8月18日に9記事を追加し、その中にはスポーツ関係の記事も複数ありました。記事を9件追加したことが原因だと分かったわけではありません。ただ、速報やトレンド記事は検索される期間が短く、新しいページをGoogleが確認する前に話題自体が終わることもあるのかもしれないと考えました。

複数の記事で同じ文章を繰り返していた

記事を読み返すと、PERSPECTIVE、NEXT ACTION、共通FAQなど、似た説明を複数の記事へ繰り返し入れていました。最初は読者に分かりやすくするために入れていたものです。

記事が増えるにつれて、記事固有の情報より同じ説明が目立つ部分が出ていました。これがGoogleからスパムと判断されたと確認できたわけではありませんが、自分のサイトで改善した方がよい部分として見つかりました。

8月25日に実際に直したこと

原因を完全に特定できたわけではありませんが、自分で見ても直した方がよいと思った部分から整理しました。

• PERSPECTIVEとNEXT ACTIONを削除
• 複数記事で共通していたFAQを削除
• 記事ごとに必要な注意書きは残す
• 関連記事を2件から6件へ増やす
• 共通タグ、同じジャンル、公開時期などを見ながら関連記事を選ぶ
• 自分自身の記事と重複記事を関連記事から除外
• カテゴリ一覧を古い順から新着順へ変更

修正後は全ページを確認し、必要なファイルをFTPで送り、公開サイトでも表示を確認しました。1か所直せば終わりだと思っていましたが、構造化データ、運営用の表示、著者表示、公開日時、読了時間、sitemap.xmlのlastmod、URLの形、本文の重複など、調べると確認する場所がかなりありました。

Googleのアップデート時期も近かった

検索の数字が落ちた時期を調べると、Google公式では「August 2026 spam update」が8月18日に始まり、8月21日に完了したと案内されていました。数字が落ち始めた時期と近かったため、影響の可能性も考えました。

ただし、それが今回の直接の原因だったとは確認できませんでした。Search Consoleの「手動による対策」で大きな問題が出ていなくても、検索表示や順位が以前と同じとは限らないことも、今回初めて知りました。問題なしと出ていれば大丈夫だと思っていたので、最初はなぜ数字が減るのか分かりませんでした。

直せばすぐ戻ると思っていた

記事構成や関連記事を直せば、検索表示やアクセスもすぐ元へ戻ると思っていました。しかし、実際にはすぐ改善したわけではありませんでした。

最初は、検索数が減ったら何か大きなエラーがあると思っていました。調べてみると、検索需要、トレンドの終了、インデックス、記事内容、内部リンク、サイト構造、Googleのアップデートなど、原因候補は1つではありませんでした。

今でも原因を1つに決められたわけではなく、全部理解しているわけでもありません。それでも、検索の数字が急に減ったときに、以前より「まず何を確認するか」は少し分かるようになりました。

いつもあったCodexのアイコンが見当たらない

Windowsの下のバーから、いつも使っていたCodexのアイコンが見当たらなくなり、最初はCodex自体が消えたと思いました。ChatGPTという名前のアプリはありましたが、それを開いてよいのかもすぐには分かりませんでした。

調べていくうちに、Codexと新しいChatGPTデスクトップアプリの関係が変わっていることが分かりました。ただ、画面や機能は変わることがあるので、自分の記憶だけで記事にするのは危ないとも感じました。

せっかく記事を書いても、書いたときにはもう画面が変わっていたら困ります。そこでOpenAIの公式情報を先に確認し、確認できたことと、Windowsではまだはっきり確認できないことを分けて記事へ入れました。

「Codexアイコンが消えた？」の記事は8月29日にPC内で完成し、記事一覧のカードと「困っていることから探す」の入口もPC内へ追加しました。ただし、公開中のhukugyo.netではまだページが見つからないため、ここでは公開済みの記事としてリンクしていません。

PC内で完成した記事と、公開HPはやはり別だった

Codexで記事が完成し、PC内には新しいHTMLがあります。それでも公開サイトを開くと404になり、まだ読める状態ではありませんでした。分かったつもりでも、実際に作業するとまた同じところで迷います。

Codexで編集してPC内のファイルが変わり、必要なものをFFFTPでサーバーへ送り、最後にブラウザで確認するところまでが公開作業です。「作成しました」という表示だけでは、公開HPが変わったことにはなりません。

今回は、新規記事のHTML、記事一覧、CSS、サイトマップが公開に必要な候補だと確認しました。同時に、公開日、最終更新日、内容確認日は同じ意味ではなく、何でも新しい日付へ変えればよいわけではないことも確認しました。

まだFTPアップロードはしていません。更新日時が新しいという理由で大量に送らず、今回実際に変えたファイルだけをもう一度確認してから進めます。

ロゴを何度も作り直す

サイト名を決めたので、次にロゴを考えました。

最初は「ノート」という名前なので、本やノートを使ったデザインも考えました。

ただ、実際にこのサイトで扱っている内容は、ChatGPT、Codex、HP制作、ブログ、画像生成など、紙よりもデジタルの作業が中心です。

そこで、「AIはじめノートという名前だから、ロゴもノートの形にしなくてはいけないわけではない」と考え直しました。

初心者マークとノートパソコンを組み合わせたデザインも作ってみましたが、ファビコンとして小さく表示することまで考えると、もう少し単純な形の方がよさそうでした。

何度か作り直して、最終的にはかなりシンプルなシンボルマークにしました。

シンボルマークの「目」に見える部分を削除

作ったロゴをよく見ると、シンボルマークの中にある2つの点が「目」のように見えました。

今回はキャラクターのようなロゴにしたいわけではなかったので、この部分を消すことにしました。

ほんの小さな点ですが、あるだけで顔のように見えてしまいます。

削除すると、キャラクターではなく、シンプルなデジタル系のマークに近くなりました。

ロゴは大きな部分だけではなく、こうした小さな違いでも印象がかなり変わることを知りました。

ロゴのフォントも調整する

シンボルが決まったあと、「AIはじめノート」の文字部分も調整しました。

マークだけ良くても、文字の雰囲気が合っていないと全体として少し違和感があります。

そのため、シンボルの雰囲気に合うようにフォントも調整しました。

ロゴというとマークだけを考えていましたが、「シンボルマークと文字の両方を合わせて考える」必要があることも今回分かりました。

背景透過PNGと白背景の違いを確認する

最初はロゴを背景透過PNGにしました。

背景が透明なら、いろいろな場所で使いやすいと思ったからです。

ただ、実際に使用する場所によっては、背景が透明ではなく白背景の画像として使いたい場合もありました。

そのため今回は、使用する場所に合わせて背景についても考え直しました。

画像を作るときは見た目だけではなく、「この画像をどこで使うのか」まで考えないといけないことが少しずつ分かってきました。

ファビコンでも使えるロゴを考える

今回ロゴを考える中で、ファビコンでの見え方も意識しました。

ファビコンはブラウザのタブなどに表示される、とても小さなマークです。

大きな画像ではきれいに見えていても、小さくすると文字や細かい装飾はほとんど分からなくなります。

そのため、

• 形を複雑にしすぎない
• 小さな文字を詰め込まない
• シンボルだけでも分かるようにする
• 細かい装飾を増やさない

ファビコンでは「AIはじめノート」という文字全体ではなく、シンボルマークだけを使用する形にしました。

今までは画像を大きく表示したときの見え方ばかり考えていましたが、小さくしたときの見え方まで考える必要があることを今回初めて意識しました。

ヘッダーについて調べる

ロゴをHPに配置してみると、今度はトップページでの大きさが気になりました。

トップ画像の上に「AIはじめノート」が大きく表示されていたので、「これはバナーなのかな？」と思って確認しました。

調べてみると、ページ上部にロゴやサイト名、メニューが入っている部分は一般的に「ヘッダー」と呼ばれることを知りました。

一般的なサイトでは、ロゴだけを大きく置くのではなく、「ヘッダーの中にロゴ・サイト名・メニューをまとめる」形が多いことも分かりました。

そこで今回のサイトも、その形に近づけることにしました。

トップページだけヘッダーの動きが違うことに気づく

確認していると、トップページの「AIはじめノート」だけ、他のページと同じように固定されていないことに気づきました。

そこで、ロゴだけを固定するのではなく、「ロゴ・サイト名・メニューを含むヘッダー全体」を同じ動きにするようにCodexへ指示することにしました。

トップ画像まで固定する必要はなく、トップ画像や本文は普通にスクロールしていく形にします。

以前なら単純に、「固定してください」とだけ指示していたと思います。

今回は、

• index.htmlの構造
• 他ページとの違い
• CSS
• position
• top
• z-index
• overflow

などを確認してから、原因になっているところだけを修正するようにしました。

Codexへの頼み方も、以前より少し具体的になってきたように思います。

PC版だけ古いロゴが表示される

ロゴの「目」を消したはずなのに、確認するとPC版ではまだ目のあるロゴが表示されていました。

スマホとPCで表示が違うため、画像自体の問題だけではないかもしれません。

考えられる原因として、

• PC用とスマホ用で違う画像を使っている
• 古い画像ファイルを参照している
• CSSで別画像を指定している
• ブラウザのキャッシュに古い画像が残っている

などがあることを知りました。

そこでCodexには、また画像を作り直すのではなく、「PC版では実際にどの画像ファイルを読み込んでいるのか確認してください」と指示しました。

表示がおかしいとき、見た目だけを直そうとするのではなく、まず何が表示されているのか、どのファイルを使っているのかを確認することも大切だと分かりました。

フッターのロゴサイズも見直す

ページの一番下にあるフッターを見ると、「AIはじめノート」の表示が少し大きいように感じました。

ヘッダーはサイトの入口なので、ロゴがある程度目立ってもいいと思います。

でもフッターは、ページを読み終わったあとの補助的な場所です。

そのため、フッターのロゴはヘッダーより控えめな大きさにすることにしました。

また、ロゴそのものの大きさだけではなく、

• 上下の余白
• padding
• margin
• 画像の高さ

などでも、フッター全体が大きく見えることがあることを知りました。

Codexには、ロゴだけを見るのではなく、フッター全体のバランスも確認するように指示しました。

HP・Instagram・ファビコンを同じイメージにする

今回のロゴ作成はHPだけのためではありません。

Instagramも運用しているので、「HP・Instagram・ファビコンで同じシンボルを使う」ことも考えました。

今まではHPの記事や画像を一つずつ作ることが多かったのですが、これからは、「全部を見たときに同じサイトだと分かるか」というところも意識したいと思います。

サイト名、ロゴ、Instagramがそろうと、少しずつですが自分のサイトらしくなってきたように感じます。

トップページの最終更新日と内容確認日を確認

トップページを確認していると、「最終更新日」「内容確認日」が変更されていないことにも気づきました。

ページの内容を修正しても、こうした日付まで自動で変わるとは限らないため、自分で確認する必要があります。

今回はCodexに、「最終更新日と内容確認日の部分だけを確認し、他のところは変更しない」という指示を作りました。

以前は、一度にいろいろな部分を直してもらうこともありました。

でも、それだと関係のない部分まで変わってしまう心配があります。

最近は、「一つの問題なら、その部分だけを直してもらう」というやり方を意識するようになりました。

今日の作業を振り返って

今日は新しいページをたくさん作るというより、サイト名、ロゴ、ヘッダー、フッター、ファビコンなど、今まで作ってきたHPをそろえていく作業が中心でした。

最初の頃は、「ページが表示された」だけでも十分でした。

今は、

• ロゴが大きすぎないか
• PCとスマホで同じものが表示されているか
• ファビコンにしても分かるか
• 他のページと動きが違わないか

というところまで見るようになりました。

まだ自分一人でコードを全部理解して直せるわけではありません。

それでも、表示されたものを見て、「ここは何か違う」と気づいて、Codexへ確認する内容を少しずつ具体的にできるようになってきました。

これはHPを作り始めた頃にはできなかったことだと思います。

今回覚えたこと

• サイト名とSEO用タイトルは分けて考えられる
• 「ノート」という名前でもロゴを本の形にする必要はない
• ロゴはファビコンで使う小ささまで考える
• ロゴ上部の図形は「シンボルマーク」と呼ぶ
• ページ上部のロゴやメニューがある場所は「ヘッダー」と呼ぶ
• ページ下部は「フッター」と呼ぶ
• 固定する場合はロゴだけではなくヘッダー全体を考える
• PCとスマホで別の画像を参照している場合がある
• 画像を変更してもキャッシュで古いものが表示される場合がある
• フッターのロゴはヘッダーより控えめでよい
• HP、Instagram、ファビコンのデザインをそろえると統一感が出る
• Codexには変更してほしくない場所まで指定した方が安全
• 問題が一つなら、その部分だけを修正した方が原因を確認しやすい

8月に別サイトで起きた検索表示回数とクリック数の急減について、当時の作業記録とSearch Consoleの画像をもう一度見返しました。

当時は、気になるところを直せばすぐ数字が戻ると思っていました。でも実際にはそうならず、今でも原因を1つに決められたわけではありません。

今回改めて整理すると、単純に「Googleのアップデートが原因」と決めるのではなく、サイトが表示されるか、Analytics、Search Console、インデックス、Google公式のアップデート情報、検索需要、記事内容の順に確認する必要があると感じました。

Googleのアップデートについて書くため、ニュース記事だけでなくGoogle Search Status Dashboardなどの公式情報を先に確認しました。時期が同じでも、それだけで今回の原因だったとは言えないことにも注意しました。

この経験を、同じ画面を見て困っている初心者向けの記事としてPC内へ作成しました。Search Consoleの実際のグラフ画像も記事本文へ入れましたが、別サイトの名前やURLは載せていません。まだFFFTPでアップロードしていないため、公開サイトでは404の状態です。

• 「Codexアイコンが消えた？」の記事は公開済みになったため、公開ページで表示とリンクを確認する
• PC内で作成した検索アクセス急減の記事と、今回更新した学習記録を、必要なファイルだけ選んで公開する
• 検索アクセス急減の記事に合う記事カード画像を用意し、仮画像を使わずに記事一覧へ反映する
• Search Consoleの数字をしばらく確認し、変化があった場合は確認日と一緒に記録する
• 既存記事の日付は、内容を実際に見直したページから公開日・最終更新日・内容確認日を分けて整理する

PC内で完成していることと、公開サイトで確認できることを混ぜないようにして、次も1つずつ確認して進めたいと思います。