優れたWebサービスを作るために知っておきたい、UIを構成する5つの基礎的な要素
悩み多きディレクターの皆様。
こんにちは。Tokyo Otaku Mode （以下TOM）ディレクターの青芝です。
Webサービスを考えるうえで、誰もが一度は頭を悩ませる UI （User Interface）。 User Interface（ユーザーインターフェイス）とは、ユーザーがWebサービスを利用するうえで直接操作する画面のことを指しますが、ひと言で「UI」と言っても、そこには文字や画像の見せ方、マウスのクリックや指のタッチに反応したときの動き、画面全体のレイアウトなど、さまざまな構成要素がかかわってきます。
それら一つひとつの性格や特徴を考慮し、しっかりと設計しておかなければ、使いやすいWebサービスを作ることはできません。今回は、WebサービスのUIを考える際に知っていると役立つ知識のなかから、基礎的な５つの要素を紹介していきます。
- 正しい文章構造について
- 人の感情を動かす色について
- バランスの良い配色について
- 気持ちの良い比率について
- トレンドを踏まえた設計について
よくできたUIは、これらの要素を吟味して上手に組み立てられた最高の料理とも言えます。UIを構成する基本的な要素を理解して、最高のレシピを作れるようになりましょう！
正しい文章構造
Webページはなにでできていますか？という問に対して、最も正解に近い回答は「HTMLでできている」になるでしょう。HTMLは、ブラウザに表示される最終的な出力結果であり、最もユーザーに近い言語だからです。HTMLの役割は、ドキュメントに書かれた文字に対して構造上の意味合いを持たせることにあります。
人間は書かれた文字列や、文字の書かれ方を読み取って、その意味を把握する能力を持っています。しかし、コンピューターは「これは見出しです」と書かれていても、その意味自体を理解する能力を持っていません。そのため、コンピューターに対して、ドキュメントに書かれた文字をどのように扱ってほしいのかを宣言する必要があります。
HTMLは、「これは見出しです」という文字列に対して「この文章を見出しとして扱いなさい」という情報を加えることができます。つまり、文章をWebページとして公開するには、文章の構造を定義しなければならないということです。
文章構造の基本的な形は、非常にシンプルで簡単なものです。
まず、その文章がなにについて書かれたものなのかを表すタイトルを書きます。そして、文章を必要に応じていくつかの章に切り分け、見出しと段落によってまとまりを作ります。必要となる作業は、たったこれだけです。それ以外の細かい部分は応用になります。
Webページでは、そのページで取り扱う話題以外の部分に、別のページを参照するためのナビゲーションや、ヘッダー・フッターなどの体裁が置かれます。
文章構造を理解して得られるメリットは、ブラウザに表示されて目に見えるようになった部分以外にも、重要度や意味などのメタ情報があるのだと考えられるようになることです。そのため、コンテンツがない状態でもワイヤーフレームを設計しやすくなります。見た目以外を論理的に考えられることは、UIを設計するうえで大きな強みになるのです。
人の感情を動かす色
色には、人の感情を動かす効果があると言われています。逆に言えば、人は色からなにかを感じ取る能力を持っているということになります。
色は、デザインの領域でとても重要な役割を担っていますが、デザイナー以外の人も色について知っておく価値があります。なぜなら、仕事上のさまざまな場面で色についての知識を活かせる瞬間が訪れるからです。
これから、人が色を見たときにどのようなイメージを抱き、なにを連想するかについて紹介します。以下の内容はほんの一例ですが、色の使い方次第で人になにかを伝えることができるという事実に注目していただけると幸いです。
色相
- 赤：情熱的・衝動的・活動的、破壊や暴力
- 橙：暖かさ・家庭的・自由、知恵や推察力
- 黄：好奇心・向上心、軽快さや若さ
- 緑：平和・協力・自然、穏やかさ
- 青：冷静・誠実・清潔
- 白：清潔・純粋・天国
- 黒：恐怖・悪・沈黙・男性的
色調（トーン）
- ビビッドトーン：鮮やかな色、活動的、子供
- ブライトトーン：明るい色、元気
- ライトトーン ：浅い色、爽やか、ポップ
- ペールトーン ：薄い色、ロマンチック
- ソフトトーン ：柔らかい色、穏やか、優しさ
- ダルトーン ：鈍い色、自然な、複雑な
- ダークトーン ：暗い色、渋い、格調高い
- ディープトーン：深い色、伝統的、和風
色の持つ意味を理解して得られるメリットは、Webページやロゴマークに使用する色を論理的に考えられるようになることです。なんとなく好きだからという理由で適当に決めた色では、説得力に欠けるだけでなく、期待する効果を引き出すことができません。UIの設計にかかわる人は、なぜその色を使うのかを説明できることが望ましいでしょう。
バランスの良い配色
Webページに限らずデザインを必要とするものは、ほとんどの場合、複数の色を組み合わせて作られています。色は、それ単体でなにかを連想させるような効果を持っていますが、複数の色を組み合わせることによって、相乗効果を発揮することができるからです。
例えば、Webサイト全体になんらかの雰囲気を作り出したい場合、意図する効果が出るような色彩設計が求められます。厳密な設計はプロに任せるとしても、大まかな色の相性やバランスを知っておくことは、決して無駄にはなりません。
配色とは、２つ以上の色を組み合わせた色合いのことで、人が心地良いと感じる調和の取れた色の組み合わせを導き出すことが、UI設計をするうえで大事になります。
Webサービスの配色は、メイン、サブ、アクセントの３つを決めることから始まります。その際、サブカラーやアクセントカラーを２種類用意しても構いません。ただし、配色はバランスが重要です。使う色を増やしすぎるとバランスを保つことが難しくなりますので、最初はできるだけ控えめに設定したほうがいいでしょう。
配色のバランスは [7 : 2.5 : 0.5] の比率で設計することが基本とされています。全体のうちメインカラーを7割、サブカラー2.5割、アクセントカラーを0.5割程度にすると、バランス良く見えるようです。
メインカラー
配色のなかで最も大きな面積を占める色をメインカラーと言います。サービス全体の雰囲気を決定付ける大切な色で、その多くはブランドカラーや、サービスのコンセプトに基づいて決定されます。
サブカラー
配色のなかでメインカラーの次に大きな面積を彩る色のことをサブカラーと言います。主役ではありませんが、メインカラーを補う立派な役割を果たす色です。サブカラーは、メインカラーと同じ色相で彩度や明度を変えたり、同じ彩度や明度で色相を変えて詰めていきます。
アクセントカラー
配色のなかで最も面積が小さいものの、最も目立つ色がアクセントカラーです。基本的に、メインカラーと相反する色を用いることで、デザインのなかに刺激や引き締めの効果をもたらします。例えば、メインカラーが寒色であれば暖色を、暗い色であれば明るい色を用います。
参考サイト
配色の効果を理解して得られるメリットは、クライアントやデザイナーとの話のなかで、目的に応じて自ら提案や修正を行えることにあります。単純に「目立たせたいから」といった理由ではなく、「元気で活発な印象を与えるためにはこの配色にしましょう」という筋の通った説明をすることができるので、相手からの同意も得やすくなるでしょう。
気持ちの良い比率（アスペクト比）
「アスペクト比」とは、二次元で表される物の長辺と短辺との比率を指す言葉です。コンピューターのディスプレイやスマートフォンの画面サイズを表す際に登場するので、知っている方も多いのではないでしょうか。
人には、美しいと感じるバランスの良い比率や、ふだんの生活でなじみのある比率というものがあります。例えば、A4、B5などの紙のサイズは白銀比と呼ばれる[1:1.414]で作られています。また、黄金比という比率[1:1.618]は、デザインや芸術、さらに数学の分野において「最も美しい比率」と言われています（それぞれ短辺：長辺の比率）。
実は、Webページを作る際にもアスペクト比を考えることがあります。複数カラムで構成されるページのコンテンツとサイドバーのサイズや、キービジュアルの画像のサイズを決定するときなどです。
Webページは、画面の大きさや解像度に影響を受けるので、必ずしも守らなければならないルールではありませんが、縦と横のバランスを考えることで、より使いやすいUIを実現できるようになります。
参考サイト
- 黄金比計算ツール：http://zapanet.info/blog/item/1298
- 白銀比計算ツール：http://zapanet.info/blog/item/1300
トレンドを踏まえた設計
トレンドにはふたつの種類があります。ひとつは一時的なブームで盛り上がったあと、跡形もなく忘れ去られてしまうもの。そしてもうひとつは、新しい刺激として迎え入れられたあと、一般的に浸透して個性を失い、無意識のうちに消費し続けるものです。
ここで言うトレンドは後者を指し、この現象は「コモディティ化（汎用品化）」とも言われます。UIを考えるうえでサービスの利用者となる人たちがなにを消費しているのかに注目するのは、とても大事なことなのです。
例えば、Webページ全体の横幅を決めるときには、世の中で最も普及しているディスプレイのサイズを参考にすることがあります。PCよりもスマートフォンで多く使われるサービスであれば、縦長の表示を前提にしたデザインにしなければなりません。
また、ハイテクやデザインに興味のある人にとって刺激的なUIであっても、ふだんコンピューターを使い慣れていない人にとって意味不明なUIでは、失敗する確率が非常に高くなるでしょう。
時代の流れのなかで、自分たちのサービスをどの位置に置くべきかを考えたときに、自然とUIの方向性も決まってくるはずです。例えば、スマートフォンの利用者数が、携帯電話（ガラケー）の利用者数を超えたときのように、最新のトレンドと日常化したトレンドとの境界線を意識しておくことが有効に働くのです。
まとめ
まとめに入る前に結論を書きます。実は、UIの設計に明確な答えはありません。Webサービスにとって最適なUIとは、サービスの目的やターゲットごとに異なるからです。だからこそ、ディレクターという立場の人がしっかりと基礎知識を持って挑まなければならない分野でもあります。
さらに、日々追加されるコンテンツや、日々変化するユーザー、新しい端末の登場や競合サービスの出現など、変動要因をあげればきりがありません。そのような状況下で、“いまできること”にフォーカスして落としどころを探していくのも、ディレクターの醍醐味ではないかと思います。
それでは、優れたWebサービスを作るために知っておきたい、UIを構成する基礎的な５つの要素をまとめておきましょう。
- 正しい文章構造
- 人の感情を動かす色
- バランスの良い配色
- 気持ちの良い比率
- トレンドを踏まえた設計
ここまで書いておいてなんですが、世界中から1,600万人ものファンを集めるTOMのWebサイトは、まだまだ私たちが理想とする形からはほど遠い状態です。変化の激しいスタートアップでは、理想よりも現実を優先させることが多々あるからです。
現在TOMでは、そんな悩み多きスタートアップに参加して一緒に世界を盛り上げたい！という仲間を募集しています。我こそはと思った方は、詳しい募集内容をご覧ください。
####現在 Tokyo Otaku Mode で募集しているメンバーはこちら！
