できること
費用は、旅行前の意思決定における最大の要因です。ところが多くの旅行コンテンツはこれをうまく扱えていません — 「東南アジアにしては手頃」といった曖昧な段落か、為替が動いた瞬間に陳腐化する静的な表のどちらかです。Oriznの予算計算ウィジェットは、その両方をライブでインタラクティブな答えに置き換えます。
訪問者は国、旅行スタイル（バックパッカー / ミッドレンジ / コンフォート）、旅行日数を選びます。ウィジェットは1日あたりの合計と旅全体の合計を訪問者自身の通貨で返し、宿泊、食事、交通、アクティビティごとに内訳を表示します。各レーンはNumbeo、BackpackerIndex、そしてOrizn独自の毎晩集計されるユーザー投稿価格を組み合わせてソースしています。
ウィジェットは完全自己マウント式 — 2行のスニペットをHTML内のどこにでも貼れば描画されます。主要CMSすべてで動作し、gzip後15 KB未満、再訪時の事前入力用にファーストパーティCookieを1つだけ設定し、50/50アフィリエイトシェアで収益化できるガイド購入CTAを備えています。
ウィジェットビルダー
下のウィジェットは、あなた自身のサイトに貼り付けるものとまったく同じ本番スクリプトで動作しています。言語、テーマ、カラー、ホワイトラベル — すべてのオプションがプレビューとスニペットに即時反映されます。あとは2行のスニペットをコピーするだけです。
Live preview · updates as you type
The widget above runs the exact production script you would paste on your own site — async, zero dependencies, scoped CSS. Every option on the left maps to a data-* attribute in the snippet.
機能
汎用的なチェック項目ではなく、出典付きの具体的な機能です。以下のすべてが、今日の本番ウィジェットに実装されています。
各国に4つの費用レーン — 宿泊、食事、交通、アクティビティ — があり、Numbeo、BackpackerIndex、そしてユーザー投稿を毎晩集計する自社アグリゲーターがソースです。各レーンは節約/標準/プレミアムの3段階を表示します。
セグメントコントロール1つで合計を再計算。2週間のバカンス旅行者にも、1年の拠点コストを見積もるフルタイムのデジタルノマドにも有用です。
価格は内部的にはUSDで保持され、毎日更新される為替レートにより50以上の通貨で表示できます。訪問者のロケールから自動検出します。
スライダーを1日から365日までドラッグ。合計はページ遷移なしにリアルタイムで更新されます。
ワンタップでバックパッカー、ミッドレンジ、コンフォートのプリセットを切り替え。各プリセットは4つの費用レーンを比例的にシフトします。
渡航先にビザが必要な場合、予算の横に小さなチップが表示され、読者は費用と入国ルールを同時に把握できます。
結果の下に「ベトナム完全予算ガイドを見る」CTAが表示されます。data-affiliateを設定すれば、販売ごとに50%があなたに還元されます。
Vanilla JS、非同期読み込み、スコープ化されたCSS。あなたのTailwindやBootstrap、既存のアナリティクススクリプトと競合しません。
活躍する場面
ウィジェットは汎用ですが、特によく導入しているのは次の4つのオーディエンスです。ひとつでも当てはまれば、スニペットを貼って数分で価値を実感できるはずです。
各国ガイドの「費用はいくら？」というH2の直下にウィジェットを設置。読者は曖昧な段落ではなく、具体的な数字を持って離脱します。
ホームページにウィジェットを固定。バリとリスボンを比較する新規購読者が数秒で費用の答えを得て、成果はあなたのアフィリエイトコードに計上されます。
/resources/cost-of-travelに埋め込み。次の旅を見積もるメンバーが、あなたのホスティング費用を賄うガイド販売を生み出します。
代理店パッケージの横に埋め込み。予算ウィジェットが期待値のアンカーとなり、代理店のオファーが次の疑問に答えます。
データの出典
各国の4つの費用レーンは、Numbeo（生活コスト指数、約120か国）、BackpackerIndex（バックパッカー日次料金、約80か国）、外れ値除去を備えた自社のユーザー投稿アグリゲーターから毎晩計算されます。通貨換算には毎日更新されるECBおよびOXRの仲値レートを使用します。各レーンの出典内訳はホバーで確認でき、編集上の透明性を確保しています。
リファレンス
すべてのオプションはコンテナdiv上のdata-*属性です。JavaScriptの設定は一切不要 — 貼り付けて、必要な属性を設定して、公開するだけです。
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
data-destination | ISO3 | "" | 渡航先の国を事前入力します（例：VNM、THA、MEX）。訪問者は変更できます。 |
data-lang | string | "auto" | ブラウザ言語の自動検出を上書きします。対応する16ロケール：en, fr, es, de, it, pt, ja, ko, zh, ru, ar, hi, th, vi, tl, tr（アラビア語はRTL表示）。 |
data-theme | string | "auto" | テーマを固定します："auto"（OSに追従）、"light"、"dark"。 |
data-affiliate | string | "" | ガイド販売の50/50レベニューシェア用の、あなたのORIZN-XXXXXまたはaff_…コード（どちらの形式も有効）。 |
data-color | hex | #2563EB | ボタン、フォーカスリング、スライダー、CTAに使われるアクセントカラー。16進カラーのみ（サニタイズ済み）。 |
data-branding | string | "on" | "off"に設定するとホワイトラベル化：「Powered by Orizn」フッター、JSON-LDスキーマ、シェアテキスト内のorizn.appの記載を非表示にします。 |
data-radius | int | 16 | ウィジェットカードと入力欄の角丸半径（px）。 |
data-font | string | "system-ui" | ウィジェット全体で使用するフォントファミリー。任意のCSSフォントスタックが使えます。 |
data-currency | string | "USD" | 表示通貨。ISO 4217コード（USD、EUR、GBP、JPY、VND、THB など）に対応 — 50以上をサポート。 |
連携
同じ2行のスニペットで、スタックに応じて貼り付け手順が少し異なるだけです。CMS別の詳しいステップバイステップガイド：
収益化
コンテナdivに data-affiliate="ORIZN-XXXXX" を追加してください — ORIZN-…とaff_…のどちらのコード形式も使えます。読者がウィジェット経由で行ったガイド購入は30日間あなたにアトリビューションされ、支払いはStripe経由で毎月処理されます。最低支払額なし、チャージバックなし、アフィリエイトダッシュボードで完全な透明性を提供します。
FAQ
ウィジェットを導入する開発者、ブロガー、アフィリエイターから寄せられた実際の質問です。ここにない質問は、/embed/getting-startedのドキュメントがロングテールをカバーしています。
関連ウィジェット
5つのウィジェットはすべて同じランタイムを共有しているため、同じページに2つ目を追加しても追加コストはゼロです。スイートは組み合わせて使うよう設計されています。