AIで作ったロゴをWebサイトへ使うまで―ゆまラボで確認した文字・サイズ・ヘッダー表示

ロゴをヘッダーへ適用する作業自体は、ゆまラボのUI修正として別の記事に残している。

ここでは、その前段にあるロゴ画像そのものを見る。

AIで画像を作れるようになると、ロゴの案を出すところまではかなり早い。ただし、生成された画像がそのままWebサイトのロゴとして使えるとは限らない。

大きく表示したときに見栄えが良くても、ヘッダーでは数十pxまで小さくなる。画像内に文字があれば読めるかも確認する必要がある。背景色との相性や、サイト名を画像だけに任せるかどうかも考える必要がある。

ゆまラボでは、最終的に次の画像をロゴとして採用している。

中央にフラスコ、その左にコード画面、右にロボット、上に電球を配置した構成になっている。下には「ゆまラボ」の文字を入れている。

サイトのテーマであるWeb制作、AI、実験記録を、一枚の中で分かるようにした形になる。

ヘッダーは最初、文字だけで表示していた#

ロゴを入れる前のヘッダーは、左側に「ゆまラボ」という文字だけを表示していた。

この状態でもサイト名は分かる。

一方で、記事一覧や検索結果とは別にサイトそのものを見分ける要素は文字だけになる。そこで、ヘッダーへ小さなロゴを追加する形に変更した。

変更後は次の状態。

ロゴ画像だけへ置き換えず、その横に「ゆまラボ」のテキストも残している。

この形にしたのは、小さい表示では画像内の文字を読ませるより、マークとHTML上のサイト名を分けた方が扱いやすいため。

AIで作るときはモチーフを増やしすぎない#

ゆまラボのロゴには複数の要素が入っている。

• フラスコ
• コード画面
• ロボット
• 電球
• サイト名

単純に要素数だけを見ると多い。

ただ、中心はフラスコで、コード画面とロボットは左右に寄せている。電球も上部へ分離されているため、どの要素が中心かは判別できる。

AIへロゴを作らせるときは、「AI」「プログラミング」「ブログ」「実験」「クラウド」のように関連語を全部入れたくなる。

実際のロゴ用途では、テーマを増やすほど小さくしたときに判別しにくくなる。

今回の画像なら、中心に置くものは「ラボ」を表すフラスコ。その周辺にWeb制作とAIを示す要素を置く、という役割分担がある。

ロゴを生成するときの指示も、

中心: フラスコ
補助: コード、AI
雰囲気: 技術ブログ、明るい、シンプル
背景: 白
文字: ゆまラボ

くらいに分けて考えると、何を残して何を削るか判断しやすい。

これは実際に使用した生成プロンプトではなく、ロゴ用途の条件を分解した例になる。

大きな画像ではなく、ヘッダーのサイズで確認する#

元画像だけを見ると、ロゴは十分大きい。

ただ、実際に使う場所はヘッダーなので表示サイズはかなり小さい。

ここで確認したいのは細部より輪郭。

今回の公開画面では、縮小後もフラスコを中心にしたマークとして認識できる。逆に、ロゴ画像の下部に入っている「ゆまラボ」の文字を、ヘッダーサイズですべて読ませる構成にはしていない。

横にHTMLの「ゆまラボ」を残しているため、画像側はマークとして使える。

AIで作った画像をロゴに使う場合は、生成結果を100%表示で確認するだけでは足りない。

実際に使う場所へ置き、

• 32px前後
• 48px前後
• スマホのヘッダー
• PCのヘッダー

といった小さい状態で確認した方がよい。

細かい線や小さな文字は、この段階でほとんど見えなくなることがある。

画像内の文字は別に確認する#

画像生成でロゴを作る場合、もう一つ確認したいのが文字。

今回の最終画像では「ゆまラボ」の文字を読める状態になっている。

ただし、Webサイト側では画像内文字だけにサイト名を任せていない。

W3Cの画像アクセシビリティの解説でも、通常は読ませたい文字を画像だけで持つより、実際のテキストとして扱う方が柔軟としている。ロゴは例外的な扱いがあるが、Web側にテキストを残せるならその方がサイズ変更にも対応しやすい。

例えば、ロゴ画像とサイト名を同じリンク内へ置くなら次のような形にできる。

<a href="/" class="site-brand">
  <img src="/logo.png" alt="" width="48" height="48">
  <span>ゆまラボ</span>
</a>

この例では、画像の隣に同じサイト名があるのでalt=""として重複読み上げを避けている。

逆に、ロゴ画像だけをホームへのリンクとして使う場合は、リンク先の意味が分かる代替テキストが必要になる。

実際のHTMLはサイトの構成に合わせる必要があるが、「画像に文字があるからHTML側のサイト名は不要」とは考えない方が扱いやすい。

白背景に合う画像でも、背景が変わる場合は別版が必要#

今回のロゴ画像は白を基調にしている。

ゆまラボのヘッダーも白なので、公開画面では画像の外周が目立たず、そのまま馴染んでいる。

一方で、将来ダークテーマを追加したり、色付きのヘッダーへ変更したりする場合は同じ画像をそのまま使えるとは限らない。

その場合は、

• 背景透過版
• 明るい背景用
• 暗い背景用
• アイコンだけの版

を分けた方が使いやすい。

AIで最終画像を生成するときも、一枚だけ完成させるより「どの場所で使う画像か」を先に決めた方が修正回数を減らせる。

Astroでは画像の置き場所で扱いが変わる#

Astroでは、画像をsrc/へ置く方法とpublic/へ置く方法がある。

公式ドキュメントでは、src/に置いたローカル画像はAstro側で変換・最適化できる。一方、public/のファイルは処理されず、そのままビルド出力へコピーされる。

最終PNGをそのまま配信したいロゴなら、public/から直接参照する方法も単純。

<img src="/logo.png" alt="ゆまラボ">

画像最適化やサイズ管理をAstro側へ任せたい場合は、astro:assetsの<Image />を使う方法もある。

どちらを使うかより、ロゴの場合は表示サイズを固定し、レイアウトが読み込み時に動かないよう幅と高さを決めておく方が重要になる。

採用するときに確認したいのは生成画像だけではない#

AI画像生成では、画像そのものの完成度に目が行きやすい。

Webサイトのロゴとして使う場合は、確認対象がもう少し広い。

ゆまラボで実際の公開画面まで見て確認できるのは、

• 大きな元画像で文字が崩れていない
• 小さいヘッダーでも中心のマークを判別できる
• ロゴ横にサイト名をテキストで残せる
• 白いヘッダー上で不自然な境界が出ない
• PCのナビゲーションと並べても高さが増えすぎない

という部分。

生成した瞬間ではなく、実際のページに置いた状態まで見て採用する。

ロゴをAIで作るときは、この確認まで含めて一つの作業として考えた方がWebサイトでは使いやすい。

参考#

• Astro Docs — Images: https://docs.astro.build/en/guides/images/
• W3C Web Accessibility Initiative — Images Tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C Web Accessibility Initiative — Functional Images: https://www.w3.org/WAI/tutorials/images/functional/