今日のテーマ
ホームページからブログやノウハウ集に飛ぶためのカードを作る
以前AIから「トップページに入口となるカードを設置しては?」って提案されてたんだよね。それがずっと気になってて、今日ようやく実行に移すことにした。
最初の疑問：「デザイン改良」って何から始めればいい？
俺がAIに最初に伝えたのは、こんな漠然とした要望だった。
今日はホームページのデザインを改良したい。具体的にはブログ一覧やノウハウ集をカード形式にしてリンクしやすいようにしたい。
正直、この時点では「カード形式」が何を指すのかも曖昧だったし、どこをどう変えればいいのかも分かってなかった。
了解しました。確認ですが、今日のテーマは次の内容でよいですね。
テーマ：ホームページのデザイン改良（ブログ一覧・ノウハウ集をカード形式にして見やすくリンクしやすくする）
進め方を整理すると、以下の2ステップになります。
🔹ステップ1：なぜカード形式にしたいと思ったのか、どんなレイアウトをイメージしているか
🔹ステップ2：HTML＋CSSによるカードデザイン例を示します
確認させてください：
- 今回は「ブログ一覧」と「ノウハウ集」を同じカードデザインで表示したいですか？
- サイト全体のテイスト（例：シンプル／和風／モダンなど）があれば教えてください。
AIが聞いてくれたおかげで、自分が何をしたいのか整理できた気がする。でも、まだ具体的なイメージは湧いてなかった。
疑問②：AIはどうやって今のサイトを把握するのか？
改善したいホームページのURLはhttps://jikken-shindanshi.com/である。
URLを伝えれば、AIが勝手にサイトを見て判断してくれると思ってた。でも違った。
そのURLを直接閲覧できないので、現在のブログ一覧ページのレイアウトやノウハウ集ページの現状を簡単に教えてもらえますか？
あ、そうか。AIはURLだけじゃ中身が分からないんだ。
ブログのURLはhttps://jikken-shindanshi.com/?page_id=191。
ノウハウページのURLはhttps://jikken-shindanshi.com/?page_id=418
URLの中身を直接確認することができないので、スクリーンショットをアップロードしてもらうか、現在の構成を文字で説明してもらえますか？
ここで初めて「スクリーンショットが必要なんだ」って気づいた。言葉で説明するのは面倒だったから、画面キャプチャを撮ってアップロードした。
AIがサイトの見た目を理解してくれた
画像ありがとうございます。全体としては、白背景＋シンプルな構成ですね。清潔感があり、カード形式との相性も良いです。
これを踏まえると、ブログ一覧・ノウハウ集を「統一感を保ちつつ見やすくする」ために、カードデザインを提案します。
（カードデザインのHTMLコードを提示）
次のステップとして、確認したいです：
- カードの中に表示したい要素（例：タイトル／投稿日／カテゴリ／抜粋など）
- WordPressテーマ（例：Cocoon, Lightning, Twenty Twenty-Fourなど）
- ブログ一覧とノウハウ集、両方に共通で使うか、それとも分けるか
おお、スクリーンショット一枚で話が進んだ。でもまた質問が来た。
疑問③：「WordPressテーマ」って何？どこで確認するの？
カードの中に表示したい要素：カテゴリ、アイキャッチ画像
WordPressテーマ：Twenty Twenty-fiveだと思うがどこで確認できるか？
今回のカードレイアウトを「ブログ一覧ページ」と「ノウハウ集ページ」両方に共通で使う
正直、WordPressテーマって何のことか分かってなかった。たぶんTwenty Twenty-Fiveだと思うけど、確信はなかった。
完璧です。方向性は次の通りですね。
✅ 改良方針の整理
- 対象ページ：ブログ一覧ページ、ノウハウ集ページ（共通デザイン）
- 表示要素：カテゴリ、アイキャッチ画像、記事タイトル
- 目的：カード形式で見やすく・リンクしやすく・統一感を出す
- テーマ：おそらくTwenty Twenty-Five
🔍 WordPressテーマの確認方法
WordPress管理画面から「外観 → テーマ」をクリックすると、現在「有効」になっているテーマ名が表示されます。
管理画面の「外観 → テーマ」で表示されているテーマ名を教えてもらえますか？
あ、こうやって確認すればいいのか。すぐに管理画面を開いて確認した。
Twenty Twenty-Fiveだった。
まずは具体コードを書いて
疑問④：コードをどこに貼ればいいの？既存の内容は消えない？
AIがカードデザインのコードを出してくれた。でも、次の疑問が湧いた。
このコードを今のホームページのどこにでもよいので、貼ればよいのか？今までの記載はそのままでよいのか
これ、すごく大事な疑問だと思う。コードを貼って、もし今ある内容が全部消えたらどうしよう、って不安だった。
とても良い質問です。はい、このカードレイアウトは既存の内容を壊さずに”追加”できる形です。
✅ 貼り付け位置について
💡 ① ブログ一覧ページにカードを表示したい場合
- WordPress管理画面 → 「固定ページ」→ 「実験診断士の検討記録（ブログ）」を開く
- ＋ボタンから「カスタムHTMLブロック」を追加
- そこに先ほどのカードHTMLをそのまま貼り付ける
- 「更新」ボタンを押して保存
これでブログページの中にカードが並びます。既存のリスト表示はそのまま残してOK。後で「どちらが見やすいか」比較できます。
💡 ③ 今ある記載は削除しなくてOK
いまのテキストやリスト形式の内容は残したままで構いません。カードを追記する形が安全です。
安心した。「追加」なら、失敗してもやり直せる。
疑問⑤：俺が本当に欲しいのはこれじゃない？
ここで、俺は自分の要望を整理し直した。ブログ一覧ページのカードじゃなくて、トップページに置く「入口カード」が欲しかったんだ。
ホームページからブログやノウハウ集に飛ぶためのカードを作って欲しい
なるほど、非常に良い方向です。今度は「ホームページ（トップページ）から、ブログ一覧・ノウハウ集ページへ飛ばすカード」を作りたいということですね。
つまり、トップページ上で、「ブログを見る」「ノウハウ集を見る」という2枚のカードを並べてリンクさせる。
（トップページ用カードリンクコードを提示）
🧭 貼り付け位置のおすすめ
トップページ（固定ページ）を編集し、「プロフィール紹介」や「概要」の下に貼ると自然です。
そうそう、これが欲しかった。最初の説明が曖昧だったから、AIも違う方向で考えてたんだな。
疑問⑥：もっと「診断士らしい」デザインにできない？
コードは出来たけど、もう少し欲張ってみた。
診断士らしい知的な印象
カードにアイコン追加
マウスホバーでタイトル色を変えて欲しい
了解しました。以下は、「診断士らしい知的な印象」を意識してデザインしたカードのHTML＋CSSコードです。
特徴：
- シンプルで上品なデザイン（白地＋影＋柔らかい余白）
- 各カードにアイコン（Font Awesome使用）
- タイトルにマウスホバー時の色変化（知的なブルー系）
（Font AwesomeのCDNリンクとカードコードを提示）
💡設置方法
上記コードをWordPressなら固定ページやウィジェットのHTMLブロックにそのまま貼り付けてOKです。
カードのリンク先（href部分）は実際のURLに合わせて変更してください。
これだ。ペン、電球、黒板のアイコンがついて、ホバーすると色が変わる。イメージ通りだった。
実装：いよいよコードを貼り付ける
AIから受け取ったコードを、実際にトップページに貼り付けることにした。
手順はこうだ：
- WordPress管理画面にログイン
- 「固定ページ」からトップページを開く
- 編集画面で「＋」ボタンをクリック
- 「カスタムHTML」ブロックを選択
- AIからもらったコードをそのまま貼り付け
- リンク先のURLを実際のページURLに修正
- 「更新」ボタンを押す
ドキドキしながら「更新」ボタンを押した。
成功：ちゃんと表示された！
サイトを開いて確認すると、トップページにカードがきれいに並んでいた。
- ペンのアイコンがついた「ブログ」カード
- 電球のアイコンがついた「ノウハウ集」カード
- 黒板のアイコンがついた「セミナー情報」カード
マウスを乗せると、タイトルが知的なブルーに変わる。スマホで見ても、ちゃんと縦に並んで表示される。
既存の内容も消えていない。AIが言ってた通り、「追加」になっていた。
今日の気づき：素人がAIを使う時のポイント
今日の作業を振り返って、素人の俺が気づいたことをまとめておく。
① AIはURLだけじゃサイトを見られない
スクリーンショットを撮って見せるのが一番早い。
② 自分が何をしたいのか、最初は曖昧でいい
AIと話しながら、だんだん具体化していく。途中で「あ、違う」って修正してもOK。
③ 「既存の内容が消えないか」は必ず確認する
これ、素人は絶対不安になるポイント。遠慮せず聞いたほうがいい。
④ WordPressテーマとか、専門用語は聞けばいい
「どこで確認できるか？」って聞けば、丁寧に教えてくれる。
⑤ コードの意味が分からなくても、貼れば動く
完全に理解してなくても大丈夫。まずは貼って、動かしてみる。
⑥ 実装は怖くない
手順通りにやれば、ちゃんと動く。失敗しても、元に戻せる。
まとめ：AIと一緒なら、素人でもデザイン改良ができる
今日、トップページにカード形式のナビゲーションを実装できた。
デザインの知識もコーディングの経験もない俺が、AIと対話しながら形にできた。
重要なのは、「完璧を目指さない」「ちょっとずつ良くする」こと。
今日の改良で、訪問者がブログやノウハウ集に辿り着きやすくなったはずだ。
コメントを残す