さて、前回の改善からどの程度の効果が出たのか。AIを用いてブログデザインを弄るという発想は、悪くはなかったと思う。
これは僕が持っているHTML／CSSのWebデザインに関して分かりやすく書かれた書籍だが、こういった本は体系的に理解するには実に役に立つ。
が、実際、ブログのレイアウトに使おうと思うと、色々なケースに対応可能な書き方がされているので、「どうすればいいか」を迷う。
しかしAIを使えば、それについて教えてくれるのである。こういった基礎を解説する本を読まなくて良くなるという意味ではなく、個別のケースに対応させるのが楽なのだ。
が、レイアウトが楽になったからと言って、結果に結びつくかというと、それは別。実際に、残念ながらPVの劇的改善には至らなかった。
前回の記事はこちら。
UI改善の狙い自体は悪くなかったと思う。ただし、UI改善＝PV増加、という単純な話ではないらしい。
とはいえ、やって無意味だったわけではない。
今回はその「結果の検証」と、そこから見えた次の一手についてまとめていく。
AIを使ったデザイン変更で成果は得られたのか？
変更後の直帰率や滞在時間の変化
さて、調整の前に先ずは前回の改善点を反映した結果について少しお伝えしておこう。最初にPV改善効果はなかったと書いたのだが、もうちょっと深掘りはしておいても良いと思う。
で、何を書いたら良いかな？
この情報を足すと、ユーザー満足度が高いです。
・実際のビフォー／アフター比較（画像）
・変更後の直帰率や滞在時間の変化（後日追記予定でもOK）
・AIに丸投げは危険だった部分
あ、ハイ。
先ずは、前回紹介した、ビフォー／アフター比較だ
アイコン付きのボックスメニューを採用したことで、直感的にカテゴリへアクセスしやすくなった……ように見える。
少なくとも「何のブログか分からない問題」は多少改善されたはずだ。
見た目の整理はできた。
では、数字はどうだったのか。
改善効果は出たのか
まずPV。
全体PVは大きくは伸びていない。微増程度。
しかし、内部の動きは少し変わった。
- 「今週のおすすめアイテム」へのクリック率は上昇傾向
- トップページから3記事への流入ルートが明確に形成
- トップ直帰率はやや改善
以前はトップページに来て、そのまま離脱という流れが目立っていた。
改善後は、「トップ → おすすめ3記事のどれか」という動きが増えた。
全体PVの爆増にはつながっていない。だが、「回遊ルートが一本できた」という意味では改善と評価してよいだろう。
UI改善は、流入を増やす施策ではない。流入した人を“動かす”施策なのだと実感した。
AIに丸投げは危険だった部分
正直に言えば、最初に出してきた提案はかなり優秀だった。
構造としては理にかなっていたと思う。
ただし、提案をそのままでは違和感があって、実際には以下の項目に手を入れている。
- 色味の微調整
- アイコンサイズの変更
- 文字サイズの調整
- スマホ表示での圧迫感の修正
AIは「整ったたたき台」を出してくれるが、「自分のサイトに馴染む形」にする作業は別なので、自分好みにカスタマイズする必要はある。
この最終調整を怠ると、どこか借り物感が出る。丸投げで完成、とはいかないことが多いのだろう。
ただし、ゼロから組むより圧倒的に早い。これは間違いない。
今回のカスタマイズ
トップページの役割をもう一段明確にする
というわけで、カスタマイズなんだけれど。
どうしたら良いと思う？
PVを増やす方向で進めたいのだけれど。
UI改善は“流入後対策”、SEOは“流入前対策”。
両方が揃って初めてPVは伸びます。
- 導線強化？
- 記事構造の再編？
- CTA最適化？
- トップの役割変更？
どの方向でいきますか？
相談したらこんな回答が返ってきた。なるほど、面白いね。
やりとりの詳細は省くが、PVの動向を見せたり検索ワードの情報を入力したりして、ちゃっぴーから回答を引き出した結果、以下のような方針になった。
「導線強化」と「トップの役割変更」で「CTA最適化」を図ることだ。
正確に言うと、CTA（Call To Action）最適化は、現状のデザインでは導線の強化とトップの役割変更を含む。
「人気記事」優先をやめた
さて、改めて現状のデザインを見ていこう。
導線の強化の意味で「今季のおすすめアイテム」を入れているが、ここの記事は単発の内容が多くて回遊性が弱い。
そこで、サイドバーに配置されている「今人気の記事」に手を入れることにした。
人気記事は“結果表示”だが、でも育てたいのはハブ化した“戦略記事”である。人気の場合、検索完結型で回遊しない傾向が見られたので、恐らくは機能していない。そのように考えたのだ。
CTA最適化としてやったこと
で、どうしたかというと、読んで貰いたい記事を貼り付けた。
「最初に読むまとめ」として、3つの記事を貼り付けたのである。
これらは、回遊性を意識したリライト済みである。そして、割とまとまった数の記事があって、ストリートして読みやすい。
この様な配置にすることで、
- いままで：
- トップ → 人気 → 検索完結 → 離脱
- 変更後：
- トップ → ハブ → 関連記事 → 回遊
と、この様な効果を狙ったわけだ。これが今回のCTA最適化である。
もちろん、効果が出るかどうかはこれからGA4などを利用して動向を見守る必要があるのだけれど。
変更手順について
さて、それでは手順について説明していこう。これは前回と同様なのではあるが。
まずは、Cocoonの「外観＞ウィジェット」と進んで、プロフィールの下に「カスタムHTML」を設置。
この「カスタムHTML」には、こんな感じで記述。
これは前回と同じ理由で、Cocoonのウィジェットを弄ろうとすると、WAFをOFFにしなければならない。一方で、ショートコードのテンプレートならばそれは必要ない。
だから、テンプレート４に定義したというわけだ。
テンプレート４は以下の通りに。
これで、デザインのメンテナンスする場合に楽になる。
AIとのキャッチボール
ところで、このコード、AIに書いて貰ったのだけれど、最初からこうなったわけではない。
サイドバーにおすすめ記事を３つほどおすすめするリンクを作りたいのだけれど、作ることは出来る？cocoonを利用中で、ウィジェットで挿入したいと考えてるんだけど。
と、プロンプトを書いたら、以下のような返答が。
できます。
Cocoonならウィジェットだけで簡単に設置可能です。
実用的な方法を、無駄なくまとめます。
<div class="sidebar-diy-box">
<h3>農機具小屋DIY｜まず読む3記事</h3>
<ul>
<li>
<a href="https://www.konna-mono.fun/noukigu-shack-index/">
▶ 全体まとめ（設計〜施工の流れ）
</a>
</li>
<li>
<a href="https://www.konna-mono.fun/shack-05/">
▶ 実際にかかった総費用
</a>
</li>
<li>
<a href="https://www.konna-mono.fun/shack-04/">
▶ トタン再利用の失敗談
</a>
</li>
</ul>
</div>リンク先の指示がちがうのだけれど、あまり気にしないで欲しい。この時にはこの３つでリンク先を作る予定だったんだよ。
✅ 少しだけ見た目を整えたい場合
Cocoonなら以下を「外観 → カスタマイズ → 追加CSS」に入れます。
.sidebar-diy-box {
background: #f5f5f5;
padding: 15px;
border-radius: 6px;
}
.sidebar-diy-box h3 {
font-size: 17px;
margin-bottom: 12px;
}
.sidebar-diy-box ul {
list-style: none;
padding-left: 0;
}
.sidebar-diy-box li {
margin-bottom: 8px;
}
.sidebar-diy-box a {
text-decoration: none;
}
.sidebar-diy-box a:hover {
text-decoration: underline;
}ついでにCSSコードも付けてきた。
悪くはなかったのだけれど、この状態だと文字リンクになってしまうので、こんな風に聞いてみた。
デザインをボタン風に出来る？
できます。
しかもCocoonなら、CSSだけで自然なボタン風にできます。
“やりすぎない・でも押したくなる”デザインでいきましょう。
とまあこんな風に、キャッチボールは必要だった。この後、２～３回やりとりをして、デザインを微調整。
悩みながらCSSを弄らなくとも、AIに「こんな風にしたい」という漠然としたイメージを伝えるだけでも、コードが書けるのは素晴らしい。
ただ、自動的にできたりはしないんだけど。
今回のカスタマイズ
前回はUIを整えた。
今回は、「どの記事を読ませたいか」を明確ににして、CTA最適化を目指した。自然に、誘導したい記事をクリックして貰えるように改善したわけだ。
具体的には、サイドバー上部を“おすすめまとめ”に変更し、人気記事はその下へ追いやった感じである。
この手直し、どの程度の効果が出るかはまた次回ということで。
コメント