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