Elido
1分で読了チュートリアル

5分でLink-in-bioページを構築する方法(Linktreeなしで)

高速な読み込み、独自ドメインでの運用、そして詳細なアナリティクス連携。Linktreeなどの外部サービスに依存せず、自分だけのバイオページを5分でデプロイする手順をステップバイステップで解説します。複雑なSaaSスタックを組み合わせる必要はありません。

Ana Kowalska
Marketing solutions engineering
バイオページの作成手順を示す5ステップの水平フロー図。エディタでの作成から始まり、モバイル画面に表示された公開URLで終わる構成。

Link-in-bio(リンクインバイオ)ページは、クリエイターや中小企業が必要とする最もシンプルなWebインフラの一つです。1つのURL、縦に並んだリンク先リスト、そしてクリーンな視覚的アイデンティティ。これが存在するのは、ソーシャルプラットフォームがプロフィール欄に1つのクリック可能なリンクしか許可していないためです。あなたの仕事は、その1つのリンクを最大限に活用することです。

このチュートリアルでは、Elidoのバイオページを使用して5分で構築する方法を説明します。最終的な状態は、独自ドメインで動作し、アナリティクスを備え、サードパーティのiframeを使用せず、自分で管理できるデプロイ済みのバイオページです。多くのバイオページツールは自社のインフラを経由するため、独自ドメインを使いたい場合でも最終的に linktr.ee/your-name のようなURLになってしまいます。Elidoならその心配はありません。

「なぜバイオページが必要なのか」「デザイン上のトレードオフは何か」といった理論的背景については、クリエイター向けバイオページの投稿で戦略を解説しています。この記事は実作業に焦点を当てたチュートリアルです。

開始する前に#

必要なものは以下の3つです:

  • Elidoアカウント。無料プランでバイオページ1つの作成が可能です。独自ドメインの使用にはProプランが必要です。/pricingから登録できます。
  • リンク先のリスト。3〜7個のリンクが最適です。10個を超えると、訪問者はスクロールが必要になります。
  • 任意:管理しているドメイン。このステップをスキップした場合、バイオページは bio.elido.app/your-slug で公開されます。これでも動作しますが、ブランド化はされません。ドメインを持ち込めば、DNSの反映を含めて2分で完了します。

準備はこれだけです。ビルドツールも、Vercelアカウントも、デザインファイルも不要です。

ステップ1:バイオエディタを開く#

Elidoダッシュボードにサインインします。左側のナビゲーションにある Bio pages をクリックします。新しいアカウントの場合、ページリストは空です。Create page をクリックしてください。

エディタが開くと2つのパネルが表示されます。左パネルは設定(スラッグ、テーマ、リンク、設定など)、右パネルはモバイルでの表示を確認できるライブプレビューです。

スラッグはドメインの後に続く文字列です。ドメインが bio.your-name.com でスラッグが links の場合、公開URLは bio.your-name.com/links になります。バイオページをドメインのルートで公開したい場合は、スラッグを空に設定することも可能です。

スラッグを設定してください。デフォルトの公開設定は「Unlisted(非公開)」です。設定で「Public」フラグをオンにしない限り、検索エンジンやElidoのディレクトリから見つけられることはありません。

ステップ2:リンクを追加する#

各リンクは、転送先URLとラベルの組み合わせです。Add link をクリックし、URLを貼り付けてラベルを入力します。ドラッグして順序を並べ替えることができます。

ラベルは訪問者に表示されるテキストです。転送先はクリックしたときに移動する場所です。一般的なパターンは以下の通りです:

  • 現在のキャンペーンや最新のリリースを一番上に。
  • いくつかの永続的なリンク(ショップ、ニュースレター、コミュニティなど)。
  • 最近のコンテンツ(最新のYouTube動画、ポッドキャスト、ブログ記事など)。

Instagramのユーザーを対象にする場合、リンクの順序はWebサイト以上に従順です。訪問者はスマートフォンや小さな画面で、時にはキーボードが開いた状態でバイオページを閲覧します。上部の2つのリンクがクリックの大部分を占め、スクロールが必要な下部のリンクはクリック率が急激に低下します。

各リンクには以下のオプションを設定できます:

  • アイコン:内蔵セット(shopmailyoutubelinkedingithubdiscordなど)またはカスタム画像のアップロード。
  • サブタイトル:ラベルの下に小さく表示される1行の説明。
  • 有効期限(Expires-at):期間限定のローンチに便利です。期限を過ぎるとリンクは自動的に非表示になります。
  • UTMパラメータ:クリック時に転送先URLに付与されます。これにより、移動先のプラットフォーム側のアナリティクスで、クリックがバイオページから来たものであることが分かります。

UTMの設定は最も価値のあるステップです。UTMを設定しない場合、バイオページからのクリックはすべて「Direct(直接)」トラフィックとしてカウントされ、バイオページ経由の訪問を他のチャネルと区別できなくなります。すべてのリンクに utm_source=bio を設定することで、アナリティクスプラットフォーム上で正しくトラフィックを属性化できます。

ステップ3:テーマを選択する#

バイオエディタには、Default、Mono, Bright、Customの4つのテーマが用意されており、それぞれ背景、テキストの色、ボタンスタイルの3軸で設定可能です。

DefaultテーマはElidoのパープルとインディゴのグラデーションを使用しており、テストには最適です。構成が決まったらMonoに切り替えるのも良いでしょう。白黒を基調とし、選択した1つのアクセントカラーを使用します。Brightは視覚的なインパクトを重視するブランド向けです。Customでは、16進数カラーコードやCSS変数を使ってフルコントロールが可能です。

テーマに関わらず適用される2つのデザイン上の注意点:

  • アバターのサイズ:ページ上部のアバターは最小400×400ピクセルにしてください。それより小さい画像は拡大されてぼやけてしまいます。レンダラーによって円形に切り抜かれ、かすかなシャドウが適用されます。
  • 背景のコントラスト:カスタム背景画像を設定すると、テキストの可読性を保つために50%の暗転オーバーレイが適用されます。画像がすでに低コントラストの場合はオーバーレイを無効にできますが、デフォルト設定の方が多くのスマートフォンで良好な可読性を得られます。

バイオページは、ダークモードの設定が通常より重要ではない数少ない場所の一つです。ほとんどの訪問者はInstagramやTikTokから、アプリ内のブラウザを経由してアクセスします。アプリ内ブラウザは独自のカラースキームでページを表示することが多いため、メディアクエリに頼るのではなく、どちらのモードでも機能するカラーパレットを選ぶことが重要です。

ステップ4:独自ドメインを紐付ける#

このステップにより、バイオページはElidoのものではなく、あなたのものになります。

ダッシュボードのナビゲーションから Domains を開き、 Add domain をクリックします。使用したいドメイン(例:bio.your-name.com)を入力します。ダッシュボードにDNSの設定指示が表示されます:

Record type: CNAME
Name:        bio.your-name.com
Value:       elido-bio.app
TTL:         300

お使いのDNSプロバイダーでこのレコードを追加してください。Cloudflare、Route53、NameCheap、OVHなど、インターフェースは異なりますがレコード自体は共通です。TTLは、その後の変更を素早く反映させるために300秒を推奨していますが、ドメインが安定したら値を上げても構いません。

レコードが有効になってから60秒以内に、ElidoダッシュボードがCNAMEを検出し、CaddyのオンデマンドTLSLet's Encryptを使用)経由でTLS証明書を発行し、ドメインを Active とマークします。更新は自動的に行われます。仕組みの詳細を知りたい場合は、5分で完了する独自ドメインTLSの投稿をご覧ください。

ドメインがアクティブになったら、バイオページの設定タブに戻り、ドロップダウンから独自ドメインを選択します。公開URLは即座にブランドドメインのものに切り替わります。

ここで発生する可能性のある2つの問題:

  • DNSプロバイダーがネイキッドドメイン(apex)でのCNAMEを許可していないyour-name.com(サブドメインなし)を elido-bio.app に向けようとすると、DNSの仕様上、多くのプロバイダーでエラーになります。代わりにALIASレコードやANAMEレコードを使用するか、 bio.your-name.com のようなサブドメインを使用してください。CloudflareのCNAME flatteningはこの問題を透過的に処理しますが、他のプロバイダーの多くは対応していません。
  • 既存のAAAAレコードがCNAMEをブロックしている:ドメインが以前に他の場所を指しており、AレコードとAAAAレコードの両方がある場合は、CNAMEを追加する前にそれらを削除してください。DNSでは、同じ名前でCNAMEレコードとA/AAAAレコードを共存させることはできません。

DNSエラーが発生した場合、ダッシュボードに競合の内容が表示されます。詳細なトラブルシューティングは短縮リンク用独自ドメインのウォークスルーで解説しています。

ステップ5:アナリティクスを有効にする#

バイオページの設定タブを開きます。3つのトグルがあります:

  • Track clicks:ページ上の各リンクのクリックを記録します。デフォルトでオン。クリックイベントには、リンクラベル、転送先URL、リファラー、国、デバイスタイプが含まれます(IPアドレス全体は保存されません。GDPRへの取り組みに従い、ネットワークプレフィックスのみが保持されます)。
  • Track views:ページの読み込みを記録します。デフォルトでオフ。何もクリックしなかった訪問者の数を知りたい場合はオンにしてください。
  • Forward conversions to platform pixelsPageView および Click イベントを、設定済みのMeta CAPI、GA4 Measurement Protocol、またはTikTok Events APIの送信先に送信します。デフォルトでオフ。これをオンにする前に、 Settings > Conversion forwarding でプラットフォームの認証情報を設定してください。

バイオページのアナリティクスは、ダッシュボード上で通常のリンクアナリティクスと並んで表示されます。国、リファラー、デバイス、時間帯などの内訳表示も、個別のリンクと同様に機能します。どの指標を重視すべきかは、短縮リンクアナリティクスで測定すべきことで解説しています。

月間10万ページビューを超えるような大規模なクリエイターの場合でも、バイオページのアナリティクスは自動的にスケールします。通常のリンクアナリティクスと同じClickHouseパイプラインが、サンプリングなしでバイオのクリックイベントを処理します。

ステップ6:公開してURLをプロフィールに貼る#

エディタの右上隅にあるページステータスは最初は「Draft(下書き)」です。Publish をクリックして公開します。

独自ドメインを設定した場合は bio.your-name.com/your-slug、スキップした場合は bio.elido.app/your-slug でページが表示されます。シークレットウィンドウで開き、訪問者にどのように見えるかを確認してください。

各ソーシャルメディアのプロフィールを更新します:

  • Instagramプロフィールを編集 > ウェブサイト 欄。
  • TikTokプロフィールを編集 > ウェブサイト 欄(TikTokは1つのURLに制限されています)。
  • X/Twitterプロフィールを編集 > ウェブサイト 欄。
  • LinkedInイントロを編集 > ウェブサイト(会社ページの場合は連絡先情報の下)。
  • YouTubeチャンネルをカスタマイズ > 基本情報 > リンク

Instagramを更新してから反映されるまでは通常1分以内です。TikTokのプロフィール更新は、アカウントの地域によって数時間かかる場合があります。

公開後にすべきこと#

効果の高い順に5つのステップを紹介します:

エディタですべてのリンクにUTMパラメータを追加する。 これは公開後で最も有用なステップです。すべてのリンクに utm_source=bio を設定してください。プラットフォームごとに異なるバイオページを管理している場合は、 utm_medium=instagramutm_medium=tiktok のように媒体を使い分けます。

48時間待ち、ヒートマップを確認する。 バイオアナリティクスのダッシュボードには時間帯別のヒートマップが表示されます。多くのクリエイターは、夕方のピーク(仕事後や放課後)を明確に確認できます。オーディエンスが特定の時間帯に集中している場合、その直前にコンテンツを投稿することでバイオページへのトラフィックを改善できます。

一番上のリンクでA/Bテストを実施する。 Elidoは、1つのリンク項目に対して重み付けされたランダムな2つの転送先バリアントをサポートしています。最もクリックされる一番上のリンクでこれを使用し、どちらの転送先がよりコンバージョンするかをテストしてください。詳細は短縮リンクを使ったランディングページのA/Bテストをご覧ください。

コンバージョン転送を連携させる。 一番上のリンクがショップやサインアップフローに繋がっている場合、Meta CAPIやGA4のサーバーサイドトラッキングを設定することで、バイオページでのクリックを有料獲得チャネルのファネルに正しく属性化できます。サーバーサイドコンバージョントラッキングの投稿で詳細を解説しています。これがないと、バイオトラフィックは獲得レポート上で「直接トラフィック」として表示され、有料チャネルと比較できなくなります。

ウェブフックイベントを購読する。 Slackチャンネル、Customer.ioのリスト、社内アナリティクスデータベースなどのダウンストリームシステムがある場合、 bio.click イベントを購読してリアルタイムでデータを受け取ることができます。/settings/webhooks で設定し、ウェブフック統合ガイドに従って署名を検証してください。

よくある落とし穴#

Instagramのモバイルアプリ内ブラウザは強力にキャッシュを行う。 訪問者が一度バイオリンクをクリックしてどこかに移動し、数分後に再度バイオリンクから戻ってきた場合、最新の状態ではなくキャッシュされた古いページが表示されることがあります。これはElidoの仕様ではなく、InstagramのWebViewの動作です。鮮度が極めて重要な場合は転送先に Cache-Control: no-store ヘッダーを使用してください。バイオページ自体はキャッシュされません。

TikTokはリファラーヘッダーを削除する。 TikTokのアプリ内ブラウザからのクリックは、転送先に referrer: "" として届きます。そのため、バイオページのリファラー内訳ではこれらのクリックは「Direct」として表示されます。これはプラットフォーム側の挙動であり、アナリティクスのバグではありません。プラットフォーム別にセグメント化したい場合は、ユーザーエージェント文字列からTikTokのトラフィックを検出することが可能です。

期限切れのキャンペーンリンクはページから消える。 リンクに expires_at を設定した場合、その日時を過ぎるとレンダリングされなくなります。ページをブックマークしていた訪問者にはリンクが1つ減ったように見えます。これは期間限定ローンチにおける意図した動作ですが、期限を設定したことを忘れているクリエイターを驚かせることがあります。

独自ドメインのDNS反映には60秒以上かかる場合がある。 60秒というのは典型的なケースです。一部のDNSプロバイダーは強力なキャッシュを行っており、証明書が発行されるまでの反映に最大24時間かかる場合があります。ダッシュボードのステータスが1時間以上「Pending TLS」のままの場合は、ドキュメントのDNSトラブルシューティングセクションを確認してください。

関連記事#

Elidoを試す

EUホスティングのURL短縮サービス。カスタムドメイン、詳細な分析、オープンAPI付き。無料プラン — クレジットカード不要。

タグ
link in bio
bio page
linktree alternative
creator tools
bio page tutorial
branded bio link
custom domain bio

続きを読む