Webの「ボタン」と「フォーム」と「動的コンテンツ」は事前にデザインを考えよう

スマートキャンプ デザインブログ デザイナーの葉栗です。

WebサービスのUIをデザインするうえで、ボタンやチェックボックスなどいくつかのコンポーネント（部品）が存在します。

UIを作るだけだと静的なものですが、実際にユーザーが触れる段階ではいくつかの状態が存在します。

カーソルが上にのったとき、クリックしたとき、入力内容がエラーだったとき....など

エンジニアは開発の際、この「場合分け」を考慮して作っていきます。
そこで、今回はデザイン段階で事前に考えておきたいコンポーネントの状態を紹介します。

今回は「パソコンで閲覧すること」を想定しています。まとめているのは、最低限にしぼっていますので、「これも必要だよね」という議論をする際に読んでいただければと思います。

ボタンデザインの「5つの状態」

UIを考えるうえで欠かせないボタンですが、デザインパターンとしては最低でも5つ必要です。この5つの場合について、どのようなデザインになるかを事前に考えておきましょう。

1.Default
通常の状態

2.Hover
カーソルがボタン上にのった状態
デザイン例）拡大する、影ができる、明るくなる、暗くなる、色を変える

3.Click
ボタンをクリックしたときの状態
デザイン例）拡大する、影ができる、明るくなる、暗くなる、色を変える

4.Disabled
ボタンをクリックできない状態
デザイン例）グレーアウトする、透明にする

5.Loading
フォームなどで何か処理をしている状態
デザイン例）文字を変える、ローディングアイコンを回す

また、ボタンはユーザーの操作によるフィードバックの状態だけでなく、サイズの基準も考えていたほうがよいです。

UI作っている段階では忘れがちなのですが、横幅は以下の3種類のうちどれなのかを指定するとよいです。

1. 固定
ボタンの横幅が固定されていて、常に一定の横幅になる

2. 文言を基準にして可変になる
ボタン内の文言が増えれば、ボタンも横長になる

3. コンテナ基準にして可変になる
周囲の横幅が広がれば、ボタンも横長になる

フォームデザインの「5つの状態」

ユーザーに情報の入力をしてもらうフォームにはいくつかのコンポーネントが存在します。今回は、使用頻度が高い「テキストフィールド」に絞って、5つのパターンを紹介します。

1.Default
通常の状態

2.Focus
テキストフィールドをクリックして、入力可能になっている状態
デザイン例）線の色がを変える、背景の色を変える

3.Disabled
クリックできない、入力できない状態
デザイン例）例）グレーアウトする、透明にする

4.Success
入力内容が正しい状態
デザイン例）線の色がを変える、背景の色を変える、成功マークを表示する

5.Error
入力内容に誤りがある状態
デザイン例）線の色がを変える、背景の色を変える、失敗マークを表示する

フォーム系ではSuccessやErrorといった入力内容の正誤のチェックがあります。その中で特に考慮すべきところはエラーメッセージの表示方法です。

必須項目が入力されていなかったり、電話番号入力欄に数字以外が入力されていたりと、入力内容に誤りがあったときに表示されるメッセージです。

エラーメッセージの表示方法には大きく2種類あります。

・文字をフォーム内に直接挿入する（画像左）
・文字をフォーム内に間接的に挿入する（画像右）

動的な要素は「どこまで表示するか」「どこをスクロールさせるか」を考える

Webサイトには「動的」「静的」の2種類の状態が存在します。

例えば、弊社コーポレートサイトの会社情報は以下のようになっています。

この内容は、基本的に自分たちが編集しない限り内容が変わらない静的なものです。

一方で、弊社運営サービス「BOXIL（ボクシル）」内の口コミ機能の表示は以下のようになっています。

口コミはいくつでも投稿される可能性があり、かつ入力される文字数もユーザーによりバラバラで、動的なものです。

Webサービスをつくるうえでは、動的な状態の考慮が大切になってきます。今回は、「テキスト表示」「縦長コンテンツ」の2種類の動的な要素で事前に考えておきたいデザインについて紹介します。

今回はカードが3つ横に並んでいるUIを例にしています。長いタイトルが入力された場合に、どのような表示になるのか考えます。

考慮するポイントは2つあります。

・1行に収めるために、一部を表示するか
・高さを可変にして、すべて表示するか

次に縦長のコンテンツのときです。

リストやモーダルで縦に長く続き、画面からはみ出てしまう場合に、「どの部分をスクロールできるようにするのか」を考慮する必要があります。

ヘッダーは固定なのか、それとも一緒にスクロールされるのかを指定しておくと実際に開発するときに迷いません。

さいごにまとめると

今までの内容をまとめると以下の点を事前に注意するとよいです。

・ボタンやフォームのように、ユーザーが直接操作する時は、「どんな操作をする可能性があるか」を洗い出し、考える

・「成功したらどうするのか」「失敗したらどうするのか」を考える

・要素が「増えた時」「減った時」「無い時」を考える

必ずしも全ての状態を考慮しないといけないわけではなく、チームの状況によっても変わってきます。

そのため、事前にどこまでの想定が必要なのかをデザイナーとエンジニア間で決めておくとスムーズにプロダクトを作ることができます。

WRITER : 葉栗 雄貴 / haguri ( SMARTCAMP Designer & Engineer )
EDITOR : モリシゲ ( SMARTCAMP Designer & PR @MorishigeYuta )