コンポーネントのデザインルールとは?ボタンで考える見た目の決め方

コンポーネントのデザインルールの基本

まずは、コンポーネントのデザインルールとは何か、なぜ必要なのか、どんな観点で決めるのかを押さえましょう。

コンポーネントのデザインルールとは

コンポーネントのデザインルールとは、ボタンや入力欄などの部品の見た目を、毎回その場で決めるのではなく、あらかじめ決めた数値や色で作るための決まりごとです。

コンポーネントとは、ボタン・入力欄・カードのように、画面の中で何度も繰り返し使う「UIの部品」のことです。

UIは「ユーザーインターフェース」の略で、Webサイトやアプリの画面のうち、人が見たり操作したりする部分を指します。

たとえば「ボタンの高さは48px、文字は16pxの太字、角の丸みは8px」のように決めておけば、誰がいつ作っても同じボタンになります。

目指すのは、「1つのボタンをきれいに作れる」状態から、「どのボタンも同じルールで作れる」状態へ進むことです。

ルールがないと何が起きるのか

ルールがないまま部品を作ると、同じ役割の部品なのに、画面ごとに少しずつ見た目が違ってしまいます。

1つずつ見れば気にならない差でも、サイトを行き来する人には「さっきのボタンと同じものなのか」という小さな迷いを生みます。

また、作る人も毎回「何pxにしようか」と悩むことになり、時間がかかるうえに、ほかの人に作業を頼んだときにも見た目がそろいません。

次の見本は、同じサイトの3つの画面にある「送信する」ボタンを並べたものです。

NGの見本では、3つとも「送信する」ボタンなのに、薄い青のものは別の機能のボタンにも見え、枠線付きのものは何か特別な意味があるようにも見えます。

OKの見本では、3つが同じルールで作られているので、どの画面で見ても「これは送信ボタンだ」とすぐに分かります。

同じ役割のものを同じ見た目で繰り返す考え方は、デザインの「反復」や「一貫性」と呼ばれ、ページ全体の配置にも当てはまります(色の面での一貫性はリンク・ボタンなどのUIカラーとは?で解説しています)。

ルールにする7つの観点

コンポーネントの見た目は、サイズ・色・形・余白・文字・アイコン・配置の7つの観点に分けてルールにすると、決め漏れがなくなります。

観点ごとに分けておくと、「この部品は何を決めれば完成か」がはっきりし、ほかの部品を作るときにも同じ観点で考えられるためです。

7つと聞くと多く感じるかもしれませんが、全部を一度に覚える必要はありません。このあとの手順で1つずつ決めていきますし、配置は、ページに部品を並べるときに決めれば十分です。

ボタンを例にすると、それぞれの観点で決めることは次のとおりです。

観点	ボタンで決めることの例
サイズ	高さ、横幅(文字に合わせるか固定か)
色	背景色、文字色、枠線の色
形	角の丸み、枠線の太さ
余白	文字と枠の間の余白(内側の余白)
文字	文字の大きさ、文字の太さ
アイコン	アイコンの大きさ、文字との間隔、置く位置
配置	画面のどこに置くか、ほかのボタンとの並べ方

この表のうち、部品同士の間隔(配置)はUIコンポーネントの間隔とは?で、内側の余白はボタンの内側の余白とは?で詳しく解説しています。

この記事では、1つのボタンの見た目を決める部分に絞って、ルールの作り方を見ていきます。

ボタンを例にしたデザインルールの作り方

ここからは、いちばん身近なコンポーネントであるボタンを例に、ルールを決める手順を見ていきます。

高さ→文字→余白と横幅→色→角丸→アイコンの順に決めると、前に決めた値をもとに次の値を決められるので迷いません。

手順1:ボタンの高さを決める

最初に決めるのは、ボタンの高さです。

高さは押しやすさに直結し、文字の大きさや余白も高さをもとに逆算できるからです。

Webのアクセシビリティ(障害の有無や年齢にかかわらず使えるようにすること)の国際的なガイドラインWCAG 2.2では、押す対象の大きさを少なくとも24×24 CSSピクセルにすることを求めています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。

CSSピクセルは、Webページの大きさを表す単位で、「画面上の見た目の大きさ」と考えて問題ありません。

24pxはあくまで最低限の線なので、よく押されるボタンは44〜48px程度の高さにしておくと、スマートフォンで指で押すときも安心です(押しやすさの目安はボタンの内側の余白とは?で詳しく比べています)。

実際に、デジタル庁デザインシステムのボタンでは、大きさの段階として高さ56px・48px・36px・28pxの4つを用意し、ボタンの押せる範囲は44 CSS px以上を保つように案内しています(ボタン(使い方)|デジタル庁デザインシステムβ版)。

この記事では、標準のボタンの高さを48pxに決めて進めます。

手順2:文字の大きさと太さを決める

次に、ボタンの中の文字の大きさと太さを決めます。

文字はボタンの中でいちばん読まれる部分なので、本文と同じくらい読みやすい大きさにしておく必要があるからです。

標準のボタンなら、本文と同じ16pxを基準にし、太さは太字(bold)にするのが分かりやすい決め方です。

太字にしておくと、周りの本文と区別がつき、「ここは押せる場所だ」と伝わりやすくなります。

ボタンの文言の決め方や文字の扱いは、CTAボタンの文字デザインとはもあわせて参考にしてください。

手順3:左右の余白と横幅を決める

高さと文字が決まったら、文字と枠の間の余白と、ボタンの横幅の決め方を決めます。

高さ48px・文字16pxの場合、文字1行分の高さを24px(16px×行の高さ1.5)とすると、上下の余白はそれぞれ12pxになります(24px+12px+12px=48px)。

左右の余白は上下より広めの24pxにすると、横長で落ち着いた形になります(この計算の考え方はボタンの内側の余白とは?で解説しています)。

横幅は「文字の長さに合わせて伸び縮みさせる」のか「決まった幅に固定する」のかを決めておきます。

基本は左右の余白を固定して、横幅は文字に合わせて伸び縮みさせるのがおすすめです。

横幅を固定すると、「戻る」のような短い文字は左右がスカスカに、長い文字は窮屈に見えてしまうためです。

スマートフォンのフォームの送信ボタンのように、画面幅いっぱいに広げたい場所がある場合は、「スマホのフォームでは幅いっぱい」のように例外として書き添えておきましょう。

手順4:背景色と文字色を決める

次に、ボタンの背景色と文字色を、ボタンの役割ごとに決めます。

色は「どのボタンが一番大事か」を伝える手がかりになるので、役割ごとに1つの組み合わせに固定しておくと、見る人が色だけで重要度を判断できるようになります。

たとえば、一番押してほしい「申し込む」のようなボタンは塗りつぶし、「戻る」のような控えめなボタンは白地に枠線、と役割で色の組み合わせを分けます。

背景色と文字色の組み合わせは、文字が読めるコントラスト比(色の明るさの差を数値にしたもの)を確保する必要があり、通常の文字では4.5:1以上が基準です(コントラスト比とは?で解説しています)。

例えば、白い背景に薄い灰色の文字を置くと、明るさの差が小さいので読みにくくなります。4.5:1は、多くの人が無理なく読めるようにするための、文字と背景の「くっきり度」の最低ラインと考えるとよいでしょう。

ボタンの種類ごとの色の決め方は、リンク・ボタンなどのUIカラーとは?で詳しく解説しています。

手順5:角の丸みを決める

次に、ボタンの角の丸み(角丸)を決めます。

角丸は小さな差でも印象が大きく変わるので、数値を1つに決めておかないと、ボタンごとに微妙に違う形になりやすいからです。

高さ48pxのボタンなら、角の丸みを8pxにすると、かっちりしすぎず、丸すぎない形になります。

ここで大切なのは、ボタンだけでなく入力欄やカードなど、ほかの部品の角丸とも同じ考え方でそろえることです。

角丸の大きさによる印象の違いや、部品の大きさに合わせた決め方は、角丸の記事で詳しく扱います。

手順6:アイコンとの間隔を決める

最後に、アイコン付きのボタンを作るときの、アイコンの大きさと文字との間隔を決めます。

アイコン付きのボタンは、ルールがないとアイコンの大きさや文字との距離がボタンごとにばらつき、いちばん崩れやすい部分だからです。

アイコンの大きさは文字の大きさとほぼ同じ(文字16pxなら16px前後)にし、文字との間隔は8pxのように1つの値に決めます。

アイコンは文字の高さの中央にそろえ、アイコンがあっても左右の余白は文字だけのボタンと同じ値にします。

次の見本は、同じ「資料をダウンロード」ボタンで、アイコンの扱いだけを変えたものです。

NGの見本では、アイコンが文字より大きく上にはみ出し、文字とくっついているため、アイコンと文字が別々の部品のように見えます。

OKの見本では、アイコンと文字の大きさ・高さがそろい、間に一定の間隔があるので、1つのまとまったボタンとして読めます。

決めたルールを表にまとめる

ここまで決めた値は、頭の中に置いておかず、1枚の表に書き出しておきましょう。

表にしておくと、新しい画面でボタンを作るときや、ほかの人に作業を頼むときにも、同じボタンを作れるからです。

この記事の手順で決めた標準のボタンのルールをまとめると、次のようになります。

項目	ルール
高さ	48px
文字	16px・太字
内側の余白	上下12px・左右24px
横幅	文字に合わせて伸び縮み(スマホのフォームでは幅いっぱい)
色(一番押してほしいボタン)	背景は青(#3E5BD8)、文字は白(#FFFFFF)
色(控えめなボタン)	背景は白、文字と枠線は青(#3E5BD8)
角の丸み	8px
アイコン	16px・文字との間隔8px・高さの中央にそろえる

表の数値はあくまで一例で、サイトの文字の大きさや雰囲気に合わせて調整してかまいません。

大切なのは、決めた値を書き残し、どのボタンもその表どおりに作ることです。

大・中・小のようにサイズ違いのボタンを用意する場合も、この表をもとに、高さ・文字・余白を一緒に大きく(小さく)していくと、同じ仲間のボタンに見えます。

さらに、こうした値に「button-height-md」のような名前をつけて、デザインと実装で共通して使えるようにしたものを「デザイントークン」と呼びます(名前をつけて管理する考え方の入り口は余白の間隔のルールとは?でも紹介しています)。

難しそうな名前ですが、要するに「高さ48px」のようなルールの値に、全員が同じ名前で呼べるあだ名を付けたものです。
例えば、あとから標準のボタンの高さを44pxに変えたくなっても、「button-height-md」の値を1か所直せば、その名前を使っているボタンにまとめて反映できます。

実践のポイント

コンポーネントのデザインルールを作るときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目を整えるために、ボタンごとに1pxずつ高さや余白を微調整してしまうことがあります。
  その場では整って見えても、ルールにない数値が増えるほど、ボタンの見た目はばらついていきます。
  「このボタンだけ1px下げたほうがきれい」という調整を重ねると、似ているのに少しずつ違うボタンが増え、どれが正しい値なのか、作った本人にもほかの人にも分からなくなります。
  調整したくなったら、ルールの値そのものを見直しましょう。
• ボタンだけルールを決めて、入力欄やカードは感覚で作ってしまうことがあります。
  ボタンの高さと入力欄の高さ、角の丸みなどをそろえておくと、フォームのように部品が並ぶ画面で統一感が出ます。
• 色や大きさを「なんとなく好きだから」で決めてしまうことがあります。
  高さは押しやすさ、文字は読みやすさ、色は重要度というように、それぞれの値に理由を持たせておくと、あとで迷ったときに判断できます。
• ルールを作っただけで書き残さず、数か月後には自分でも覚えていないことがあります。
  簡単な表でかまわないので、必ず書き出しておきましょう。

よくある質問

• Q. ルールの数値は、どこかに正解があるの?
  A. 決まった正解はありません。
  押しやすさ(高さ)や読みやすさ(コントラスト)のように、ガイドラインで目安が示されている部分はそれを満たし、それ以外はサイトの雰囲気に合わせて決めれば大丈夫です。
  迷ったときは、デジタル庁デザインシステムのように公開されているデザインシステムの値を参考にするのも1つの方法です。
• Q. 1人で作る小さなサイトでも、ルールは必要?
  A. 必要です。
  ページが増えたときや、時間がたってから修正するときに、前に使った値を思い出せずにばらつく原因になるからです。
  ボタン1種類分の表を作るだけでも効果があります。
• Q. ボタン以外の部品も、同じ7つの観点で決めればいい?
  A. はい。
  入力欄なら「高さ・文字・枠線の色・角の丸み・ラベルとの間隔」、カードなら「内側の余白・角の丸み・影の有無」というように、同じ観点で部品ごとに決めていけます。

まとめ

コンポーネントのデザインルールとは、ボタンなどの部品の見た目を、あらかじめ決めた数値や色で作るための決まりごとで、同じ役割の部品をいつも同じ見た目にする土台になります。

ボタンなら、高さ→文字→余白と横幅→色→角丸→アイコンの順に、理由を持って値を決め、1枚の表に書き残しておくことがポイントです。

まずは自分が作った画面からボタンを3つ選び、高さ・文字の大きさ・角の丸みが同じになっているかを測ってみてください。