自己表現と導線設計を両立する名刺作成の実践例
■この記事でやること
普段お使いのお手元の名刺、満足していますか？
SPIRALでインターンに取り組んでいる私は、学校で使用する簡素な名刺（所属と氏名、連絡先のみ記載）しか持っていませんが、先日デジタル名刺なるものの存在を知り「これは便利！」と衝撃を受けました。
そこで本記事では、SPIRAL ver.1を活用して「相手に覚えてもらえるデジタル名刺」を作り、SPIRALでできることの一例を紹介します。名刺を単なる連絡先のやり取りだけではなく、次のアクションにつなげる“きっかけ”として機能させることを目指します！
特に以下のような方々に向けた内容となっています：
- デジタル名刺に新しい付加価値を加えたい方
- SPIRAL v1の機能を実務に応用したいと考えている開発者やマーケター
- アプリ開発やローコードでの構築に興味がある方
■紹介すること
- 実際に筆者がSPIRALで作成したデジタル名刺構成を例として紹介
- 使用した機能、構成意図、導入の工夫を丁寧に分解
- 読者が真似しやすいよう、画面構成の参考図を含めて視覚的に説明
■名刺作成の目的と方針
▷目的
「この人、何をやってきたんだろう？」に応える名刺を作りたい。
自己紹介をただ羅列するだけではなく、見た人が「もっと知りたい」と思うような構成を目指しました。今回のポイントは、興味の入り口を複数用意し、そこから詳細情報に自然に誘導する流れを作ることです。
このような構成にすることで、名刺という限られたスペースの中でも、相手に深い印象を残すことができ、仕事や趣味での次の関係構築につながると考えます！
▷設計方針（仮説）
今回の名刺作成にあたって、「読む人は関心のあるテーマに対して深掘りをしたくなる」と仮設しました。そのため、名刺内に概要を提示し、気になった部分だけをクリックして深く読むような導線を設計しました。
| 読み手の状態 | 名刺側のアクション |
|---|---|
| とりあえず雰囲気を知りたい | 一覧表でサムネ表示＋一言説明 |
| 興味があるトピックを深掘りしたい | 単票で詳細コンテンツ表示 |
| コンタクトや意見交換したい | フォームでコメント受付＋自動返信 |
この構成により、相手にアクションを誘導することで「自分事」として読んでもらえるのではないかと考えました！
■使用したSPIRAL機能と使い方の工夫
次の表にまとめています。
| 機能 | 使い方 | 狙い |
|---|---|---|
| データベース（DB） | 名刺データを一元管理 | 情報更新を容易にし、メンテナンス性向上 |
| 一覧表 | トップページに項目の見出しを表示 | 興味喚起のための“メニュー”構成を提供 |
| 単票 | 各項目の詳細ページ | HTML/CSS編集で視覚的に訴求力あるページを実現 |
| フォーム | 自己登録やフィードバック受付 | 名刺の内容を簡単に編集できる／見た人との双方向コミュニケーションを可能にする |
| トリガ | 閲覧後に自動でサンクスメール送信 | 印象を強め、記憶に残る体験へと昇華 |
SPIRALの強みは、データベースとWeb要素が統合された環境であること。これにより、情報管理から見せ方までを一元的にコントロールできます。
■各ページの構成と意図
【1】名刺トップページ（一覧表）
一覧表のXSLを編集して以下のように作成しました。
内容
- 氏名、所属
- 成果物や趣味の概要を一覧で表示
- 気になったらすぐにコメントできる窓口を設置
狙い：最初の画面で「この人面白そう」、「こんなことをしてる人なんだ」と思わせるような構成に。
今後実装したいもの
- プロフィール画像
- 一言での自己紹介文（30〜50字程度）
- レイアウトの改善
【2】詳細ページ（単票）
単票のソースコードについて、フォームの差し替えキーワードを入れながら編集しました。
内容
- 名刺トップページの各項目（青文字表示）をクリックすると、その詳細が表示される
- 画像や文章で自分を深めるページ
狙い：読み手が「この人と一緒に働いたらどうなるか」を想像できるような構成。
【3】リアクションフォーム
- 名刺を見た人が感想・興味を送れる
- 各ページの「コメントはこちら」ボタンをクリックすることでいつでも送信できる
- トリガを設定し、自動返信でサンクスメールを送信
狙い：印象を強くし、温度感の高い接点を逃さない。
【課題】一覧表から単票に遷移する
赤枠箇所をクリックすると、
このページに遷移するよう試みましたが、
内部エラーが発生します…
今回XSLを編集して試行錯誤しましたが、PHPやAPIでトライしてみる必要がありそうです…！
今後この課題を解決する記録もお伝えできたらと思います！
■SPIRALでこうすれば“覚えてもらえる”
「読む人の自分事化」を意識する構成
相手に「自分のこと」として感じてもらうために、反応しやすい環境や共感できる情報を見つけやすいことが重要だという考えのもと、作成してきました。SPIRALの一覧表＋単票を活かすことで、読み手は自分に関係がありそうな項目だけを選んで見ることができ、名刺の印象を深める構成になりました。
■SPIRALならではのメリット
- GUIベースで直感的にコンテンツ作成可能
- 一覧表＋単票の構成で興味の分岐点を作れる
- トリガによる自動返信・通知が簡単に設定できる
- フォームやDBを活かすと構造的な名刺が作れる/情報の管理が手軽にできる
これらを統合的に活用することで、「ただの情報」から「相手の記憶に残る名刺」に昇華できます！
■まとめ：SPIRALで「刺さる名刺」を作ろう
名刺を単なる自己紹介の手段ではなく、“つながりを生む設計図”として再定義してみませんか？
SPIRALを活用すれば、情報整理・見せ方・リアクションまでをワンストップで構築可能です。今回はデジタル名刺を作成しましたが、FAQサイトや会員サイトなども工夫を凝らして作成できます！名刺にとどまらず、さまざまな業務アプリをSPIRALで構築してみたいです😊
私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1のトライアルアカウントを無償提供しています。このアカウントの記事でも紹介するように、たくさんの機能ございます。
▶︎ フォーム
▶︎ 認証エリア
▶︎ ログイン
▶︎ メール送信
▶︎ カスタムプログラム
などの作成できますので、ぜひ試してみてください!!
そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。SPIRAL ver.1にご興味のある方、ぜひこちらもご覧ください👇