お問い合わせボタンの色がページごとに違っていませんか

同じ問い合わせ先へ進むボタンは、ページが変わっても色や表記をそろえておくと、読む人の目印になります。まずは、よく見られるページのボタンを一つ確認するところから始めましょう。

トップページでは青、サービス案内では茶色、最近書いた記事では緑。記事を増やすたびに、そのページの写真に合わせて色を選んでいると、こんな違いが生まれます。

一つずつ見ると、おかしくないかもしれません。ただ、お客さまは複数のページを行き来します。「さっき見た問い合わせ先と同じかな」と考えずに進めるよう、同じ役割のボタンを見直してみてください。

表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。

同じ行き先のボタンを見つける

最初に、公開中のトップページとサービス案内を開き、「お問い合わせ」のボタンを探します。たくさん記事があっても、今日はこの二つで十分です。トップのボタンが「固定ページ」の一覧で見つからなければ、表示を見るだけにし、サイト全体の編集画面へ探しに行きません。

見るのは、背景色だけではありません。

・ボタンに書いてある言葉

・ボタンの背景と文字の色

・押した先に開くページ

見比べた中から、文字が読みやすく、正しい問い合わせ先が開くボタンを一つ選び、色をそろえる基準にします。

「お問い合わせ」と「無料相談」で、実際には同じフォームを案内している場合もあります。サービスとしての意味が同じかを確かめ、必要がなければ表記もそろえます。無料かどうかなど、約束する内容が違う言葉は、見た目のために変えないでください。

同じ問い合わせ先へのボタンは、ページが変わっても同じ見た目を目印にできます。説明用に制作した架空の比較例です。

全部のボタンを同じ色にするの？

そろえる対象は、同じ役割のボタンです。

たとえば、「お問い合わせ」を主な案内にし、「サービス内容を見る」を補足の案内にするなら、塗りつぶしと枠線だけのボタンを使い分ける方法があります。

「削除する」など注意が必要な操作や、押せない状態の表示まで、問い合わせボタンと同じ見た目に変える必要はありません。意味のある違いは残します。

問い合わせと詳しい説明では、ボタンの役割が違います。すべてを同じ強さにそろえる必要はありません。

「何色にすると問い合わせが増えるの？」と気になるかもしれませんが、色だけで効果が決まるとは言えません。まずは、行き先が分かる言葉と、読める文字、同じ案内を見つけやすい見た目を整えます。

WordPressでは、本文のボタン一つから直す

ここでは標準のブロックエディターで、記事内のボタンを一つだけ直します。ブロックは文章やボタンを扱う部品のこと。画面例はWordPress 7.1.2と、見た目の土台となるテーマ「Twenty Twenty-Five」です。

手順1：対象を開き、今の色を控える

管理画面の「投稿」または「固定ページ」から一覧を開き、対象の題名をクリックします。直すボタンと、基準にするボタンの画面を撮り、文字色・背景色・リンク先を控えます。色の名前や「#」から始まる色番号が見える場合は、それもメモします。色を調べる場所は次の手順2・3で説明します。基準のボタンでも同じ場所を開いて控えます。基準色が分からなければ、今回は記録までにしましょう。

記事の編集画面で右上の「設定」を開き、「投稿」または「固定ページ」と「ブロック」のタブが出ることを目安にしてください。配置や使える項目は環境で異なります。「テンプレート」など別の画面にいる場合や、タブが見当たらない場合は、この手順で変更せず編集画面を確認します。

手順2：直すボタン一つと、右側の設定を開く

ボタンの文字をクリックします。右側に設定がなければ、右上の、左右に分かれた長方形の「設定」アイコンを押し、「ブロック」タブを選びます。選択範囲がボタン一つだけか、画面の枠で確認してください。

選びにくいときは、左上の横線3本の「ドキュメント概観」から「リストビュー」を開きます。ボタンをまとめた外側の部品ではなく、その中の個別のボタンを選びます。名前だけで判断せず、選択範囲を見てください。

手順2：左の「リストビュー」で、外側の「ボタン」の中にある「詳しく見る」一つを選んでいます。 検証用の実画面（WordPress 7.1.2／Twenty Twenty-Five、下書き）。環境によって項目や表示は異なります。

外側に「同期パターン」など、複数のページで共通に使う部品がある場合や、共有かどうか不明な場合は止めます。中の一つを選んでも、変更がほかの使用先へ広がる場合があります。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。

手順3：背景色と文字色を、分けて合わせる

画面例では、右側を下へ送り「背景」の「色」を押すと、背景色の見本が開きます。基準と同じ色見本を選びます。番号で指定する場合は上部の大きな色見本を押し、「Hex」の入力欄へ控えた番号を入れます。Hexは「#」から始まる色番号の表し方です。

手順3：ボタンの「背景」にある「色」を押す場所です。文字色の項目とは別です。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

手順3：個別のボタンを選び、「背景」の「色」を開いた画面です。検証用の実画面（WordPress 7.1.2／Twenty Twenty-Five、下書き）。環境によって項目や表示は異なります。

上の画面の#246B68は、現在の色番号の表示です。入力欄は、上部の大きな色見本を押すと開きます。自分のサイトでは、基準ボタンと同じ番号を使います。文字色を合わせる場合は「タイポグラフィ」の「色」を開き、同様に基準の文字色を選びます。文字の読みやすさを確認してから次へ進みましょう。

手順3：大きな色見本を押すと、この「Hex」の入力欄が開きます。#246B68は操作例です。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

色設定がなければ、選択範囲とブロック名を見直します。画像のボタンやテーマ独自の部品、追加機能で作ったボタンには、この手順を無理に当てはめません。サイト全体の設定や、見た目をコードで変えるCSSへ進まず、いったん記録までにします。

手順4：保存前に、スマホ幅で読む

右上のモニター形の「表示」から「モバイル」を選び、ボタンの文字が背景に埋もれていないか見ます。「新しいタブでプレビュー」でも確認できます。見るポイントは次の節にまとめています。

ここで使うのは「モバイル」と「新しいタブでプレビュー」だけです。ほかの項目は触らず、もう一度設定を変えるときは「デスクトップ」に戻します。

手順5：戻すか、更新するかを決める

違和感があれば、更新前に左上の左向きの曲がった矢印「元に戻す」で、直前の変更から戻します。元の色になったか確認してください。良ければ「保存」または「更新」を押します。試すためだけに「公開」を押す必要はありません。

色を変えたら、文字と行き先も確認する

保存する前にプレビューで、ボタンの文字が背景に埋もれていないかを見ます。淡い背景に白い文字などは、色がきれいでも読みにくいことがあります。

WordPressに読みづらさの警告が出たら、文字と背景の組み合わせを見直します。警告が出ないことだけで、十分に読めると判断しないでください。

ボタンは背景色だけでなく、中の文字との組み合わせで確かめます。この比較は文字の読みやすさの一例で、ページ全体の使いやすさを保証するものではありません。

また、「緑のボタンを押してください」だけでは、色を区別しにくい人に伝わりません。「お問い合わせ」と、ボタン自体に行き先が分かる言葉を入れます。

プレビューで問題がなければ更新し、実際のスマホで公開ページを開きます。文字の欠けや不自然な折り返し、押しづらさがないかを見て、正しいフォームが開くところまで試してください。この確認では送信はしません。色の変更と、フォームの送受信テストは分けて行います。

更新後に戻す場合の注意

「色をクリア」「リセット」はテーマなどの既定の色へ戻す操作なので、変更前に自分で指定していた色に戻るとは限りません。

更新したあとなら、控えておいた色へ戻して再更新します。以前の内容は「投稿」または「固定ページ」の設定にある「リビジョン」という保存履歴で確認できる場合もあります。ただし、版全体を復元すると新しい文章まで置き換わるので、今の内容を控えてから判断してください。

今日は、同じ役割のボタン一つをそろえ、スマホで読めて押せるか確かめるところまで。その一つを基準にすると、次に記事を書くときも色選びに迷いにくくなります。

自分の画面でどこを直すか分からない場合は、該当ページのURLとボタン部分のスクリーンショットを添えて、ココナラ内のメッセージからご相談ください🌿

画像には、パスワードやお客さまの個人情報が写らないようにしてください。