UIUXデザイン

UIデザインとは?

UI は ユーザー インターフェイス(User Interface)の略です。

UIデザインとは、まさにそのインターフェースをデザインすること。
つまり「ユーザーが快適に、かつ直感的に、
目的を達成できる(目的にたどり着ける)ために設計されたデザイン」のことを指します。

例えば、銀行のATMであれば、老若男女全ての人が、
振り込みや引き出しの操作が簡単にできるUIになっています。
駅の自動改札機で言えば、どこに切符を挿入するか迷うことのないように、
誰にでもわかりやすいUIになっているかと思います。

また、ネットで何かを検索する時、画面のどこにキーワードを入力すればよいのかすぐに視認できます。
ポータルサイトで今日のニュースを見たければ、
どこに最新の記事があるのかユーザーは迷うことなく遷移できると思います。

これはUIデザインが、ユーザー目線で設計され、優れているからだと言えるでしょう。
このように、ユーザーが直接的に操作する部分、
インターフェースを設計・デザインする人ことをUIデザイナーと呼んでいます。

大きなインターフェイスデザイン/縦長のサイト

今ままでのPCサイトは、要素(コンテンツ)を詰め込んで配置する設計が主流でした。
現在では、大きなインターフェイスデザインを配置し、サイト全体の要素密度は低くなり、
要素が大きくなることにより、必然とページは長くなっている傾向です。

海外企業の日本進出や、先駆的な目を持つWebデザイナー、それを採用する企業のWebサイトによって、
徐々に日本でも広まってきました。この流れはフラットデザインとも呼応し、
2013年以降にリニューアルされたWebサイトの多くが、この大きなインターフェイスデザイン/縦長のサイトに基づいた設計デザインになっています。

1カラムレイアウト

今までのサイトは、右もしくは左にメニューバーやバナーなどを設けた
2カラムのレイアウトデザインがPCサイトの場合のUIの主流でした。
ECサイトや情報サイトなどの情報量が多いサイトでは、3カラムレイアウトも多くみられました。
現在では、左右のカラムを取り去り、コンテンツ部分だけにフォーカスする、1カラムレイアウトが増えてきています。

コンテンツの密度が少ないため、本当に必要なコンテンツに注目してもらえるようになりました。
文字はより読みやすく、画像はより大きく表示されています。

情報量が減った分、全てのページを見てもらえない可能性もあるので、
ユーザへの動線の設計は、より慎重に考えて行わなければなりません。

多くの情報量があるサイト(メガサイト)などは、
階層が多くまた今まで誘導に使っていたカラムも減る為、
ユーザーがどのページかわからずに迷ってしまう
場合もあり、1カラムレイアウトが適切な解でないことも多く、
その判断は慎重に行わなければなりません。

中央揃え

1カラムレイアウトの問題の一つは、文字の改行です。
文字が横幅いっぱいまで伸び、レイアウト的に綺麗に保つのが難しくなりました。
1行の文字数が40を超えると、人は読みづらいと感じるとも言われています。
1カラムになったからといって、何も考えず、
横幅いっぱいに文字を表示させるのは、避けましょう!!

これを解決する一つのアイデアが、中央揃えの併用です。
横幅が広い1カラムレイアウトでは、
中央揃えと左揃えをいかにうまく組み合わせるかが、
デザインのポイントになってきています。

1カラムを採用する多くのサイトでは、中央揃えと左揃えを上手に混在させ、
ストレスなく文字を読ませることが求められている。

中央揃えの活用には、いくつかの注意点があります。
まず、ユーザの目線を無視した中央揃えは避けなくてはなりません。

例えば、長文を中央揃えにすると、文章の開始点が行によって変わるため、
読みにくくなってしまいます。
もし中央揃えを使うのであれば、あまり改行されない短い文章、
長い文章であれば左揃えにする必要があります。

また、近接する要素との関係性にも配慮が必要です。
近接要素が横幅いっぱいの時は、中央揃えで配置しても、収まりの良くまとまります。
しかし、近接要素が横幅いっぱいに存在しない場合、
中央揃えは中途半端な位置に浮遊しているように見えてしまいます。
そのため、ボックスやボーダーなどを駆使して、中央揃えを違和感なく見せる工夫が必要となります。

1や2のように、周辺に「中央である」と認識できる要素があれば、
中央揃えの混在もキレイに見える。

一方、3のように、周辺要素との関係で中央と認識しにくい場合、
中途半端な位置に表示されている印象を与えやすい。

また4のように、長すぎる文章は、見た目はシンメトリーでキレイに整列しているように見えて、
読みにくくなることもある。

固定ヘッダ

固定ヘッダも、すっかり一般化してきました。多くの場合、
ここにはグローバルナビゲーションが搭載されます。
ページ内のどの位置にいてもすぐに主要コンテンツに横移動できる固定ヘッダは、
サイドナビを持たず、ページが長くなる傾向の現在のUIにおいて、
ユーザビリティを担保する合理的な機能です。

ただし、固定ヘッダには、必要がないときにもそのエリアを占拠してしまう、
というデメリットがあります。
そのため、ヘッダはできるだけ薄く仕上げなければなりません。
かつてのPCサイトでよく見かけたような、多段式の分厚いヘッダは採用しにくくなります。

このことは、ヘッダ内に配置する要素の絞り込みが必要になることを意味します
。格納する要素が多いと、ヘッダはぶ厚くなり、固定化させづらくなります。
メニュー数は絞るべき、というのは以前から言われてきたことですが、
このことをより強く意識していく必要が出てきています。

固定式の左ナビゲーション

かつての2カラムレイアウトが主流だった時代の左ナビとは、構造や機能が異なっています。

画面左に固定されて、スクロールに追随させるのが最近多いパターンです。
また、メインコンテンツ部分は、基本的には1カラムレイアウトで、
画面幅に合わせて伸縮させるリキッドレイアウトが採用されることも多いです。

様々な企業が導入し始めている左メニュー。
固定式で、マウスオーバーやクリックでメニュー展開するものが多い。

このような設計は、アプリライクな操作感をもたらします。
また、マルチデバイス対応にしやすくなる特徴もあります。
スマートフォンファーストで設計し、
レスポンシブWebやリキッドレイアウトでPCにも対応させるような場合に、
このような構造が採用されやすい傾向があります。

ただし、注意しておかなければいけないのは、このような新しいレイアウトは、
一般ユーザにはとっつきにくい印象を与える危険性もあります。

また、メニューを多階層化させる際には、
クリックやマウスオーバーで下層メニューを引き出すような操作も必要となるため、
操作の難易度は上がります。

固定左ナビのデメリットも踏まえ、ユーザのリテラシー、
全体の構造などから、導入の妥当性を見極める必要があります

リキッドレイアウト

デバイスが多様化する中で、画面解像度はかつてないバラエティとなってきています。
以前は、横幅960~980pxあたりに収めていれば概ね問題なかったですが、
この定石は通用しにくくなってきました。このような解像度の多用化に対する一つの回答が、
画面幅に合わせてレイアウトを伸縮できるリキッドレイアウトです。

リキッドレイアウトは、要素や画像をピクセルではなく、%で指定します。
そのため、どのようなサイズ、解像度の画面で見ても、ある一定のバランスでレイアウトされます。
小さな画面に合わせた時のデメリットと、
大きな画面に合わせたときのデメリットの両方を吸収することができます。

上記サイトでは、画面の幅に合わせてレイアウトや画像が可変する。
ロゴや文字サイズは変わらず、あくまでレイアウトと画像の伸縮だけでバランスをとる構造になっている。

留意しないといけないのは、これは各画面に「最適化」されたレイアウトではない、ということです。
様々な解像度の画面を想定し、一番破綻が少ないと思われる最大公約数的な妥協点をまとめ、レイアウトする手法です。
ある特定のサイズで感じるバランスの悪さは、ある程度許容しないといけない、
ある意味非常にWebらしいレイアウトともいえます。

立体表現への回帰

MicrosoftがWindows 8で、AppleがiOS7で提唱したフラットデザインは、
それ以前に支配的だった装飾過多なスキューモフィックに対するカウンターとして強いインパクトを残し、アプリUIの世界では瞬く間に一般化しました。
この流れはPCサイトにも波及し、
2013年以降にリニューアルされているPCサイトの多くが、
フラットデザインを取り入れています。

一方で、ここにきて行き過ぎたフラット化の問題も表出してきました。
フラット化は、デザインの機能的側面に大きな足かせを与えることになります。
特に画面要素が多いWebサイトにおいては、立体表現がないことで、
クリック要素と非クリック要素の区別がつきにくくなったり、
情報の重みづけや関連性が分かりにくくなったりするケースも出てきました。
フラットデザインは、見た目のシンプルさや親しみやすさとは裏腹に、難易度の高いデザインであるともいえます。

意欲的にフラットデザインを取り入れているが、
クリックできる場所とそうでない場所の区別が付きにくく、
やや学習が必要なUIといえる。

このような行き過ぎたフラット化の反省から、
最近では立体表現を再び取り入れる動きが出はじめてきました。
その象徴と言えるのが、Googleが提唱するマテリアルデザインです。
マテリアルデザインでは、レイヤーや影などといった現実世界に存在する3次元表現の積極的な活用をうたっており、UIは再び立体に回帰すべき、というメッセージとして受け取ることができます。

クリッカブル要素には積極的に影が用いられている。

UIはファッションではないので、流行に合わせてフラットデザインにしたり、マテリアルデザインにしたり、という判断は誤っているといえます。
適材適所で使い分けましょう!!

スクロールと連動したギミック

PCサイトのページも長くなり、スクロールが必須の行為となる中で、スクロールに反応するようなUI上の工夫も多く見られるようになってきました。

数年前に流行したパララックス(視差効果)を使った表現も、この流れの一つといえます。
ただ、現在はパララックスほどの大掛かりな仕掛けは少なくなっており、
スクロールに合わせてメニュー要素が動いたり、
ある位置に来るとポップアップが展開したり、文字がフェードインしたり、
といったもう少し控えめなギミックが目立ちます。

スクロールに合わせて要素が動くことで、もっとスクロールさせてみよう、
というユーザ心理が生まれくる。
運送会社のリクサスのサイトでは、長い1ページに対して、
トラックの旅を想起させるような仕掛けが施されている。

これは、JavaScriptのライブラリの普及、CanvasやCSSアニメーションの一般化で、UIを動かすことがより簡単になり、
アニメーションを用いたUIの心地よさを追求しやすくなったためと考えられます。

ただし、動くUIは、人の目が動くものに反応してしまう生理的特性に訴えかけるものです。
それゆえに、計画なく過剰に動かすと、目が休まらない、落ち着かない、本来の情報に目が留まらない、
といったことを引き起こしかねません。
やたらと動かしてしまうのではなく、確実に効果が得られる個所への、最小限度の利用に留めるのが得策でしょう。

Webフォントの活用

Webフォントを採用すれば、OSにはない書体の表示が可能になります。
画像テキストを生成する必要がなくなり、更新性が高いサイトであっても、文字表現の幅が広がります。

海外ではGoogleなどがフリーで使える質の高い欧文Webフォントを積極的に公開しています。
欧文の場合、26×2種類(大文字・小文字)+記号しかないので、書体も比較的豊富で、現実的な選択肢となり、急速に普及しています。

日本国内でもその影響で、日本語のWebフォントを用いるケースが見られるようになってきました。

SVGの利用

Web上の画像はでは長らくJPEG、GIF、PNGが主流でしたが、ここに来て増えているのがSVG形式の画像です。

SVGの最大の特徴はベクターデータである点です。これにより、大きさや解像度に依存せず、
どのような環境でも、どのくらい拡大しても、常になめらかに表示させることが可能になりました。
サイズも軽く、アニメーションさせることも可能で、モバイル&マルチデバイスを前提とした閲覧に適した画像フォーマットといえます。

動画の活用

Flashが成熟期に入ったころ、UIと映像の融合が積極的に試みられていた時期がありました。

Flashの衰退とともに、PCサイトは動きのない表現が一般的になりましたが、ここに来て再び、動画をUIに組み込んだようなWebサイトが増えてきつつあります。

まとめ

トレンドは理解しながらも、それに使われるのではなく、選択肢の一つとしてうまく接していくことが、デザイナーには求められます。

UXとは

ある製品やサービスを利用したり、消費した時に得られる体験の総体。
個別の機能や使いやすさのみならず、ユーザが真にやりたいことを楽しく、心地よく実現できるかどうかを重視した概念である。
参照:IT用語辞典

ユーザーに心地よい体験(=理想のUX)をしてもらうためにはどうしたらいいか。その答えがUIに現れている。
だからデザインをしたなら「なぜこのデザインなのか」について、説明できないといけない。

WebのUXを考える上で大切なこと

WebのUXで大切なことは、ゴールを明確にすることと、ユーザーになりきることです。

ゴールを明確にする

ユーザーにサイトでどんな行動をしてほしいのか、サイトを見た結果どうしてほしいのかを明確にしておかないと、
アウトプットもぼやけたロジックにしかなりません。恣意的な行動を誘発して思うような結果が得られなくなってしまいますので、しっかりとしたゴールを設定しておきましょう。

サイトにおけるゴールは様々です。お問い合わせの送信なのか、
サイト内回遊なのか、申し込みの完了なのか、クライアントも含めプロジェクトメンバーで認識しておきましょう。

ユーザーになりきる

ユーザーがどんな趣味嗜好なのか、家族構成やリテラシーなどを加味した上で、
「どういう使い方をするのか」「何をしたいのか」実際に自分がその立場だったらどうするかを考えながら設計をしていきます。

ここで気をつけたいのは、人間なので「こういう風に動いてくれたらいいな」といった希望的観測が含まれてしまう場合があることです。
これを回避するにはペルソナを複数設定し、多方面からの利用シーンを想定する必要があります。子どもがいるいないでもかなり行動に差が出ます。

この2つだけ考えると、いくつかの指標をパターンとして設定できそうですが、そう単純にいかないところが難しいところです。
ざっくりと使いやすさという言葉について考えてみましょう。

ユーザーにとっての使いやすさとは何かを考える

いろいろ言ってきましたが、結局ユーザーにとっての使いやすさとは何なのか?

一言では表せられないですが、クライアントの伝えたい思い、
ターゲットの年齢層、性別、リテラシーの高さなど、同じ背景を持つウェブサイトはほぼ無いのではないかというほど千差万別です。

そういった背景を元にペルソナをたて、情報を整理して、ワイヤーフレームを作成して、デザインする。
これを繰り返し、ナレッジをためて「使いやすさ」をよりロジカルに、よりユーザーに寄り添ったカタチで表現できるようになっていくのではないかと思います。

使いやすさを学ぶために

より多くのデザインを見て、上流工程を想像してみるといったことでも十分力になると思っています。
ナビゲーションはファーストビューの上部にあるのか、下部にあるのか、もしくはハンバーガーメニューで格納されているのか、
といったことからナビゲーション開閉アニメーション、スクロールで展開していくアニメーション、コンテンツの表示順、
ボタンの大きさなどなど、いったいなぜその位置にその大きさで置かれているのかを想像して自分なりの予測を出してみることだけでも、トレーニングになると思います。

予測の精度を上げるために

もちろん最初からユーザーにとって使いやすい、理想のサイトを実現させるというのは至難の業です。
そのために実際の数値(ヒートマップや回遊経路、離脱ページなど)を見て、改修をして、より良い使い勝手を提供する必要があります。

ただ、UIを頻繁に変更したり、ガラッと変えてしまうというのは多くのユーザーにとってあまり好ましいものではない事実がありますので、
前述したような一連の考えを統合して、最初の予測の精度を上げていく必要があります。

ユーザーの行動を制御することも必要

さらに制作側である程度コントロールする必要もあります。

簡単なところでいくと暖色、寒色でも、温かみ、クールな印象などといった感情のコントロールが可能ですし、
Z型・F型といった視線の移動を利用した配置にしたりと、自然と誘導することが使い勝手の良さに繋がっていきます。

Z型の視線移動を利用したコンビニの陳列は有名な話ですが、こういった人間の無意識な行動についても知っておくと、サイトを設計する上で役立ちます。

ユーザーの心理に寄り添うように

ユーザーの心理を追求しながらUIを突き詰めていくことが、より良いUXに必要なことだと思います。

たとえば、嘘をつくときの人の視線のパターン、本当のことを言っていないときのパターン、
本当のことを言っているときのパターンなど統計によって得られている知識や先人たちの実験の結果などを総合して判断しています。

これは男女(性別だけではなく、男性的な思考か女性的な思考か)や年齢や生まれなどによっても変わるため、
プラス語りかけによって心理的にニュートラルな状態に持っていっています。

考え方はまったく一緒で、こういった知見を利用して設計を行っていく必要があります。

まとめ

UXを考えるにあたって一番重要なのは、ゴールとユーザーの2つについて明確にイメージすることで、それをUIに付け加える事で本当の意味での
ユーザーの使いやすさを設計する事が可能となります。

参考サイト