)2017年1月10日更新ツイート閲覧数5,101viewsこのコラムを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サイトになるはずです。次回は、コンテンツを印象的に魅せる「余白」の使い方を解説します。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。人気講師が教える本格Webサイトの書き方』など。(著)「4つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作のきほんが学べます!ライブ感のあるチュートリアル学習により、まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような体験型の独習書です。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。