UX DAYS TOKYOスタッフの中井です。今回は、私が担当しているワークショップ「UX視点でのサイト改善検定講座（レイアウト編）」について、ご紹介します。

みなさんは「レイアウト」という言葉を聞いて、どのようなイメージを思い浮かべますか？ウェブサイトのレイアウトを考えるとき、文字や写真、図形などを綺麗に整えて置くことをイメージする方が多いのではないでしょうか。かく言う私自身もUXデザインに触れるまではそう思っていました。

レイアウトを綺麗に整えるには、グラフィックデザインでも利用される「近接、整列、反復、コントラスト」のデザイン4原則をはじめとした複数のルールに則る必要があります。しかし、それらだけのルールで作られたウェブサイトが必ずしも使いやすいとは限りません。今回は、ウェブサイトやアプリのレイアウトに本当に必要なもの、について考えて行きたいと思います。

情報設計がレイアウトの出発点

一見すると綺麗なレイアウトでも、実際に使う立場に立ったときにユーザビリティに問題を抱えているウェブサイトやアプリは少なくありません。では、なぜ、そのような事態に陥るのかについて考えてみましょう。

上の画像は、写真や文字は綺麗に整っているように見えます。これをユーザー視点で考えてみましょう。温泉に行きたくて宿泊予約サイトで「箱根」と検索して出てきた結果です。この中で、詳細を見てみたいなと感じる旅館はありますでしょうか？

これだけでは、比較検討する内容がバラバラだったり、情報が足りないことで、旅館の良し悪しを比較することが出来ないでしょう。レイアウトには「ユーザーにとって必要な情報とは何か？そして、その情報をどのように伝えるか」という視点も含まれる必要があります。それが抜けてしまうと、たとえ見た目が綺麗だったとしても使い勝手（やUX）が悪くなってしまいます。

この事からもわかるように、レイアウトの出発点は「情報設計」であると言えます。情報設計というと、ページリストやサイトフローの作成をイメージしてしまいがちですが、ユーザー動線を含むページ構成自体も含まれます。そのため、ページやアプリ画面の中で、どの情報をどのレイアウトで配置すると必要な内容が伝わるのかを考える必要があるのです。

伝わる・使えるレイアウトには、ユーザー視点が重要

レイアウトにおける情報設計を行う際に、よく「情報の優位性・関連性」でまとめろと言われますが、制作者の主観だけでそれらを決めてしまうのは非常に危険です。

UX DAYS TOKYOが主催している「セルフユーザビリティテスト検定講座」に参加された方の多くは受講されて気付くのですが、ユーザーは制作者が意図していない動きをしばしば取ります。そのため、情報設計を行う場合でも、制作者視点ではなく常にユーザー視点で全体を捉えていくことが重要になります。

ヒューリスティック評価は一夜にしてならず

ユーザー視点で全体を捉えた情報設計ができて、初めてウェブサイトのレイアウトやアプリのUIが適切にデザインできると言えます。しかし、頭で理解をしても実践では上手くは行かないことに気付かされます。「ユーザー視点」を適切に持ち、課題点を探り、そこへの改善策を出すという一連の流れが案外と容易ではないからです。これらを一定に評価できるようになると、いわゆる「ヒューリスティック評価」ができると言えます。

ヒューリスティックは「専門家」となる人物に充分な視点と経験が必要になります。私たちUX DAYS TOKYOのスタッフは、それらを養うためにグループ内でサイトやアプリなどの問題点を出し合い、対応策を出していく訓練を日々行っています。視点の勉強も必要ですが、日頃から対策までを考える経験を重ねていくことが重要だからです。

課題に対する採点やフィードバック付！本当のレイアウトが学べるワークショップ

UX DAYS TOKYOでは、今までお話をした内容が学べる「UX視点でのサイト改善検定講座（レイアウト編） Adobe XDを使ったワイヤー作成」というワークショップを開催しています。上記の内容をさらに具体化した解説とともに、実際のサイトやアプリを題材にレイアウトにおける問題点・課題点を探し、改善策を考える過程をワークとして実施いただきます。

このワークショップは、ただワークを実施するだけではなく、受講後に出題された課題を提出いただき、UX DAYS TOKYOによるフィードバックや採点（添削）を実施しています。しかも採点は2回まで行っており、その添削で自分のデザインの良し悪しを知ることができます。また、一定基準に達した方には合格証をお送りしてます。このような形を取っている最大の理由は、上述の通り、「専門家」としての視点や経験を受講者の皆様にも養っていただくためです。

課題提出された受講者の方からは、「こんなに丁寧にレイアウトについてフィードバックしてもらえることは、今までになく、非常に有意義だった」というお声をいただいています。

受講者の感想

過去にこの講座を受講しているUX DAYS TOKYOのスタッフに感想を聞いてみました。

池田さん（UX/UIデザイナー）

「講座を受けてみて、ユーザーが見ているのはグラフィックではなく情報だ、と言うことを再認識できました。

実務においても、グラフィック的なレイアウト以前の情報設計という段階をしっかりと考えるように変わりました。受講するまでは、どこか小綺麗にまとまっていれば大丈夫なんじゃないか、と思ってしまっていたこともあり、情報が二の次になってしまっていたんです。

また、ダミーデータや色付きのワイヤフレームを作ってしまっていたので、社内レビューでも『情報を見る』というところに、誰も意識が行っていませんでした。受講後、まずは単色のワイヤーフレームで情報を見るようにワークフロー改善をして見たら、ユーザーのコンテキストと一緒に彼らが必要としてる情報が何かという点に着目することが出来るようになりました。

結果として、開発段階に入る前に問題点の発見が出来るようになったことは大きいです。レイアウト変更は、デザイン段階までの方がスピーディーに対応出来ますので。

今、社内でデザイナーの採用を検討しているのですが、その入社予定の方にも受講してもらいたいと思っています。この講座を受けることで、UIデザインにおいて考慮しなければならない大切な基礎知識が身に付くと感じていますので。」

梶島さん（エンジニア）

「エンジニアからすると、『デザイン』という部類は、全く縁のないものだと感じていました。しかし、講座を受講することで『デザイン＝設計』であるというように視点が変わり、自分たちにも関わりがあるものだと気付きました。

レイアウトにおける情報設計の話は、情報をどうやってまとめて、どう見せるか、という点はDB設計にも通じると思います。どのようにテーブルを組んでいくかを考える時に、エンジニアも同じようなことを考えるんです。

今までの経験から、情報がまとまっていないレイアウトだと、DB設計も煩雑になりがちでした。そうなると、最終的にはメンテナンスにも影響が出てきてしまいます。例えば、簡単には機能追加が出来ないシステムになってしまう、というようなことですね。

情報設計までが考えられているレイアウトであれば、DB設計もしやすく、かつ綺麗にまとめられるように思います。そうなると、サイトやアプリの性能にも関わってきます。綺麗に組まれているDBの方が、処理速度が断然に早くなるからです。

通信量が減少するということは、UXにも影響を及ぼします。情報設計が出来ているレイアウトというのは、見た目や動線上のUXだけではなく、使用上のUXを変えてしまうということは大きな発見でした。

デザイナー、ディレクター向けの講座のように感じますが、エンジニアにも必要な視点であるので、職種に限らず受けてもらいたい講座です。」

1~2ヶ月に1度ペースで定期的に開催

Adobe XDを使って実習

この検定講座はUI/UXデザインソフト：Adobe XDを利用して実習しています。Adobeを使った方であれば直感的な操作がスムーズに行えます。はじめての方でも基本的な操作方法をご紹介しているので使っていない方でもご参加いただけます。

現在は、無料で利用することもできますし、アドビシステムズさんではUX道場というオンラインで視聴できる動画を行っているので、操作方法はこちらを見て学ぶこともできます。（受講生にはオススメ動画をフォローメールでご案内しています。）

次回はアドビシステムズさんで開講です

それぞれの職種からの視点で、私自身も改めて、情報設計の重要性に気付かされました。特に、DB設計や通信量にまで影響を及ぼしてしまうという観点は無かったので、新鮮でした。この記事を通して、UXと情報設計の関係性、親密性に気付いていただけると幸いです。

そして、百聞は一見にしかず、です。文章を読んで理解をすることも重要ですが、実際に体感していただくのが最良かと思います。

次回の「UX視点でのサイト改善検定講座（レイアウト編）」は、7月20日（金）の開催です。しかも、アドビシステムズさんで開講します。ぜひ受講されてみてください。

UX視点でのサイト改善検定講座詳細