テキストlogoの作成｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/n9c4cdd18bc3e?app_launch=false
生成AIGoogle AI Studio(Gemini 2.5 Pro)に下記のプロンプトを入れるとhtml+cssでテキストロゴを作成してくれる。作成するホームページのhtmlに組み込む方法もあるが作成したものをプリントスクリーンで画像にして使うのも良いと思う。その時はなるべく大きく作っておいたほうが綺麗な画像ができる。
「テキストロゴを作成してください。
タイトルは「テキストlogoの作成」で赤色系の色、かっこいいフォント、大きさはH1、adobeのフォント
「つづき交流ステーション」黒色 H2 フォントはゴシック
「つづきパソピア」緑 H3 フォントはゴシック
「青葉区古文書之会」水色 H1 フォントはゴシック
「横浜市都筑区」黒色 H2 フォントはメイリオ
「横浜市青葉区」緑色 H3 フォントはメイリオ
「横浜市港北区」水色 H1 フォントはメイリオ
「横浜市緑区」青色 H1 フォントはメイリオ
「横浜市都筑区青葉区港北区緑区」
html+cssで1つのファイルで作成してください」
html+cssは
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストロゴサンプル</title>
<!-- Adobe Fontsを使用するためのリンク（ご自身のWebプロジェクトのコードに差し替えてください） -->
<link rel="stylesheet" href="https://use.typekit.net/jrk4oem.css">
<style>
/* CSS（スタイルシート）をここに記述します */
/* 全体の基本的な設定 */
body {
font-family: sans-serif;
padding: 20px;
}
/* タイトル: 「テキストlogoの作成」 */
.title {
color: #D90429; /* 赤色系の色 */
font-family: "tekko", sans-serif; /* Adobe Fontsのかっこいいフォント（例） */
font-weight: 700;
font-style: normal;
}
/* 「つづき交流ステーション」 */
.station {
color: #000000; /* 黒色 */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ", sans-serif; /* ゴシック体 */
}
/* 「つづきパソピア」 */
.pasopia {
color: #2E8B57; /* 緑色 */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ", sans-serif; /* ゴシック体 */
}
/* 「青葉区古文書之会」 */
.komonjo {
color: #4682B4; /* 水色 */
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ", sans-serif; /* ゴシック体 */
}
/* 「横浜市都筑区」 */
.tsuzuki {
color: #000000; /* 黒色 */
font-family: "Meiryo", "メイリオ", sans-serif; /* メイリオフォント */
}
/* 「横浜市青葉区」 */
.aoba {
color: #2E8B57; /* 緑色 */
font-family: "Meiryo", "メイリオ", sans-serif; /* メイリオフォント */
}
/* 「横浜市港北区」 */
.kohoku {
color: #4682B4; /* 水色 */
font-family: "Meiryo", "メイリオ", sans-serif; /* メイリオフォント */
}
/* 「横浜市緑区」 */
.midori {
color: #0000CD; /* 青色 */
font-family: "Meiryo", "メイリオ", sans-serif; /* メイリオフォント */
}
/* 「横浜市都筑区青葉区港北区緑区」 */
.yoko-all {
/* 特に指定がないためデフォルトスタイル */
margin-top: 30px; /* 上に少し余白を追加 */
}
</style>
</head>
<body>
<!-- ここからが実際に表示されるコンテンツです -->
<h1 class="title">テキストlogoの作成</h1>
<h2 class="station">つづき交流ステーション</h2>
<h3 class="pasopia">つづきパソピア</h3>
<h1 class="komonjo">青葉区古文書之会</h1>
<hr> <!-- 区切り線 -->
<h2 class="tsuzuki">横浜市都筑区</h2>
<h3 class="aoba">横浜市青葉区</h3>
<h1 class="kohoku">横浜市港北区</h1>
<h1 class="midori">横浜市緑区</h1>
<p class="yoko-all">横浜市都筑区青葉区港北区緑区</p>
</body>
</html>
