AIがブログのロゴ・ファビコン・ヒーローを統一した——OGP画像からブランドを逆算する

OGP画像のデザインが気に入っていた。でもそれはSNSでシェアされたときにだけ現れるもので、サイト本体には何も反映されていなかった。

「このデザイン、サイト上でも使えないか」

そう思ったのがこの作業の始まりだった。

ナビのロゴから手をつける

AIに相談すると、まずナビバーのロゴを変えることを提案された。

当時のナビは「AI BLOG LAB」というテキストが並んでいるだけだった。これをOGP画像と同じ「シンボルマーク＋セリフ体のテキスト」に置き換えれば、全ページで常に表示されるナビでブランドが露出する。理屈としては正しい。

AIはSVGコードを手書きで生成した。OGP画像のシンボルを座標で再現しようとしたのだ。

結果は——「AB」だった。

シンボルマークのつもりが、ただのアルファベット2文字になっていた。複雑な曲線と幾何学的な構造を自然言語だけで指示して正確なSVGを生成するのは、さすがに無理があった。AIもすぐに認めた。「SVGを手書きで再現するのは限界があります」と。

OGP画像を作ったのは別のAIツールだった。ならばそこから直接SVGを出力してもらえばいい。

依頼してみると、正確なSVGコードと透過背景のPNG画像（512×512px）がすぐに返ってきた。手書きで四苦八苦していたのが嘘のような話だ。

そのSVGコードをナビの header.html に貼り付けると、今度は本物のシンボルマークが表示された。OGP画像と見比べても、ほぼ完全に一致している。

ブランドの一貫性という点では、これが正解だった。

シンボルの素材が手に入ったので、一気に4箇所を整えた。

ヒーローエリアはOGP画像と同じ構成にした。シンボルマークのPNGを中央に大きく置き、その下にセリフ体の「AI BLOG LAB」、細い区切り線、キャッチコピーという順番だ。OGP画像をウェブページにそのまま転写したような見た目になった。

ナビバーにはSVGのシンボルマークを小さく配置した。「AI BLOG LAB」のテキストの左に並ぶ形で、全ページの上部に表示される。

ファビコンは透過PNGをそのまま使った。ブラウザのタブに小さなシンボルが表示される。初めてキャッシュが切れて反映されたとき、思ったより自然に馴染んでいた。

OGP画像は変更しない。これが基準だったから。

「ロゴが統一されていないとブランド感が薄れる」というのは、デザインの基本的な話だ。

SNSでシェアされたカードの見た目と、実際にサイトを訪れたときの印象が一致していれば、それだけで信頼感が生まれる。バラバラだと、意図せず素人感が出る。

今回の実験で気づいたのは、AIが「ブランドの一貫性」を自分だけでは完結させられなかったということだ。SVGの生成に失敗し、別のツールの助けを借りて初めて解決した。AIが万能ではないことの、地味だが正直な記録だと思っている。

場所	変更内容
ヒーローエリア	シンボルPNG＋セリフ体タイトル＋区切り線＋キャッチコピー
ナビバー	SVGシンボルマーク＋「AI BLOG LAB」テキスト
ファビコン	シンボルマーク透過PNG（512×512px）
OGP画像	変更なし（これが基準）