ドン・キホーテはなぜ手に取らせるのが上手いのか — 総合トップに「圧縮陳列」を持ち込む

UX UI設計 Design プラットフォーム

はじめに

複数のサービスを一つに束ねる総合プラットフォームを作っている。その構想は DVDレンタルからDMM型プラットフォームへ に書いた。

そのトップ画面をどう作るか。ヒントは、意外な場所にあった——ドン・キホーテだ。


ドン・キホーテの「圧縮陳列」

ドン・キホーテの店内を思い出してほしい。通路の両側に、脈絡なく色々な商品が山のように積まれている。あれは雑然としているのではなく、わざとそうしている。「圧縮陳列」と呼ばれる、練られた戦略だ。

狙いはひとつ。全部を目に入る状態にして、「とりあえず手に取ってもらう」こと。 探しにきたものが無くても、山積みの中から何かがふと目に留まり、手が伸びる。その最初の一手——目に入る、手に取る——が、店内を回遊し、長く滞在し、衝動的に買う、という流れの起点になる。

ここが肝心だ。見えていること自体が価値であって、ガチャガチャした密度・情報過多は、バグではなく戦略だ。整然と片付いた棚より、山積みの店先のほうが、人は手を伸ばす。


これを総合トップに持ち込む

同じことが、複数サービスを束ねる総合プラットフォームのトップにも当てはまる。トップの仕事は、洗練された1枚絵を見せることではない。「ここに何があるか」を一望させて、とりあえず触ってもらうことだ。

そこで、トップを圧縮陳列型にした。各サービスの作品タイルを何段も積み、まだ準備中のサービスも「準備中」として見せ、左端にはサービス一覧を常設する。

総合プラットフォームのトップ画面(ポートフォリオ用のモック・作品はデモ)

左に常設のサービス一覧、複数サービスをまたいで積まれた作品の列、これから開くサービスまで並ぶ。一目で「色々ある」と伝わる。これが、とりあえず手に取らせるための密度だ。


ミニマルの罠

実は一度、逆をやってしまった。UIの定石——「整理してすっきり」「ナビはメニューの裏に畳む」——に従って、トップのサービス選択を左上のメニューボタン(☰)の裏に片付けたのだ。画面はすっきりした。だが、それは価値を削る変更だった。

サービスをメニューの裏に畳むのは、店先に積んであった商品を、棚の奥にしまうことだ。見えなくなったものは、手に取られない。総合トップにおいては、整理そのものが逆効果になりうる。

【整理・ミニマル型】               【圧縮陳列型(採用)】
 ☰ の裏にサービスを畳む            サービスを常設+作品を山積み
   ↓                                  ↓
 すっきり/だが「何があるか」        一望できる/とりあえず手に取る
 が見えない = 手に取られない         = 回遊・滞在が生まれる

ただし、密度は「無秩序」ではない

とはいえ、ただ山積みにすれば良いわけではない。密度は、来た人を迷子にする危険と隣り合わせだ。だから密度を支える骨格を用意する。

参考にしたのは、複数サービスを束ねる大手ポータル(DMM のような作り)だ。そこでは、どの画面にいても、画面の端から常にサービス一覧を開いて、いつでも別のサービスへ飛べる。サービス切替の導線だけは、密度の中に埋もれさせず、常設にする。

こうすれば、トップは圧縮陳列で「とりあえず手に取らせ」つつ、切替の骨格が常に手元にあるので迷子にならない。密度で引き込み、骨格で支える。 これが総合トップ設計の芯になった。


整理より先に、問うこと

「整理=良い」を疑う。 すっきり・ミニマルは多くの画面で正解だ。だが正解は文脈で変わる。「まず何があるかを見せる」ことが仕事の画面では、整理は価値を削りかねない。定石を当てる前に、その画面の仕事は何かを問う。

見せるか隠すかが、手に取られるかを決める。 隠したものは無いのと同じだ。総合トップでは、見えていること自体が価値になる。密度を恐れない。

密度は骨格で支える。 ただ盛るのではなく、迷子にしない常設の導線を密度の外に一本通す。引き込む力と、迷わせない力を両立させる。

小売の店先で当たり前に使われている知恵が、そのまま画面設計に効く。UIの「きれい」はコピーできるが、「この画面の仕事は手に取らせることだ、だから密度を残す」という判断は、定石の逆を選ぶことも含めて、その都度考えるしかない。


関連する記事

気軽にメッセージください

仕事の依頼、案件紹介、ご感想・ご質問なんでもお待ちしております。 高い志をもった同士の皆様と繋がることを切に願っております。 これからも人生を掛けたチャレンジを続けていきます。 何卒よろしくお願い致します。