はじめに

SNSで新しい繋がりを作るとき、自己紹介カードは自分を表現するための有効なツールだ。しかし、既存のツールの多くは画像をサーバーへアップロードして処理する仕組みのため、個人情報や大切な写真の取り扱いにおいて心理的なハードルが存在していた。
自分のプロフィールや画像がどこかで悪用されないかという不安を抱える人は少なくない。

この問題を解決し、誰もが安心して自分だけの個性を表現できる場を提供したいと考え、Webアプリケーション「類型界隈 自己紹介カードメーカー」を開発した。

機能要件

本システム「類型界隈 自己紹介カードメーカー」は、X（旧Twitter）などのSNSで利用する自己紹介カードをブラウザ上で作成し、画像として保存できるWebアプリケーションだ。

利用者は16タイプ診断やエニアグラムなどの性格類型情報を入力し、デザインやレイアウトを自由にカスタマイズしながらオリジナルのプロフィールカードを作成できる。
画像生成まで含めた処理をブラウザ内で完結させることで、高いプライバシー性を実現している。

デザイン・背景設定機能

カード全体のデザインを自由に変更できるカスタマイズ機能を備える。

主な機能は次のとおりだ。

項目	内容
16タイプテーマ	INTJ、INFPなど16タイプごとのカラーテーマ切替
レイアウト変更	吹き出しカード、フラットカード、手書きノート、ミニマルを選択可能
フォント変更	複数の日本語・英字フォントから選択
背景設定	テーマカラー、単色、グラデーション、背景画像アップロード
詳細調整	パネル透明度、装飾量、文字色を変更

デザインの自由度を高めることで、利用者それぞれの個性を表現できる仕様となっている。

プロフィール・ステータス入力機能

自己紹介カードの中心となる情報を入力する機能である。

入力できる情報は多岐にわたり、基本プロフィールだけでなく、性格類型に関する詳細情報まで登録できる。

基本プロフィール

• 名前
• 呼ばれ方（愛称）
• 年代
• 性別
• アイコン画像アップロード
• アイコンの形状変更（正方形・円形・角丸）
• 拡大縮小・位置調整

類型情報

利用者の性格類型を細かく設定できる。

• メインタイプ（16タイプ）
• A／Tタイプ
• しっくり度（％）
• エニアグラム
• ソシオニクス
• トライタイプ
• その他類型

心理機能設定

心理機能については、単なる入力フォームではなく編集性も重視されている。

主な機能は次のとおりだ。

• 8種類の心理機能を入力
• 割合（％）を設定
• 色変更
• ドラッグによる並び替え
• ボタンによる順序変更
• 標準順へのリセット

このようなドラッグアンドドロップ操作を備えることで、柔軟なカスタマイズを実現している。

活動・交流スタイル

SNSでの交流方法もカードへ反映できる。

設定項目の例は以下のとおりだ。

• 浮上度
• 活動時間帯
• 会話スタイル
• 界隈での活動内容
• 交流可否
• DM対応
• 議論・考察の可否

交流スタイルは4段階評価で設定でき、必要に応じて項目を追加できる構成となっている。

自己紹介文

自由入力欄も用意されている。

• 最大320文字
• 文字数カウント表示
• カード下部のショートメッセージ入力

入力可能文字数を制限することで、画像生成時のレイアウト崩れを防ぐ設計となっている。

スタンプ・装飾機能

カードへ装飾要素を自由に配置できる機能を備える。

利用できる装飾は次の2種類だ。

• 用意されたスタンプ
• ユーザー独自の画像

配置後は次の編集操作に対応している。

• ドラッグ移動
• 拡大・縮小
• 回転
• 削除
• 削除の取り消し（Undo）

画像編集ソフトのような直感的な操作性を実現している点が特徴である。

データ管理・出力機能

作成した内容を保存・共有するための機能群である。

機能	概要
エクスポート	入力内容をJSON形式で保存
インポート	JSONから編集状態を復元
初期化	入力内容・保存データをリセット
画像生成	指定サイズで画像を書き出し
SNS共有	Xへの投稿・クリップボードコピー

エクスポートではプロフィール画像や背景画像を除外することで、ファイルサイズの肥大化を防ぎつつ、設定情報のみを持ち運べる仕様となっている。

非機能要件

クライアントサイドで完結する設計

本システム最大の特徴は、すべての処理をブラウザ内で実行する点にある。

• 入力データ
• アップロード画像
• 画像生成

これらはいずれもサーバーへ送信されず、利用者の端末内だけで処理が完結する。

そのため、個人情報や画像データを安心して扱える設計となっている。

レスポンシブ対応

PCだけでなくスマートフォンでも快適に操作できるUIを採用している。

画面サイズが変わっても入力フォームやプレビューが崩れず、画像作成までスムーズに行えることが求められる。

多言語対応

利用者層を広げるため、日本語と英語の表示切り替えに対応している。

テキストだけでなく、ボタンや各種ラベルについても言語ごとの表示を切り替える設計が前提となる。

まとめ

「類型界隈 自己紹介カードメーカー」は、プロフィール入力ツールではなく、画像生成・デザイン編集・データ管理を一体化したクライアントサイド型のWebアプリケーションと整理できる。