笑顔を創りたいWebディレクターの日常

某事業会社勤務のWebディレクター。つまり「なかのひと」やってます。Web業界からひょんなことで専門学校の先生に。そしてまたWeb現場に戻ったWebディレクターのブログ。

数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている8つのこと。

【スポンサーリンク】

なんかすごい思い付きで

www.adventar.org

に参加してみたんですけども。

気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。

ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様(謎)

そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。



 

Webディレクターとしてはえーと、もうすぐ丸12年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないですw が、まあ数千なら間違いなく。1万ページはどうかな・・・いやどうでもいいか。

 

1.サイト構造図を先につくる

そして突然に始まりますw

すんごい当たり前のことなんですけど、これがわからない初心者の人は多い。そのページの画面設計をするからといって、いきなりそのページのことを考え出してしまう。いやいやいや、それ以前に「文脈」というもののなかでそのページが何の役割を果たすのか、ユーザーに対して何を伝える、どんな体験をしてもらうためのページなのかがはっきりしないと、ページの設計なんぞできるはずがない。

「ユーザーはどこからこのページに来て、どこへ行くのか」

ページの画面構成のまえに、まずこれが定まってないとどこに何をどう置くのかなんて考えられないですよね。単一のLPでない限りは複数のページのまとまりの「Webサイト」として存在するのでしょうから、サイト内にまずその文脈があるはずで、それを整理するには各ページの画面構成のまえに、サイト全体の構造設計がされてないと。サイト構造図がなきゃナビゲーションだって決められないし。

ちなみに、サイト構造図の前に「サイト外~サイト内への文脈」ってのがあるはずで、どこからどうやってWebサイトに訪れるのか、Webサイトの後はどこへ行くのかというのはカスタマージャーニーマップで定義されているものですね。

 

2.いきなりデータ(PC)に向かわない

多くの人はPowerPointとかオンラインツールとか使っているのでしょうし、僕も使ってます。まあ、データで作るほうがきれいだし。でも、データでつくるのは最後の最後です。データ化するのはあくまでもきれいにする(見やすくする)ため、間違えた時に直しやすくするためであって、考える作業をPCがやってくれるわけではないです。

ワイヤーフレームというものそのものはべつに見栄えを競うものではないですから、色味なんていうのは誤解を恐れずに言えばどうでもいいんですよね。であれば、べつに絵の具が必要なわけでもなし、「思考をアウトプットすることに最もストレスの無いデバイス」を選ぶ必要があり、おそらく多くの人にとってそれは紙とペンだと思います。

どんなにPCの入力デバイスが発達したといっても、「画面」「マウス」「キーボード」という制約があるPCは、自由に発想して(ラフなもので良いから)すぐさまそれを具現化するという点においては、「紙」と「ペン」と「自分の手」にはかないません。だってすごいんですよ、自分の手&ペンのコンビは、オブジェクトを書いたままそのまま手を離さずに文字まで書けてしまうんですよ、はぁ、なんてすごいデバイスなんでしょう。だいじょうぶです頭おかしくなったわけではありませんご安心ください。

「このページはこういうページだからー、そうだなー、これをここに置くべきでー、イメージ画像は必要かなー、必要かー、いやでもこれ文字を見せようと思ったら位置はこっちか?いや、こっちか!」

こういうことを考えているときに、データにしてきれいにするとか、PCの操作で時間を取られるとか非常にナンセンスで、そもそもそこまで細かく作りこむ必要もない。それよりさっさと自分の脳内にあることを書き出して、トライ&エラーを繰り返すスピードを上げる方が大事なんですよね。

PCに向かうのなんか最後でいいんですよ。清書する程度のつもりで良いと思います。

 

3.なんのための「ワイヤーフレーム」なのかを明確に

「ワイヤーフレーム」という言葉が良くないのかなと思うけど、これはそもそも何も言ってない。「ワイヤーフレーム」というのは本来は3DCGの世界で使われていた言葉で(誰がWebの画面設計に持ってきたんだろう?)、定義をそのままそっくり持ってくるなら「ワイヤー(輪郭線)のみで表現されたなにか」でしかないわけです。

  • サイト全体の統一した基本画面構成を定義したもの
  • そのページの構成要素(≠レイアウト)を定義したもの
  • そのページの原稿となる内容を定義したもの

全く困ったことに、これらぜんぶ「ワイヤーフレーム」という呼称で呼ばれていたりするから大変。役割が全然違うので。画面構成案ワイヤーフレームとか、コンテンツワイヤーフレームとか僕は呼んだりしていますが、名前をどうするかはともかく「いま何を決めるためにこのワイヤーフレームをつくっているのか」をきちんと自身で定義しておかないと、その段階ではやらんでもいい不要な努力をしてしまったり、相手との議論のすれ違いを生みますね(クライアントに「あの時にそれを決めるべきということがわからなかった」と言われるディレクターあるある)。

 

4.入り口は「ユーザーの知りたいこと」、出口は「企業の伝えたいこと」

受託系のWebディレクターが陥りやすい罠として「クライアントからヒアリングした事象を整理してページに掲載すること」が、画面設計だと思ってしまうってのがありますね。企業が言いたいことなんてどうでもいいのに(言い過ぎ)

「製品名を連呼することに果たしてどれほどの意味があるのか」

っちゅうことです。

よくあるのが、クラウド系ツール(なんだそれ)で製品名とかライセンス名をタイトルや各見出しのラベリングに使ってしまうパターンですね。いや、おまえんとこのライセンス形態なんぞ知らんっちゅうに、と、ユーザーにしてみればそういう気持ちになってしまいます。「こういうことがしたい、そんな方はこちら」→「それに適したライセンスはこれ!」というアプローチが必要ですよね。

かといって、「ユーザーのベネフィットに」とか、「だからこそその企業の強みを整理してユーザーに分かるように伝えるべき」みたいな話にすぐになりがちなんですけれども、それも思考停止の一つになってしまっていて、べつにユーザーがそれを(無自覚にも)求めてないのならいらないんですよね。

「うちでそれ売ってます」

がわかるだけでユーザーの問題が解決して購入に進んでくれるならそれでいいんです。要するに、インターネットという場所である以上、入り口は必ずユーザーが自覚して求めていることでなければならず、TOPページに「〇〇はナンタラの未来を創造します」とか書かれても、お、おう・・・としか思わない。はたまた、どんなにスペックの高い製品でも、ユーザーがそれに対して理解ができないのならスペック情報を前に押し出しても意味がない。そのスペックで実現できることをうたい「あ、これオレの欲しかったやつや」と思ってもらわないといけないです。

たとえば、東京個別指導学院のページを見てみると、

習い事との両立(小学生) | 学習塾の【東京個別指導学院(TKG)】

なんていうコンテンツがあります。
言ってることは実は(たぶん)そんなに大層なことではなくて「自由にシフト組めるよ」ってことであり、たぶん「時間割(小学生) | 学習塾の【東京個別指導学院(TKG)】」と裏側にある授業システムとしては同じなんだと思います(タイトルに「振替も自由な時間割」と入ってるので)。

でも、それを「自由な時間割」とか「振替自由」という程度では「ウチの子、他にも習い事やってるし、続かないんじゃないかしら・・・」と思ってるお母さんには伝わらんわけですよね。だからたぶん、「習い事との両立」というユーザーが求めていることを入り口として、ページの終わりで「時間割もカリキュラムも個別に合わせた対応ができるんだよ!」という、企業が本当に伝えたいことを伝えるページを設けたのだろうと思います。

"入り口は「ユーザーの知りたいこと」、出口は「企業の伝えたいこと」"って、すごく大事な思想だと思っています。

 

5.基本的にユーザーは文字を読まない

読まないは言いすぎですw
まあ、インターネット上にあるほとんどの情報は文字を中心に構成されていると思うし。

けれども、これだけ情報があふれている現代において、とくにネット上には(表面的には)似たようなコンテンツが山ほどあるわけです。とすると、これはよく言われることですけど、秒のレベルでユーザーはその情報(ページ)が自分にとって有益か無益かを判断します。

だから、

「それはこっちに書いてあります」

なんてこと絶対に言ってはいけない。
ユーザーがその情報を求めているなら、それは求めているタイミングで渡してあげなければならないです。「そっちじゃなくてここに書いてあります」「この文章の中で言及しています」なんて設計者の言い訳でしかないと思う。

前項の"入り口は「ユーザーの知りたいこと」"にも通ずるんだけど、ページの大見出しや小見出しに「製品情報」とか「概要」とか温度感のない言葉を使うのがあまり好きではないです。「ユーザーは製品概要を知りたいはず」という大いなる思い込みがそうさせるのでしょうけど、ユーザーは別に自覚的に「概要が知りたい」と思っているわけではないんですよね(いや、そういうユーザーもいるけど、それだけだとモチベーションの高いユーザーしか拾えない)。

たとえば、星のやのサイトはその辺がすごく行き届いていますね。

hoshinoyatokyo.com

「客室」という大見出しの下には、定型的な文言ではなく、「日本旅館のくつろぎ」とか「味噌香しい朝のひととき」など、「お?」と続きが読みたくなるような見出しがつけられています。

こういうのは、雑誌がとてもうまいと思います。インタビュー記事の間とかにインタビュー内容からピックアップしたような見出しが入ったりしていますが、あのコピーの置き方とか、本当に勉強になる。

これはべつに「常に提案型の見出しをつけろ」ということではないです。そういうことじゃなくて、「相手にとって有益だと判断してもらえる見出しやラベリングはなんだ?」ということを常に考えるべきで、そうじゃないと離脱するよね、という話です。

そういう意味では、同じホテルビジネスのルートインは逆に割り切ってますね。

www.route-inn.co.jp

潔いなほんと(笑)
「客室・予約」というラベリングに、内容は余計なものを一切排除した価格、写真、スペックのみ。男らしい(惚)。いや、これはこれで正しいんですよね。ルートインに宿泊するお客さんというのはおそらくビジネスでの出張とか、「とりあえず清潔なところで眠れればいいんだよ」ぐらいの方で、星のやのように「日本のホテルの佇まいを~」とか言い出したら「るっせぇな、いくらなんだよ、空いてんのか空いてねぇのかさっさと教えろ」と思われてたぶん離脱が増えますねw

大事なのは「ユーザーは何の期待もなく中身など読まない」ので、「すぐにわかるところに有益だとわかるようにしてあげるべき」ということかと。

 

6.長文だから「悪」なのではない

いきなり矛盾するけどw

これもほんっとうによくある思い込み。小説だって長文じゃーん、て思うわけですが。たしかに、本、書籍に比べるとWebは長文が好まれない傾向はあります。スマートフォンやPCに向かっていられる時間の問題なんでしょうね。動画に関しても同じことが言えて、基本的に3分以内、とか言われますね。

でも、だからといってユーザーが長文を全く読まない、長いのはダメ、となるのはやはり思考停止なんですよね。

たとえば、僕なら名波浩(現ジュビロ磐田監督)のインタビューなら10万字でも喜んで読みます。

要は「ユーザーにとってそれだけのハードルに耐えられるコンテンツのなのか」というところが判断基準であるべきで、長いからダメ、写真が少ないからダメ、なんていうのはもう設計でも何でもないんですよね。

さらに、長いとか短いとかいうことを条件反射的に言ってしまうUI(コンテンツ)設計者というのは、一番大事な「自分はユーザーではない」という本当に重要な意識が欠如していることの表れだったりもしますね。

どんなにこなれてきたとしても、設計するタイミングでは常に「自分はユーザーではない」「このコンテンツは、ユーザーにとってどれくらい楽しめるコンテンツなのだろうか」と考えることを忘れてはいけないよな、といつも思っています。

 

7.テキストや画像は8~9割は埋める

これもよくあるなぁ・・・。っていうか僕も良く(これをちゃんとやらない過ちを)やってたなぁ・・・w

なんか、ワイヤーフレームってダミーで埋めまくっても「できた」気がするんですよねw でも、これがとても危険。画面構成としては「何をどこにおく」が定義できているので、設計者としてはできた気がしてしまうのもわかるんですけども、これはあとで必ずと言っていいほど破たんします

いくらWebサイトが情報を読み取れることこそが一番重要なメディアとはいえ、やはり画面に対する文字量と画像のバランスというのがあるわけです。画像や図版を入れることを想定していたとしても、たとえば入れる画像のタテヨコ比が想定と著しく違って、すごい縦長だったりするとそれだけで文字が見づらくなります。

2カラムのレイアウトだとすると、その下のコンテンツが出てくるのがだいぶ下になって、テキストの下に変なスペースができたりするから。当然、クライアントやサイトオーナーは嫌がりますよね、そんなレイアウト。

これは、言わずもがな、ワイヤーフレームの時点で入れる写真やテキストの大半を入れておけば防げます。

っていうか、本来の意味としては入れないと設計になってないんですけどね。

 

8.なぜ、を自分に対して問い続ける

ワイヤーフレームというのは、結局誰かに見せるためにつくってるんですよね。自分一人でサイトを作ってて(もう脳内で鮮明になっていて忘れないなら)べつにいらないわけですよ。

ってことは、説明する相手がいるわけです。

その人に対してわかるように、何がつっこまれてもいいように「それはなぜ?」とすべての要素について自分に問い続けることが大事だと思います。

・・・というと、まるで「ちゃんと説明できるように」ということに主眼が置かれているような表現になっちゃってますが、大事なのは実はそこではないと思います。

そう問い続けることで、より良いものになっていくんですよね。

たとえば、こんなワイヤーフレームがあって。

f:id:toksato:20161205195712p:plain

 

こういうふうに画像とテキストを左右に互い違いに置いているレイアウト、よく見かけますね。割とこういうことするサイト多いし、画面設計でこうやって持ってくる人も結構いますね。

「なぜそういうレイアウトにするんですか?」

 これに答えられない設計者が結構いたりする。

 

「そっちの方が読みやすいからです(キリッ」

 

とは答えられるかもしれない。
でも、そうしたらまたつっこまれますねw

「なぜこのレイアウトの方が写真を左側に統一するより読みやすいんですか?」

なぜでしょうね(困惑)。

っていうのは冗談で、写真というのは人間の視線に対して非常に強い引力を持ってるんですよね。そうすると、人間はどうしても写真の方に目が行ってしまう。習性として。本当はテキストの方に重要な情報があってそっちを読みたいのに、いちいち写真の方に視線が行ってしまうのを矯正しながらコンテンツを読まなければならなくなる。これはストレスですね。

これを、左右に交互に写真を配置すると、写真の引力を利用しながらスムーズにテキストが読めるんですね。だから、左右に交互に写真を配置するんですね。

 

っていう風に、むかしビービットさんが言ってました。ここ

 

というと、写真とテキストがならぶページは全部そうすべきだ!となっちゃったりするから困りものなのですけどもw、それこそ、「なぜ?本当に?」と疑ってかかるべきところですね。

ぜんぜんそんなことはなくて、たとえば一覧ページなんかは左側に統一しているページが多いですね。

nanapi.com

とか。

あとは、ECサイトの商品一覧ページとか検索結果ページはだいたい統一レイアウトですね。これも当然のことで、ECサイトの商品一覧ページというのは、テキストを深く読みたいわけではなく、決まった項目に対して比較をして欲しいものを探したいんですよね

その場合、左右に写真が交互に配置されるなんてのは非常に見づらいはずです。情報を読み込みたいのではなく、一覧から特定の情報を抜き取って比較検討をしたいのだから、大事なのは読みやすさではなく「何がどこにあるか」がはっきりしてることなんですよね。そうすると、レイアウトを統一してあげる方がユーザーの体験は良くなる。

「なぜそのレイアウトにする?」

「なぜ他のレイアウトを選択しない?」

ということを、常に自分に問うべきだと思います。

そうすることで「あ、よく考えたらこれ違うな」というタイミングが出てくる。そうなるともっと良い画面設計になりますから。

 

 

まとめ

ひえー・・・ながくなったあああああ。

というわけで、もう疲れたので簡単にまとめます。

  1. サイト構造図を先につくる
  2. いきなりデータに向かわない
  3. なんのための「ワイヤーフレーム」なのかを明確に
  4. 入り口はユーザーの知りたいこと、出口は企業の伝えたいこと
  5. 基本的にユーザーは文字を読まない
  6. 長文だから「悪」なのではない
  7. テキストや画像は8~9割は埋める
  8. なぜ、を自分に対して問い続ける

でやんす。

終わるでやんす(謎)

 

【追記】

つづきじゃないけどUI設計について書いたので良ければこちらも読んでもらえると嬉しいです。

「UI設計とウンコの話」 http://toksato.hatenablog.com/entry/2016/12/14/164226