スタジオ・アルカナでwebデザイナーをしています。井口です。
突然ですが皆さんはメッセージを送る時、どうやって文章を作っていますか？
私は結構AIに頼ってしまうことが多いです。
社会人経験もそんなに長くないので、ちょっとしたメッセージでも、
「これ失礼じゃないかな？」「この言い方きつく聞こえないかな？」
と不安になることがよくあります。
全部AIに書かせるのはそれはそれで時間もかかるし、
出来るだけ自分の言葉でやりとりしたいという気持ちもあるので、あくまで自分で書いたものを最後に一緒に見直してもらう感覚で使っています。
同じように「手打ちで書きたいけど不安だからAIにも見てもらう」って人は結構いるんじゃないでしょうか？
しかし…
毎回ブラウザを開くのはめんどくさい…
例えばSlackでメッセージを送りたい際に、一々ブラウザの画面に行って
chatGPTを開いて、文字打って、添削して、コピペして…という作業がめんどくさい。
「確認したり調べたりしたい気持ちはあるけど、そこまでの操作すらダルくなってきてる…」
皆さんもそんな気持ちあったりするんじゃないでしょうか！？
今回アドベントカレンダーに参加するのでせっかくなら何か作ってみたいと思い、
ここのダルさを解消できるアプリを作ろうと思いました。
いちいちブラウザを開いて、ツールのページを探して…ではなく、
今、メッセージを書いている画面の中で…
送りたい文を選択して…
そこからワンクリックでいい感じにする！
そんなことができたら、このダルさを解消できるかも！と思いました。
最初は上記の要件でアプリを作りたかったのですが、
結構技術的に難しそう、時間もかかりそうと思ったので（パッと作りたかった）
じゃあ何となく作れそうな予感のするデスクトップアプリにしちゃおうと思いました。
相棒を作る
とはいえ、ただデスクトップアプリを作ってAIに繋いで文字変換させるだけなら、
なんか芸がないというか、面白くないと思ったので、
このツールを使いたくなるタイミングってどういう気持ちなんだろうと改めて考えました。
機能だけを見ると、ただの「文章をいい感じに整えてくれるアプリ」ですが、
これを使いたいと思う時の気持ちって、
- 「怒られたくない」
- 「きつい人だと思われたくない」
- 「ちゃんとしている社会人に見られたい」
- 「場の空気を壊したくない」
つまりコミュニケーションにおける「不安」を少しでも軽くしたい瞬間なんじゃないでしょうか。
そこで、昔WindowsのPCにいたお喋りイルカのように、
キャラクターを作って、そいつと絡みながら機能を使えたらどうか！と思いました。
キャラクターを作って、
それがデスクトップの端に常に駐在して、自分の文を一緒に手伝ってくれる。
そんなアプリであれば、単なる「文章ジェネレーター」ではなく、コミュニケーションの心理的負荷を下げるためのUIを持ったアプリになるんじゃないでしょうか？
リモートワークでは特にチャットでのやり取りが中心になるので、ちょっとした一文にも「これで変じゃないかな…？」と悩む時間が増えがちです。
その「悩む時間」を、画面端をワンクリックで少しだけ楽にする。
さらにキャラクターを使うことで、「AIにプロンプトを書いて指示しないと…」というツールを使うダルさではなく、相談する感覚に近づけられればと思いました。
そういった様々なダルさをいい感じ！に変換してくれる役割を、このツールに担ってもらえたらいいなと思っています。
初期イメージ
ざっくり決めた、「こんなふうに動いてほしい」という仕様はこんな感じです。
- SlackでもメールでもNotionでも、どのアプリでもよいので文章をコピーする
- PCの画面端に常駐しているキャラをクリック
- コピーしているテキストがポップアップに読み込まれる
- 「ビジネス」「カジュアルだけど失礼じゃない」などのいい感じのトーンを選ぶ
- 「いい感じに整えた案」を3つ返してもらう
- 気に入った案をクリックすると、クリップボードにコピーされる
- 元の画面に戻って貼り付けて送信
機能としては非常にシンプルですが、
- どのアプリからでも同じ動きで呼び出せる
- ブラウザを開かなくていい
この2つを満たすだけでも、 体験としてはかなり楽になるな、と感じていました。
実際の作業プロセス
ざっくりですが、作業の流れはこんな感じでした。
概要を考える
要件をAIに相談して、どのような技術を使って実装していくかを相談しました。
結果、
フレームワーク: Electron
言語: JavaScript (Node.js) & HTML / CSS
AI : Google Gemini API
で進めることにしました。
キャラの方向性と大体のデザインを決める
本当はここでもっと時間を使いたかったのですが、
時間もあまり無かったので、大まかなワイヤーと、キャラクターを考えた後に、キャラに合わせて色味などを設定して、それに沿ったデザインを作りました。
左が手書きでさっと描いたキャラデザのラフです。
nano banana proが話題で色々試してみたかったので、ラフを突っ込んで、何度か調整を行い、綺麗なイラストを生成してもらいました。ヤバい…！
これに更に指示を出し、figmaで整え、アニメーションGIFをいくつか作ります。
拡大すると画質が悪いですが、実際はかなり小さく使うので問題無いです。
アプリの実装
今回の裏目的？として最近話題のGemini3でなんか作ってみたいという気持ちもあったので、
Geminiを中心にコードを出してもらい、トライアンドエラーで動かしつつ、アジャイル開発的な感じで実装を行いました。
実装を進めていく中で、「あれAPIどうしよう」となりました。
最初は自分のAPIを使って動かすつもりだったのですが、デスクトップアプリを作って配布するという想定だったので、
「私のAPIをみんなが使ったら普通に破産するのでは？」
という現実に気づき
- 設定画面を追加
- ユーザーそれぞれに、自分の Gemini API キーを設定してもらう
という形に変更しました。
（Gemini API を選んだ理由は、制限はあるものの無料で使えるプランがあったからです）
アプリ側からはワンクリックで「API キーを発行するページ」に飛べるようにしたので、 そこから各自で設定してもらう前提にしています。 想定しているユーザー的に PC に慣れている方が多そうなので、説明は最低限に抑えています。
また、ついでにトーンにもう一つ「カスタマイズ」というのを追加して、
設定画面で独自のプロンプトを設定できるようにしました。
カスタマイズには自由に設定できるプロンプトと、他のトーンと同じように絶対変えないプロンプトも設定されています。
設定画面です。
こういった具合で実装を始めると浮き出るポイントがいくつかあり、
要件定義の段階で丁寧に考察を行ったり、他の人にチェックをしてもらうのは大事だなぁと改めて感じます。
とはいえ自分一人の作業だと、柔軟に変更を行えるのも良さだと思いました。
AIへの指示文（プロンプト）の調整
最初はAIにプロンプトの設定も任せていたのですが、
出力される結果がイマイチだったので、
どんな指示文だと、いい感じの結果になりやすいか
自分で調整した結果、以下のようなものになりました。
if (tone === "business") {
// ★ビジネス用プロンプト
prompt = `
あなたは日本語のビジネスメールの文章校正アシスタントです。
次の「元テキスト」を、自然で失礼のないビジネス的な文に書き換えてください。
【条件】
- 日本語で書く
- 丁寧だがくどくしない
- 過度に変更を加えない、あくまで元の文章を翻訳のように書き換える
- 取引先に使うような文、社内で上司宛に送るような文、ビジネス文だが重くなさすぎずな文、の３つのパターンの文を作る
【出力フォーマット】
1.
2.
3.
※上記 3 行のみを出力し、説明文や前置き・補足は書かないでください。
出力フォーマットの命令分は復唱しない。
本来はこの部分もAIに任せられたらと思っていたのですが、この部分やスタイルの実装など、部分的な実装は自分でやっちゃったほうが早いかもと思い、自分で行いました。
完成
デスクトップ用のアイコンを設定して、ビルド。
（本当はWindowsでも使えるようにしたかったのですが、起動まではするものの、APIでエラーが発生してしまい、とりあえずMac用のみに）
かわいい…！
実際に自分が文章を入れていい感じにしてみます。
いい感じですね。
これで一旦完成とします。
しばらく使ってみて感じたこと
まだプロトタイプレベルですが、
自分で使ってみて一番大きく感じたのは、
「使えるような…使えないような…」という感触です。
Geminiの無料プランはモデルがちょっと古い？ので多分生成される文の質も少しよくない気がします。
とはいえ、実際はそのまんまコピペで使うわけではないので、
「楽っちゃ楽なんだけど、なんかもうちょっといい感じになったら…！」
という気持ちでした。
一番使ってみて意外だったのは
サメくんが想像以上にかわいいことでした。
作った自分でいうのも何ですが、結構かわいいのがふと見るとグースカ寝ているので、
作業中の活力になったり、緊迫した会議中の癒しになったりと思った以上に癒し効果があるかもしれない…！と感じました。
改めて感じたことは
キャラクターにすることで単なるアイコンとは違う細かなデザインの余地も生まれるという点です。
例えば
- どのくらいのサイズなら邪魔にならないか 画面のどの位置なら視界には入るけど作業は邪魔しないか
- ユーザーのほうを見ているのか、画面のほうを見ているのか
- どういう動きにしたら相棒としての愛着が湧くのか
- そもそもどんなキャラが最適なのか
- 文章を読み込んでいるときは考え込むようなポーズになったり、エラーのときは困った顔をしたら、色んな不備も許せちゃうんじゃないか
- システム的なメッセージもキャラが訳して伝えるような役割を担えるのではないか
などなど。
こういった点でも「ただのボタン」よりも一緒に考えてくれている相棒に近づけることができて、体験をもっと良いものにデザインできるのではないかと思いました。
今回は時間が足りなく、自分がかわいい！と思えるものをパッと作ってしまいましたが、
今後の課題として、そういった部分もより丁寧に使用者を想定して作っていくことをしたいなーと思いました。
また、機能についても
コピーしたものを貼り付ける方式より、選択したテキストがそのままポップアップに反映されるほうが、アプリの「パッと使いたい」という性質上は、相性が良さそうだよな〜と制作中に思いました。
今回は、実装コストや時間も考えて一旦「コピペで貼り付ける」方式にしていますが、
ここもまた考察して、より自然な使い方ができるようアップデートしていけたらと思います。
「使えるような…使えないような…」という感触は、このような部分の積み重ねのような気もするので、もっと日常を便利にアップデートできるような物を作れるように今後も努力したいです。
おわり
以上いい感じに文章を作ってくれるサメくんアプリを作ってみた記事でした。
皆さんも1デバイスに1サメ置いて、日々のストレスをいい感じ！にしてもらってみてはいかがでしょうか。
フィードバックやアイデアいただけたら嬉しいです！