リンクとボタンの違い・名前の付け方

移動はリンク、操作はボタン

たとえば教室のホームページで、「開催日程を見る」を押すと日程のページが開く場合はリンクです。同じページの途中にある日程表まで移動する場合も、リンクを使います。

その先の申込フォームで、入力内容を送る操作にはボタンを使います。メニューを開いたり閉じたりする操作も同じです。四角く色を付けてあるからボタン、という見た目だけの区別ではありません。HTMLで作る場合も、何をするものかに合った書き方を選びます。

リンク名で行き先を伝える

リンクに「こちら」「詳しく見る」とだけ書かれていると、日程、料金、申込画面のどれが開くのか分からない場合があります。「開催日程を見る」「料金表を見る」「体験レッスンの申込フォームを開く」なら、開く前に内容が伝わります。

ページを音声で読むソフトでは、リンクだけを順番にたどる使い方もあります。周りの文章がなくても区別できる名前を付けると、目的の案内を選びやすくなります。

行き先がPDFなら「料金表を見る（PDF）」、別の予約サービスなら「予約サイトを開く」などと分かるようにします。申し込みの受付だけで予約が確定しない場合は、「予約確定」など、実際の結果と違う言葉を付けないでください。

編集画面で設定するURL

作成サービスの編集画面では、リンクにしたい文字や画像を選び、行き先のページやURLを指定します。URLは「https://」などで始まるページのアドレスです。文章を書き換える管理画面ではなく、訪問者が読むページを指定します。

自分でコードを書く場合は、URLの一部を省略して指定することもあります。ただし、省略の仕方によっては、リンクを置いたページの場所で行き先が変わります。設定欄に入力したURLだけを見て判断せず、実際のページから押して目的の場所が開くかを試してください。

表示と動作の食い違いを直す

「開催日程を見る」を押したのに教室の紹介ページが開いたら、訪問者はもう一度日程を探さなければなりません。日程のページへ直接つなぐか、紹介ページを案内する言葉に直すと、表示と実際の動きが一致します。

スマートフォンでも一つずつ押し、文字が小さすぎて選びにくくないか、隣のリンクを押してしまわないかを見ます。電話やメールのリンクは、端末やアプリの設定で動きが違うため、番号やアドレスが合っていることも確かめます。確認の際は画面の案内を読み、実際に発信・送信される操作かどうかを確かめてから進めてください。