作品を読んだ人から、何かひとつ返ってきてくれたら。
そんな漠然とした思いから、受け取る箱の方を先に作ってしまいました。
自分の創作サイト「ことづて綴」に設置した、匿名の「感想・ひとこと」フォームです。
文章が浮かばないときは、ボタンや絵文字だけ。
何か言葉を置きたいときは、短いひとことも送れます。
作ったものはこちらです。実際に触って試せます。
https://kotodutefolio.com/kotodute-lab
コメント欄より軽く、お問い合わせより近い場所
創作サイトには、お問い合わせフォームを置いています。
ただ、お問い合わせフォームは敷居が高い。
名前やメールアドレスを書く欄があり、送る側も、ある程度まとまった文章を用意することになる。
だから、作品を読み終えた直後に、
「読みました」
「ここ、好きだった」
「うまく言えないけれど、何か残したい」
と思ってくれた人が、そこまで構えずに押せるものがほしくなりました。
公開コメント欄では、自分の言葉がほかの人にも見えてしまう。SNSのリプライも同じ。作者には伝えたいけれど、表には出したくない感想もある。
そこで、読者と作者の間に、小さな私設ポストのようなものを置くことにしました。
「絵文字を選ぶ」「ひとことを書く」がある。
マシュマロとWaveboxのあいだのようなものがほしかった
発想の元にあるのは、マシュマロとWaveboxです。
匿名で文章を送れる箱と、絵文字ひとつで反応を送れる箱。
そのあいだくらいのものを、自分のサイトに置けないかと考えました。
そのうえで、
- 記事を読み終えた場所から、そのまま押したい
- どの記事へ届いた反応か分かるようにしたい
- 数字を読者に見せたくない
- サイトの色や言葉に合わせたい
- 受け取ったデータを自分のところへ置きたい
という、自分のサイト側の事情を足していきました。
最初から設計図が全部見えていたわけではありません。
作って、画面を見て、押してみて、違うところを直す。
その繰り返しです。
「サービス終了」と「アカウント停止」を見てきた結果
ローカル至上主義者——と言ったら、言い過ぎかもしれない。
最近私は、ローカルファースト寄りの人間になりつつあります。
ゲームやSNS、Webサービスが終わり、そこに置いていたものへ触れられなくなる話を、これまで何度も見てきました。
長く育てたアカウントも、運営上の都合やなにかの誤りで止まってしまえば、作品や記録が一度に見えなくなる。
そういう話を見聞きするたびに、自分の作品は、できるだけ自分で管理できる場所にも置いておきたいと思うようになりました。
「ことづて綴」を作った理由にも、その考えがあります。
作品を自分の場所に置くなら、そこへ届いた言葉も、自分の場所で受け取りたい。
正直、外部サービスを借りる方が早いし楽です。
けれど、今回は、受け取る箱を作る方へ進みました。
ClaudeCodeやCodexがあれば、大体のものは自作できるということがわかってきたからです。
押すだけでも、言葉を書いてもいい
フォームの上には、4つの定番リアクションを置いています。
📖 読みました
🌙 沁みた
🫧 静かに好き
➡️ 続きが気になる
文章を考えなくても、ここを押せば送信できます。
その下の「＋」を開くと、ほかの絵文字も選べます。
絵文字は、最初からすんなり決まったわけではありません。
見慣れない絵文字を多く入れると、どんな意味で押せばよいのか迷う。
ハートも、並べすぎると圧が出る。
顔、手、きらめき、自然、創作に関わる物、和の物。
よく使われるものを上の方へ置き、作品の空気に近いものを下へ置きました。
文章を書きたい人は、「ひとことを書く」を開きます。
入力欄と名前欄は任意です。
名前を入れなければ匿名で届きます。
連絡先も求めません。
書いた人には、サイトやSNSで紹介してよいかを選ぶ小さなチェックも付けました。何もしなければ、感想は作者だけに届きます。
読み終えた場所へ、そのまま置く
単独ページへのリンクだけでは、読者が感想箱を探しに行くことになります。
今回は、文庫、映像・絵図、ことづて帖の各個別ページの末尾に、フォームを直接埋め込みました。
ただ、個別ページで、入力欄を最初から大きく広げると、圧迫感がありました。
そこで、普段は閉じておき、書きたいときだけ開く形にしています。
たとえば、この記事の下にも表示されています。
最後まで読んで、そのままボタンを押せます。
埋め込み時には、PCやタブレットでは4つのボタンを横一列、スマートフォンでは2列にしています。
フォームの中で入力欄を開いたり、送信完了画面へ切り替わったりすると、高さも変わります。
その変化を親ページへ伝え、埋め込み枠の高さを自動で調整する仕組みも入れました。
最初は完了画面の下が切れたり、逆に余白が空きすぎたりしました。
数十ピクセルの違いを、何度か行ったり来たりしています。
フォームには、投稿ID、記事タイトル、URLも渡しています。受信側では、どの記事から送られた反応かを確認できます。長いURLをそのまま並べず、記事タイトルをリンクとして表示する形にしました。
記事末のほかに、フッターと「はじめての方へ」にも入口を置いています。
入口はいくつか。
届く箱は一つです。
ClaudeCodeに相談し、CODEXにWordPressへ組み込んでもらった
今回の制作には、複数のAIを使いました。
フォーム本体の機能や画面、管理方法は、ClaudeCodeと相談しながら作っています。PHPとSQLiteを使った独立した小さなアプリとして、送信画面、受信データ、作者用の管理画面をまとめました。
デザインは、ClaudeCodeからの仕様を渡して、ClaudeDesignに見た目を作ってもらいました。
そのあと、WordPressへの組み込みをCODEXに頼みました。
通常の記事と、映像・絵図の独自テンプレートでは、本文の表示方法が違います。記事末へ自動で表示する処理も、それぞれに合わせて分けています。
フッターや「はじめての方へ」の導線、埋め込み枠の高さ調整、送信元ページの情報も、最終的にはWordPress側とつなぎました。
コードの多くはAIが書いています。
一方で、
・何を押せるようにするか。
・どの言葉なら押しやすいか。
・何を画面に出すか。
・どこへ置くか。
・データをどう持つか。
その都度、画面を見て決めました。
AIに一度頼んだら完成、という作り方とは少し違います。
一文字と、少しの余白を直す
作る途中で、いくつか言葉も変わりました。
最初は「続きを待っています」というボタンがありました。画面幅によって最後の一文字だけ次の行へ落ち、妙な形になります。
CSSで無理に収める手もありましたが、最終的には「続きが気になる」へ変えました。短くなり、押す側の言葉としても収まりました。
管理画面の分類も、途中で見直しています。はじめは表示状態の分け方が分かりにくく、メールアプリに近い「未読／既読／すべて／フィルタ済み」へ変えました。
絵文字の数、ボタンの幅、入力欄の開き方、送信後の余白。大きな機能より、こういう小さなところを見ている時間の方が長かったかもしれません。
感想をお願いする前に、置ける場所を作る
作品への反応はほしいです。これはもう、普通にほしい（笑）。
ただ、読むことと、感想を書くことの間には、距離があります。
長い文章を書ける日もあれば、絵文字ひとつだけ置きたい日もあります。何も表へ出さず、作者にだけ伝えたいこともあります。
その幅を残したまま、記事の末尾へ箱を置きました。
コメント欄より軽く、お問い合わせより近い。
押すだけでも、書いてもいい。
郵便受けはできました。
あとは届くのを待つだけ。
——ポストを設置する前にすべきことは多々ある。
という事実からは目を背けています。
作品の感想は、「感想・ひとこと」からどうぞ。
ここから届いた言葉は、作者に届きます。
不具合報告、普通にありがたいです。
よろしくお願いします。
（他力本願）
おまけ——ことづて綴の執務室にて
「感想も、不具合も、あとは来るのを待つだけながやね」
異紀が、画面のいちばん下まで指を滑らせる。
理一郎は、机の端に積まれた試験記録を抜き、並んだ送信者名へ目を落とした。
「五通とも、おまえだ」
異紀は束の角を揃え、いちばん上を伏せた。
「……試験分へ回しちょいて」
紙の擦れる音が残った。
