はじめに
こんにちは。最近はリアルの名刺を配るより、SNS交換の方が多くなってきたな〜と思う今日このごろ。
そんな中、ローコードプラットフォーム「SPIRAL」を使ったハッカソンイベントSPIRAL HackPlay に参加（というか主催）し、「SPIRALを使ってデジタル名刺を作る」というテーマに取り組みました。
できあがったのがこちら！
👉 デモ名刺
まるでリアル名刺のように「裏面」にひっくり返せる、ちょっとアソビゴコロあるやつです。
しかもデータベース連携＆問い合わせフォームつき。お手軽だけど、ちゃんと実用的！
こんな名刺です
- 📇 SPIRALのDBからユーザー情報を取得して名刺を生成
- 🔄 左右スワイプで裏面が見えるギミックあり（名刺感！）
- 📱 スマホで映える縦長デザインで、タップ操作も快適
- ✉️ メールアドレスを出さずに連絡できるフォーム付き
どうしてこうなった？（背景）
お題はこちら
「SPIRALを使ってデジタル名刺を作ってみよう！」
デジタル名刺か・・・最近プ◯ーリーとかの広告よく見るな・・・
- 所属が変わっても柔軟に変えられるし
- プライベート用・仕事用も切り替えられるし
- 最近紙配る機会も減ってるし
色々こだわって作れるかも！？
こだわったところ
🧠 情報は全部DBから！
- SPIRALのDBに自分の情報を登録しておいて
- 名刺を開いたときにその情報をリアルタイムで取得
- 「会社モード」「趣味モード」「コミュニティ用」なども切り替え可能
👆 スワイプで裏面に！
- 指で左右にスワイプすると名刺が裏返る
- 表には氏名や顔写真、裏には経歴やSNS、そして問い合わせフォーム
- 物理名刺にあった「裏面文化」を、デジタルに移植してみた感じです(ChatGPTが作ってくれました)
- 実は裏面にしたらボタンの色が変わります。（これもGPTが作ってくれました）
デモで試してみてね！
📱 スマホ最適化
- 縦型にして、スマホでの見え方を優先
- 文字サイズや余白も調整
- タップしやすいボタン、読みやすいレイアウト、配色もちゃんと設計しました
- もちろんPCからでも見れるよ
🙅♂️ メアドは非公開で連絡OK
- 名刺にメールアドレス書くの、ちょっと抵抗あるときありますよね？
- なのでSPIRALのフォームを埋め込み、そこからコンタクトを取ってもらえるようにしました
使用技術まとめ
| なにに使ったか | 技術とかツールとか |
|---|---|
| ユーザーデータ管理 | SPIRAL 通常DB |
| 問い合わせフォーム | SPIRAL フォーム |
| 見た目の実装 | HTML / CSS / JavaScript（をChatGPTが組んでくれました） |
あとはNFCに登録するだけ！
iPhoneアプリからNFCの編集ができるので、NFCに書き込んだら、デジタル名刺の出来上がり！
僕は👇️を使いました。
Google Playストアは
まとめ
SPIRALのフォームとDBとバイブコーディング（ChatGPT）を組み合わせるだけで、こんなに実用的でちょっと楽しいデジタル名刺が作れました。
紙の名刺にできて、デジタルにはなかった「裏返す」「使い分ける」「即連絡できる」などの体験、ちゃんと再現できたのでは？
しかもハッカソンで半日くらい（期間は1週間くらいあったんだけどね・・・）で作ったものなので、気になる人はぜひマネしてみてください！
🔗 デモはこちら！
📇 https://www.pi-pe.co.jp/area/card/104397/j8w0K8/M?S=oesdoe0n0k
（スマホで見るのがオススメ！）
🛠️ 参加したイベントはこちら！
今後も開催するかもなので、チェックしてみてください！
SPIRALが気になる！という方は・・・
↓↓無料トライアルで作れますので、是非チャレンジしてみてください！↓↓
使い方はこちらもご参照を！👇
こうした事例をもっと発信していけたらと思ってるので、よかったら
Qiitaフォローや「SPIRALナレッジサイト」もチェックしてみてください！