優れたUI設計のためのレイアウト・配色・フォントの原則
UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
第一回から第三回まではUX/UIの基礎、第四回から第七回までは4回にわたり、優れたUXを設計するための5つの要素「戦略」「要件」「構造」「骨格」「表層」とそれを検証する方法についてそれぞれご紹介しました。
中でも、第六回のUX（ユーザーエクスペリエンス）設計における最後のステップ「表層」では、視覚デザインについて紹介しました。ここには、色使いやボタンの形状など、UI（ユーザーインターフェース）に関する設計が含まれます。
見栄えを改善するのはデザイナーの役割と思われていますが、UI設計の基本を理解していれば、誰でもUI改善のアイデアを考えることができます。
そこで今回からは、UIに優れたサイトを構築するにあたり必要な概念について解説していきたいと思います。
「UI/UXを知り、優れたWebサイトを構築する」連載一覧
1.UI/UXの基本（全三回）
・第一回：良いUI/UXとは何か？Amazonと楽天に見るユーザー体験の違い
2.UXに優れたサイトを構築するために検討するべき事項（全四回）
・第四回：優れたUXを設計するための戦略：ペルソナ法とストーリーボード
・第五回：優れたUX設計のための要件と構造：情報アーキテクチャとインタラクションデザイン
なぜシンプルなUIを作るのが難しいのか
UIを設計する際には、見た目に華やかで動きのあるデザインを行えば良いというわけではありません。前章で見たように、ユーザーには達成したい目的があり、それを実現する機能を使いたいと考えています。その機能やコンテンツを分かりやすい形で提供するのが良いUIとなるのです。
デザイン業界では要素を減らしたシンプルな設計が良いものとされています。（参考：なぜデザインはシンプルな方が良いのか）
「デザインでは引き算が重要」「Less is more（少ないことはより多くを得ることにつながる）」といった格言をよく耳にします。要素が少ないほど、ユーザーへ伝達したい情報が簡潔に伝わり、かつ、実装する時間や予算も少なく済みます。iPhoneが既存のフィーチャーフォン（いわゆるガラケー）よりも人気を集めたのは、物理ボタンを排除し、操作をシンプルにした面が大きいでしょう。
UIが優れているのは、それだけでも大きな競争優位につながります。ボタンの色や形状を変えただけで売り上げが2倍になったというような例も見受けられるように、シンプルなUIを心がけると、Webサイトの成果へと直結するのです。
シンプルなデザインにはメリットが大きいものの、その設計には“頭を使う”必要があります。ユーザーが本当に欲しいと思う要素を選び出すのは、要素を増やしていくより難しい作業です。ユーザビリティテストなどを通して、定性的・定量的な分析を行い、文脈に応じて最適なデザインを設計する必要があります。
UIの要素
レイアウト
UI設計を行う上で “非デザイナー “が必ず覚えるべき概念はレイアウトに関する4つの原則です。（参考：ウェブデザインに応用するデザインの4つの基本原則）
近接
「関連する要素は近づけ、そうでない要素は離す。」関連する情報がグループ化されて見えるため、自然と情報の構造が理解できるようになります。
グループ間の距離についても同様で、常に等間隔に配置するよりも、意味の近いグループ同士を近づけるのが原則です。
整列
「すべての要素を意識的に並べる。」左揃え、中央揃え、右揃えを適用し、複数の要素を整列させると、情報がよりまとまって見えるようになります。
「近接」の原則を適用しただけでは、無造作にグループが作られているだけなので、一目で情報を理解するのが難しい場合があります。「整列」の原則を適用すると、見た目に美しく、すぐに情報の構造が理解できます。
強弱（コントラスト）
「要素同士の違いを際立たせる。」表示する文言やマークは、それぞれ重要性が異なります。文章の中であれば見出しが重要であり、参考資料は重要度が低いと言えるでしょう。
色（黒と白、赤と青）、サイズ（大と小）、形（丸と四角）、線（太いと細い）といった要素のうち、2要素以上が異なる要素同士は、コントラストが際立ちます。
反復
「要素の一貫性を保つ。」Webサイトの中で、同じデザイン要素を繰り返すと、全体で統一された印象を与えます。ボタンの色や大きさ形状などを反復すると、自然とデザイン要素の意味が理解できるため、使い勝手が高まります。
リンクテキストは常に青にする、ボタンは常に角丸にする、といった方針を一貫して適用します。
色
UIを決める上で配色は重要な要素の一つです。使用する色が多く、まとまりがないと雑多な印象を与えてしまい、企業の信頼感を損ねてしまう恐れもあります。逆に、無難な色ばかりを使っていると、印象が薄く、伝えたいメッセージが伝わらないかもしれません。
配色を検討する上で覚えておきたいのが「70：25：5の法則」です（参考：デザインにおける「配色」の基本）。それぞれベースカラー、メインカラー、アクセントカラーの割合を示し、この配分を維持するだけで、配色のバランスが良くなると言われています。
まず、ベースカラーは背景などに使われる色で、可読性を高めるために白やグレーなどを採用します。
次に、メインカラーはロゴやバナー、メインコンテンツなどに使う主要な色であり、Webサイトの印象を大きく左右します。配色を決める際には、メインカラーを始めに決定するのが推奨されます。
そして、アクセントカラーは「購入申し込みボタン」などの、ひときわ目立たせたい箇所に利用する色です。他の要素とは異なる配色にするのがコツです。
「70：25：5の法則」を使ったWebサイトの配色例
メインカラーはブランドイメージに大きく影響されます。理性的な印象を与えたければ青、情熱的な印象を与えたければ赤、といったように顧客に伝えたいメッセージによって配色を決定します。
例えば、B2B向けの印象が強いDellやヒューレットパッカードは青色を使っていますし、B2C領域ではYouTubeの赤やAmazonのオレンジなどが利用されています。
B2Bサイトの配色例。Dell（http://www.dell.co.jp/）
B2Cサイトの配色例。Amazon（https://www.amazon.co.jp/）
アクセントカラーを決める際には、他の色との組み合わせを考える必要があります。色の組み合わせを良く見せる方法として、様々な法則が提案されてきました。色相環と呼ばれる虹色の輪に、メインカラーを置き、色相環を3分割するように他の2色を決める「トライアド」が代表例です。
配色は法則性によって成り立つ部分が大きいため、デザイン経験の浅い開発者は、配色ツールやテンプレートに従うと効率的に優れた配色が行えます。配色例を参照したり、配色の作成・保存を行ったりできるAdobe Color CCは優れたツールとして高い評判を得ています。
Adobe Color CC（https://color.adobe.com/ja/create/color-wheel/）
フォント
フォントは重要なデザイン要素ではあるものの、日本語環境でWebサイトを作成する上では採用できる選択肢が少ないのが現状です。数千文字を超える漢字を全てデザインする必要があるため、英文に比べて和文のフォント自体があまり開発されてきませんでした。また、Webサイトを表示するのは、ユーザーのPC・スマホ環境であるため、Webサイト側が制御できる余地が少ないという背景があります。
日本語のフォントには大きく分けて「明朝体」と「ゴシック体」があります。明朝体は“トメ・ハネ”の部分に山ができるのに対し、ゴシック体は山がほとんどなく、縦線と横線の長さがほとんど同じになっているのが特徴です。
一般的には、長い文章には可読性の高い明朝体、プレゼンテーション資料などにはゴシック体が利用される場面が多く見られます。
短い文言で強い印象を与える必要のあるWebサイトの場合、ゴシック体の利用が一般的です。
具体的には、Macで利用される「ヒラギノ角ゴ Pro W3」、Windowsの「メイリオ」、ブラウザ標準の「Arial」「sans-serif」などを指定すると良いでしょう。
まとめ
UIはシンプルであるほど良いと言われていますが、ユーザーが本当に欲しいと思う要素のみを選び出し、デザインに落とし込むのは中々難しい作業でもあります。
しかし、レイアウトの原則や、カラー、フォントについてそれぞれ理解を深めていけば、非デザイナーでもUI改善案を出すことは可能です。まずは基本を押さえつつ、そこから自分のサイトに合ったUIを模索していきましょう。
次の記事：優れたUI設計のために知っておきたい4種類のデザイン手法
