Notionフォームを無料の範囲でどう活用できるか考えてみた

今回はNotionフォームです。自動返信やメールへの通知はどうやら有料じゃないとできないみたいなので、それ以外の方法で有効活用できないか模索してみた記事になります。

それではみていきましょう。

Notionフォームを作ってみる

公式は下記になります。

Notion フォーム公式サイトはこちら

これが結構便利で試しに作ってみました。

今回はリンクを知っている全てのユーザーで行なっています。公にして利用することが多いことを想定してですね。

ざっとこんな感じで全部入れてみました。

必須の有無も簡単に設定でき、カレンダーから呼び出したり、チェックも単数・複数で制御できたり、ファイルも5MBまでは無料で対応しているなど、なかなか便利です。

ファイルの拡張子はjpg、png、webp、gif、pdf、mov、mp4は確認してます。まだまだできそうなものはありそうですが、公式を見てみてもそれらしき記述が見当たりませんでした。そのうち出てくるかなと思います。

必須のところは、しっかり赤くなってくれます。これもいいですね!

下記で公開の範囲をコントロールできます。無料では右上の方にMade withのテキストとNotionのロゴがつきます。まあこれは個人的にはそんなに気にならないですね。

実際に回答してsubmitボタンを押すと、下記の画面になりました。

自分のアドレスに回答した内容を送りたい場合は、アドレスを入力してコピーを送信ボタンを押せばOKです。

下記のようにメールが届きます。

View response in Notionボタンを押すと、回答結果が見れます。シンプルでいいですね。

それでは実際にデータにはどのように入ってくるのでしょうか。

一部見切れてはいますが、赤枠の回答者の部分は匿名になっていて、それ以外は回答した内容が反映されるようになっていました。

つまりネットで全てのユーザーが閲覧できるような場合は匿名になるみたいですね。

ここはよくわかっていませんが、匿名じゃない設定にできるんでしょうか。ちょっと様子見したいところです。

改善したいところ

で、ここまで見てきたところで、改善したいところとして、お問い合わせフォームを回答した後に管理者に通知が届くようにしたいですよね。本当は回答した人にも自動返信したいところですが、こちらは今回は無料の範囲だとできないので諦めます。

調べたところ、無料プランをご利用の場合でも、Slack通知オートメーションは作成できるとあったので、フォームと連携できるのかやってみましょう。

SlackインテグレーションでNotion フォームと連携してみる

Slackインテグレーションについては下記に記載がありました。

Slackインテグレーション公式サイトはこちら

こちらに従って、Notion側から設定していきます。

※Slackの登録方法などは省略しますが、自分専用のワークスペースを作っておくと便利かもしれません。

お問い合わせのオートメーションの設定

下記のように設定すればOKです。本当はSubmitボタンを押した時のトリガーがあればいいのですが、ここは今後に期待したいところです。もしかしたらできるのかもしれませんがわかりませんでした。

ここは自分の勘違いで、実際にはSubmitボタンを押してデータベースに回答が入った時点で通知される仕組みでした。つまりデータベースが回答に入ってから各項目を編集すると再度Slackに通知される仕組みのようです。後述しています。

ではテストしてみます。実際にSlackから通知されました!

ただ、編集しているタイミングで通知されるのかなと思いきや、どうやらSubmitボタンを押してからのようです。Submitボタンを押さずに待っていたのですが、Slackへは通知されなかったです。

ちょっとこの辺はわかりにくいですね。先ほどの見解は残しておきますが、改善されることを期待してます。

念のため、もしやと思い、回答のデータベースの赤枠を変更して通知されるか試してみることにしました。

案の定通知されました笑。なるほどデータベース側を編集したらってことか。これで理解できた気がします。

これでうまく連携できましたね。

通知できるSlackのチャンネルを指定できるので、無料でも十分使えそうです。個人的にはメールもSlackも変わらないと思ってます。

Google Formsも便利ですが、Notionフォームもなかなかいいですね。

フォームは意外と実装コストがかかるので、手軽にボタンだけ設置して誘導したい場面などではNotionフォームも使えると思いました。

データベースの確認も簡単にできますしね。

以上になります。

無料の範囲で動画生成AIを試してみた

今回は最近いろんな動画生成AIが増えてきているので、有名どころをピックアップした上で試してみました。

詳しい使い方の説明には触れませんので、ご了承ください。

この画像から生成するとこんな感じなのかというイメージを掴んでいただければいいと思います。

ではやっていきましょう。

Runway

公式サイトは下記です。

Runway公式サイトはこちら

無料の範囲ではGen-2が対応していたので、添付のように画像を貼り付けてプロンプトを入力するだけです。今回はダンスさせてみたかったので、プロンプトの内容はダンスしてもらうようによせています。

字数制限があるので、少し短くしてやってみると下記のようになりました。生成までは10分前後でしょうか。

いやーひどいですね笑。原型がもうありません。いろいろやってみたのですが、どうやらアニメには弱いようです。

一応背景ありでも試してみましたが、こんな感じになります。

ある意味すごいですね笑。こんな感じで笑わせてくれるにはすごくいいツールかもしれませんw

ただ、思ったように動いてくれませんでした。他にもプロンプトを試行錯誤してやってみましたがご覧の通りです笑。

念のため、背景だけでもやってみました。

おお〜いい感じです。これは結構使えそうです。

対象物がないときは案外使えるかもしれませんね。

続いて車でも試してみました。

やっぱりダメですねw

続いてアイドルです。

リアルからリアルだといけそうな感じでしたが、別人になってしまいました笑

ってことでRunway Gen-2では、背景以外はまだまだといった感じです。

Luma ai

公式サイトは下記です。

Luma ai公式サイトはこちら

初めの画像と終わりの画像を添付してプロンプトを入力するようです。

無料で使えるはずだったのですが、なんと使えませんでした…

ということで諦めて他のAIに移ります。

KLING AI

公式サイトは下記です。

KLING AI公式サイトはこちら

結構細かく設定できるんだなーと。こうやって他の動画生成AIとの違いが見えてくるのが面白いです。

いざ生成しようとしたのですが、なんと全然生成されません笑。

1日待っても3日待っても生成されず、ついにはTry againとなってしまいました。

しかし、めげずにTry againして待っていると、一部生成されましたので、下記にアップしています。

いかがでしょうか。Runway Gen-2の時よりは精度が高い気がします。

生成が安定しておらず、時間がかかってしまうのはデメリットですが、クオリティを考えるならこちらを採用してもよさそうです。

Pika

公式サイトは下記です。

Pika公式サイトはこちら

こちらもKLING AI同様、生成に時間がかかり、安定していません。一部アップします。

ダンスはしていませんが、素材を活かして自然な動きに仕上がっています。

続いて下記です。

カメラワークのプロンプトの問題なのかうまくいきません。

自然なうごきをつけたい場合にはいいかもしれないですね。他は生成できませんでしたのでこちらで以上です。

Hailuo AI

公式サイトは下記です。

Hailuo AI公式サイトはこちら

こちらは登録した最初の3日間はいろいろ使えるみたいなので、一旦全てのパターンやってみました。

真ん中の感じ結構いいですね。しっかりダンスしていますし。一方で左端は壊滅してますが笑。

車は別の車になってしまいましたが、しっかり道路の上を走っている様子が伝わりますね。

続いてアイドルです。これは別人になってはいますが、ダンスしてますね。バックダンサーの方も動きがついていてすごいなと。

まだまだ実用では使えませんが。

これで以上になりますが、実際に有料だとどのくらい違うものなのか気になりましたね。

精度や生成時間、どんなジャンルや内容に強いのかとか傾向がわかるといいのですが。

この辺は今後の動きに期待しています。

それでは〜

v0とClaudeで『かぞえてなんぼ』を作った過程をまとめてみる

今回は、v0とClaudeで『かぞえてなんぼ』を作った過程についてまとめていきます。

ちなみに前回のブログでも記載してますが、下記のようなカウンターを作りました。

それではみていきましょう。

まずはv0で命令

v0は下記公式リンクになります。

v0公式サイトはこちら

詳しい使い方はここでは触れませんが、下記のように作りたいイメージを指示してみました。

実際にできあがったものが下記になります。

なかなかいい感じです。もっとできないかと思っていたのですが、期待以上のできでした。

コードを見てみましたが、Reactベースで書かれていました。いくらAIで色々できるようになったからといって、Reactはフロントエンドを学んでいないと敷居が高いですよね。

下記のようにパッケージをインストールする指示もありますが、ここではあえて無視しReactを使わない方法で対応してみます。

問題はこの生成されたコードをどうやってローカル上で動くようにするかです。ではやっていきましょう。

Claudeを活用して変換してもらう

Claudeは下記公式リンクになります。

Claude公式サイトはこちら

こちらも詳しい使い方は触れません。別にChatGPTに聞いてみるのでもいいと思います。

今回は下記のように聞いてみました。

Reactで生成されたコードを全て貼って、HTML、CSS、JavaScriptに変換してもらう指示を書きました。

生成結果は下記です。全ては載せていませんが、これでWeb制作でコーディングを学習している方でも読みとれる内容になりましたね。

このコードをサーバー上で表示してみると、下記のようになりました。

若干見た目は変わってしまいましたが、機能面は問題なかったです。

Claudeはthree.jsも意外といけた

ここから少し脱線しますが、交通量調査のカウンターということで、背景に何か数えられるものを入れたいという発想になり、three.jsで作ってもらうことにしました。命令は下記のようにしました。

実際に生成されたのが下記です。1から作るより断然速いですよね。シンプルなものであればAIに頼るのもよさそうです。

ということで話を戻します。

ここから先は動きやデザインの調整

ある程度自分のやりたい仕様が実装できていれば、ここから動きやデザインなどの調整に入っていくといいと思います。

ここは普段のWeb制作フローとは少し違いますね。

AIが絡む場合は、仕様面の可否をAIに実装してもらい確認→デザイン→AIを活用しながらコードの微調整。

こんな手順になると思います。

残念ながらデザインの過程でAIを活用する方法は、なかなか思い浮かびません。自動でFigma等に作ってもらうとかできればいいのですが、現状ではイメージに近いパーツや背景などを作ってもらって、自分の発想になかった可能性を広げるための役割くらいしかないですね。

あれこれ検討して、下記のようになりました。

この見た目にするのに、AIを使ったのは背景の道路と車の動きのみです。他は使いませんでした。イメージからAIがコードを生成してくれるのはまだまだ実用では難しい気がしています。

以上になります。AIを組み合わせてうまく活用すれば、自分の作りたいものが意外と簡単に作れるなと思いました。発想次第ではもっといろんなものが作れそうですね。

【GPTs】北海道イベントナビをリリースしました!

今回は、初めてGPTsで何かを作ってみようということで、北海道内のイベントを抽出してくれる『北海道イベントナビ』を作ってみました。

さらに読む

AIの力を借りてVTuberのキャラクターを作って動かしてみた

今回は、AIの力を借りてVTuberのキャラクターを作って動かしてみることに挑戦してみました。ついでに音声も変えられるように取り組んでいます。

さらに読む

【GPTs使用】『順番代わりに決めます君』の制作過程を紹介します

今回は、下記の『順番代わりに決めます君』の制作過程を紹介していきます。

さらに読む

【GPTs】CanvaとLogo Creatorでロゴを作ってみた

AIとも向き合っていこうということで、最近ChatGPT Plusを契約しました。
今回はGPTsのChatGPT Plusを使ってロゴを作ってみましたので、作っていく中で感じたことなどを綴っていきます。

さらに読む

ClipDrop/Stable Diffusion XLを無料で使ってWebでどう活用できるか考えてみた

今回もAIシリーズです。
最近Stable Diffusionというワードをよく見かけますので、ちょっと使ってみたいなと思っていたときに、簡単に使えそうなものを見つけました。

さらに読む

BuilderioにBETA版のAI機能が搭載されたのでデザイン視点で触ってみた

今回は、AIシリーズ第1弾。Builder.ioについて取り上げていきます。

さらに読む