京都鴨川からスマホで投稿します
2025年に作ったアプリを紹介しつつ、hata6502が手応えを感じられたAIの使い道を振り返りました
Emojigram
https://emojigram.hata6502.com/
写真を与えると、抽象的な絵文字の配置で表現するアプリです
自己紹介のようなアイスブレイクで使っています
- ラフなプレゼンテーション
- オンライン歓迎会
秋の夜長に月を眺める猫 https://t.co/PNufEtc3Nv #Emojigram pic.twitter.com/Jz162uNaZ1
— ムギュウ (@hata6502) November 23, 2025
絵文字の置き方をAIにお任せする
ランディングページのような見栄え重視なものを、AIに作らせるのを見かけるようになってきました
またChatGPTの出力は絵文字で飾ってくる印象があり、Emojigramのようなアプリを思いつきました
ちょっと大げさな表現に感じることもありますが、AIは私よりも親しみのある見栄えを作ってくれるかもしれません
Structured OutputsでEmojigramを生成しています
const response = await openai.responses.parse({
model: "gpt-4.1",
instructions: `複数の絵文字の配置として表現してください。
写実的に再現するのではなく、かわいいコミカルな表現を重視してください。
ルール:
- キャンバスのサイズは512x512
- 写真の要素ごとに、対応する絵文字を選んで配置する
- 前景に表示する絵文字ほど後で配置する
- 必要に応じて短い日本語の一言セリフを付ける
- セリフは1〜2語以内の短い言葉にする
`,
input: [
{
role: "user",
content: [
...(data.image
? [{ type: "input_image", image_url: data.image }]
: []),
{ type: "input_text", text: data.description },
],
},
],
text: {
format: zodTextFormat(
z.object({
emojigram: z.array(
z.object({
x: z.number().describe("中心の座標をpxで"),
y: z.number().describe("中心の座標をpxで"),
text: z.string(),
fontSize: z.number().describe("pxで"),
rotate: z.number().describe("degで"),
})
),
}),
"emojigram"
),
},
});
const { emojigram } = response.output_parsed;
デザイン実装をAIにお任せする
Reactアプリの骨組みは私自身で作りましたが、デザインはAIに作ってもらいました
アプリ開発はエンジニアとして私も得意ですが、親しみやすい見栄え作りはAIのほうが得意かもしれません
手順
- まずhata6502が、デザインを当てずにReactアプリを作る
- ※スクリーンショットには別のアプリが映ってますが、Emojigramのアプリを作るときも同じ開発方法をしています
- Claude CodeにTailwind CSSのclassを当ててもらう
- 一発でここまでデザインを適用できた
- 横幅が揃ってなかったり、手直しは必要
- 人の手で手直しする
以上、hata6502が2025年に手応えを感じられた、AIの使い道でした