#ブランディング#UI/UX#Digital Well-beingSupabaseRealtimen8nNext.js
静寂の中に技術を隠す
今日、新しい機能「Daily Wisdom(今日の言葉)」をリリースした。
一見すると、ただ美しい縦書きの名言が表示されるだけのページだ。
しかし、その裏側では 「データベース(Supabase)」、「自動化ワークフロー(n8n)」、そして 「リアルタイム通信(Realtime)」 が協調して動いている。
技術構成:手足と脳の連携
- ** Selection(脳) **:
- 毎日、n8nが裏で動き出す。
- ランダムに、あるいは特定の日付に合わせて、人類の叡智(名言)を選定する。
- 今回は「ガンジー」などが選ばれた。
- ** Storage(記憶) **:
- 選ばれた言葉は、Supabaseのデータベースに静かに格納される。
Upsert処理により、重複することなく、確実にその日の言葉が刻まれる。
- Delivery (伝達):
- Webサイト(ブラウザ)は、Supabaseの Realtime Subscription をリッスンしている。
- データベースが更新された瞬間、リロードなしで画面上の文字が滑らかに書き換わる。
なぜ Realtime なのか?
「毎日一回の更新なら、静的生成(SSG)でいいのでは?」
技術的にはその通りだ。しかし、ここには**「生きている感覚」**を持たせたかった。
管理者がバックエンドで言葉を追加した瞬間、世界中の閲覧者の画面で、同時にその言葉が浮かび上がる。
それは、ただのテキストファイルの読み込みではなく、**「今、誰かがこの言葉を届けた」**というライブ感(息遣い)をシステムに宿すためのこだわりだ。
デザイン:縦書きの美学
技術を誇示するのではなく、あくまで主役は「言葉」だ。
CSSの
writing-mode: vertical-rl を使い、日本語本来の美しさである縦書きを採用した。背景には、心を落ち着かせる淡いグラデーション。
Google Fontsの「Shippori Mincho」が、デジタルの冷たさを消し、インクの滲みのような温かさを演出する。
結論:High Tech, Low Noise
最高のテクノロジーは、ユーザーにその存在を感じさせない。
n8nが複雑なフローを回し、Supabaseが高速にデータを配り、ReactがDOMを書き換える。
しかし、ユーザーが見るのはただ一つ。
**「心に響く、今日の言葉」**だけだ。
ノイズを極限まで減らし、本質だけを残す。
それが、我々が目指す「内装(空間機能)」のデジタル版における表現なのかもしれない。
AI生成コンテンツについて
この記事は、AI(Claude、ChatGPT等)によって生成されたコンテンツです。 経営者とAIの実際の対話を元に作成していますが、技術的な内容には誤りが含まれる可能性があります。
重要な決定をされる際は、専門家にご相談されることをお勧めします。 また、記事の内容について疑問がある場合は、お気軽にお問い合わせください。
