無料の計算機ウィジェットを自分のサイトに追加する方法

計算機ウィジェットとは何か

計算機ウィジェットとは、Calculate.Studioのフル機能の計算機を、あなた自身のページの中で動かせるように小さく自己完結させたバージョンです。技術的にはiframe——1つのページの中に別のページを埋め込むHTML要素——であり、その計算機の軽量な埋め込み版を指し示すiframeと、その下に置かれる1行のクレジット段落から構成されています。iframeはあらゆる最新ブラウザがサポートする標準のHTML要素なので、インストールする必要は一切なく、あなたのサイト自身のコードと衝突する心配もありません。

このウィジェットは、Calculate.Studio上で動いているのと同じ計算機です——同じテスト済みの数式、同じ即時のクライアント側での結果表示、そして健康・金融系のツールについては同じ免責事項も含まれます。訪問者は数値を入力するだけで、ページを離れることなくすぐに結果を確認できます。計算はサーバー側ではなく訪問者のブラウザ内で行われるため、アクセスが集中してもウィジェットは高速なまま動作し、訪問者のデータがどこかに送信されることもありません。

サイト内にある210個の計算機はすべて埋め込み可能です。calculate.studio/en/widgetsのギャラリーでは、BMI、住宅ローン、ローン、パーセンテージ、複利、年齢、カロリー、GPAといった最も要望の多いものを紹介していますが、各計算機ページにはシェアボタンの隣にEmbedボタンがあり、そのツール専用のスニペットを表示できます。

インストール方法——基本的な手順

インストールは1回のコピー&ペーストで完了します。スニペットは2つの部分から成ります——計算機を表示するiframeと、フル版の計算機とCalculate.Studioへリンクする小さなクレジット段落です。このクレジット表示をそのまま残しておくことが無料利用の唯一の条件であり、それこそがこのプログラムを誰にとっても無料であり続けさせている理由です。

• calculate.studio/en/widgetsを開くか、任意の計算機ページを開いて「</> Embed」ボタンをクリックします。
• 「Copy code」をクリックします。スニペットがクリップボードにコピーされます。
• ご利用のウェブサイトエディタで、計算機を配置したいページのHTML（「コード」や「ソース」と呼ばれることもあります）表示に切り替えます。
• 計算機を表示させたい位置にスニペットを貼り付け、保存して公開します。
• ページをプレビューします。計算機が読み込まれてすぐに計算できる状態になるはずです——サンプルの数値で一度動作確認してください。

プラットフォーム別の手順

ほとんどのウェブサイトビルダーは、専用のブロックや要素を通じて生のHTMLを受け付けるため、同じスニペットがどのプラットフォームでも使えます。呼び方はプラットフォームによって異なります。

サイズ、スタイル、パフォーマンス

スニペットには適切なデフォルト設定があらかじめ組み込まれています——幅いっぱい（width="100%"）、その計算機の入力項目数に合わせた固定の高さ、そして控えめな角丸ボーダーです。テーマの都合でフレームをもっと高く、あるいは低くしたい場合はheightの値を変更でき、ボーダーのスタイルもデザインに合わせて編集または削除できます。幅はデフォルトでレスポンシブなので、特別な作業をしなくてもスマートフォンで問題なく動作します。

このiframeにはloading="lazy"という標準的なブラウザの属性が含まれており、訪問者がウィジェットの近くまでスクロールするまで読み込みを遅らせます。つまり、計算機を埋め込んでもページの初期読み込み時間にはほとんど影響がありません——ブラウザはウィジェットが表示されそうになったタイミングで初めて取得します。

埋め込み用ページ自体にはnoindexが指定され、フル版の計算機ページへのcanonicalリンクが設定されており、これはGoogleが示している埋め込みコンテンツおよび重複コンテンツに関するガイダンスに沿ったものです。そのため、ウィジェットを埋め込んでも、あなたのサイトにも当サイトにも重複コンテンツの問題は発生しません。

唯一のルール：クレジットリンクを残すこと

このウィジェットプログラムが登録不要かつ無料である理由は、たった1つの条件によって成り立っています。それは、iframeの下にある小さなクレジット段落——「[計算機名] by Calculate.Studio」と表示される行——をそのまま残しておくことです。これは12ピクセルの小さな文字で、ウィジェットの下に静かに置かれており、あなたのコンテンツと競合することはありません。

iframeのサイズ変更、ボーダーのスタイル変更、そして商用サイト、ブログ、クライアント案件を含むどのサイトへの設置も自由に行えます。ギャラリーに掲載されていない計算機が必要な場合も、サイト内の各計算機ページにそれぞれEmbedボタンがあるため、210個すべてのツールを利用できます。

どの計算機がウィジェットとして特に効果的か

あなたのサイトに最適なウィジェットとは、読者があなたのページを離れてまで探しに行きそうなものです。フィットネスやウェルネス系のブログは、BMI、カロリー、TDEEの計算機を埋め込むことが多くあります。不動産や個人向け金融のサイトは、住宅ローン、ローン、複利の計算機を埋め込みます。学生・教育系サイトはGPAやパーセンテージの計算機を埋め込み、一般的な話題を扱うブログは定番記事に年齢計算機を追加することがよくあります。

各ウィジェットは、解釈のための表、計算例、出典を含むフル版へのリンクとともに、コンパクトな計算機を表示します。そのため読者はあなたのページ上ですぐに答えを得られると同時に、必要であればより深い情報への道筋も得られます。

よくある質問

参考文献

1. MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
2. MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
3. Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
4. Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
5. WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html