Accent Color
GitHub
Tsugawa Magic Back to Top Logo Built for Designers.

WordPress界で最も美しい「トップへ戻る」ボタン。
Tsugawa Magic Back to Top

重いライブラリを一切排除した極限のパフォーマンス。美しく滑らかな1ピクセルの加減速スクロール。デバイスごとに完璧にフィットするレスポンシブフローティングUI。毎日触るものだからこそ、一切の無駄を削ぎ落として磨き上げた特別仕様です。

Signature Story

Tsugawa Magic Back to Top Logo開発者の執念と約束

Webサイトを巡るとき、「ページトップへ戻る」ボタンは最も頻繁に触れられるUIのひとつです。しかし、既存の多くのプラグインは重いjQueryに依存していたり、デザインの調整が荒かったり、あるいは不要なスクリプトを読み込んでサイトを重くしていました。

「毎日自分自身が使うものだからこそ、徹底的にこだわり抜きたかった」

その想いと職人的な執念だけで、このプラグインは生まれました。ボタンがフェードインするタイミング、クリックした際のスムーズスクロールの加減速イージング(1ピクセル単位の動き)、表示パフォーマンスへの影響をゼロにする設計。そのすべてにおいて妥協を許さず、極限まで磨き上げました。

“これは、私が運営するすべてのWebサイトで実際に稼働し、毎日テストアウトを繰り返している究極のB2Tツールです。”

完全無料のオープンソースですが、そこにあるのは市販品を超える品質とプライドです。本当に自信を持っておすすめできるものが完成しました。すべてのクリエイターやサイト運営者へ、この快適さを届けることが私の願いです。

Tsugawa Magic Back to Top Logoプロダクトの特長

細部までこだわり抜いた機能群。すべてが圧倒的な動作速度のために設計されています。

マルチデバイス対応 UI

デスクトップからモバイルまで、あらゆる画面サイズに美しく適応する追従型のフローティング体験を提供します。

スクロール進捗リング

ページを読み進めるにつれて、リングが徐々に360度まで塗りつぶされるユニークな「リングUI」を採用しています。

ライブプレビュー

管理画面にいながら、アイコンのデザイン、配色・不透明度を完ぺきに把握できるライブプレビュー機能を搭載しています。

ピクセル単位の微調整

PCとスマホそれぞれで独立したボタンサイズ、不透明度、四辺からの配置余白(右下・左下など)をピクセル単位で細かく設定可能。

圧倒的な軽量設計

jQuery等の外部ライブラリは一切使わず、ネイティブJSとCSS変数で構築。表示パフォーマンスへの影響はほぼゼロです。

CSSベースのモバイル非表示

モバイルでの非表示には純粋なCSSメディアクエリを使用。ページキャッシュと競合せず、高速表示を維持します。

美麗なSVGアローアイコン

拡大縮小しても崩れない、厳選された数パターンの高精度SVG矢印アイコンを管理画面からワンクリックで選択可能。

マイ・カラー保存機能

サイトのテーマに合わせてボタン色を自由に変更可能。よく使う配色を「マイ・カラー」として最大3つまで保存できます。

プロの配色セット

プラグイン有効化後、細かな設定をせずに、すぐに使える「プロの配色」を5種類用意しています。

表示タイミング & スピード制御

ボタンを表示させるスクロール量(px)と、最上部に戻るまでのアニメーション速度を管理画面から直接調整できます。

特定ページの除外機能

ランディングページやフロントページなど、ボタンを表示させたくない個別ページをスラッグやIDで簡単に除外設定可能。

外部LPへのコード出力

設定したデザインのままHTML/CSS/JSコードをエクスポート。WordPress以外の外部の静的LPでもそのまま再利用できます。

Tsugawa Magic Back to Top Logoインストール方法

数十秒であなたのWebサイトに導入できます。

01
01

プラグインの配置

ダウンロードしたZIPファイルをWordPressのプラグイン新規追加画面からアップロードするか、解凍した `tsugawa-magic-back-to-top` フォルダを `/wp-content/plugins/` ディレクトリに配置します。

02
02

プラグインの有効化

WordPressのダッシュボード >「プラグイン」メニューに移動し、一覧から「Tsugawa Magic Back to Top」を見つけて「有効化」をクリックします。

03
03

カスタマイズの開始

有効化後、管理画面の `設定 > Magic B2T` メニューを開き、ブランドに合わせたカラー、ボタンの位置、スクロールの挙動を自由に調整・保存します。

Tsugawa Magic Back to Top Logoよくある質問

導入や動作にあたっての代表的なご質問です。

はい。モバイルでの非表示設定にはCSSメディアクエリを使用しているため、ページキャッシュに影響されず安定して動作します。ただし、管理画面でボタンの色や位置の設定を変更したのにもかかわらずフロント画面に反映されない場合は、お使いのキャッシュプラグインやサーバーキャッシュを一度クリアしてください。

いいえ、遅くなりません。本プラグインは最大限のパフォーマンスを発揮するようにゼロから最適化されています。スムーズスクロール処理にはブラウザネイティブの `requestAnimationFrame` API を使用しており、jQuery等の重い外部ライブラリは一切読み込みません。

いいえ、ZIPファイルには、管理画面用ファイル、翻訳ファイル、アップデート機能(PUC)などが含まれています。実際にフロントエンドで読み込まれるコードは最小限で、ページ表示速度への影響を抑えるよう設計されています。

はい、一般的なWordPressプラグインと全く同じように、管理画面からワンクリックで簡単に更新できます。また、WordPress標準の「自動更新を有効化」をクリックしておけば、全自動で常に最新版を保つことも可能です。

ソースコードはGitHubにて管理されています。バグの報告や機能改善のご要望は、GitHubリポジトリの「Issues」または「Pull Requests」よりお寄せください。

はい、Tsugawa Magic Back to Top はオープンソース(GPL v2 または MITライセンス)であり、商用サイトや制作代行案件でも完全無料でご自由にお使いいただけます。

はい、当プラグインは、セキュリティリスクを根本から生み出さない設計(セキュア・バイ・デザイン)を採用しています。外部ライブラリへの非依存、データの非保持をはじめ、WordPress公式基準をクリアしています。

いいえ、Tsugawa Magic Back to Top は完全無料で公開しており、今後のアップデートも無償で行います。