今日のテーマ
ホームページからブログやノウハウ集に飛ぶためのカードを作る
以前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と対話しながら形にできた。
重要なのは、「完璧を目指さない」「ちょっとずつ良くする」こと。
今日の改良で、訪問者がブログやノウハウ集に辿り着きやすくなったはずだ。