Blog

おもにボタンデザインに機能上の意味をもたせて仕上げるWebデザイン手法
Jul 24 2015

Webデザインの素敵なひとつのゴールは、ビジュアルで伝えつつ、使いやすい操作性を取り入れてクライアントとユーザをつなぐことができることだと思っています。
ですが、私自身はWebデザインのキャリアをキャンペーンページからスタートしたため、使い勝手を高めるUIをどうグラフィックで表現するかすごく苦労しました。

ボタンの様々なところで違ってしまったり…試行錯誤の連続でした。

デザインは、同じ要素やあしらいを繰り返すことで人の認知を高め使いやすくすることが可能で、例えば「お気に入り」ボタンを全部同じデザインにすることで、押される確率が高まります。

つまりは、機能をまとめて、デザインを割り当てていくことは使いやすくすることになります。

また、デザインがまとめられていることで、更新が比較的スムーズになり素早い改善が可能になります。
特に管理画面・コーポレートサイトは似通ったパーツをどこでも使うことが多く、作り方によっては沢山のワイヤーからパーツだけ作れば良くなり、結果として作業効率が上がる場合も多いです。

ので、今回は私のデザインのルールづけの基本的な方法を特にボタンに焦点を当てて書いていこうと思います。

作業手順とボタンの割り当ての基準

私の場合、ワイヤーをもらったら全体の雰囲気のデザインから入ります(キーカラーなどを決める)。
大体ですが、色はまとめやすい3色程度に制限します。
その上でワイヤーの要素が出揃い、デザインがある程度固まった時点でボタンを洗い出して、それぞれの役割を割り当てていきます。

全体を作っていく中で、多少デザインがぶれるので、ユーザを視認性で混乱させず、更新しやすさなどを考慮してる旨をお話しして、多少デザインが変わることをクライアントから了承を得ておきます。

初校の時、時間が許せばボタンのリスト一覧を提出しておきます。
修正要望などを聞いて、機能の修正を行いデザインをブラッシュアップしていき、納品します。

ボタンの割り当ての基準ですが、そのサービスにとって大事なアクションを一番目立つようにするのが基準にし、サービスごとに発生する要件(押し間違えるとリスクの高いボタンのあしらいや動線として手順を踏む必要があるものをどうするかなど)を照らし合わせて、見た目の重み付けを検証していきます。

サンプルサイトでケーススタディ

サンプルサイトは「月に売り上げレポートを提出することで、データを検索できる」にしました。
ログイン後のあるカテゴリーをクリックした場合の検索画面で、月の売り上げを提出してもらう・データの検索がサービスのキモとなります。

キーカラーとリンクカラーに青
ニュートラルカラー(補色)に黒の明度違いを3色
アクセントにオレンジ
ある識別色にピンクと緑(後ほど説明)

というごくシンプルなデザインです。

それではこのサイトを元に、各ボタンの割り当てをしていきます。

</p>

アクションボタン(強ボタン)

そのサイトで一番大事なアクションとなるものにこの役割を割り当てます。

(例)

そのサイトの管理者に連絡がいく(例: サービス紹介サイトのお問い合わせ)
→コミュニケーションが発生する
検索結果が表示される(例:某検索サイトの検索ボタン)
そのWebページで完結する動線のボタン(例:ポップアップ画面で何かを承認する)
ある識別色にピンクと緑(後ほど説明)

などです。
基本的に1Pに1つなど、強い縛りを設けることで敢えてこの色のボタンを立たせたりします。

デザインのあしらいですが、すっきりとした印象のコーポレートサイトなら、キーカラーか補色を割り当てるか、敢えて他のボタンと形を変える、線を太くするなど、ホワイトスペースを敢えて取るなど、一番目立つようにしていきます。

今回のサンプルでは、一番機能のキモである「検索ボタン」と「データ提出ボタン」をこのあしらいにし(※データ提出ボタンはグローバルナビに置いてあり、特定の条件の時以外右エリアに出て来ないようにしたため)、角Rだと見出しと区別がつきづらそうなので半円が左右に置かれてるようなボタンにしました。

自己完結ボタン

サーバー、管理者などとのコミュニケーションが発生せず、自分の操作のみで変更・修正ができる機能はこのデザインを割り当てます。

(例)

クリア
キャンセル
閉じる

自己完結するボタンなので、強く目立つ色は配色し、大体ニュートラルカラーを使用する場合が多いです。
そのかわり、アイコン+文字にするなどし、タブレットなどのことも考えた領域を取ります。
また、閉じるボタンは、この考え方だとモーダルがあると目立たない場合もあるので、色や文字の色は自己完結ボタンと一緒にして枠をつけるなどの対応をします。