デザインの味付け
s-umemoto
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は、株式会社ajike代表の梅本と、その仲間たちがデザインについて、雑談を交えながら話す番組です。
今日のお相手は、神田さんです。神田さん、よろしくお願いします。
神田淳生
はい、神田です。よろしくお願いします。
s-umemoto
今話してましたけども、寒くなってきましたね。
神田淳生
なんかやっと寒くなってきて、久しぶりって感じですね。
s-umemoto
日本は二期制に移行するみたいな記事を見ました。
神田淳生
いやー、ほんとそんな感じですよね。
s-umemoto
四期から二期へ。
夏、長すぎないですか。
常夏の島ジャパンですね。
いやー、もう長すぎて、本当に夏過ぎる頃には、冬どんな感じだったかなっていうのは、もう忘れてるんですよね。
キャンプ場とかちょいちょい行くときに、九州で阿蘇のほうによく行くんですけど、そこに九州で一個だけスキー場があるんですよ。
ほんまに降るんかなと思いながら走ってますね。
まあ降るからは当然スキー場なんでしょうけど、去年降ってたんでしょうかね。
神田淳生
いやでも、もう全然降らないみたいなのはあると思いますけどね。
昔は降ってたけど、ここ数年、最近は人工雪だけでしのいでるみたいなのは結構あると思いますよ。
そうだよね。
無理ですよね、九州で雪期待するのは。
s-umemoto
なんか難しい九州ですね。一日だけとかはあるんでしょうけどね、全然。
神田淳生
シーズンを通してっていうのは、あんまり知らないだけですけどわからないな。
なんで、ぐっと寒くなってほしいですね、せっかくなんで。
s-umemoto
今日もやっていきましょう。
ナビゲーションの数
s-umemoto
今日のテーマは何でしょうか。
今日のテーマは、ナビゲーションの数いくつがベストというテーマでやりたいと思います。
なんだか久しぶりにこのテーマで話しますね。
神田淳生
どうですかね。ちょっとUIデザインっぽいテーマで話してみたいと思います。
s-umemoto
なぜこのテーマにしたんでしょうか。
神田淳生
そうですね。ちょっとナビゲーションとか、サイトのデザイン、アプリのデザインとかしてたら絶対にくっついてくると思うんですけども、
結構自分の中では、昔からサイト作り続けてるんで、固定関連というか、昔の先入観みたいなんで、
ナビゲーションってこんなものの数なのかなみたいなふうに、あんまり深く考えずに対応していく部分もあるんですけども、
ちょっとだけここら辺もう1回考えてみようかなというふうにちょっと思ったんですね。
めもとさんにちょっと質問したいんですけども、
いいえ。
ナビゲーションの数。
これはあれですね。まず前提としてはパソコンですね。パソコンのウェブサイトとかを想像してほしいんですけども、
ペッターに並んでいる横並びのナビゲーションですね。
あれ、数は何個までが最適かと思いますか。
s-umemoto
そんなもん決まってるやないか。
神田淳生
お願いします。
s-umemoto
マジックナンバー5のプラスマイナス2やろ。
神田淳生
めもとさんやっぱほしい答えくれますよね。
そうですね。これはもう時止まってますね。
s-umemoto
ロートル。
ローガイアンドロートルしてますか。
神田淳生
ローガイアンドロートル。そんなひどいこと言わないですけど。
s-umemoto
どういうことですか。マジックナンバー5プラスマイナス2って私は習ってるんです。
神田淳生
習いましたよね。
習いました。
習ったんですけども、自分も同じような感覚だったんですけども、
結構実態を調べてみると違っているってことが分かったんで、
同じような方もいらっしゃるんじゃないかなと思うので、
今日はそれを紹介したいなと思ってます。
s-umemoto
なるほど。じゃあ分かったことちょっと教えてもらってもいいですか。
神田淳生
まずこれは先ほども言ったんですけども、ヘッダーにある横型のナビゲーションですね。
さっきめもとさんも言いましたけども、
マジックナンバー5とか7とか言われているんですけども、
有名なサイトをいくつか見てきたら、今はこれあんまりこだわってないっていうことが分かりました。
ルール、ここら辺のかつての常識からどんどん外れてるんですね。
それはあんまり気にして見てないとなかなか意識することもないと思うので、
ちょっと紹介したいと思います。
まずAppleのサイトですね。
Appleのサイトはいろんな方がデザインの参考にされると思うんですけども、
昔からサイトがどのように変化してきたかっていうのを比較するツールもあったんで、
ちょっとそれも見て調べてみると、
まず2007年ですね、めちゃくちゃ前ですけども、
このときはヘッダーのナビゲーションっていうのは6個、6つでした。
6つプラス検索のバーがあったっていうようなヘッダーのナビゲーションでしたね。
これはもうマジックナンバーとかに当てはまってるんですけども、
ここから10年か経った2017年になると7個になってます。
ここまではまだナンバー7みたいな言い方もあるんで、
当てはまってるかなと思うんですけども、
今年最新のサイトですね、皆さんも興味があったら見ていただきたいんですけども、
今も横型のナビゲーションなんですけども、
この数で言うと11個になってます。
11個プラス検索のアイコンのボタンと、
s-umemoto
あと買い物カゴのボタンもあるっていうことで、
神田淳生
11というか13というか、めちゃくちゃ数増えてるんですよね。
どういう内容のナビゲーションかっていうと、
商品カテゴリーの名前が成りになっていて、
iPhoneとかiPadはMacBookとか、
あとはApple TVとかAirPodsとか、
そういうものもナビゲーションの中に含まれています。
多いですよね、イメージより。
多いな、確かに。
前も触った時、
これが一番大きいなと思うんですけど、
一番大きいのは、
このマイクロソフトにかかっている
s-umemoto
iPhoneの2台と、
神田淳生
iPhoneの3台というか、
s-umemoto
おだしょー 多いな 確かに 前も 触ったとき ちょっと親と思った
ことあったけど 今 言語化という か 全然気にもとめてなかったですね
言われてみれば 確かに多いな
神田淳生
三沢 そうなんですよね これが まずAppleの事例で 次がGoogleの検索
結果のページですね 何かを検索 したときに Googleで一覧のところ
には画像とかショッピングとか 出てくると思うんですけども あっ
このナビゲーションの数 これは 最初に回答を言うと9個並んでます
と もしかしたら これは検索によって 結構順番とか変えてるんで 数も
変わったりするかもしれないんですけども 9個ですね 内容としては画像
とかショッピングとか あとショート 動画というのも入ってますね
s-umemoto
おだしょー ええ もう消さなあかん やん こんな
三沢 何で消さなあかんんですか
おだしょー すいません うちの子供 への教育上 ショート動画は禁止
神田淳生
にしているタイプの家庭なんで 三沢 ああ そうなんですか 今 ライフ
スタイルからのセリフが飛び出て きてたじゃないですか
s-umemoto
おだしょー すいません そんなこと 言っちゃいけないです ごめんなさい
神田淳生
三沢 いいね 何で これも9個 7 5とか7とかではなくても9個持ってる
っていうような内容ですね 次がYouTubeですね YouTubeは まず
20年 18年前ですかね 2007年の段階 では4つでした
s-umemoto
おだしょー 4つ
神田淳生
三沢 はい もう結構 YouTubeの昔の デザイン見たら懐かしすぎて もはや
もう忘れてるぐらいのレベルなんです けども グローナビっていうところ
で言うと4つで 今は そのままナビゲーション の形自体が変わってまして 皆さん
も馴染みがあるとか 毎日見る みたいな人も多いと思うんですけ
ども 縦型のナビに変わってますね
s-umemoto
おだしょー そうだよね
神田淳生
三沢 はい これは2017年の段階では もう既に縦型のナビに変わって
いて もう今も引き続き 配送型の ナビゲーションになってるんで
もう数っていうのはあんまり関係 なく 制限なくっていう感じで もう
数十個なら そんな形になってます
s-umemoto
おだしょー 確かに 登録チャンネル でいっぱい並んでるもんね
神田淳生
三沢 そうなんですよ もうナビゲーション もプロールして 見させるっていう
ような形になっているんで 縦型 にするメリットっていうのは そういう
ところにあるよなと思います
s-umemoto
おだしょー 確かに
神田淳生
おだしょー あとはちょっとメディア 系のサイトも少し見てみたんです
けども 日本のサイトで言うと文春 オンラインは12候補 CNNのサイト
は文春はやっぱデザインが優れてる っていうのもあって さっき見て
みたら12 CNNは10っていうような 形だったんで やっぱちょっとイメージ
からしてみると ちょっと多くない ですか
s-umemoto
三沢 多いです
おだしょー ですよね
神田淳生
三沢 ロートルです
おだしょー そうなんですよ なんで 知らんうちに 結構数多くなって
るなっていうのもありまして なんか やっぱ7個までに抑えないと
駄目だよとか 5個までに収めましょう とか そういうような考えっていう
のも 結構 昔 10年前とか15年前とか それは普通だったような気がするん
ですけども 今は結構変わっている っていうところが ちょっと発見
ディスプレイの影響
神田淳生
だったなと思ってます
s-umemoto
三沢 うん ほんまやね
神田淳生
おだしょー この流れから分かる ことっていうのもありまして なんで
こんなに多くなってるかっていう のは まず ディスプレイの大きさ
と解像度だと思うんですね
s-umemoto
三沢 確かに
神田淳生
おだしょー これでも完全にナビ の数の増加に影響しているなと思
っています それぞれのサイトの デザインを見てみる ナビゲーション
のデザインとかを見てみると やっぱり 見やすい文字サイズっていう
のが確保できていて 予約も取れる のであれば もはや数の制限っていう
のはあんまり考えてなくて 何個 までに押さえないといけないみたい
なのはあんまりなく自由なんじゃない かなと思ってます
s-umemoto
三沢 なるほど
神田淳生
おだしょー それまでのこれまでの 流れっていうのを考えると 多分
ディスプレイとかももっと大きく なっていくっていうのもあると思います
し これからもナビゲーション の数点を増えていく可能性が高いん
じゃないかなと思います
s-umemoto
三沢 確かに 解像度上がっている ものも 4Kとかのモニターも安いもん
ね
神田淳生
おだしょー もう手に入りやすい ですよね デュアルでディスプレイ
設置していても それもでかいですよ ね まず サイズ自体がインチ自体
がでかいというのもありますし なので 横幅あんまり気にしない
っていう そういうような現象にな ってんじゃないかなっていう気が
s-umemoto
します
三沢 デザイナー中瀬でもあるよね 横幅気にしないっていうのはね
神田淳生
おだしょー そうですね
s-umemoto
三沢 なるほど
神田淳生
おだしょー ここまでが有名サイト のナビゲーション調査の結果ですね
s-umemoto
三沢 確かにVision Proとかも自分は 持ってないんですけど もしあれ
がデファクトというか 普通の当たり 前のデバイスになったら 横幅とか
本当になくなりそうやもんね
神田淳生
三沢 そう思ってますよね 本当に
ナビゲーションの重要性
s-umemoto
おだしょー 首痛くなりそうな気がするけど ちょっとどうやってみる
のか分かんないけど
神田淳生
三沢 確かにそうなんですよね 認知 できる数とか 覚えられる数は
5個までだとか 7個までだとかって そういうところで結構気にして
る常識があったと思うんですけども どちらかというと 本当 探しやすい
とか 目的のコンテンツにいかに すぐたどり着けるかみたいなところ
のほうが 設計者の優先順位に上が ってるんじゃないかなっていう
気がします
s-umemoto
三沢 確かに これがAI時代と結構 マッチするというか 探せないところ
とか 今まで探し方が分からなかった ところをAIがだいぶ保管するよう
になってるじゃないですか あなた はこれみたいな だから その人に
合わせた文脈でどういうふうに 情報順番に出すのかみたいな インターフェース
どうすんのかとかが もしかしたら そこまで5個とか10個とか20個とか
ナビゲーションが増えるかもな とも一瞬思うけど でも その辺
またAIが保管してくるんやろう なって気がしますよね
神田淳生
三沢 確かに そうですね こうなる と また設計の仕方みたいなの全然
変わってきそうな気もしますね
スマホアプリとナビのデザイン
s-umemoto
おだしょー 確かに AIの情報の出し方 みたいなの デザイナーってよく
必要あるかもね レコメンドエンジン じゃないけど
神田淳生
三沢 確かに そうですね
s-umemoto
おだしょー いや 全然想像できて ないですね まだ 自分のなんか ちょっと
今 どうぞ
神田淳生
三沢 今はもうPCのトレンドっていう ところで話したんですけども ここ
から分かることもあるなと思って まして これからスマホのアプリ
s-umemoto
はどうなるんかなっていうのも ちょっと次 話したいなと思ってます
おだしょー 難しいよね
神田淳生
三沢 そうですね 今回 テーマが ナビゲーションっていうところ
にもうフォーカスしてるんで もう アプリのナビっていうところに
しこって考えてみたいと思います アプリのナビって もう皆さん使ってる
ものって ほぼほぼ 五行だと思うん ですね
s-umemoto
おだしょー そうだね
神田淳生
三沢 もしくは 四 三とかもある かもしんないですけども 感覚的
には 五行のナビに並んでる 下の ほうに並んでるっていうので 9割
ぐらいなんかあるんじゃないかな っていう気がします
s-umemoto
おだしょー そうだね
神田淳生
三沢 シンプルなアプリとかだったら 五行のナビとかでも全然大丈夫
だと思うんですけども 結構 機能 が多かったりとか ページが多い
ようなナビとかだったら 設計してる 人ってのは 結構苦労して 五行 厳選
してると思うんですね スマホ アプリナビ あるあるとしては 五
行のうちの一番右側のナビゲーション がその他とかになっていて それ
開いたら その中に大量に動線設置 されてるみたいなのもあるある
んだ あと もう一個はナビゲーション はアイコンが並んでるのは五個
なんだけれども コンテンツエリア に大量に動線設置されてるみたい
なのもありますね
s-umemoto
おだしょー あるよね
神田淳生
三沢 めっちゃアイコン並んでる やん みたいなのもありましたね
s-umemoto
おだしょー ある ペイペイとかそうだよね
神田淳生
三沢 そうそう 機能が多くても この整理 難しすぎるやろっていう
ところはあるんかなと
おだしょー 難しいですね
三沢 はい 今後どうなるのかっていう ところなんですけれども これも
スマホの流れ デバイス自体の流れ っていうところで言うと どんどん
解像度が上がっていって サイズ 自体も大きくなっていくっていう
のは ちょっとずつですけども そう なっていってると思うんですけ
れども 思いますと そう考えると やっぱ PCの流れと同じく 昔は
5個までとか7個までとか言われて たけれども スマホのアプリの場合
も6個OKとか7個OKっていうふうに なっていく可能性はあるんじゃない
かなと思います なんで 今の5個常識 っていうのはもう完全にあると思
うんですけども そこにとらわれ すぎなくてもいいのかもしれない
なというところが スマホ これから ちょっと流れ 予測できることとして
未来のUIデザイン
神田淳生
あるんじゃないかなって思います
s-umemoto
なるほど ありがとうございます 確かに解像度上がってるし 何だっけ
iPhone Airか ちょっと自分 iPhone ユーザーじゃないんで ちょっと
忘れてたんですけど iPhone Airだよね
神田淳生
Airですね はいはい
s-umemoto
あれもう売れてないらしいね
神田淳生
そうなんですか
s-umemoto
一部の情報を見ただけだからファクト じゃないんで ただの予測ですけ
ど 結構見るのってミニサイズ が嬉しいとか SEが嬉しいみたい
なの見るけど やっぱりある程度 売れないから どんどんでっかく
して容量とか充電おもちが良く するみたいな動きにどうしても
流れていってるみたいなの見ます よね
神田淳生
そうですね なんで ちょっとやっぱり 一画面内の情報量とかどんどん
多くしていきたいというか 大きい 画面で見たいみたいなのが多いん
ですかね
s-umemoto
そうだね 多分一応現段階でも iOS のデザイン マテリアルガイドライン
神田淳生
じゃない ヒューマンインターフェース ガイドライン
s-umemoto
そうそう ヒューマンインターフェース ガイドライン HIGか ヒューマンインターフェース
ガイドラインでも テンプレート Figma のテンプレート見てたらタブ
バーのメニューは7つが一応 今 上限にはあるよね
神田淳生
なるほど
s-umemoto
ただ それを実装してるところ あんまり見たことないんだけど
ね
神田淳生
5項ですよね
s-umemoto
5項が一番多いですよね やっぱり
神田淳生
これも結構長い間 5項が固定化 されてるというか 普通は5項 それ
に習って 新しく作るのも5項っていう 感じかな ありますね
s-umemoto
マジックナンバー5やから
神田淳生
そうそう そうなんですよね でも ちょっと この流れっていうのは
もしかしたら変わるかもしれない ですけど どうなるのか見てみたい
ですね
s-umemoto
そうね UIの未来がどうなるかは 多分 AIがだいぶガンと変えてくる
ような常識を変えるようなインターフェース 生まれんじゃないかなと思ってはいる
けど そこまで頑張って こういう 会社 経営できてるか分かりません
けど 頑張ってやっていきましょう UI UXとか言えんのかなみたいな
神田淳生
いつもね
なるほど
s-umemoto
自分の頭が理解できなくなったら 理解できる人をトップに添えましょう
神田淳生
そうですね
s-umemoto
はい ということで 今日も聞いて いただきまして ありがとうございました
神田淳生
ありがとうございました
s-umemoto
編集 後期 お疲れさまでした
はい お疲れさまでした
神田淳生
マジックナンバー5って もともと どこから来てる概念だったっけ
でも かなり 古いじゃないですか
s-umemoto
古いですか
神田淳生
なんか すごい古くからありそう ですけどね
マジックナンバー5
s-umemoto
マジカルナンバーで書いてます ね
マジカルナンバー7のプラマイニー だから
ジョージ・ミラー教授が発表した 論文
神田淳生
はいはい 何年だ
s-umemoto
人間の短期記憶の容量は7プラマイニー
なるほど それで私が勝手にマジック ナンバー5とか言ってたんですか
誰かが言ってたような気がするん だけどね
神田淳生
1956年ですって
s-umemoto
ええ でも自分が記憶できる数なんて 実は2やからね
神田淳生
2ですか
s-umemoto
よく 今から私が話した要点は3つ ありますって言って 2つ目で終わる
っていうパターン
神田淳生
あと残り2個何やっけ
s-umemoto
残り1個
神田淳生
分かります
s-umemoto
マジカルナンバー自分の中では 2やからね
神田淳生
やっぱそっちのほうを重視した ほうがいいですよね
s-umemoto
そうね 私はもう朽ち果てていく ほうなんで そっちの方向に
神田淳生
やっぱ最初に4つありますとか言わん ほうがいいってことですよね
s-umemoto
和術の話
神田淳生
和術の話
和術の話
やっぱ先回りして考えるともう 忘れる可能性高いんで
s-umemoto
そうそう なんかね賢く見られ たいなっていう願望が働いて
結論から言いますとか3つあります とか言うけど 話してたら何やったっけ
あと1個みたいな
神田淳生
面白いですね それは
s-umemoto
多分だいぶこいつアホやなって 思われてると思うんですけど
神田淳生
逆効果
s-umemoto
逆効果
皆さんも多用しすぎないように 気をつけていただいてください
今日もありがとうございました
神田淳生
ありがとうございました
