AIからの提案を実行に移す日
少し前、AIと今後のホームページ運営について話していたときに、こんな提案を受けていた。
「トップページに、ブログやノウハウ集への入口となるカードを設置してはどうでしょうか」
確かに、今のトップページはシンプルすぎて、訪問者がどこに何があるのか分かりにくい。ブログを読みたい人も、ノウハウを探している人も、迷ってしまうかもしれない。
その提案が頭に残っていて、今日ようやく実行に移すことにした。
「ホームページからブログやノウハウ集に飛ぶためのカードを作って欲しい」
そうAIに伝えると、すぐに対応してくれた。
まずはテーマの確認から
AIがまず確認してきたのは、「どんな要素をカードに表示したいか」ということだった。
私は「カテゴリ」を入れたいと答えた。訪問者が一目で「ここはブログだ」「ここはノウハウ集だ」と分かるようにしたかった。
次に聞かれたのは、使っているWordPressのテーマ名。正直、自分でも把握していなかったので、AIに教えてもらいながら管理画面の「外観 → テーマ」で確認すると「Twenty Twenty-Five」だった。
ここまで確認できたところで、AIは具体的なHTMLとCSSのコードを提示してくれた。
トップページ用のカードデザイン
AIが出してくれたコードは、トップページ専用のカードデザインだった。
画像、タイトル、説明文がセットになっていて、各カードがそれぞれのページへのリンクになっている。スマホでは1列、PCでは複数列に自動で並ぶレスポンシブ対応も組み込まれていた。
カードは白地にシンプルな影がついていて、マウスを乗せると少し浮き上がるような動きがある。Twenty Twenty-Fiveのフラットなデザインにも自然に馴染みそうだ。
「どこに貼ればいいのか」という疑問
コードを見ながら、ふと疑問が浮かんだ。
「このコードを今のホームページのどこにでもよいので、貼ればよいのか？今までの記載はそのままでよいのか？」
私は既存の内容を壊してしまうのではないかと心配だった。
AIは丁寧に答えてくれた。このカードレイアウトは既存の内容を壊さずに「追加」できる形になっているとのこと。WordPressの「カスタムHTMLブロック」に貼り付ければ、今ある内容はそのまま残せる。
安心して進められそうだ。
「診断士らしい知的な印象」を目指す
ここでさらに要望を伝えた。
「診断士らしい知的な印象にしたい。カードにアイコンを追加して、マウスホバーでタイトル色を変えて欲しい」
AIは、Font Awesomeというアイコンライブラリを使ったコードを提示してくれた。ペンのアイコン、電球のアイコン、黒板のアイコン。それぞれのカードに意味を持たせるデザインだ。
ホバー時にタイトルがブルー系に変わる仕様も組み込まれていて、「知的で落ち着いた印象」という要望にぴったりだった。
コードの構造を少し理解する
AIが出してくれたコードを眺めていると、いくつかのパターンが見えてきた。
まず、<style>タグの中にデザインの設定が書かれている。カードの幅、余白、影の付け方、ホバー時の動きなど。ここを変えれば見た目を調整できる。
次に、<div class="card-container">という部分。これがカード全体を囲む枠のようなものらしい。
そして、個別のカードは<a href="..." class="info-card">で囲まれていて、その中に<i>（アイコン）、<h3>（タイトル）、<p>（説明文）が入っている。
完全に理解できたわけではないが、「どこを変えれば何が変わるか」が少しずつ見えてきた。
実装の流れを確認する
AIに教えてもらった実装の流れは、次のようなものだった。
- WordPressの管理画面で「固定ページ」のトップページを開く
- 「＋ボタン → カスタムHTMLブロック」を追加
- 提示されたコードをそのまま貼り付ける
- リンク先のURLを実際のものに変更する
- 「更新」ボタンを押して保存
- 実際のページを開いて表示を確認する
この流れなら、私でもできそうだ。
重要なのは、「いきなり全部変えない」ということ。まずはトップページで試してみて、問題がなければ他のページにも展開していく。そうすれば、失敗しても元に戻せる。
レスポンシブ対応の重要性
AIが提示してくれたコードには、「レスポンシブ対応」が最初から組み込まれていた。
スマホで見たときに崩れない。PCで見たときには横に複数並ぶ。この調整を自分でやろうとしたら、かなり苦労しただろう。
Twenty Twenty-Fiveというテーマに合わせた調整もされていて、余白感やフォントの雰囲気が自然に馴染むようになっている。
こういう細かい配慮が、AIと一緒に作業する利点だと感じた。
カスタマイズの余地を残す
今回作ったカードデザインは、あくまで「ベース」だ。
実際に使ってみて、「もう少し影を濃くしたい」「色を変えたい」「アイコンを別のものにしたい」といった要望が出てくるかもしれない。
その時は、またAIに相談すればいい。コードのどこを変えればいいのか教えてもらえるし、場合によっては修正版のコードを出してもらえる。
完璧を目指すのではなく、「ちょっとずつ良くする」。それが、この実験プロジェクトの進め方だ。
次の一歩は「実装して確認すること」
今回AIと一緒に作ったのは、あくまで「コード」であって、実際にサイトに反映させるのはこれからだ。
貼り付けて、表示を確認して、おかしなところがあれば修正する。その繰り返しで、少しずつサイトは良くなっていくはずだ。
デザインの知識がなくても、コーディングの経験がなくても、AIと対話しながら進めれば形にできる。それを改めて実感した一日だった。
今日もまた一歩、前に進めた気がする。
※裏記事の詳細はこちら：裏記事を見る
コメントを残す