INDEX of This Page
縦・横・前後で考えよう。
皆さん、こんにちは。本日は「縦・横・前後で考えよう」というテーマで、T Fきりんさんにお話を伺います。よろしくお願いします。
こんにちは。よろしくお願いします。今日は、現実世界の構造物が縦・横・高さの三次元から成り立っているように、Webサイトやアプリも縦・横・前後の三次元で考えることについてお話ししたいと思います。
現実世界の構造物について詳しく教えていただけますか？
はい。例えば、家を建てるときには、縦（奥行き）・横（幅）・高さから成る「三面図」によって、どのような家にするのかを設計します。
そして、その三面図をもとに実際に家を建てていきます。これは家だけでなく、家具や工業製品でも同じです。
なるほど。Webサイトやアプリも同様に三次元で考えるというのはどういうことですか？
Webサイトやアプリの場合、縦・横・前後の三次元で成り立っています。画面自体は平面ですが、それらのページは互いにリンクし合い、前後関係を持っています。
単独のページでは適切でも、前後との整合が取れなければ適切ではなくなります。
つまり、二次元の間取りから、前後関係を持った三次元の空間に変わるわけですね。
そうです。立体的に思考することで、サービスの本当の姿が明らかになります。
縦＆横でひとつの画面、前後で複数の画面
画面をデザインするとき、縦と横だけでなく、前後の関係性も考える必要があるんですね。
その通りです。単一のページであれば、縦と横の二次元レイアウトを考えれば済みますが、Webサイトやアプリのデザインではそれだけでは足りません。
サービスはいくつもの画面から成り立っているため、それぞれの画面同士をつなぐ「前後」の関係性を加えて考える必要があります。
一つの画面のデザインとして問題がなくても、複数つながったときに問題がないとは限らないんですね。
そうなんです。サービスは縦と横に前後関係を加えた、三次元構造でデザインを考えます。前後関係を含めたデザイン全体の良し悪しが、サービスの構造としての品質を左右します。
構造とはサービス全体のデザイン
構造をデザインすることが、サービスをデザインすることに直結するということですね。
その通りです。サービスの構造は、前後関係を含む階層をともなっています。それぞれのページが階層を持って連なっており、お互いに行き来する必要があります。これはポスターなどのビジュアルだけのデザインとは異なる点です。
具体的な例を教えていただけますか？
例えば、AppleのWebサイトは、シンプルながらも堅固な階層構造で構築されており、商品のアピールだけでなく、新商品の追加やカテゴリの変更にも対応しやすい構造としてデザインされています。
ビジュアル（見た目）と比べて、構造は廃れにくい
見た目は時間とともに古くなりますが、構造はあまり変わらないんですね。
その通りです。見た目は流行や技術的な進歩、画面の大きさなどによって影響を受けやすいですが、構造はそれらの影響をあまり受けません。
実際に、私が2004年に設計した「東京国立博物館」のWebサイトは、その後何回かのリニューアルを経て見た目の変更が行われましたが、根本的な構造上の変更はほとんど行われていません。
これは、サービスとして求められていることを構造として適切に落とし込むことができれば、経年の変化に耐え続けられることを示しています。
つまり、構造は長持ちするということですね。
はい。大きな変更を加えるチャンスがあったときに、じっくりと構造の改善に取り組むことは、長い目で見ると投資対効果の良い施策だと言えるでしょう。
前後関係を表現する
前後関係を表現することも重要なんですね。具体的にはどうすればいいのでしょうか？
階層構造を持ったサービスをデザインするときに特に配慮すべきことは、移動したときの前後関係をどのように表現するかです。
しかも、できるだけ直感的に理解できるようにする必要があります。
ヘッダーやタイトルの見せ方で前後を表現
最も基本的な前後関係の表現は、ヘッダーやタイトルを使って、今いる場所、今までいた場所、これから行く場所を段階的に見せていくことです。
具体的な例はありますか？
先ほどのAppleのWebサイトでは、大カテゴリをヘッダーに置き、選択するサブカテゴリをその下に並べ、商品詳細に至ったタイミングで、そのページのタイトルとして残し続けます。
これにより、ユーザーは自分がどこにいるのかを把握しやすくなります。
タイトルと戻り先で前後を表現
また、iOS（iPhone）の設定画面では、選択したカテゴリが次のページのタイトルになり、同時に戻り先のテキストラベルが先ほどいたページの名称そのものになることで、分かりやすい前後関係の表現を実現しています。
動きで前後を表現
さらに、移動するときに動き（アニメーション）を付けることで、どこからどう移動したかを理解しやすくできます。iOS標準の「天気」アプリでは、一覧から詳細へ移動するときに、選択した詳細が画面いっぱいに拡大する動きが付いています。この動きによって、前後関係が直感的に理解しやすくなっています。
動きを使うことで、ユーザーに自然な体験を提供できるんですね。
階層は「深く狭く」より「浅く広く」
階層を設計するとき、「深く狭く」より「浅く広く」のほうが有利なんですか？
はい、その通りです。同じ量のコンテンツがある場合、基本的に「浅く広く」設計するほうが有利です。なぜなら、階層を縦に深くするよりも、横に広げるほうが、トータルでのインタラクションコストが小さくなるからです。
縦に深く移動するコストのほうが、横に移動するコストよりも大きいということですね。
そうです。また、横に広げたカテゴリは画面をより多く専有してしまうデメリットがありますが、何が項目として存在しているのか広く見渡せるメリットがあります。さらに、カテゴリの数を多く並べられるということは、カテゴリの名称をより具体的なものにできるという点でも有利です。
具体的な名称にできると、ユーザーも分かりやすいですね。
一方、階層を縦に深くすると、どうしても包括的・抽象的な名称になりがちで、ユーザーにとって分かりにくくなります。
具体的なサービスの例はありますか？
はい。AppleのWebサイトでも、横のカテゴリは画面に入る範囲でできるだけ大きく広げて、縦の階層を浅く取ろうという意図が感じられます。
また、「価格.com」では、「液晶TV」や「掃除機」といった商品を比較検討するための具体的ジャンルまでを、半ば無理やり第3階層までに収めるよう設計しています。
それで長いジャンルメニューを設置しているんですね。
そうです。デメリットよりメリットのほうが大きいと判断してのことです。スマートフォンでは、より見せ方に工夫が必要ですが、例えばeBayでは、大きな大分類のみをイメージ付きで表現し、選択した大分類がアニメーションにより拡大・移動して、より下層のカテゴリを展開するようにしています。
ラベリングは排他的に
ラベリングについても教えてください。
ラベリングとは、カテゴリに名称を付けることです。適切なラベリングによって、ユーザーはそこに何があるのかを把握できます。ラベリングで重要なポイントは「排他的に」名前を付けることです。排他的とは、「A」に該当したら、他の「B」や「C」には該当しないことです。
具体的にはどういうことでしょうか？
例えば、StarbucksのWebサイトでは、そのときイチオシの飲み物がトップページに大きく表示されます。この飲み物は、ヘッダーにある大分類「Cafe」と「Coffee & Goods」のどちらにあるのでしょうか。
一般的に「Cafe」と「Coffee」の違いは分かりづらく、どちらにも該当しそうであり、排他的とは言えません。
ユーザーはどちらを選べばいいのか迷ってしまいますね。
項目数を少なくしたことで、見た目としてはスッキリとまとまっていますが、ラベリングとしては微妙なところです。可能な限り、ラベルには具体的な名前を付けるようにします。
ラベルは抽象的ではなく具体的に
何を指し示しているのか不明確な「サービス」といった抽象的な名前や、「・」や「＆」で複数の単語をつなげた包括的な名前は、ラベルとしてはふさわしくありません。
具体的な名前を付けることで、ユーザーが迷わずに済みますね。
具体的でないラベルのフォローアップ
どうしても抽象的あるいは包括的なラベルにせざるを得ないときは、そのラベルが何を意味しているか分かる、何らかのフォローアップがあると良いでしょう。先のStarbucksやAdobeでは、ラベルをクリックすると、その具体的な中身がドロップダウンメニューとして見えるようになっています。
「その他」カテゴリとスライドメニュー
タブ型インターフェースを持つアプリでは、カテゴリをあまり多く増やすことができません。よくある方法で「…」といった、その他全てを包括するようなラベルがありますが、「…」はいろいろな意味で使われるため、決して良い方法ではないでしょう。
ユーザーが混乱してしまいますね。
一方、左スライドメニューの場合は、縦に項目を組み増すことができるので、良いラベルを付けやすいという側面があります。
本日はとても勉強になりました。ありがとうございました。
ありがとうございました！今日のお話を今後のデザインに活かしていきたいです。
こちらこそ、ありがとうございました。ぜひ参考にしてください。
