※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
#04:ボタン
ボタンのデザインについて説明します。
ボタンと認識させる方法に、次のようなものがあります。
・立体感をつける
・AndroidやiPhoneなどのスマホOSの基本UIにつかわれているボタンに似せる
・わかりやすく説明的にラベリングする
ボタンの色や大きさでクリックすべきものかどうかを直感的に判断させることができます。
ネガティブな要素は、色を薄くしたり、グレーなどのトーンが低いものを使います。
押してもらいたいポジティブな要素は、有色で彩度が高いものを使ったりします。
多くの人はマウスが右下に行く傾向があります。 そのため、Call To Action(コール トゥ アクション)を意識すると、「右下」または「ページ下の真ん中」にボタンを配置するのがオススメです。
設定やヘルプ、ログインなどのボタンは、右上において置くのが一般的になっているので、右上において置くのがオススメです。
・CSSボタン作成
Button Generator
https://www.bestcssbuttongenerator.com/
・SVG作成
vectr
https://vectr.com/
・WEBフォント(アイコン)
Font Awesome
https://fontawesome.com/