2018年06月

11

月曜日の投稿

大藪 博幸
投稿者:大藪 博幸
(Webディレクター)

2018年06月11日

より良い進め方って、なんだろう?
UI・UX について今考えていること

Webディレクター.docx

大藪 博幸
投稿者:大藪 博幸(Webディレクター)

こんにちは、ディレクターの大藪です。

私たち Web 制作会社は、クライアントの Web サイトを日々制作していますが、一般的なプロダクトとは違って、最初から「出来上がっているもの」を売るわけではありません。何もないゼロのところからスタートし、どんなサイトにするのか相談しながら、時間をかけて仕様を決めて作っていきます。

そんな Web 制作の工程の中で、なかなかクライアントと認識を共有するのが難しいのが、「UI(User Interface)・UX(User Experience)」の部分ではないでしょうか。

UI・UX は Web だけに使われる言葉ではありませんが、Web 上で使う場合として少し説明するとこんな感じかなと思います。

UI(User Interface)
デザインや文字などユーザーの目に入る全ての情報のこと。「このサイトは飲食系っぽいデザイン」「男性向けのサイトだ」「レイアウトがわかりやすい」など、ユーザーが目にして感じることも UI と言うことがあるそうです。

UX(User Experience)
Webを通じて得られる体験のこと。見たい情報が期待どおり得られる、お問合せまでの流れがスムーズでわかりやすいなど、ユーザーがそのサイトを利用した結果の「体感」や「体験」のことを指しています。(ECサイトで購入した商品がユーザの手元に届くまでをひっくるめて UX と言うこともあるようです。)

と、こんな風に説明してみましたが、本来 UI・UX の話はもっと広くて深いです。この話を始めると長くなってしまうので、今回は自分なりの所感というか、ディレクターとして UI・UX について感じていることについて、経験談を一例に書いてみたいと思います。

Web上の「動き」を共有するむずかしさ。

Web サイト制作(ここでは内容を決めるプランニング以降の段階を指します)の基本的な進め方をざっくり言うと、「1.ワイヤーフレーム作成 → 2.デザイン → 3.コーディング」となります。各フェーズは FIX=クライアントと合意 してから次の工程に進むのが一般的です。

しかし、ここで問題になるのが「実際の Web 上の動き」を途中で確認できないこと。

まず、ワイヤーフレームでページ構成や導線を決めてから、デザイン確認に進みます。デザインデータは静止した1枚の絵のようなものなので、ページ構成などの見た目(デザインのトーン&マナーやレイアウトなど)は漏れなく確認できますが、画面上の遷移や操作性などの「動き」については、うまく共有できないことが多いのです。(もちろん、モデルサイトや様々な資料で補足しながら「動き」について出来るだけ認識共有はするのですが。)

例えば「ドロップダウンメニュー」。
ページ上部のヘッダー内にあるメニュー(グローバルナビゲーション)にマウスオンすると、そのメニューの下層ページ項目が下にズラっと出てくるアレです。

デザインデータで提案するときは「ドロップダウンメニューが出ている状態/出ていない状態」の 2枚で確認しますが、実際に Web 上でユーザーがマウスオンして下にメニューが現れるまでの「動き」は、最後のコーディングパートでの実装を経ないと確認することができません。

デザインが確定した時点では「動き部分はコーディング後に確認ください」と伝えて、制作を進めることになりますが、いざコーディングを実装してクライアントに見てもらうと、この「動き」部分で結構修正が入ることがあります。例えば…

  • ドロップダウンが表示されるスピードが遅い/早い
  • マウスオン表示だと意図せずドロップダウンが出てきてしまうので、クリックで表示するように変更したい。
  • ドロップダウンメニューが思ったよりも大きい。(サイズ感はデザイン時と変わらないのだが、モニター上で動きが付いて見ると感じ方が変わるのか?) etc.
     

通常の制作スケジュールだと、デザインFIX後に一気にコーディングして作り上げるスピード感で制作するので、実装した後に修正が入るとかなり痛いです。(最初にコーディングした工数が無駄になってしまう)

しかし、ここまで Web サイト上の「動き」が豊富になった今、最後に一気にコーディングして確認してもらうのではなく、サクっとモックアップ(見本的なもの)を作って、実際のWebサイトの「感じ」を早めに体感してもらうようにすることが必要なんじゃないか。

そう考えて、最近はなるべくモックを活用するようにシフトしています。しかし、それはそれで簡単ではないのも事実。どの部分の「動き」を握っておく必要があるのか。設計(ワイヤーフレーム)やデザイン段階から、そのあたりを十分意識して進める必要があるからです。そのおかげで、最近はスケジュールの引き方もだいぶ変わってきたような気がしています。

今の時代は、誰もが「 UI・UX 」上級者?

Webサイトをスマートフォンで見るのが当たり前になった今、Web の技術も合わせて進化し続けています。細かい動きなど、使っていて心地良いと感じる塩梅を、パソコンでもスマートフォンでも作り込むことが可能な時代です。

また、ユーザー側の経験値もすごく高くなっています。Webリテラシーがまったくない人でも、スマートフォン等で日々多くのサイトに触れているので、「見やすさ、使いやすさ」について繊細な感覚で体感し、それに慣れています。誰もが「UI・UX 上級者」になりつつある今、そこへの配慮を怠るとすぐに気づかれて、良い/悪いを判断される状況になりつつあると感じています。

実際、すぐれたユーザビリティを実現しているサイトには、一見なにげないようでかなり高度な技術が使われているのも事実です(某世界最大手の通販サイトなど)。ユーザーにはその体感が蓄積されているので、かなり高度なことまで「出来て当たり前」を求められてきている、そんな状況になりつつあると感じます。

つまり今の時代、求められる「良いサイト」のレベルは高い。
(そしてますます高くなると思われる。)

正直、制作側は大変ですが、そこを念頭に置いて臨んでいかないといけないし、そうする必要があると日々痛感しています。

まとめ

世の中の色々な技術のレベルが上がり、人が「良い」と感じるレベルも上がり続けています。Web にも同じようなことが求められてきているし、もはや進化は止まらないでしょう。

かつて、Web は主に情報を入手するツールでしたが、今は Web を通して「感じること」や「体感できること」も含めた良さが求められてきているのではないでしょうか。その変化とともに、これまでの Web の制作フローも変わっていく必要があると感じています。

プランナー・デザイナー・コーダーをはじめ、制作を司るディレクター自身も、より柔軟に変化に対応していけるように…そう改めて感じています。

この投稿を書いた人

大藪 博幸

大藪 博幸(おおやぶ ひろゆき)Webディレクター

マーケティング&セールス部所属。犬、美味しい食べ物、ゲーム(RPG)が好きです。 思い出し笑いが激しく、よく一人でニヤついている姿を目撃されてしまいます(笑)。 休日はテキトーに街ブラしたり、「あ、山行こう。」と、気紛れで登山に行ったりもします。

大藪 博幸が書いた他の記事を見る