BNI Widget

BNIプロフィールを、
“貼るだけ”で魅せるページに。

BNI Widget は、あなたのBNIコネクト「私のビジネス」欄を、写真・動画・サービス紹介・YouTube・LINE友だち追加つきの本格的な紹介ページに変えるサービスです。専門知識は不要。画面で編集して、できあがったコードを1回貼り付けるだけです。

⚠️ 本サービスは BNI アルゴーチャプター のメンバー限定です。

無料で登録して始める ログイン

使うと、こう変わります

同じプロフィールが、装飾する前と後でこれだけ変わります。左が装飾前（素のBNI）、右が装飾後です。

■ パソコンで見た公開プロフィール

Before 装飾前装飾前のプロフィール
After 装飾後装飾後のプロフィール

■ パソコンで見た「マイプロフィール」（自分のログイン画面）

「マイプロフィール」は、あなたがログインして見る自分の画面です。反映前は素の状態、反映後は上部バナーから私のビジネスまで装飾されます。

反映前
マイプロフィール反映前
反映後（上部）マイプロフィール反映後・上部
反映後（下部）マイプロフィール反映後・下部

■ プロフィール上部（バナー）

Before 装飾前装飾前のバナー
After 装飾後装飾後のバナー

■ スマートフォン（ブラウザ）で見た「私のビジネス」

Before 装飾前装飾前のスマホ表示
After 装飾後装飾後のスマホ表示

■ BNIコネクトアプリでの見え方（反映前 → 反映後）

スマホアプリはデザイン（背景・サービスカード・数字）を表示しませんが、紹介動画（YouTube）・LINE友だち追加・「詳しく見る」や、整えたキャッチコピー・本文はしっかり表示されます。

反映前アプリ・反映前
反映後 ①アプリ・反映後（私のビジネス）
反映後 ②アプリ・反映後（動画・LINE）

ご利用の流れ（全体像）

STEP 1アカウントを登録する
STEP 2〜5画面でデザインを編集する
STEP 6〜8コードをBNIに貼り付けて保存

編集はすべて自動保存されます。色・テンプレートの変更などは貼り直し不要で自動反映されますが、見出し・本文（キャッチコピー）・YouTube・LINEなどを変えたときは、コードの貼り直しが必要です（詳しくは最後の「貼り直しの要不要」をご覧ください）。

目次

STEP 1

新規登録する

まず 新規登録ページ を開き、お名前（任意）・メールアドレス・パスワード（8文字以上）を入力して「登録する」を押します。登録するとすぐにダッシュボードが開きます。

新規登録画面
新規登録画面。メールアドレスとパスワードだけで始められます。
STEP 2

ダッシュボードを開く

ダッシュボードは操作の起点です。「① デザインを編集」「② プレビューで確認」「③ BNIに貼り付け」の3つがまとまっています。まずは「ビジュアルエディタを開く」から始めます。

ダッシュボード
ダッシュボード。ここから編集・確認・貼り付けにアクセスします。
STEP 3

デザインを編集する（ビジュアルエディタ）

エディタでは、プレビューを見ながらデザインを作れます。まず上部のテンプレートから全体の色調を選びます。

ビジュアルエディタの初期画面
ビジュアルエディタ。上にテンプレート、中央にプレビュー、下に詳細設定があります。
テンプレートを切り替えたところ
テンプレートを選ぶと、見出しや数字の色が一括で切り替わります。

点線がついた文字・数字は、そこを直接クリックすると書き換えられます（見出し・キャッチコピー・数字・サービスカードすべて）。「＋サービスカード」「＋数字」で項目を増やしたり、「×」で削除したりもできます。

文字を直接クリックして編集
点線の箇所をクリックしてその場で入力。右上の「×」で項目を削除できます。

下の詳細設定では、YouTube動画URL・LINE友だち追加URL・各パーツの色・ウィジェット背景を設定できます。すべて自動保存です。

詳細設定パネル
YouTube・LINE・色・背景を設定する詳細パネル。

文字と背景を入れ込むと、こんな仕上がりになります。

編集後のプレビュー
キャッチコピー・動画背景・YouTube・LINEまで入った完成イメージ。
STEP 4

セクションの背景を選ぶ

「セクション」画面では、プロフィール上部・会社情報・TOP項目（理想の紹介など）・メンバーカードの背景を、サムネイルから選ぶだけで設定できます。先頭の「アルゴー01〜06」はすぐ使えるデフォルト背景です。

Before 背景なし背景を設定する前
After 背景あり背景を設定した後

背景の「暗さ」や文字色も調整でき、こちらも自動保存です。

STEP 5

動画・画像を用意する（メディア）

自分の写真や動画を背景に使いたいときは「メディア」画面からアップロードします。対応形式は JPG / PNG / GIF / WebP / WebM（動画）、上限は20MBです。アップロードした素材は、エディタやセクションの背景として選べるようになります。

メディアのアップロード画面
メディア画面。背景に使う画像・動画をここにアップロードします。
STEP 6

プレビューで確認する

ダッシュボードには2種類のプレビューがあります。WEBサイト版（パソコンやログイン画面での見え方）と、BNIコネクトアプリ版（アプリ内での見え方）です。

🖥 WEBサイト版WEB版プレビュー
📱 BNIアプリ版アプリ版プレビュー
⚠️ WEB版とアプリ版で見え方が違います。 BNIコネクトのスマホアプリはデザイン（CSS）を読み込まないため、サービスカード・数字・背景画像/動画は表示されません。アプリで表示されるのは見出し・本文・YouTube・LINE友だち追加・詳しく見るです。両方のプレビューで確認してから貼り付けましょう。
STEP 7

コードをコピーする

ダッシュボードの「③ BNIの『私のビジネス』に貼り付け」にあるスニペット（コード）を「コピー」ボタンで丸ごとコピーします。文字数は1000字以内に収まるようになっています。

スニペットをコピー
「コピー」ボタンでコードを丸ごとコピーします。
STEP 8

BNIに貼り付けて保存する

最後に、コピーしたコードをBNIコネクトに貼り付けます。

💡 色・テンプレート・背景画像や、サービスカード／数字の文字内容だけの変更なら、貼り直し不要で自動反映されます。ただし見出し・本文（キャッチコピー）・YouTube・LINE・「詳しく見る」を変えたときは、最新コードをコピーし直して貼り付けてください。
STEP 9

反映後の完成イメージ

保存すると、あなたのBNIプロフィールが装飾された状態で公開されます。もう一度、反映前と反映後を並べてみます。

反映前反映前
反映後反映後
反映前（スマホ）反映前スマホ
反映後（スマホ）反映後スマホ

貼り直しの要不要（重要）

編集した内容によって、コードの貼り直しが必要なものと不要なものがあります。

● 貼り直し不要（自動で反映されます）

● 貼り直しが必要（変更後、最新コードをコピーし直して貼り付け）

📱 サービスカード・数字・背景（画像/動画）はWEB版のみ表示され、BNIコネクトアプリでは表示されません。アプリでも見せたい情報は、見出し・本文・YouTube・LINEに入れておきましょう。

さっそく始めましょう

登録は無料。メールアドレスとパスワードだけで、すぐにあなたの紹介ページ作りを始められます。

無料で登録する ログイン