スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第10回 ボタンのデザインをしよう

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第10回:ボタンのデザインをしよう

執筆:服部 雄樹(服部制作室)

2017年1月10日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,487views

このコラムをPDF形式でダウンロードする

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムではWebフォントをうまく活用するポイントについて解説しました。第10回目となる今回は、ボタンをデザインする際のポイントを見ていきます。

ボタン、うまく使えていますか?

WebサイトのUI(ユーザーインターフェース)において、ボタンはとても重要です。ボタンは、各ページ間をつなぐ目印となるだけでなく、購入や申込みなどのアクションを起こしてもらうための、いわば「ユーザーが直接触れる」箇所です。

実際、ボタンの色やデザインによってクリック数が変わる、という実験結果も出ており、目につきやすい、押してみたくなる、そんなボタンをデザインすることができれば、皆さまのWebサイトもより成果につながりやすくなるのではないでしょうか。

Jimdoのボタン機能の使い方をおさらい

それではまずは、Jimdoでのボタンの設置方法をおさらいします。「コンテンツを追加」から「ボタン」という項目をクリックします。

すると「新しいボタン」と書かれた四角いボタンが作成されます。この文字列は「ここをクリック」など任意の文字列に変更が可能です。また、ボタンのスタイル(見た目)は3種類用意されており、その中から好きなものを選ぶことができます。この使い分けについては後述します。

このままではただの四角い箱なので、ボタンとして機能させるため鎖のアイコンをクリックします。すると、リンクを設定するメニューが表示されますので、遷移させたいページやURLを指定すればボタンの完成です。

設置したボタンの色やデザインは、Jimdoのスタイルメニューから設定できます。ボタンの上にマウスを置いた時の色や、ボタンの角を丸くする「角丸」の設定など、細かいデザインが可能で、3種類のスタイルごとにそれぞれ設定できます。

3種類のスタイルをうまく使い分けよう

では、この3種類のスタイルをどのように使い分ければ良いのでしょうか。意外と1種類しか使っていないという方も多く、逆に、無作為に色々なボタンを設置されているケースも多く見られます。せっかく3つのデザインを作れるのですから、これはうまく活用したいところです。

そこでオススメなのが、まずは2つ同じデザインで大小のボタンを作成する方法です。これならそれほど難しく考えなくても作成できます。

全く同じデザインで大きさだけを変えたボタンを作成する

大きなボタンは目立たせたいリンクに使用し、小さなボタンは「もっと見る」ボタンに使うなど、目的に応じて使い分けます。基本的には大小同じ色を使うほうが、ユーザーにとっては「ああここがリンクなんだな」と分かりやすいので、ボタンのカラーリングは統一する方が良いでしょう。

1つだけ別のカラーリングのボタンを作っておく

そして、3種類のうちの最後の1つだけ別のカラーリングにします。このボタンは最終的な申込みや購入など、特別なアクションを促す時にだけ使用します。こうすることでサイト内にメリハリができ、もっとも重要なボタンをひときわ目立たせることができます。

重要なアクション用に1つだけ別のカラーリングのボタンを作っておく

例えば以下のケースでは、重要なリンクにはボタンスタイル1を、各詳細ページへ続く「MORE」ボタンにはボタンスタイル2を、そして最も目立たせたい制作依頼へのリンクボタンにはボタンスタイル3を適用しています。

ボタンはユーザーとの重要な接点

たかがボタン、されどボタン。このように、ボタンのデザインは小さなことのようで、実はWebサイトの成功と失敗を分ける重要な役割を担っています。それはボタンが「ユーザーとの接点」であるからです。

購入や申込み、ページの移動など、ユーザーが起こしたいアクションに合わせて、迷わず目的地に辿り着けるよう配慮されたWebサイトは、必ず良い結果につながるでしょう。

ぜひ皆さまもボタンのデザインを見直してみてください。きっとそれだけで格段に使いやすいWebサイトになるはずです。

次回は、コンテンツを印象的に魅せる「余白」の使い方を解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!