Discord Widget Study

AGIラボのDiscord導線パターン

公式iframe、Discordの画像ウィジェット、JSON APIを使った軽量カードを並べた比較ページです。実サイトに入れる前に、LPでの見え方だけをざっくり確認できます。

Pattern 01

公式iframeをそのまま置く

Discord側の見た目をそのまま使う案。実装は一番簡単ですが、LPの世界観には少し強くDiscord感が出ます。

Pattern 02

オンライン人数や数名の表示だけを拾う案。LPには一番なじませやすいです。

AGIラボ Discord

オンライン状況を取得中

読み込み中

取得元: https://discord.com/api/guilds/842347959102603274/widget.json

Pattern 03

「コミュニティが動いている」ことを強く見せる案。講座や会員登録の近くに置くならこのくらいの存在感もありです。

日々の実務で試したこと、モデル比較、ツール運用の詰まりどころ。 AGIラボのDiscordでは、会員同士の実践知が自然に流れています。

Pattern 04

記事下、講座ページ下、サイドバーなどに置きやすい控えめな案です。

Discordコミュニティに参加 オンライン人数を確認中

Pattern 05

公式画像ウィジェットはこのサーバーでは不安定だったため、JSON APIで作る安定版に差し替えました。

オンライン人数だけを軽く見せて、メンバー名やチャンネル名をLPに出しすぎない案です。

この形なら、LPの雰囲気に合わせて色・文言・CTAを自由に調整できます。

Pattern 06

ページ終盤の「会員登録前の最後のひと押し」に使いやすい案です。

Discordで、実務のAI活用を続ける。 記事を読んだ後の質問、講座後の復習、日々のモデル比較まで。

参加する

Pattern 07

本文を邪魔しない横配置の案。デスクトップでは右に固定、モバイルでは下に落とす想定です。

本文や講座アーカイブの近くに置く場合、Discordの存在感は強すぎないほうが読みやすいです。ただし、会員体験の実在感を出したい時は公式iframeが効きます。