エンジニアが生成AIを使ってロゴを作った話:Dacrane

弊社のOSSにロゴが付きました
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

ども!Dacraneの広報担当:龍ちゃんです。Dacraneの仮ロゴを作成したので、その過程で得た知見を振り返りながら記事にまとめました。広報担当の成果は、以下にGitHubスターが増えたかという点なので強気でスターを求めています。生成AIを使うとデザインツールがあまり得意ではない僕でもロゴ作れました。

ご挨拶

ども!弊社初のOSS:Dacraneの広報担当、龍ちゃんです。たくさんブログを執筆してたら、情報発信系のお仕事が降ってきました。これから開発情報から、開発の小話までいろんな内容を投稿していく予定です。

さて!今回は広報担当に就任して一発目のお仕事について書いておこうと思います。内容としてはタイトル通りなのですが、詳しくは「エンジニアが生成AI(DALL-E)を使用してロゴを作成した」お話になります。作ったロゴはこちらです。

Dacraneって何?

さて、機能的な話をしたいのですが長くなってしまうのでこちらの記事に案内を置いておきます。

OSSの開発を始めるよ!Dacrane

GitHubのリンクはこちらになります。コードが読める方はこちらの方が早いかもしれません。以下の画像をクリックしても飛べますよ!

DacraneGitHub

ふんわりと概要をつかむことができるブログ(執筆予定)

エンジニアが生成AIとロゴ作りをしたお話

さっくりと本題に入っていければなと思います。広報担当に就任したのですが、広報するにしてもロゴがない状態でした。さすがに宣伝にはロゴが必要なのでこそこそ作ったら、仮ロゴに採用されました。Chat GPTとお話しながら、作成をしていたので工程に分けて解説していきます。

チャットGPTにロゴの原案を出してもらう

DacraneはDaC (Delivery as Code) とCrane(クレーン)の2つの単語を組み合わせた造語になります。DaCはダックと読めるので、ダジャレでアヒルと紐づけていますw。

というわけでイメージは「アヒルの背中に巨大なクレーンがのっている」になります。このイメージを伝えるプロンプトを作成しました。

以下の条件に従ってシンプルなロゴを作成してください。

背景は#FFFFFでロゴは#000000
アヒルの背中が巨大クレーンがついている石油プラットフォームになっている
ロゴは#000000で塗りつぶし

カラーコードを明示的に指定することで二値画像を作成してくれます。(時々グレースケールで出してきます)一回目は、以下の画像が出力されました。

logoDemo

イメージ的にアヒルは塗りつぶしてほしかったので、プロンプトを改良して複数パターン出力するように変更しました。

以下の条件に従ってシンプルなロゴを三パターン作成してください。 

背景は#FFFFFでロゴは#000000
アヒルの背中が巨大クレーンがついている石油プラットフォームになっている
ロゴは#000000で塗りつぶし

logoMulti

だいぶイメージに近づいてきたので、次のステップに移行です。

画像からSVGに変更する

画像のままだと、取り回しがあまりよくないので出力された画像をSVGに変換します。

雑談ですが、Chat GPTから出力される画像が、PNGからwebpになったんですね。これは微妙ですね。いったんFigmaに写して画像を切り取ってPNGで保存します。今回は、真ん中の画像を利用します。

SVGの変換には、Free SVG Converterというサイトを利用しました。普段はAdobe Expressを使用しているのですが、今回の画像では前者の方がよかったですね。

イラストをちょっと編集する

出力されたイラストをもとに不要な部分を削除していきます。

イラストの編集

ここにきて、Dacraneの開発者のトップに「こんなのどうでしょう?」という確認を入れました。そこから1時間ほどトップと1on1で修正が始まりました。主にロゴの軽微な修正ですね。

ロゴのビジュアル決定

最終的に、背中のプラットフォームを削除してクレーンだけのデザインに落ち着きました。SVGを直接編集するのは結構つらいですね。

デザイン仕上げ

宣伝用には、ロゴを付けたほうが良いという天からのお告げで複数パターン作ってみました。いろんなパターンを作成してみました。

ロゴの複数パターン

自分では判断ができなかったので、社内のSlackで投票してもらいました。結果として、こちらの仮ロゴが決定しました。

ロゴの決定

ステッカー用デザイン

ロゴができたのでステッカーを作ろうという話も来まして。ステッカーも作りました。

ステッカー用デザイン

これは、Dacraneの宣伝イベントで配布するのでぜひゲットしてください。

宣伝

最後にちょっと宣伝させてください。こちらの画像をクリックしてください。

GitHubのスターをください

GitHubのスターが欲しいんです!!ちょっと面白いなと思ったらスター押してください。ちゃんとした宣伝記事をこれから作りますので!!

終わりに

広報担当のポジショニングが難しいと思いながら、いつものノリで執筆してしまいました。あんまり硬くならずにゆるーく情報共有を目指していきます。これからは、Dacraneの広報担当としていろんなイベントにお邪魔するかもしれません。その際は、是非声をかけてください。

では!!

スターをよろしくお願いします。

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる