デザイン

デザイン

ラジオボタンを自分でデザインする!独自のラジオボタンを作る方法【チュートリアルで学ぶ】

384 views

デザインシステムは、それぞれが異なるスタイルを持っています。既存のフレームワークを元にしたものもあれば、完全に独自のスタイルを使ったものもあります。たとえば、標準のHTML要素を利用したサイトやアプリは、ブラウザが利用するスタイルをそのまま使っています。しかし、そのスタイルに縛られる必要はありません。

 

今回はラジオボタンを例に挙げましょう。オプションを選択するのがラジオボタンの役割であり、ブラウザでは長年使われてきました。しかしGoogleのマテリアルデザインなどでは、標準のスタイルとは異なる見た目になっています。

 

あなた独自のスタイルを、ラジオボタンにも適用できるのです。早速作ってみましょう。

 

 

  1. 1.要素を見つける

ラジオボタン用に数多くのスタイルが公開されており、お好きなものを利用できます。Googleのものを使ってもいいですし、UXPinなどで新たに見つけるのもいいでしょう。お使いのツールでラジオボタンを作成しましょう。

 

色はご自由に選択してください。画像ではデモのため、黒のままにしておきます。オフボタンへの設定が完了したら、その上にオンボタンを配置しましょう。

 

 

  1. 2.状態を作る

各ラジオボタンには2つの状態があります。オンとオフです。

UXPinでは全ボタンをまとめて選択し、2つの状態を追加し、複数の状態を持つ要素にします。

 

この操作で、6つのラジオボタンが、3つのビューを持つ1つの要素にまとまりました。ただし、それぞれの状態を反映するためには設定が必要です。各状態の設定に行き、ボタンのオンオフを適切に変更してください。

 

 

  1. 3.インタラクティブホットスポットの追加

ホットスポットは不可視レイヤーで、操作のトリガーとして働きます。今回はラジオボタン全体が1つの要素になっているため、各ボタンとラベルにそれぞれホットスポットを配置します。クリック時のインタラクションを追加するには、「Multistate 1」の数字を変更してください。

これで完成です。あなた独自のデザインを使った、新しいラジオボタンができました。

 

 

標準のスタイルでも、ラジオボタンの役割は問題なく果たしてくれます。しかし細部にまでこだわるのであれば、やはりこうした部分にも手を加えたいものです。今回の記事を参考に、より洗練され、統一感のあるデザインを作ってください。

 

 


 

▼ラジオボタンについて、こちらの記事もおすすめです。

 

 


 

※本記事はDon’t Settle for Default Radio Buttons — Make ’em Your Ownを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ