「操作が難解」「ミスを誘引する」事例から学ぶUIデザイン改善方法――「何ができるのか」が伝わるデザインとは？：失敗例に学ぶ優れたUI（2）（1/3 ページ）

デザインを専門的に勉強したわけではないけれど、Webデザインも手掛けるエンジニアに向けて「よく見る」失敗例から改善案を提案する本連載。第2回はさまざまな人に伝わるデザインとは何かを解説します。

[cdh-design（著）／山田祥寛（監修），＠IT]

　さまざまなテクノロジーが発展したことで、人と道具の関係が「ハンマーをたたけばくぎが打てる」といった単純なものではなくなりました。なんでもできるコンピュータ上で「何ができるのか」を分かりやすく提示することがUI（ユーザーインタフェース）の役割です。

　第1回では、明確な結果を事前に提示せず、ユーザーの習熟度や理解度に頼った良くないUIを紹介しました。今回は習熟度にかかわらず、操作が難解なUIや、ミスを誘引するUIを紹介し、改善策を提示していきます。

横スクロールしなくてはいけないデザイン

　PCブラウザで横スクロールはあまり見ませんので、横スクロール操作のあるページはとても混乱します。

右側の画像が切れているのは画面サイズの問題？

　上の図は筆者がネットサーフィンをしていて実際に見たECサイトです。PCで閲覧すると、「単にリキッドレイアウト（＊）になっていないから商品一覧が隠れているのかな？」と考えましたが、横スクロールバーはありません。画面いっぱいにブラウザウィンドウを広げても、全ての商品は表示されず、まだ右に何かあるようです。

（＊）画面サイズに応じてデザインの幅がぴったりと収まるレイアウトのこと。ウィンドウ幅を狭めても横スクロールバーが出ません。レスポンシブデザインとは違うものです。

　サムネイル画像の1つを左にドラッグすると、やっとスクロールしました。しかしこれではあまりにも不親切に思えます。端まで見ようと、一番右側にマウスカーソルを持っていくと、矢印アイコンが表示されました。端までマウスカーソルを持っていかないと、右にもまだ商品があると気付くことができないUIになっています。

　スマートフォンで、同じサイトを確認したところ、下の図のようになっていました。

よく見ると右端に……？

　2枚の画像しか表示されておらず、右端に見えている画像と商品情報も、はじめは気付きませんでした。ページ遷移せずに多数の商品を見せるため、このようなレイアウトにしているのだと予想できますが、気付いてもらえなければ2つしか見てもらえないことになります。

　スマートフォンの横スワイプはPCの横スクロールより受け入れられていますが、横スクロールした先に重要な情報があるとは誰も考えません。スマートフォンでもあまり有用な方法ではないといえます。

【コラム】PCブラウザで横スクロールが必要な場面とは？

　タッチパネルデバイスで横スワイプすることが普通になっても、PCで同じ動作が普通になるとは限りません。画面遷移せずに、同列の情報を多数見せるという目的上では横スクロールは相性がいいのですが、PCブラウザとタッチパネルデバイスでは話が変わってきます。

　そもそもPCブラウザ上で横スクロールができるという認識自体がユーザーになく、重要な情報が横スクロールした先にあるとは考えません。PCと他のデバイス間で同じ体験をユーザーに与えたいという目的があるのかもしれませんが、Webサイトの操作がいちいちどうだったかユーザーは覚えていません。なぜならスマートフォンとPCで同じレイアウトになっていないからです。

　レイアウトが変わればUIも変わりますので、必要な操作はその時その時にUIを見て判断します。ではPCブラウザ上で横スクロールが必要なのはどのような場合かというと、ほとんどありません。

　多くの重要な情報を、サイトトップにカルーセル式（＊）で表示させているのをよく見ます。この方法であればすでにユーザーに認識されているため、見逃される心配はありません。しかし多くの情報があれば、後方に配置された画像は見てもらう前に下にスクロールされますし、大きく載せたからといってコンバージョンが上がるわけでもありません。

（＊）画像などのコンテンツを一定時間ごとに自動でスライドさせる表示形式のこと

　動的であったり、たくさん情報を大きく見せたりできるのはリッチで強く見えますが、本当に得たい効果を考えた上で必要かどうか検討してください。

スマートフォン操作で出る別の問題

　さらに、iPhoneのブラウザでページを閲覧する際は、左右にスワイプで戻る、進むというジェスチャーが割り当てられています。このため、左にスワイプした後、始めの位置に戻ろうと右方向にスワイプすると、ページそのものが戻ってしまうことがあります。

　映画、ドラマや雑誌閲覧サービスのアプリでは横スクロールすることが一般的になっています。しかし、ブラウザでサービスを閲覧するとUIが変わっていて、分かりやすい矢印がついていたり、サムネイル画像が切れて右にまだ情報があることを伝えるリキッドレイアウトになっていたり、そもそも横スクロールのレイアウトを取りやめているサービスもありました。さまざまなデザイナーが横スクロールは特殊な状態だと認識しているということです。

横スクロールの代わりになるレイアウト

　もし、あまり重要な意図がないまま横スクロールのあるWebサイトを作りたいと考えている方がいれば、レイアウトから見直してみてください。例えば以下のようなものがあります。

• アコーディオン（PC、スマートフォン共通）

　見出しをクリックすることで、その内容が表示される方法です。横スクロールと同じくスペースを節約でき、ページ遷移を必要としません。

デメリット：興味のある見出しが多数ある場合、クリックするのが面倒になります。見てもらいたい情報を隠しておくというのも矛盾のあるレイアウトです。

• サイドバー（PC）

　右か左にナビゲーションの役割を持たせたバーを配置します。クリックする必要はありますが、一覧を確認しながらクリック先の内容を見ることができるため、進んだり戻ったりを繰り返すようなネガティブなページ遷移にはなりません。

デメリット：スマートフォンでは画面が小さ過ぎて使えません。

• 隠さずページ内に表示させる（PC、スマートフォン共通）

　ページ内に多くの情報を載せ過ぎて縦に長くなると、ユーザーは下の情報まで見てくれないと考えられていますが、実はそうではありません。重要ではない、自分には必要ない、これ以上情報はない、と判断された時だけスクロールするのをやめ、情報が重要な場合は下まで見られていることが判明しています。

デメリット：隠していた部分を全て見える状態にしても、ユーザーにとって重要な情報がどこにあるのか分からないと、途中で見つけることを諦めてしまいます。

　万能なデザインはありません。しかし上述したデメリットも、情報の整理やレイアウトによって解決できる場合があります。大切なのは、Webサイトで果たしたい目的をはっきりさせ、ユーザーにその行動をとってもらえるようにすることです。見せ方はその手段でしかありません。珍しさや面白さといった基準でレイアウトを選ばないことです。