こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
よく「このページ、後でまた見たい！」と思っても、URLを忘れてしまったり、ページを探せなくなってしまうことってありますよね?
そんな時に役立つのが、このページをブックマークしてくださいという一言＋ボタンの誘導です。
ただし、近年のブラウザはセキュリティや仕様変更の影響で、JavaScriptから直接ブックマーク登録を実行することは基本的に不可能になっています。
でもご安心ください!
今回は、JavaScriptを使ってブックマークを促すボタンを作る方法と、PCやスマホでの案内メッセージの出し分け方をご紹介します！
なぜJavaScriptでブックマークできないの？
かつては Internet Explorerで使える方法がありました。
ちなみにこのようなコードです。
window.external.AddFavorite(url, title);
ですが、現在では主要ブラウザ（Chrome、Safari、Firefoxなど）はセキュリティの観点からこの機能を無効化しています。
つまり、ユーザー自身に「自分の操作」でブックマークしてもらう必要があるということです。
アプローチ：案内メッセージ＋OS別ショートカット表示
ではどうするか？
答えはシンプルです！
「ブックマークしてください」というメッセージ＋ショートカットキーの案内を、JavaScriptで環境に応じて表示するだけで十分なんです。
実装：デバイスごとにブックマーク方法を案内する
HTML構造
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、ユーザーのデバイスやOSを判定して、それぞれに適したブックマーク方法を案内しています!
ボタンをクリックすることで、ユーザーが自分の操作で「登録しよう」と思える自然な流れを作れます。
応用：1度表示したら二度と出さない処理も可能
毎回表示されるのが煩わしい場合は、localStorage で表示済みかどうかを記録し、2回目以降は非表示にすることも可能です。
if (!localStorage.getItem("bookmarkHintShown")) {
// 初回のみ案内
help.textContent = message;
help.style.display = "block";
localStorage.setItem("bookmarkHintShown", "true");
}こうすることで、ユーザー体験を邪魔せずに案内できるスマートな導線を作れます！
まとめ：できること・できないことを知って設計する
現在のJavaScriptでは、ユーザーの代わりにブックマーク登録することはできません。
でも、「押してもらうきっかけ」を与えることで、自然にブックマークしてもらえるUIは作れます。
- 操作を促す案内
- ショートカットキーの提示
- デバイス別に最適な言葉選び
こうした細かな工夫で、ユーザーに「あとでまた来よう」と思わせる体験が作れるんです。
ぜひあなたのWebサイトにも、押しつけがましくない“ブックマーク誘導ボタン”を導入してみてください！
satokotadesignキャンペーン実施中！
