このように、マウスを操作することで絵や文字を書くことができます。 目次
まずはじめに
入力したプロンプトは下記の通り。
特段詳細はつめず、大まかな指示のみ出しています。
これは「書き初めできたらいいな」ぐらいのぼんやりとした状態から始めたため、
壁打ちも踏まえて視覚化したかったためです。
できたものが下記。
シンプルな作りですが、
プロンプトに記載していないボタンも生成してもらっています。
このままでも最低限の機能は備わっている状態。
次に実際に記入してみて気になる箇所がないかを確認します。
筆で書いている途中の処理
例えばマウスで書くので筆の太さが選べるようにしたり、
上下左右に白い枠線が入っていたものを削除したり、
縦長すぎるとブラウザのスクロール量が増えて描きづらいので高さを調整したり。
また、少し遊び心があるともっと触ってもらえるかとも思い、
筆跡がエフェクトを散らしながら虹色になる「キラキラモード」も導入してみました。
（当初確率で虹色にしようかと思いましたが流石に遊びすぎているので選択制に変更）
筆で書いた後の処理
このアプリの目的は「新年会のクイズに使用する素材の収集」。
みなさまお忙しい中書いてもらうので、このページだけで私に送れないかと考えました。
そこで、supabaseと連携して、API経由でメールアドレスに送ってもらうことに。
（API自体には課金要素はありませんが、アクセス数が多い場合は制限がかかる可能性が高いのでご注意を）
いくつか対話を重ねて、すんなりと連携が完了してしまいました。
メール文面
今更の話
ここで、途中まで入力して「名前入れないと誰から来たかわからないな」と気づきます。
クイズにする以上半紙エリアに名前を書いてもらうわけにもいかず、
Figmaにデザインをコピー→名前入力欄を追加＋ボタンの高さを調整で対応しました。
記入漏れを防ぐために必須アイコンを追加し、空欄のままだとボタンが非活性状態になるように調整しました。
また非活性状態でボタンを押下した際にエラーメッセージが出るようにしています。
さらに、不具合防止のために文字数制限も追加しておきました。
デザインの調整
外側のトーンも調整します。
最初は弊社のメインカラーを採用しましたが、 お正月らしさが薄かったためゴールドの市松模様に。
タイトル横に雲のあしらいも追加しています。
当初あしらいもmake上で生成を試みたのですが、 崩れてしまったためsvg形式でデザインしたものを落とし込んで対応しています。
梅の花と扇を作ってもらいましたが、いまひとつ…
やってみて気づいたこと
1. （当然ですが）最初の要件定義はマスト
行き当たりばったりで作ると、確実に途中で無理に気づいて手戻りが発生します。
逆に言えば行き当たりばったりで作ってヒントをもらったら、
一度figma makeから離れて必要な要素を練り直した方が良さそうです。
2. 細かなデザイン調整はfigmaでやってみる
位置調整やボタンの微調整などは、一つひとつ指示を出すよりも
figmaでデザインを提示して
コピー&ペーストが個人的に作業しやすかったです。
3. 多少の誤字は許してくれる
対話の途中、入力途中のまま送信してしまった箇所がありましたが、
「これは恐らく誤入力かと思われます」との推論が返ってきました。
個人的に少し感動したポイントです。
4. 指示は一つずつやっていった方がいい？
Adobe Fireflyにも言えることですが、まとめて一気にプロンプトを描くと要素が抜け落ちたり
「解釈違い」が起こったりしやすいと感じました。
最初に細かい要件を伝えて、修正して欲しい箇所は一つひとつ丁寧にやっていく方が結果的に早く完成するのかもしれません。
最後に
曖昧な指示でもそれなりのクオリティを出してくれる万能アプリ。
それゆえに「どういった目的で何を作るのか」というブレない問いを常に持っておく必要性がありそうです。
