相変わらずアクセス数の伸び悩んでいる。
更新頻度が低いとか、SEOをちゃんとやっていないとか、理由はいくらでも思いつく。努力不足と言われれば、それまでである。
とはいえ、放置しているわけではない。
せめてレイアウトくらいは改善しようと思って、ちょこちょこ手を入れている。
前回の記事はこれ。
記事のリライトも時々はやっている。
今回は、記事ではなく「デザイン」に手を出した。
AIを使ってレイアウト変更
ChatGPTに相談してみる
ただ正直なところ、「レイアウト」と一口に言っても、何をどう直せばいいのか分からない。手直しの指針は欲しいところ。
そこで今回、ChatGPTに聞いてみることにした。
ブログの方がサッパリアクセスが伸びないんだよね。
レイアウトを見直したいのだけれど、協力してもらえる？
いいですね、サイトを拝見しました（「家で活躍こんなmono」）。
レイアウト改善をすることでアクセスの伸びを補える可能性は十分あると思います。特に “アイテム紹介” を主軸にするなら、読者が「次に何を見ようか／どれを買おうか」を迷わない導線設計がカギになるからです。
以下、気づいた点・改善案をざっと出すので、一緒にブラッシュアップしていきましょう。
何でもできるな、ChatGPT。
もしよければ、モバイル画面と PC画面それぞれのスクリーンショットを送ってもらえますか？
こんなこと言い出したよ。
最近はあっさり風味のレイアウトになっていたのだけれど、これがあまり宜しくないことはわかっていたんだけど、チャッピーにわかるのかなぁと、半信半疑でアップロード。
見ていただくと分かるが、割とモッサリ気味のファーストビューで、確かに改善が必要である。
ありがとうございます！
PC版とスマホ版、両方のスクリーンショットを確認しました。
全体として丁寧に構成されていますが、「アイテム紹介ブログ」としては“滞在時間”と“クリック率”をもう一段引き上げる余地があります。
以下、現行デザインを活かしつつアクセスアップにつながるレイアウト改善提案を、実際のスクリーンショット構成に沿って整理しました。
なるほど。「なんとなく微妙」だと思っていたファーストビューが、ちゃんと“微妙”らしい。
グローバル・ナビを弄る
チャッピーによると、「何のブログかが一目で分かりづらいので、先ずレイアウト弄れや」ということのようだ。正論過ぎて反論もないよ。そこで、お勧めに従って背景画像の変更を行うことに。
背景を「家の中で使われているグッズ」や「商品を並べた俯瞰写真」に変更してくれとアドバイスを貰ったので、さっそく変更。
もっといい写真はまた探すこととして、次の一手に。
何をするかというと、ボックスメニューを採用することにしたんだよね。まあ、もうちょっとグラフィカルにする方向で、修正することになったわけ。
この辺りが参考になる。
参考にはなるんだけど、完成したところを紹介した方が話しやすいので、先ずは変わった形から。
これが良いかどうかはちょっと微妙なんだけど、グローバルナビと呼ばれるものと似た感じのメニューをもう１つ付けることにした。
なぜ、「微妙」かというと、メニューが2段になっちゃっているので、似た機能のものが同じ画面に配置されちゃっているんだよね。特にスマホの画面が最悪である。
ということで、スマホ版だけグローバルナビの方を無くすことにした。
この手のアドバイスをくれるということに、AIの進化を感じざるを得ない。
「今週のおすすめアイテム」セクションを追加
あとは、ピックアップアイテムの欄を作った。既に紹介している画面にいるんだけどね。
もし希望があれば、完成イメージ（デモHTML＋CSSプレビュー）を生成してお見せできます。やりますか？
なんかもう、HTMLもCSSも作ってくれるらしいのでお願いすることにした。
<div class="pickup-section" style="text-align:center; margin:20px 0;">
<h3>💡 今週のおすすめアイテム</h3>
<div class="pickup-items">
<div class="pickup-card">
<a href="記事1URL">
<img src="画像1URL" alt="商品1">
<p>家電で時短！自動調理鍋</p>
</a>
</div>
<div class="pickup-card">
<a href="記事2URL">
<img src="画像2URL" alt="商品2">
<p>折りたたみキャンプチェア</p>
</a>
</div>
<div class="pickup-card">
<a href="記事3URL">
<img src="画像3URL" alt="商品3">
<p>USB加湿器で快適空間</p>
</a>
</div>
</div>
</div>
CSSはこちら。
/* おすすめアイテム全体 */
.pickup-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin-top: 15px;
}
/* 各カード枠 */
.pickup-card {
width: 180px;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.pickup-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* 画像サイズを統一（縦横比を保ったままトリミング） */
.pickup-card img {
width: 100%;
height: 120px; /* ← 高さを固定（好みに応じて調整） */
object-fit: cover; /* ← 画像を枠いっぱいにトリミング */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* 商品タイトル */
.pickup-card p {
margin: 8px 0;
font-size: 0.9rem;
color: #333;
line-height: 1.4;
}
/* リンク全体クリック可能 */
.pickup-card a {
text-decoration: none;
color: inherit;
display: block;
padding-bottom: 5px;
}なんと、
- 画像サイズ統一
- hoverエフェクト
- カード型デザイン
- レスポンシブ対応
全部込み。
注文を付ければその通りに修正してくれる。AIを利用してみたって話がメインだったんだけれども、自分で調べるよりも圧倒的に早い。
昔なら、
・検索して
・試して
・崩れて
・戻して
を繰り返していた作業が、一瞬で終わるのだ。
いい時代になったものだよ。
どうやって設設置したか（Cocoonの場合）
インデックスに
そうそう、Cocoonの仕様というか、セキュリティの問題で、「Cocoon設定」はWAFをOFFにしないと変更反映できない。
そのため、ウィジェットに書くことにした。
外観＞ウィジェット＞インデックスリストップと進んで、「カスタムHTML」を追加する。ここにこんな風に記載をする。
ここにはショートコード２つを記載している。
１つ目はボックスメニュー、２つ目はid＝3というコードなんだけど。
ショートコードの記載
で、ショートコードなんだけど、コレはテンプレートを使っている。
内容は、上に紹介したHTMLの内容を具体的にしたものが、記載されている。ショートコードのテンプレートはWAFをOFFにせずに設定可能なので、書き換えをすることが多い場所については、ここに記載して使うほうが都合が良いと思って、ここに書くことにした。
「触る可能性が高い場所はテンプレ化」
これ、地味に重要。
AIを使うと何が変わるのか
というわけで、AIを使ったブログのレイアウト変更をやってみたのだけれど、今回一番感じたのはここ。
AIは「正解を出す」道具ではないということだ。
- 思考の叩き台を出してくれる
- 実装の初速を上げてくれる
- 試行回数を増やせる
この3点は強い。自分で調べるより速い。そして、迷って止まる時間が減る。このスピード感こそがAIの強みといえるだろう。
アクセスが伸びるかどうかはまだ分からないが、改善スピードは確実に上がった。それだけでも十分価値がある。
いい時代になったものである。
コメント