ホームページのボタンとリンクの正しい使い方完全ガイド

第1章: はじめに

目的

ホームページにボタンリンクを正しく設置する方法をわかりやすくまとめます。見た目だけのボタンではなく、正しいHTMLとアクセシビリティを意識した実装を目指します。

対象読者

初心者から中級者のウェブ制作やサイト運営者を想定しています。コードを書く方も、サイトビルダーを使う方も参考にできます。

この記事で学べること

• HTMLでのbuttonやinputを使ったリンク実装方法
• 間違いやすい実装例とその改善点
• リンクとボタンの使い分け方
• Googleサイト、Studio、WordPressなどのビルダーでの設置手順
• 画像をボタン化する方法やページ内リンクの基本

前提

基本的なHTMLの知識があると理解が早まりますが、次章からはコード例を丁寧に説明します。順を追って実装すれば、見た目も動作も正しいボタンリンクが作れます。

HTMLでのボタンリンク実装方法

概要

buttonタグとinput type=”button”の2種類が代表的な実装方法です。どちらもonclick属性でJavaScriptを実行し、location.href（またはwindow.location）を使って別ページへ遷移させます。使い方を分かりやすく説明します。

1. buttonタグで実装する

コード例:

<button type="button" onclick="location.href='https://example.com'">リンクへ移動</button>

説明: buttonは中にテキストやアイコンを入れられます。onclickで指定したJavaScriptが実行され、ブラウザが指定URLへ移動します。

2. inputタグで実装する

コード例:

<input type="button" value="リンクへ移動" onclick="location.href='https://example.com'">

説明: inputはvalue属性で表示文字を決めます。内部に要素を入れられない点がbuttonとの違いです。

補足（アクセシビリティと推奨）

JavaScriptが無効な環境では動作しません。リンクは意味的にはが本来適切ですので、見た目をボタンにしたい場合はをボタン風に装飾する方法を検討してください。簡単な例:

<a href="https://example.com" class="btn">リンクへ移動</a>

<a href="#"><button>クリック</button></a>

<a href="/page" class="btn">リンク風ボタン</a>
<button type="button" onclick="location.href='/page'">移動</button>

<button><a href="/">戻る</a></button>

<a onclick="doSomething()">操作</a>

• ページ移動: 会社情報へ
• モーダルを開く: 詳しく見る

コード例（マークアップのみ）:

<!-- リンク：別ページへ -->
<a href="/contact">お問い合わせ</a>

<!-- ボタン：JSで処理 -->
<button type="button" id="saveBtn">保存</button>

視覚と役割の分離

見た目だけで判断せず、役割に合わせてタグを選びます。見た目を統一したい場合はCSSでスタイルを調整してください。例えばaタグにbutton風のスタイルを付けるより、役割がボタンならbuttonタグにスタイルを付ける方が望ましいです。

アクセシビリティの注意点

• aタグでJavaScriptだけ動かすと支障が出ます。必ずhrefがあるか、roleやaria属性を正しく付けてください。
• ボタンに明確なラベルを付け、キーボード操作に対応させてください。

Webサイトビルダーでのボタンリンク設置

概要

Webサイトビルダーは、コードを書かずにボタンリンクを簡単に設置できます。ここでは代表的な操作方法と注意点を分かりやすく説明します。

Googleサイトでの手順

1. 編集画面のメニューから「ボタン」を選択します。
2. ボタン名（例：「お問い合わせ」）とリンク先URLを入力します。
3. サイズや色を選んで配置を調整します。
4. オプションで「新しいタブで開く」を選べます。
   ポイント: ボタン名は具体的にして、何が起こるか分かる文言にしてください。

Studioでの手順

1. ボックスパネルの「＋」マークをクリックし、リンク設定を追加します。
2. リンク先を入力して、テキストやアイコンを配置します。
3. デザイン設定で角丸、影、グラデーションなどの見た目を調整します。
4. プレビューで画面サイズごとに挙動を確認します。

共通の注意点とコツ

• リンク先を必ずテストして正しいか確認する。
• モバイル表示でタップしやすい大きさにする（指で押せる余裕）。
• 色は背景と十分にコントラストを付け、見えづらくしない。
• ボタン文言はアクションを明示する（例：「資料をダウンロード」）。

よくある間違い

• リンク未設定のまま公開してしまう。
• 色や配置で目立たずクリックされない。
• 新しいタブで開くことを明示せずユーザーが迷う。

これらを守れば、ビルダーで簡単に使いやすいボタンリンクを設置できます。

WordPressでの画像ボタンリンク設置

概要

WordPressでは画像ブロックや画像挿入機能でアップロードした画像にリンクを設定し、画像をボタンのように使えます。視覚的に目立たせたい呼びかけ（CTA）によく使われます。

手順（ブロックエディタ/Gutenberg）

1. 投稿・固定ページで「画像」ブロックを追加します。
2. 画像をアップロードまたはメディアライブラリから選択します。
3. 右サイドバーの「リンク設定」にURLを入力します。外部ならフルURLを入れます。
4. 「新しいタブで開く」を必要に応じて有効にします。
5. 代替テキスト（alt）を必ず入力します。

クラシックエディタの場合

画像挿入ダイアログで「リンク先」にカスタムURLを選び、URLを入力します。リンクターゲットも設定できます。

ボタン風にする方法（簡単）

• ブロックの高度な設定でカスタムクラスを追加し、外観→追加CSSでスタイルを書く。
• HTML表示が使えるなら、次のようにします：

/ CSS例 /
.img-btn img{display:block;border-radius:8px;transition:transform .15s}
.img-btn:focus img,.img-btn:hover img{transform:scale(1.03)}

アクセシビリティと注意点

• altはリンクの目的を短く伝えてください。画像が装飾ならaria-labelで補う場合があります。
• 外部リンクを新しいタブで開くときはrel=”noopener noreferrer”を付けます。
• 画像は適切なサイズに圧縮し、表示を遅延読み込み（loading=”lazy”）すると高速化できます。

最後に

編集後は必ずプレビューでリンク動作と見た目を確認してください。モバイルでの表示にも注意すると安心です。

ページ内のリンク機能

基本

ページ内の特定の場所へジャンプさせるにはアンカータグを使います。リンク先は「#id名」の形式で指定し、対応する要素にidを付けます。

例:

<a href="#section1">この節へ移動</a>
<h2 id="section1">セクション1</h2>

別ページからのリンク

別のページからは「page.html#section1」のようにファイル名の後に#を付けて指定します。これで直接該当箇所へ飛べます。

スムーズスクロール

ブラウザでなめらかに移動させたい場合はCSSを使います。

html { scroll-behavior: smooth; }

必要ならJavaScriptで細かく制御できます。

アクセシビリティとフォーカス

ジャンプ後にキーボード利用者が混乱しないよう、見出しにidを付けた上で必要なら tabindex=”-1″ を付与してフォーカスを移せます。リンクにわかりやすいテキストを使い、スクリーンリーダー向けに aria-label を追加すると親切です。

よくある間違い

• idが重複していると期待通りに動きません
• idに空白を入れないでください
• name属性による古い書き方は避け、idを使ってください

ページ内リンクは使い勝手を大きく改善します。目的の場所へ確実に移動できるよう、idの付け方とアクセス性に注意してください。