注意事項
この記事は、Notion AIに対して
- 問題と解決策の概要
- 例示用のコード
を渡して生成した実験的な記事になります。
はじめに
Webサイトやアプリの開発にあたって、アイコン画像の生成に悩むことはよくあることです。
今回作成したWebサービスのPicturnizeは、ブラウザ上でアイコン画像を必要なサイズに簡単に変換できるサービスです。
本記事では、Picturnizeの特徴や作成の進め方、今後の展望についてご紹介します。
実際にこのサービスよりも品質も高かったり、似たようなサービスは多くありますが、 ChatGPTやMidJourneyを組み合わせてサービスを構築する検証のために実施しました。
Picturnizeとは？
Picturnizeは、ブラウザ上でアイコン画像を必要なサイズに簡単に生成できるサービスです。
DOWNLOAD ALLボタンを押すことで、zipファイルとしてまとめてダウンロードすることも可能です。
もちろん、個別にダウンロードすることも可能です。
Picturnizeの特徴
- ブラウザのみで必要なアイコンサイズを生成することができる
- DOWNLOAD ALLを押すとzipでファイルを一括でダウンロード可能
Picturnizeの作成の進め方
Picturnizeの作成には、ChatGPTやMidJourneyを活用しました。
1. サービスに必要なアイコンや画像はMidJourneyを使って生成する
MidJourneyの有料プランを契約していることもあって、MidJourneyを使ってサービスのアイコン画像と、背景画像を生成します。
以下がその作業過程のサムネイルですが、やりたいことが決まっている場合は、かなり簡単に必要な素材を生成することができて助かります。
2. ChatGPTにサービス名について相談しつつ決める
ChatGPTにやりたい内容について伝えて、何度もブラッシュアップを重ねながら 他とは被りづらい名前を決めていきます。
3. 後は実装する
やりたいことは決まっているので後は実装するだけです。
Picturnizeの今後の展望
Picturnizeは、linkやmanifest.jsonの生成など、様々な機能の追加を予定しています。
まとめ
Picturnizeを使えば、ブラウザ上で簡単にアイコン画像を変換できます。
Picturnizeは、React+TypeScript+MUIを使用して実装されており、ChatGPTやMidJourneyを活用して開発されました。
今後も、機能の追加に注力していく予定です。Picturnizeを使って、アイコン画像生成をスムーズに行いましょう！
