UIデザインの基本知識と改善テクニックまとめ Vol.2

この記事では、MUUGMUUGのデザイナーが気をつけていることをご紹介します。
ホームページデザインやアプリのUIデザインを改善する際の、基本知識やテクニックです。

今回はフォームに関するテクニックを中心にまとめてみました。
是非ご参考にしていただければ幸いです。

なお、前回までの内容は下記をご覧ください。
UIデザインの基本知識と改善テクニックまとめ Vol.1

1. ボタンの余白は「左右広め」が基本

ボタンのあしらいは目立たせるだけでは足りません。
また、ボタンの中に置かれているテキストの視認性にも配慮しましょう。左右余白は上下余白の２倍が基本です。

2.入力フォームはワンカラムが基本

フォームでのユーザーの離脱を防ぐには、シンプルでノイズの少ないUIデザインが基本です。
送信ボタンまでユーザーの目線がブレないようにしましょう。
そのため、ワンカラムで設計されたUIデザインが理想的です。

3.隠すよりも表示させる

少ない数の選択肢であれば、セレクトボックスで隠すのは避けましょう。
すべて表示して、ユーザーに選んでもらうのがおすすめです。
そうすることで、選択までの動作をシンプルにしてあげることができます。

4.入力フィールドの大きさは内容に合わせて

入力フォームのタイトルを「読めばわかる」ではなく、入力フォームを「見ればわかる」にしてあげる配慮がUIデザインでは大切です。
そのためにプレースフォルダーを有効に活用しましょう。