相変わらずアクセス数の伸び悩んでいるブログだが、記事更新のタイミングが宜しくないとかSEO対策していないとか、まあ色々努力が足りないので仕方がない面はある。
ただ、レイアウトはちょこちょこと改善するようにはしている。
前回の記事はこれだったかな？
色々調整はしているんだけれど、素人がいろいろ手を出したところで良くなったのか悪かったのか？という話にはなる。
記事のリライトも時々はやるんだけどね。
今回は、レイアウト変更だね。
AIを使ってレイアウト変更
ChatGPTに相談してみる
ところで、何をどうしたらいいかはさっぱり分からないので、ChatGPTに聞いてみることにした。
ブログの方がサッパリアクセスが伸びないんだよね。
レイアウトを見直したいのだけれど、協力してもらえる？
いいですね、サイトを拝見しました（「家で活躍こんなmono」）。
レイアウト改善をすることでアクセスの伸びを補える可能性は十分あると思います。特に “アイテム紹介” を主軸にするなら、読者が「次に何を見ようか／どれを買おうか」を迷わない導線設計がカギになるからです。
以下、気づいた点・改善案をざっと出すので、一緒にブラッシュアップしていきましょう。
何でもできるな、ChatGPT。
もしよければ、モバイル画面と PC画面それぞれのスクリーンショットを送ってもらえますか？
こんなこと言い出したよ。
最近はあっさり風味のレイアウトになっていたのだけれど、これがあまり宜しくないことはわかっていたんだけど、チャッピーにわかるのかなぁと、半信半疑でアップロード。
見ていただくと分かるが、割とモッサリ気味のファーストビューで、確かに改善が必要である。
ありがとうございます！
PC版とスマホ版、両方のスクリーンショットを確認しました。
全体として丁寧に構成されていますが、「アイテム紹介ブログ」としては“滞在時間”と“クリック率”をもう一段引き上げる余地があります。
以下、現行デザインを活かしつつアクセスアップにつながるレイアウト改善提案を、実際のスクリーンショット構成に沿って整理しました。
改善案はあるらしい。
グローバル・ナビを弄る
チャッピーによると、何のブログかが一目で分かりづらいので、先ずレイアウト弄れやという事のようだ。正論過ぎて反論もないよ。そこで、お勧めに従って背景画像の変更を行うことに。
背景を「家の中で使われているグッズ」や「商品を並べた俯瞰写真」に変更してくれとアドバイスを貰ったので、さっそく変更。
もっといい写真はまた探すこととして、次の一手に。
何をするかというと、ボックスメニューを採用することにしたんだよね。まあ、もうちょっとグラフィカルにする方向で、修正することになったわけ。
この辺りが参考になる。
参考にはなるんだけど、完成したところを紹介した方が話しやすいので、先ずは変わった形から。
これが良いかどうかはちょっと微妙なんだけど、グローバルナビと呼ばれるものと似た感じのメニューをもう１つ付けることにした。
なぜ、「微妙」かというと、メニューが2段になっちゃっているので、似た機能のものが同じ画面に配置されちゃっているんだよね。特にスマホの画面が最悪である。
ということで、スマホ版だけグローバルナビの方を無くすことにした。
「今週のおすすめアイテム」セクションを追加
あとは、ピックアップアイテムの欄を作った。既に紹介している画面にいるんだけどね。
もし希望があれば、完成イメージ（デモ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;
}なんかこう、大きさを調整してくれとか、画像サイズをそろえてくれとか、いろいろ注文を付けると、その通りのコードを書いてくれる。
これが良い結果になったかどうかは分からないが、まあいいんじゃあないでしょうか。AIを利用してみたって話がメインだったんだけれども、自分で調べるよりも素早い対応というのが恐ろしい。
いい時代になったものだよ。
どうやって設設置したか
インデックスに
そうそう、Cocoonの仕様というか、セキュリティの問題で、「Cocoon設定」はWAFをOFFにしないと変更反映できない。
そのため、ウィジェットに書くことにした。
外観＞ウィジェット＞インデックスリストップと進んで、「カスタムHTML」を追加する。ここにこんな風に記載をする。
ここにはショートコード２つを記載している。
１つ目はボックスメニュー、２つ目はid＝3というコードなんだけど。
ショートコードの記載
で、ショートコードなんだけど、コレはテンプレートを使っている。
内容は、上に紹介したHTMLの内容を具体的にしたものが、記載されている。ショートコードのテンプレートはWAFをOFFにせずに設定可能なので、書き換えをすることが多い場所については、ここに記載して使うほうが都合が良いと思って、ここに書くことにした。
まあ、時々、ここをメンテナンスする必要があるからという認識だってことだね。
コメント