ページ内リンクは、同じページ内の見出しやセクションへ一気に移動させるためのリンクです。Studioでヘッダーのメニュー、LPのボタン、目次、料金表への導線を作るときに便利ですが、ただリンクを貼るだけでは思った位置に飛ばないことがあります。
特に、リンク先のID設定、ページの指定、固定ヘッダーとの重なり、スマホ表示での見え方を確認しないまま公開すると、ユーザーが目的の情報にたどり着きにくくなります。この記事では、Studioでページ内リンクを設定するときの考え方、手順、失敗しやすい点、実際の使い分けまで整理します。
studio ページ内リンクはID設定が基本
Studioでページ内リンクを作るときは、リンク元とリンク先を分けて考えると迷いにくくなります。リンク元は、ヘッダーメニュー、ボタン、テキストリンク、画像ボックスなど、ユーザーがクリックする場所です。リンク先は、サービス紹介、料金、導入事例、よくある質問、お問い合わせフォームなど、移動させたいセクションです。
ページ内リンクの基本は、リンク先となるボックスやセクションにIDを設定し、そのIDへ移動するリンクを作る流れです。たとえば料金セクションに price というIDを付け、ヘッダーの料金メニューからその場所へ飛ばすように設定します。別ページに移動するリンクとは違い、同じページ内の特定位置へ案内するため、長いLPや縦に長いコーポレートサイトで特に役立ちます。
ただし、ページ内リンクは装飾ではなく、ユーザーの移動を助ける導線です。なんとなくメニューを増やすのではなく、ユーザーが知りたい順番に合わせて、どのセクションへ移動できると便利かを決めることが大切です。ファーストビューからすぐ料金を見たい人、事例を確認してから問い合わせたい人、FAQだけ確認したい人など、ページ内リンクは読者の行動パターンを短くするために使います。
最初に決めるのはリンク先
ページ内リンクを設定する前に、まずリンク先を決めます。リンク元のボタンを先に作ると、あとからどこへ飛ばすべきか迷いやすくなります。特にStudioでは、セクションやボックスを視覚的に配置できるため、デザインを先に作り込んでしまい、リンク設定が後回しになることがあります。
リンク先として向いているのは、ページ内でユーザーが判断に使う大きな区切りです。たとえば、サービス内容、料金、制作実績、利用の流れ、よくある質問、お問い合わせフォームなどです。一方で、短い説明文の途中や装飾用の小さなボックスにリンクさせると、クリック後にどこへ移動したのか分かりにくくなります。
ID名は、あとから見ても分かる英単語にしておくと管理しやすくなります。price、service、works、flow、faq、contact のように、ページ構成と対応する名前が扱いやすいです。日本語の意味をそのままローマ字にするより、英語の短い単語で統一すると、複数ページを管理するときにも混乱しにくくなります。
リンク元は行動に合わせて選ぶ
リンク元は、ユーザーがどのタイミングで移動したくなるかに合わせて選びます。ヘッダーのメニューは、ページ全体を自由に移動したい人向けです。ファーストビュー内のボタンは、すぐに問い合わせや料金確認へ進みたい人向けです。記事やLPの途中にあるテキストリンクは、説明を読んだ後に関連する詳細セクションへ移動させたいときに向いています。
たとえば、Web制作サービスのLPなら、ファーストビューの無料相談ボタンは contact へ、料金を見るボタンは price へ飛ばすと分かりやすくなります。ヘッダーには サービス内容、料金、制作実績、FAQ、お問い合わせ のような主要項目を並べます。すべてのセクションをヘッダーに入れる必要はなく、ユーザーの判断に必要な場所だけを選ぶのが基本です。
リンク元を増やしすぎると、ページが便利になるどころか、どこを押せばよいか分かりにくくなります。特にスマホでは画面幅が狭いため、固定ヘッダーやメニュー内の項目が多すぎると操作しづらくなります。よく押してほしい導線はボタンにし、補助的な導線はテキストリンクにするなど、見た目にも優先順位を付けると使いやすくなります。
使う前に確認したい場面
Studioのページ内リンクは便利ですが、すべてのページに必要なわけではありません。短いページ、情報量が少ないページ、1つの行動だけを促すページでは、ページ内リンクを細かく設定しなくても自然に読めることがあります。逆に、情報量が多いLP、採用ページ、サービス紹介ページ、料金やFAQが下部にあるページでは、ページ内リンクがあるだけで使いやすさが大きく変わります。
判断の基準は、ユーザーがスクロールしながら探す負担があるかどうかです。たとえば、ページ内に サービス内容、強み、料金、事例、流れ、FAQ、問い合わせ が並んでいる場合、ユーザーは目的の情報を探すために何度も上下に移動します。このようなページでは、ヘッダーや目次にページ内リンクを置くことで、迷いを減らせます。
一方で、ただデザイン上かっこよく見せたいだけなら、ページ内リンクは必要ありません。ユーザーが次に知りたい情報へ進めることが目的なので、リンクを置く場所とリンク先には意味が必要です。まずはページの目的を整理し、問い合わせにつなげたいのか、料金を確認してもらいたいのか、事例を見せて信頼を高めたいのかを決めると、設定すべきリンクが見えてきます。
| ページの種類 | ページ内リンクが向く場面 | 注意点 |
|---|---|---|
| サービスLP | 料金、事例、FAQ、問い合わせへすぐ移動させたい場合 | ボタンが多すぎると主導線がぼやけます |
| コーポレートサイト | トップページ内に会社紹介、サービス、実績がまとまっている場合 | 別ページへのリンクと混ぜすぎないようにします |
| 採用ページ | 仕事内容、福利厚生、募集要項、応募フォームへ案内したい場合 | スマホでメニューが押しやすいか確認します |
| 短い告知ページ | 情報量が少なく、最後まで自然に読める場合は不要 | 無理に目次を置くと逆に重く見えます |
長いLPでは優先度が高い
長いLPでは、ユーザーが上から順番にすべて読んでくれるとは限りません。料金だけ先に見たい人、実績を確認したい人、サービス内容よりもまず問い合わせ方法を知りたい人など、読み方は人によって違います。ページ内リンクは、この違いを受け止めるための導線として役立ちます。
たとえば、Studioで制作したWeb制作サービスのLPなら、ファーストビューに 料金を見る、制作事例を見る、相談する の3つの導線を置くことがあります。この場合、それぞれ price、works、contact のようなリンク先へ移動させると、読者は自分に必要な情報へすぐ進めます。特に広告から流入するLPでは、ユーザーが比較検討中であることが多いため、知りたい場所へ短く移動できることが離脱防止につながります。
ただし、すべてのセクションにリンクを用意する必要はありません。導入文、課題提起、補足説明のような流れで読ませたい部分までメニュー化すると、全体の流れが分かりにくくなります。リンク先にするのは、ユーザーが自分で選んで確認したい情報に絞ると、ページ全体の読みやすさを保てます。
短いページでは不要なこともある
ページの情報量が少ない場合、ページ内リンクを付けても効果が薄いことがあります。たとえば、1画面から2画面ほどで完結するキャンペーン告知ページや、問い合わせフォームへ誘導するだけの簡単なページでは、リンクを使うより自然にスクロールしてもらったほうが分かりやすい場合があります。
また、ページ内リンクを増やすと、リンク元のボタンやメニューの管理も増えます。セクション名を変えたとき、IDを変更したとき、ページを複製したときなどに、古いリンク設定が残ることがあります。短いページであれば、無理にアンカーを設定せず、見出しの順番や余白、ボタンの配置で読みやすさを整えるほうがシンプルです。
判断に迷ったら、ユーザーが目的の情報にたどり着くまでにスクロールが長いかを見ます。スマホで3回以上大きくスクロールしないと料金や問い合わせに届かない場合は、ページ内リンクを検討する価値があります。逆に、主要情報がすぐ見える構成なら、固定メニューや目次を増やすより、ボタン1つを分かりやすく配置するほうが使いやすくなります。
Studioでの設定の流れ
Studioでページ内リンクを設定するときは、リンク先のIDを作ってから、リンク元にそのIDを指定する流れで考えます。細かな画面名や操作位置はStudioの更新で変わることがありますが、基本の考え方は変わりません。どのボックスにIDを付けるか、どのボタンやテキストから移動させるかを先に整理しておくと、作業中に迷いにくくなります。
実際の作業では、まずリンク先のセクションを選びます。料金表なら料金セクション、FAQならFAQ全体のボックス、お問い合わせならフォームの上部など、クリック後に自然に見えてほしい位置を選びます。そのうえでIDを設定し、リンク元となるボタンやメニューにページ内リンクとして指定します。
重要なのは、リンク先を細かすぎる要素にしないことです。テキストだけ、アイコンだけ、余白用の小さなボックスだけにIDを付けると、移動後の見え方が不自然になることがあります。ユーザーが到着したときに、そこが何のセクションか分かるよう、見出しを含む大きめのまとまりをリンク先にするのが扱いやすいです。
IDは分かりやすく統一する
IDは、ページ内リンクの住所のようなものです。Studio上でリンク先にIDを設定しておくことで、ボタンやメニューからその場所へ移動できるようになります。ID名は自由に付けられますが、あとから見て意味が分かる名前にすることが大切です。
たとえば、料金セクションには price、サービス紹介には service、導入事例には case または works、よくある質問には faq、お問い合わせには contact という名前が使いやすいです。複数のページを制作する場合も、同じ意味のセクションには同じID名を使うと管理しやすくなります。ページごとに price、fee、plan のように表記がばらつくと、あとで修正するときに混乱しやすくなります。
ID名には、余計な記号や長すぎる単語を使わないほうが無難です。半角英数字とハイフンを中心に、短く分かりやすい形にしておくと、リンク設定時の入力ミスも減らせます。同じページ内で同じIDを重複させると、どちらへ移動するのか分かりにくくなるため、1つのIDは1つのリンク先だけに使うようにします。
ボタンやメニューにリンクを入れる
リンク先のIDを設定したら、次にリンク元を設定します。ヘッダーメニュー、ボタン、テキスト、画像など、クリックできる要素を選び、リンク設定で該当するIDへ移動するようにします。ここで大切なのは、リンク元の文言とリンク先の内容を一致させることです。
たとえば、ボタンの文言が 料金を見る なら、移動先は料金表やプラン説明にします。詳しく見る という曖昧なボタンを使う場合でも、直前の説明とリンク先が自然につながっている必要があります。ユーザーはクリック前の言葉を頼りに行動するため、リンク先が予想と違うと小さなストレスになります。
ヘッダーに設定する場合は、ページ内リンクと別ページリンクの違いにも注意します。トップページ内の 料金 セクションへ飛ばしたいのか、別ページの料金ページへ移動したいのかで設定が変わります。コーポレートサイトのように複数ページがある場合は、同じ 料金 というメニューでも、トップページ内の料金エリアへ飛ぶのか、料金専用ページへ飛ぶのかを先に決めておくと、サイト全体の導線が整理されます。
使い分けで迷うリンク先
Studioでリンクを設定するときに迷いやすいのは、ページ内リンク、別ページリンク、外部リンク、モーダル表示の使い分けです。どれもクリックで移動や表示を起こす点は同じですが、ユーザー体験は大きく違います。ページ内リンクは同じページの中を移動するため、読んでいる流れを保ったまま目的の情報に進めるのが特徴です。
別ページリンクは、情報量が多く、独立したページとして詳しく説明したいときに向いています。たとえば、サービス一覧から各サービス詳細へ移動する場合や、採用トップから職種別募集ページへ移動する場合です。外部リンクは、予約システム、Googleマップ、SNS、外部フォームなど、Studio外のページへ案内するときに使います。
モーダルは、ページを移動せずに小さな詳細情報や補足を見せたいときに便利です。ただし、料金表や長い説明、フォームのように情報量が多い内容をモーダルに入れると、スマホで見づらくなることがあります。ページ内リンクとモーダルを混同せず、ユーザーが落ち着いて読むべき内容はセクションとして配置し、必要に応じてページ内リンクで案内するほうが分かりやすくなります。
| リンクの種類 | 向いている使い方 | 避けたい使い方 |
|---|---|---|
| ページ内リンク | 同じLP内の料金、FAQ、問い合わせへ移動させる | 短い説明文の途中など到着位置が分かりにくい場所へ飛ばす |
| 別ページリンク | サービス詳細、会社概要、採用情報など独立した内容へ移動させる | 同じページ内で済む短い補足まで別ページ化する |
| 外部リンク | 予約サイト、SNS、Googleマップ、外部フォームへ案内する | サイト内で説明すべき重要情報を外部だけに任せる |
| モーダル | 短い補足、注意書き、画像拡大、簡単な詳細表示に使う | 長文説明やスマホで入力しづらいフォームを入れる |
ヘッダーでは主要セクションに絞る
ヘッダーにページ内リンクを入れる場合は、主要セクションだけに絞るのが基本です。メニューに項目を詰め込みすぎると、ユーザーがどこを押せばよいか迷います。特にStudioで固定ヘッダーを作っている場合、スマホ表示ではメニューの開閉、ボタンの押しやすさ、表示領域の狭さまで考える必要があります。
よく使いやすい構成は、サービス、料金、実績、FAQ、お問い合わせ のような流れです。採用ページなら、仕事内容、働く環境、募集要項、選考の流れ、応募する などが候補になります。トップページが1枚のLPに近い構成なら、ヘッダーからそれぞれのセクションへ移動できるようにすると、ユーザーが自分の関心に合わせて読み進められます。
ただし、ヘッダーのリンクはページ全体の地図のような役割を持つため、リンク先の見出しと表記を合わせることが大切です。メニューには 料金 と書いてあるのに、移動先の見出しが プラン になっていると、到着した場所が合っているのか一瞬迷います。完全に同じ文言でなくても構いませんが、意味がすぐつながる言葉にそろえると、ユーザーにとって自然な導線になります。
CTAボタンは目的を明確にする
CTAボタンにページ内リンクを設定する場合は、クリック後にどの行動へ進むのかを明確にします。CTAとは、ユーザーに相談、購入、予約、資料請求、問い合わせなどの行動を促すボタンのことです。StudioでLPを作る場合、ファーストビューや各セクションの終わりにCTAボタンを置くことが多いため、ページ内リンクとの相性がよいです。
たとえば、無料相談する ボタンなら問い合わせフォームへ、料金を確認する ボタンなら料金セクションへ、導入事例を見る ボタンなら実績セクションへ移動させます。ここで大切なのは、ボタン文言と移動先の温度感を合わせることです。まだ料金を見ていないユーザーにいきなり問い合わせフォームへ飛ばすより、料金セクションへ案内したほうが自然な場合もあります。
CTAボタンは目立たせるほどクリックされやすくなりますが、移動先が不自然だと離脱につながります。特に広告用LPでは、ファーストビューのボタンを問い合わせフォームだけにするか、料金や事例へのリンクも用意するかで、ユーザーの動きが変わります。すぐ申し込みたい人向けの contact と、比較したい人向けの price や works を分けると、押しやすい導線になります。
飛ばないときの確認点
Studioでページ内リンクを設定しても、思った場所に飛ばないことがあります。原因は複雑に見えますが、多くの場合は、ID名の入力違い、リンク先の指定ミス、別ページと同一ページの混同、固定ヘッダーによる重なり、公開前後の確認不足に分けられます。まずはどこで問題が起きているのかを切り分けることが大切です。
よくあるのは、IDを設定したつもりでも、リンク元に正しく反映されていないケースです。price と設定したのにリンク側では prices になっている、faq と FAQ のように大文字小文字が混ざっている、複製したセクションに古いIDが残っているなど、小さな違いで移動できないことがあります。見た目では分かりにくいため、ID名とリンク設定を1つずつ確認します。
また、エディタ上のプレビューでは違和感がなくても、公開後のURLで確認すると動きが違う場合があります。公開状態、ページのパス、スマホ表示、固定ヘッダーの高さなどが関係することがあるため、作業画面だけで判断しないほうが安心です。最終的には、PCとスマホの両方で実際にクリックして確認する必要があります。
ID名とリンク指定を見直す
ページ内リンクが飛ばないときは、最初にID名を確認します。リンク先に設定したIDと、リンク元で指定しているIDが完全に一致しているかを見ます。余計なスペース、単語の抜け、ハイフンの有無、大文字小文字の違いがあると、意図した場所へ移動できない原因になります。
次に、IDを付ける場所が適切かを見ます。見出しテキストだけにIDを付けた場合、固定ヘッダーと重なって見出しが隠れることがあります。セクション全体や見出しの少し上にあるボックスへIDを付けたほうが、移動後の見え方が自然になることがあります。Studioではボックス構造が重なっていることがあるため、どの要素を選択しているかも確認します。
ページを複製して作った場合も注意が必要です。複製元のIDやリンク設定が残ったままになり、別のセクションへ飛んだり、古い構成に合わせたリンクが残ったりすることがあります。LPを複数作る場合は、公開前にヘッダー、ファーストビューのボタン、各CTA、フッターのリンクを順番にクリックして確認すると、設定漏れを見つけやすくなります。
固定ヘッダーとの重なりを見る
ページ内リンクで指定した場所へ移動できていても、固定ヘッダーに見出しが隠れてしまうことがあります。ユーザーから見ると、正しく飛んでいないように感じるため、リンク設定のミスと勘違いしやすい部分です。特に、ヘッダーを画面上部に固定しているStudioサイトでは、到着位置の見え方を必ず確認します。
たとえば、FAQセクションへ飛ばしたとき、FAQという見出しがヘッダーの裏に隠れ、いきなり質問項目だけが表示されることがあります。この場合、リンク先を見出しそのものではなく、見出しの少し上にある余白ボックスやセクション全体に設定すると改善しやすくなります。リンク後にセクション名が自然に見える位置へ到着させるのがポイントです。
PCでは問題なくても、スマホではヘッダーの高さやメニュー表示が変わり、重なり方が違うことがあります。スマホ表示では、画面の縦幅が狭いため、少しのズレでも見出しが見えなくなります。公開前にスマホ幅でプレビューし、実際の公開URLでもタップして確認すると、ユーザーの違和感を減らせます。
公開後のURLで動作確認する
Studioでページ内リンクを設定したら、エディタ内だけでなく公開後のURLでも確認します。作業画面では移動できているように見えても、公開ページではパスやリンクの扱いが違って見えることがあります。特に、トップページ内のセクションへ飛ばすリンクと、別ページからトップページ内のセクションへ飛ばすリンクでは、指定の考え方が変わる場合があります。
確認するときは、ヘッダーの各メニュー、ファーストビューのボタン、本文中のリンク、フッターのリンクを順番にクリックします。PCだけでなくスマホでも試し、タップしやすいか、移動後の見出しが見えるか、戻る操作をしたときに不自然ではないかを見ます。ユーザーはスマホで閲覧することが多いため、スマホでの確認を後回しにしないことが大切です。
また、ページ内リンクを設定したあとにセクション名や配置を変更した場合は、リンクも再確認します。デザイン変更でセクションを移動してもIDが残っていればリンク自体は動きますが、文脈として不自然になることがあります。たとえば、料金ボタンを押したのにキャンペーン説明の途中に飛ぶような状態は、リンク設定が合っていても導線としては失敗です。
目的別に設計してから設定する
Studioでページ内リンクを使うときは、先にページの目的とユーザーの動きを整理してから設定するのが失敗しにくい方法です。まず、ユーザーに最終的に取ってほしい行動を決めます。問い合わせ、予約、資料請求、応募、購入、来店など、目的が違えば、案内すべきセクションも変わります。
次に、ユーザーがその行動をする前に確認したい情報を並べます。料金、サービス内容、事例、流れ、FAQ、会社情報、アクセスなどが候補になります。その中で、スクロールせずに移動できたほうが便利な場所だけをページ内リンクにします。すべてをリンクにするのではなく、判断に必要なセクションを選ぶことが大切です。
最後に、ID名を決めて、リンク元とリンク先を対応させます。料金は price、FAQは faq、お問い合わせは contact のように、分かりやすい名前で統一します。公開前には、PCとスマホの両方で全リンクをクリックし、移動先、見え方、固定ヘッダーとの重なりを確認します。この流れで進めれば、Studioのページ内リンクは単なる装飾ではなく、ユーザーが迷わず行動するための導線として使いやすくなります。
