リンクをクリック可能にするには、リンクにしたいテキストを選択し、Ctrl+K(MacではCmd+K)を押して、遷移先のURLを貼り付けます。このショートカット1つで、Gmail、Googleドキュメント、Word、Notion、その他ほとんどのエディタで通用します。生のHTMLでは手書きで記述します: <a href="https://example.com">visit us</a>。あとは、ハイパーリンクが機能する場所としない場所を把握し、リンクを読みやすくする方法を知っているかどうかだけです。
本稿はtutorialsクラスターのハウツー記事です。リンクをクリック可能にした後、それをどう活用するか(ブランド化、トラッキング、ルーティング)という大きな話は、リンク管理とは何かを解説するコーナーストーン記事がカバーしています。
一番速い方法: 選択してCtrl+K
ほとんどのリッチテキストエディタは同じパターンを採用しています。クリック可能にしたい言葉を書いて選択し、Ctrl+K(MacではCmd+K)を押すか、ツールバーの鎖のリンクアイコンをクリックします。URLを貼り付けて確定すれば完了です。
エディタによってボタンが違うだけで、そこ以外はほぼ同じです。Gmail、Googleドキュメント、Wordはいずれもリンクボタンを備えていますが、キーボードショートカットは共通です。https://で始まる生のURLを単独の行に貼り付ければ、こうした手順を踏まなくてもほとんどのツールが自動検出してクリック可能にしますが、ハイパーリンク化したアンカーテキストの方が裸のリンクよりも読みやすくなります。
多くの人が間違えるのがアンカーテキストです。目に見える言葉は、遷移先を説明するものであるべきです。
- 良い例:
read the [setup guide](/blog/setup-branded-short-links)。 - 弱い例: 「ここをクリック」。読み手にもスクリーンリーダーにも遷移先について何も伝わりません。
HTMLにおけるクリック可能なリンクの仕組み
どの「リンクを作成」ボタンの裏側にも、1つのHTML要素があります。アンカータグには2つの部分があります。遷移先を示すhrefと、タグに挟まれたテキスト(読み手がクリックする部分)です。
<a href="https://example.com/pricing">See pricing</a>
それだけです。残りの詳細(target属性で新しいタブを開く方法や、セキュリティのためのrel属性など)は、MDNのアンカー要素のリファレンスに載っています。よく使われるバリエーションが2つあります。mailto:リンクはメールを開き、tel:リンクは電話をかけ始めます。
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>
リンクがクリック可能にならない場所
ここが、多くの人が検索してたどり着く部分です。リンクを置く場所として最も価値のある領域のいくつかは、どうやってもクリック可能にならないプレーンテキストです。
- Instagramのキャプションとコメント: クリック不可。
- TikTokの動画説明欄: クリック不可。
- ほとんどのフィード内SNS投稿本文: クリック不可。
- 印刷物、スライド、動画: 当然クリック不可だが、QRコードならこれらをカバーできる。
そうした場所では、生のURLはただのテキストとしてそこにあるだけで、読み手が手で入力しなければなりません。解決策は2つです。リンクが機能する場所(bioリンク枠やリンクインバイオページ)にリンクを置くこと、そしてURLを入力または認識できるくらい短く覚えやすくすることです。長いトラッキングURLはここでは絶望的ですが、短くブランド化されたURLならそうはなりません。
だからこそ、Instagramのbioにリンクを追加する方法やTikTokのリンクインバイオの手順が、独立したガイドとして存在しています。障害になっているのは書式ではなく、プラットフォームそのものだからです。
クリックする価値のあるクリック可能なリンクにする
リンクが機能するようになったら、2つの改善でさらに良くできます。短くしてすっきりタップしやすくすること、そしてブランド化して信頼してもらうことです。短くブランド化されたリンクは、クエリ文字列付きの生のURLよりも、bioに置いたり、動画で読み上げたり、SMSに入れたりしやすくなります。また、投稿を編集せずに後からクリックを追跡したり遷移先を変更したりすることもできます。
HTMLを手書きしているなら、生のURLはhrefに残し、意味はアンカーテキストに持たせましょう。キャプションやbioにリンクを入れるなら、短くブランド化されたリンクとbioページに頼りましょう。同じリンクでも、実際にクリックできる場所に置くことが重要です。
コーナーストーンシリーズを読む
本稿はtutorialsクラスターに属しています。コーナーストーン記事はリンク管理とは何かです。URL短縮の基本については、URLを短縮する方法が対をなす記事です。
関連記事
よくある質問
リンクをクリック可能にするにはどうすればよいですか?
リンクにしたいテキストを選択し、Ctrl+K(MacではCmd+K)を押して、遷移先のURLを貼り付けます。このショートカットは、Gmail、Googleドキュメント、Word、その他ほとんどのエディタで、選択したテキストをハイパーリンクに変えます。生のHTMLでは、テキストをアンカータグで囲みます: <a href="https://example.com">visit us</a>。
リンクがクリックできないのはなぜですか?
よくある理由は2つあります。1つは、InstagramのキャプションやTikTokのbioのように自動リンク化が行われない場所にプレーンテキストとして貼り付けられている場合で、そうした場所ではURLはそもそもクリックできません。もう1つは、URLの形式が正しくない場合で、多くのパーサーがリンク化に必要とするhttps://プレフィックスが抜けているケースです。
メールでクリック可能なリンクを作るにはどうすればよいですか?
アンカーテキストを入力してハイライトし、ツールバーのリンクボタンかCtrl+Kを使ってURLを紐付けます。https://で始まる完全なURLを単独で貼り付ければ、ほとんどのメールクライアントが自動的に検出してクリック可能にしますが、ハイパーリンク化したアンカーテキストの方が見た目がすっきりしていて、タップもしやすくなります。
Instagramのキャプションのようにリンクが許可されていない場所で、クリック可能なリンクを作るにはどうすればよいですか?
InstagramのキャプションやTikTokの動画説明欄の中にハイパーリンクを作ることはできません。これらはプレーンテキストだからです。回避策は、リンクインバイオページや1つだけ設置できるbioリンク枠を使うことで、リンクが機能する唯一の場所から、人がコピーしたりタップしたりできる短く覚えやすいブランデッドリンクを置くことです。
クリック可能なリンクにおけるアンカーテキストとは何ですか?
アンカーテキストとは、リンクを運ぶ目に見えるクリック可能な文言のことで、生のURLの代わりに「ガイドを読む」のように表示されるものです。良いアンカーテキストはリンクの遷移先を説明するものであり、「ここをクリック」のような、読み手にも支援技術にも遷移先について何も伝えない表現は避けます。
Elidoを試す
URLを貼り付けて短縮リンクを取得
登録不要。リンクは30日間有効。永久に保存するには登録してください。
Free、登録不要 · 1日あたり2件