ホームページには、問い合わせや別ページに飛ぶためのボタンが設置されていることが多いですよね。
ホームページを作ったばかりの方、オウンドメディアを投稿し始めたばかりの方は、ボタンの種類や設置方法を知らないと思います。
ここではホームページのボタンについての知識を紹介していくので、ぜひ参考にしてください。
ホームページにあるボタンの役割
ホームページにあるボタンは、訪問ユーザーに特定の行動をさせたいときに役立ちます。
問い合わせページなど、訪問してほしいページに誘導する時によく使われます。
ボタンで分かりやすく誘導してくれた方が、ユーザーも次の行動を起こしやすいのです。
テキストよりもボタンの方が目立ちますし、人間心理としても押してみたい気持ちになりますよね。
このように、ユーザーが次のアクションを起こす確率を高めることがボタンの役割です。
ホームページのボタンには種類がある!
ボタンと一言でいってもさまざまな種類があります。
ここでは、ホームページでよく利用されるボタンを紹介します。
CTAボタン
「Call to Action」の略で、サイトの最終目的に大きく関わるボタンです。
コンバージョン率を上げるために使用するもので、問い合わせや会員登録、購入ボタンがCTAボタンにあたります。
プライマリボタン
ユーザーがインターフェース上でもっともやりたい行動を後押しするボタンです。
例えば、商品画面に出る「カートに入れる」ボタンや、ログイン画面でのログインボタンがこれにあたります。
CTAボタンと似ていますが、プライマリボタンはユーザーの操作を完了する手助けをする、視覚的なボタンのことを指します。
セカンダリボタン
主要なアクション代替物として、ページ内に設置されるボタンです。
「戻る」や「キャンセル」などがセカンダリボタンにあたります。
その他、「関連する商品」といった補助的なリンクなどさまざまなシーンで利用されます。
ターシエリボタン
あまり重要度が高くない、付随的な操作に用いられるボタンです。
「編集」「新規追加」などのボタンがこれにあたります。
また、SNSへのシェアボタンなどもターシエリボタンの一つです。
トグルボタン
状態のON/OFFを切り替えるためのボタンです。
スマートフォンの設定でON/OFFを切り替えるボタンがイメージしやすいと思います。
トグルボタンはON/OFFだけでなく、画面切り替えにも使われます。
リストの切り替えを行う時などに重宝します。
ドロップダウンボタン
特定の項目にカーソルを合わせたりクリックしたりすると、下にいくつかの選択項目が出てくるボタンです。
ホームページでは、上部にあるタブなどでよく利用されます。
また、Q&Aの項目で「+」ボタンを押すと回答が表示されるものもこれにあたります。
ドロップダウンボタンを活用することで、ホームページをスッキリ見せながらも必要な情報を表示できます。
このように、ホームページではさまざまなボタンが使用されています。
目的に合ったボタンを設置し、ユーザーが見やすいサイトにしていきましょう!
思わず押したくなる!ボタンの要素・デザインについて
テキスト
ボタンのテキストには、「ラベリング」と「マイクロコピー」の2つがあります。
ラベリングとは、ボタンの中に記入するテキストのことで、マイクロコピーは、ボタンの近くに配置される小さなテキストです。
ラベリングでは、ボタンの目的を明確に示すことが重要です。
マイクロコピーはラベリングの補足要素として、ラベリングよりは目立たないけどユーザーの興味を引くテキストを記入しましょう。
サイズ
周りのテキストや画像のサイズと比べて違和感のないサイズにすることが重要です。
大きすぎても小さすぎても、ユーザーに不信感を与えてしまいます。
周りのテキストよりも大きく目立つサイズでありながら、画面を圧迫しない適切なサイズに調整してください。
色
クリック数を増やすには色も重要な要素です。
ホームページの色味に合わせながらも、ボタンとして目立つ色を選びましょう。
クリック率が高いボタンの色としては、
- 彩度が高い
- 飛び出して見える色の配色にする(背景が黒なら、赤・黄・橙を使うなど)
- 色相環における反対色(補色)を使う
- 緑・赤・オレンジなどの明るくてアクションを起こさせる色を使う
などなど、色によるアピール方法はたくさんあります。
ぜひ、色味を考えてABテストを行いながらよりアクションを起こしやすい配色を考えましょう。
形
形によってイメージに違いが出ます。
ホームページの雰囲気に合わせて、ボタンの形も変えましょう。
四角はシンプルでクールなイメージがあり、角丸や円は柔らかくて優しいイメージがあります。
アニメーション
ボタンにアニメーションをつけることで、「これはボタンで、押せるもの」という認識がしやすいです。
カーソルを合わせると光ったり、サイズが変わったり、クリックアクションが起きたりすると、ついつい押したくなるのが人間の心理です。
見込顧客の後押しになることもあるので、ぜひアニメーションをつけましょう。
ボタンを設置する上での注意点
ユーザーが認識しやすいラベリングにする
このボタンを押すと何ができるのか、どんな画面が表示されるのかが明確でないと、ユーザーは不安になって行動を起こしにくくなります。
そのため、ラベリングは「問い合わせる」「まずは会員登録!」などの直接的で簡潔な表現を用いてください。
「まずはクリック」などの抽象的な表現は避けましょう。
たくさん設置しすぎない
ホームページの中に必要以上にボタンを設置してしまうと、広告に感じてユーザーが離脱してしまう可能性が高くなります。
また、ホームページ自体も見にくくなってしまうので、ボタンの数は最小限に絞りましょう。
ただし、LPのように長い広告ページの場合は、間隔を空けて複数設置する場合もあります。
ボタンとわかるようなデザインにする
ボタンは、ボタンだと認識されなければ設置する意味がありません。
ホームページ内の文章のフォントや色味に負けないような、ボタンとして目立つデザインにしましょう。
そこにカーソルを合わせると色が変わったりアニメーションがついていたりするものは分かりやすいです。
シェアボタンを設置する
最近はSNSでの投稿・拡散が顧客の増加や認知度の向上につながるので、ホームページ内にシェアボタンを設置しておくことをおすすめします。
ホームページをシェアすることはあまりないかもしれませんが、オウンドメディアなどためになる情報記事の場合は、シェア率も高まるので設置しておきましょう。
ホームページにボタンを設置する方法は?
では、実際にホームページやオウンドメディア内にボタンを設置する方法を紹介します。
ここでは、多くの人がサイト運営に使っている「ワードプレス」でのボタン設置方法を紹介していきます。
- ➀ワードプレスにログインし、ボタンを設置するページの編集画面を表示する
- ②左のバーの中にある「外観」にカーソルを合わせ、「カスタマイズ」をクリック
- ③追加CSSをクリックし、その中にボタンのCSSを記入する
- ④記入し終えたら上にある「公開」ボタンを押す
- ⑤再び編集画面に戻り、テキスト画面に切り替えて、導入したい場所にボタンのHTMLを追加し、間に任意のメッセージを入力する(「問い合わせてみる」「いますぐクリック!」など)
- ⑥ビジュアル画面に切り替えて、文字のフォントや色を変更する
- ⑦ボタン上の文字を全選択し、「リンクの挿入/編集」ボタンをクリックし、飛ばしたいURLを入れる
- ⑧リンクのアンダーラインを消したい場合、リンクのHTMLに「style=”text-decoration:none;”」を追加する
- ⑨プレビュー画面で、ボタンが正常に機能するか確認し、投稿する
おしゃれなボタンを設置したい場合は、「Bottuns?」というサイトがおすすめです。
さまざまな種類のボタンがあるので、好きなデザインのものを設置することができますよ♪
おしゃれなボタンで問い合わせ数を増加させよう
ボタンは、ユーザーに次のアクションを起こさせたり、CVにつなげたりするために必ず必要なものです。
せっかく設置するのなら、しっかりユーザーの心理に訴えかけるものにしたいですよね。
ここでの情報を参考に、ボタンを設置してみてください。
ホームページ制作ならオフィ助まで♪
オフィ助では、ホームページ制作も行っています。
社内のwebデザイナーがお客様の希望や会社のイメージに合わせて、この世に一つしかないホームページを制作いたします!
もちろん、テンプレートといってシンプルで格安なプランもご用意しております。
さまざまな業種のお客様のホームページを制作した実績があるので、ぜひ一度制作実績をご覧ください。
「ホームページをリニューアルしたい」
「古いから、もっとおしゃれでかっこいいホームページにしたい」
などなど、ホームページを新しくしたいと考えている方は、ぜひ一度お気軽にご連絡ください。
コメント