← 一覧へ
🛠 コードを作るCC / Codex 両対応難易度: 初心者
コンタクトウィジェット contact-widget
お客様とつながるシンプルな窓口
これは何？
これは、ウェブサイトに簡単に追加できるコンタクト用のフローティングウィジェットです。たった1つのHTMLファイルで、プロフェッショナルな見た目のチャットインターフェースを実現できます。バックエンド不要で動作し、カスタマイズも簡単。SNSリンクや予約ボタンも配置できますよ。
これでできること
- ウェブサイトにプロフェッショナルなチャットウィジェットを追加
- SNSや予約ページへのリンクをまとめて表示
- オンライン/オフライン状態に応じて表示を切り替え
- 完全にスタンドアロンで動作（外部依存なし）
こんな時に便利
個人ポートフォリオサイトのコンタクト用
フリーランスの問い合わせ窓口
小規模ビジネスのカスタマーサポート
イベントページの問い合わせ用
使い方
まず、ウィジェットの色や担当者名、表示メッセージなどを設定します。生成されたHTMLファイルをウェブサイトに貼り付けるだけでOK！バックエンド連携が必要なければ、そのまま使えます。メッセージ送信機能を追加したい時は、簡単な設定でメール送信やAPI連携も可能です。
使用例（こう頼んでみよう）
「コンタクトウィジェットを作って。担当者名は田中、メインカラーは#3B82F6で」「WhatsAppとInstagramのリンクを入れたウィジェットが欲しい」「カレンダー予約ページへのリンクも含めて」必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/nexu-io/open-design/tree/main/design-templates/contact-widget手動で置く
Claude Code →
~/.claude/skills/contact-widget/Codex →
~/.agents/skills/contact-widget/使いこなしのコツ
- 色をサイトのブランドカラーに合わせると統一感が出ます
- SNSリンクは必要なものだけ表示するのがおすすめ
- オフラインメッセージもカスタマイズ可能