アイコン画像生成サービスのPicturnizeを公開しました

注意事項

この記事は、Notion AIに対して

  • 問題と解決策の概要
  • 例示用のコード

を渡して生成した実験的な記事になります。

はじめに

Webサイトやアプリの開発にあたって、アイコン画像の生成に悩むことはよくあることです。
今回作成したWebサービスPicturnizeは、ブラウザ上でアイコン画像を必要なサイズに簡単に変換できるサービスです。
本記事では、Picturnizeの特徴や作成の進め方、今後の展望についてご紹介します。

実際にこのサービスよりも品質も高かったり、似たようなサービスは多くありますが、 ChatGPTやMidJourneyを組み合わせてサービスを構築する検証のために実施しました。

picturnize.zuki.dev

Picturnizeとは?

Picturnizeは、ブラウザ上でアイコン画像を必要なサイズに簡単に生成できるサービスです。
DOWNLOAD ALLボタンを押すことで、zipファイルとしてまとめてダウンロードすることも可能です。
もちろん、個別にダウンロードすることも可能です。

Picturnizeの特徴

  • ブラウザのみで必要なアイコンサイズを生成することができる
  • DOWNLOAD ALLを押すとzipでファイルを一括でダウンロード可能

Picturnizeの作成の進め方

Picturnizeの作成には、ChatGPTやMidJourneyを活用しました。

1. サービスに必要なアイコンや画像はMidJourneyを使って生成する

MidJourneyの有料プランを契約していることもあって、MidJourneyを使ってサービスのアイコン画像と、背景画像を生成します。

以下がその作業過程のサムネイルですが、やりたいことが決まっている場合は、かなり簡単に必要な素材を生成することができて助かります。

2. ChatGPTにサービス名について相談しつつ決める

ChatGPTにやりたい内容について伝えて、何度もブラッシュアップを重ねながら 他とは被りづらい名前を決めていきます。

3. 後は実装する

やりたいことは決まっているので後は実装するだけです。

github.com

Picturnizeの今後の展望

Picturnizeは、linkやmanifest.jsonの生成など、様々な機能の追加を予定しています。

まとめ

Picturnizeを使えば、ブラウザ上で簡単にアイコン画像を変換できます。
Picturnizeは、React+TypeScript+MUIを使用して実装されており、ChatGPTやMidJourneyを活用して開発されました。
今後も、機能の追加に注力していく予定です。Picturnizeを使って、アイコン画像生成をスムーズに行いましょう!