デザイン知識0の私がアプリのロゴを「無料」で「簡単」に作成する方法を考えた

## 最初に

初めまして、ガマリと申します！

最近アプリのデモ版を公開しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">APIMakerというAPI自動生成ツールのデモ版を公開しました！<a href="https://t.co/J7qJYtqbEH">https://t.co/J7qJYtqbEH</a><br><br>APIMakerは欲しい機能を入力すると必要なAPIの提案を行ってくれるツールです<br><br>リプライにて正規版の予約フォームと、使い方について記載していきます<a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%97%E3%83%AA%E3%83%87%E3%83%A2%E5%85%AC%E9%96%8B?src=hash&amp;ref_src=twsrc%5Etfw">#アプリデモ公開</a> <a href="https://twitter.com/hashtag/%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#個人開発</a> <a href="https://twitter.com/hashtag/GPT?src=hash&amp;ref_src=twsrc%5Etfw">#GPT</a> <a href="https://twitter.com/hashtag/%E6%8B%A1%E6%95%A3%E5%B8%8C%E6%9C%9B?src=hash&amp;ref_src=twsrc%5Etfw">#拡散希望</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://t.co/9FNzpMQa09">pic.twitter.com/9FNzpMQa09</a></p>&mdash; ガマリ@個人開発 (@Marine765_) <a href="https://twitter.com/Marine765_/status/1672756641673138177?ref_src=twsrc%5Etfw">June 25, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このアプリを開発している中で、デザイン知識のない私が感じた苦悩が「アプリロゴ作成をどうするか」といったものです。

簡単なロゴを作成するのに依頼するにも時間がかかるし、費用もそこそこかかってしまう。

自作できればベストなのですが、そんなスキルもないです。

そこで「なんとかできないかなー」と思いつつ、色々と調べた結果、今回の記事のような解決策に至りました。

今回はその解決策をみなさんに共有したいと思います。


## この記事の対象者

- 全般
- デザイン知識が無い方でも
- 簡単にロゴを作成したい方

## 必要なもの

- Microsoftのアカウント


## この記事で達成すること

この記事では以下の目的を達成します。

- 無料でアプリのロゴを作成する
- PNG形式で背景が無いものを作る

## 利用する技術

目的を達成するために以下の技術を利用します。

**Microsoft Designer**

https://designer.microsoft.com/

**remove bg**

https://www.remove.bg/ja/upload


具体的なステップを早速見ていきましょう。



## Microsoft Designerでロゴを作成

ゴール: 背景の無いロゴを作成する

### ログインする

まず、Microsoft Designerのトップページから右上のボタンを押して、続けてボタンを押してログインしていってください。

![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/f88fc9cf-2cff-53fe-0e4e-6b2afae7f749.png)


![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/d43bfbd0-1a6b-364c-91f4-991755733edc.png)

![step3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/4ecd2c4d-933d-d6d1-b138-1acf204296c5.png)

![step.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/beacd8df-39bb-cdda-e27c-e57010213356.png)

最後のような画面に到達したら完了です。

#### アカウントが無い場合

アカウントが無い場合は作成してください。

アカウント作成方法は公式ドキュメント作成してください。

[https://support.microsoft.com/ja-jp/account-billing/新しい-microsoft-アカウントを作成する方法-a84675c3-3e9e-17cf-2911-3d56b15c0aaf](https://support.microsoft.com/ja-jp/account-billing/%E6%96%B0%E3%81%97%E3%81%84-microsoft-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-a84675c3-3e9e-17cf-2911-3d56b15c0aaf)

### ロゴ作成まで

次に、左のフォームにある「Generate image」というところを押してください。

![step4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/a1103ec4-2bf8-4b25-a23a-0183ae8b94bf.png)

すると、画像生成機能の画面が表示されます。

![step5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/c3527d03-a4ac-e16f-42c2-8345e720b741.png)

入力欄に「app logo, simple, cat」と入れてみます。
そしてエンターを押してください。
次のような画像が生成されました。

![stepp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/96bccc95-a9e0-f55a-4cf8-4f250353b2e6.png)

これにてロゴの完成です。

少し犬っぽくて気に入らない！という方は、何度も繰り返して自分なりに好きなものを選択してください。

#### ロゴ生成でのポイント

プロンプトは非常に簡易的なものを利用するのが個人的には良いと思っています。

この場合「app logo, simple, 〇〇」、この〇〇に欲しい画像の要素を入れてあげるだけで、ロゴは完成します。

プロンプトを調査するもよしですし、入力欄の下に表示されるサジェスト機能を利用するのもいいと思います。


### 画像ダウンロードまで

次に、欲しいロゴをクリックしましょう。

試しに一番左の犬を犬っぽい猫を選択します。

すると次のような画面が表示されます。

![stepppp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/da4a2cac-d3e8-c9f7-1f52-35fc089b1e43.png)

右側のデザイン一覧から、背景色が統一のものを選択してください。
そして、右下のCustomize designをクリック。

![step7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/8f4e0d1b-0f17-b7ab-b27b-d147c28650dd.png)

右上のダウンロードを押してください。
PNG形式にしてダウンロードをすれば完了です。


以上がロゴ作成の部分になります。

続いて、背景色を削除していきます。


## 背景色を削除

まずは remove bgのページにアクセスします。

https://www.remove.bg/ja

![stepp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/aa93b6f0-b2ba-6513-1545-5ad1aab46557.png)

先ほどダウンロードしたPNG形式の画像を、ページにドラッグアンドドロップします。

すると勝手に背景を削除してくれます。

![stepp3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/1a9b5c7a-f99e-83ae-3c56-c11a5d9fb2e5.png)

あとはダウンロードボタンを押して完了です。

## 終わり

以上が、無料でアプリロゴを作成する方法になります。

現状は2023/6月時点では無料ですが、今後、Microsoft Designerが有償化された場合、無料ではなくなる可能性があります。

その点だけ注意してください。

## 宣伝

最後に宣伝させてください！

先日、APIMakerというアプリのデモ版を配信しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">APIMakerというAPI自動生成ツールのデモ版を公開しました！<a href="https://t.co/J7qJYtqbEH">https://t.co/J7qJYtqbEH</a><br><br>APIMakerは欲しい機能を入力すると必要なAPIの提案を行ってくれるツールです<br><br>リプライにて正規版の予約フォームと、使い方について記載していきます<a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%97%E3%83%AA%E3%83%87%E3%83%A2%E5%85%AC%E9%96%8B?src=hash&amp;ref_src=twsrc%5Etfw">#アプリデモ公開</a> <a href="https://twitter.com/hashtag/%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA?src=hash&amp;ref_src=twsrc%5Etfw">#個人開発</a> <a href="https://twitter.com/hashtag/GPT?src=hash&amp;ref_src=twsrc%5Etfw">#GPT</a> <a href="https://twitter.com/hashtag/%E6%8B%A1%E6%95%A3%E5%B8%8C%E6%9C%9B?src=hash&amp;ref_src=twsrc%5Etfw">#拡散希望</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://t.co/9FNzpMQa09">pic.twitter.com/9FNzpMQa09</a></p>&mdash; ガマリ@個人開発 (@Marine765_) <a href="https://twitter.com/Marine765_/status/1672756641673138177?ref_src=twsrc%5Etfw">June 25, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらが、リンク先になります。

https://api-maker.vercel.app/

APIMakerとは、WEB APIを自動で生成してもらう機能です。
GPTが良い感じにAPIを用意してくれます。

また、APIのコードを自動生成したりもできます。

みなさまの反応を知りたいので、是非ともご利用いただきたいです。

また、正規版を公開する場合、利用してみたい方は予約フォームを設置したので、そちらから予約して頂ければ幸いです。

https://docs.google.com/forms/d/e/1FAIpQLSf-V0XJTUqBKmaBlNIuTx1H2jg46ne_rSBNVaDlzMx8klAIzg/viewform

宜しくお願い致します！