オープニングとテーマ紹介
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は株式会社ajike代表の梅本と、その仲間たちがデザインについて、雑談を交えながら話す番組です。
今週もタイトルコールをゲストの神田が務めております。梅本さん、よろしくお願いします。
よろしくお願いします。
はい。あ、ちょっと先週に比べてマシになったんじゃないですか?
全然ダメです。
同じでした。
たまたま聞いてる方のために言うと、ちょっと歯の矯正をして話し方がおかしいですけども、ご容赦ください。
はい。
つらいね。
そうですね。口が痛いまま何日も過ごすのはつらいし、ちょっと食べ物が食べれないのはつらいですね。
そうですね。豆腐とウィラインゼリーばっかり食べて、最近ちょっと2キロぐらい痩せました。
そうなんですか。
うん。ダイエットしたい人は手術矯正おすすめです。
計らずもですよね。そうなると思ってなかった。
そうですね。やっぱりこれも入り口と出口とかビジネスの考え方を取り入れると、入り口を制するということで、カロリー摂取の入り口を制したことで。
そういうことですか。そうすると体重が落ちたっていうことですか。
体重が落ちたということで。
なるほど。
だって3キロぐらい落としたいなと思ってたら、計らず。
そうですか。
OKRみたいな感じですね。KRが結果そうなったみたいな。
別のところにオブジェルとはあったような気がするんでしょうね。
そうですね。ということで、今日のテーマは何でございましょうか。
今日のテーマは、「アイコンボタンからテキストって省いていいの?」というテーマで話したいと思います。
なぜこのテーマにしたんでしょうか。
アイコンだけのボタンとかナビゲーションとかよくあると思います。
使い慣れてるサービスとかだったらあんまり意識してないかもしれないんですけども、よくよく見ると、
このアイコンボタンってテキストないけど、どういう操作なんだっけみたいなのがわからないようなものも結構あるなと思ってます。
あるな。
設計側としては、やっぱり画面内をすっきりさせたいみたいな意識って結構強いんで、
テキストも省いていいなら省きたいですし、同じテキストを何個も連続で書くみたいなのってちょっと嫌う傾向にあると思うんで、
どんな考え方でアイコンだけでいいって判断できるのかなっていうところを今日はテーマにしたいなと思ってます。
いいテーマですね。
では早速内容のほうをどうぞ。
アイコンボタンの意味を問うクイズ
まずちょっと梅本さんに、このアイコンボタンの意味わかりますかっていうところのクイズをしたいと思います。
え、この口が痛いときかつラジオやのに、この四角クイズ。
そうですそうです。四角クイズです。
一応ちょっと説明をしますと、1個目が梅本さんには今見ていただいてますが、
本のアイコンですね。本の形をしたアイコンの右下にプラスボタンがあるアイコン。
これどういうアイコンか知ってますか。
ライブラリ作成とかですか。
近いですね。ちなみに何のサービスで使われているアイコンかというと、
ノートです。
ノート。わかりましたわかりました。
何ですか。
名前忘れましたけど、たぶん自分のノートに追加するとかそうなっちゃいますか。
そうですそうです。さすが。
正解は記事をマガジンに追加するっていうボタンですね。
自分のマガジンに追加することができるっていうアイコンボタンで、
形としてはノートのアイコンの右下にプラスがあるんで。
本の形をしたアイコンの右下にプラスがあって、記事を追加できるっていうものです。
じゃあもう一個だけ。
もう一個はこれですね。何かというと、右上の方向を向いている紙飛行機みたいなアイコンです。
これどんなアイコンかわかりますか。
これはあれですよね。僕らのヒロアカに出てくるキャラクターのお口ですよね。
タラコくちびるのお口。
違いますか。
タラコくちびりではないですね。
ではない。紙飛行機から送信じゃないですか。
これはインスタに使われているアイコンなんですけども。
米男さん、普段インスタ見たりしてますか。
いやあんまり見ないですね。
インスタも使ってないんですけども、
投稿の一つ一つに右上を向いている紙飛行機のアイコンがついてるんですね。
これが何かというと、投稿をシェアするとかメッセージを送るっていう。
誰かにこの投稿をシェアしたりとかメッセージを送るっていうところでこのアイコンが使われてます。
リポストでいうか、そういうのじゃなくてシェアするんだよね。
そうですね。PCでインスタ見ると、ナビゲーションにこのアイコンがあるんですけども、
その横にテキストが表示されて、それはメッセージって書かれているんで。
これがメッセージアイコンみたいです。
難しいですね。
インスタは普段全然見ないんですけども、ノートとかはよく見るんですが、
この一問目の記事に追加するアイコンのボタンの意味は全然わかんなくて、
目にも入ってなかったというか、あんまり気にしたことがなかったんですね。
どちらもですね、一個一個の記事に必ずついていたりとか、
インスタの投稿をひとつひとつに必ずついているんで、
もしこれはテキストとセットのボタンにしていたら、
画面内にいっぱいテキストが並ぶことになるんで、
それは設計者としてはあんまりやりたくないっていうことなのかなと思っています。
PCの場合はマウスで操作するんで、
ホバーすると吹き出しで記事に追加ってのが出てきます。
そこらへんはカバーされているっていうふうには言えると思うんですけども、
ただスマホだったら表示されないですし、
アイコンだけで意味を伝えないといけないっていうのがあるなと思うので、
そこらへんがちょっと難しいなと思っています。
なるほど。
テキスト省略の判断基準：メンタルモデルとヤコブの法則
テキストをつけるときとつけないときの判断って、
いろんな考え方があると思うんですけども、
テキストを省いていいのはどんなときなんですか?
そうですね。まず前提として、
知っておきたい考え方っていうのが2つあるなと思ってまして、
1つ目はメンタルモデルです。
メンタルモデルっていうのは、無意識の価値観っていうふうに言われておりまして、
無意識的にこれってこういうもんだよねっていうふうに
みんなが理解していることですね。
2つ目がUIデザインの法則とかでよく言われるんですけども、
このYACOBの法則っていうのがありまして、
どういうことかと言いますと、ユーザーは他のサイトとかアプリで
慣れ親しんだ操作感っていうのを自分のサイトにも期待するっていう
このUXデザインの原則があります。
なのでUIデザインとかで設計するときは、
斬新で見たことないようなUIとかを設計するよりも、
一般的な操作感のほうが適切であるというふうに言われています。
この2つの法則っていうのを知った上でなんですけども、
どういうときにこのテキストを省いていいかっていうのは、
2パターンあると思います。
1個目はアイコンの意味っていうのが広く一般的に認知されているときは、
特にテキストをつける必要がないと思います。
例えばすごく有名なので言うと、検索の虫眼鏡のアイコンですね。
あれはどこのサービスでも共通して使われてますし、
虫眼鏡のアイコンの隣に検索っていうテキストがなかったとしても、
これを押したら検索されるんだなっていうのは、
もう皆さん無意識的に認識していると思います。
なので、メンタルモデルが出来上がってるってことですね。
その他で言うと、ホームボタンとか、
家のボタンがあったらホームに戻るんだなみたいなのが、
もう皆さん認識されていると思いますし、
あとはブックマークのアイコンとか、
しおりを模したアイコンみたいなのもよくあると思いますし、
そういうのは広く一般的に認知されているっていうふうに言えるかなと思います。
逆もあって、保存するアイコンっていうのに、
フロッピーの形が変われてるアイコンがあるじゃないですか。
あれはどこでだったか忘れたんですけど、
最近見たんですよ、フロッピーのアイコン。
一昔前までは、これを押したら保存って認識してたと思うんですけども、
フロッピー自体も前すぎて、なじみがなくなってますし、
あとはツールとかを使ってても、
手動で保存するというよりかは自動保存が当たり前になってきているんで、
目にする機会が、頻度がすごく少なくなってきて、
逆にこのメンタルモデルがなくなってきて、
何のアイコンなのかちょっと意味がわかりづらくなってるなっていうふうに思いました。
確かにね。今の20代の人とかもしかしたら見たことないかもしれないですよね。
見たことはもちろんないと思いますし、自分も見たことはあるんですけども、
幼少期の記憶みたいな感じですよ。
そうなの?
家にパソコンあって、そこでフロッピー入れて保存してたって、
小学生とかそんぐらいの記憶ですね。
5インチとか3.5インチのやつをパシッて入れて囲ってやるのやってないんですか?
やってないです。
え?俺そんな年齢離れてたっけな?
どこさですけどね。
おかしいな。
もうCDとかじゃないですか、CD-ROM。
え?
自分で言うとそういう記憶があるんで、フロッピーアイコンはあんま通じなくなってるかなと思いますね。
だって一つのゲームをやるのに10枚ぐらいリスクがあって、
1からやってストーリー進んでいったらフロッピー変えなあかんのよ。
もうあんま言ってる意味がわかんないですよ。
芝居太郎か。
歯痛いから今、悪いモードになってるからね。口悪い。
一言で終わらせようとして、芝居太郎。
ご存じないですか。
自分もあんま馴染みがないですし、さらに年月が経って、
アイコンからパッと連想されづらくなって、
というところで、話が横にずれちゃいましたけれども、
今のフロッピーの例っていうのは、
逆の認知がなくなってきたからテキストを一緒に付けたほうがいいんじゃないかっていう例ですけども、
検索アイコンとかホームボタンとか、
ああいうのが本当に何のサービスでも共通して使われてるアイコンなんで、
そういうときにはアイコンだけでも全然成立がしていて、
わざわざテキストを付けなくても通じるのかなと思います。
これが一つ目ですね。
サービス独自のメンタルモデル形成
一つ目だよね。
二つ目何でしたっけ。
二つ目はサービス自体が何年もかけて築いてきたメンタルモデルっていうのがあるときです。
例えば何を言ってるかというと、
X、Twitterのリポストのアイコンって矢印がぐるぐるしているのがあると思うんですけども、
例えばあれを想像すると、
あのアイコンボタンの横にテキストは当然ないですよね。
リツイートとかリポストみたいのはなくて、
アイコンだけだと思います。
当初は矢印のぐるぐるっていうのは初めての人にとっては、
これ押したらどうなるのかっていうのが意味はよくわからなかったはずなんですけども、
今やもちろん認知されていて、
これを押したらどうなるのかっていうのが皆さんわかっていると。
これは本当に何年もかけて認知を広げてきて、
メンタルモデルを作ってきたっていうふうに言えるなと思います。
なのでこういう場合は、
アイコンボタンだけでも成立がしているんですけども、
ユーザーが初期の段階では結構混乱してしまうっていうのがあるかなと思っているので、
どういうふうに認知してもらうかっていうのが難しいなというふうに思っています。
さっきの自分が例でちょっとクイズで出した、
例えばノートのマガジンに追加するみたいなのも、
マガジンに追加するっていう操作をするっていうのは、
あんまり広くいろんなサービスで使われているっていうものはなくて、
ノートの中ではそういうことができるっていう機能だと思うんですけども、
そういうものに対してテキストなくアイコンだけでそれを伝えるっていうのはすごく難しいなというふうに思うんですけども、
長年かけてメンタルモデルを築いていって、
広く浸透させるみたいなところを狙っていっているようなものなのかなと思っています。
確かに。
メンタルモデルは一般的な学習コストの低さみたいなのもあると思うので、
一般的にルフしている情報だから、これはこういう構造になるよねっていうのがわかりやすいアイコン。
さっきの2番のサービス自体が何年もかけてっていうのは、ある意味では資産やから、
デザイン界隈ってよく資産形状しづらい、数字の価値資産として形状しづらい、
現代のノレンなのかもしれないね、今の話は。
確かに。
もうそのサービス自体が何年もかけてユーザーに使ってもらって、
これはこういうものだというふうに無意識的に認知してもらってるっていうのが資産ですもんね。
そうそうそうそう。なんかこうね、よく言う、なんだっけ、
ルイ・ビトンが、ルイ・ビトンって言ったら高級っていうふうに思っちゃうみたいなのがあるので、
多分そういう数値化できないすごいものみたいなのがノレンですけど、
デジタルツールもそういうメンタルモデルを獲得するのはノレンを獲得してるのかもしれないなと思いました。
いやすごい、いいですね。確かにリポストのアイコンとかあれもすごいですもんね、本当に。
すごいね。
あとはミートとか見てても、画面共有とかって最初よくわからんかったけど、
確かに。
だいたいスクリーンに対して上矢印じゃないですか、どのツール見ても。
はいはいはい。
そういうメンタルモデル出来上がってきたよね。
出来上がってきてますね。確かにこれは最近ここ数年ですよね。
最初どうしようか迷ったやろうね、アイコン作る人。
そうですよね。
もともとミートのボタンとかだったらテキストついてなかったんですかね、どうなんですかね。
海外のサービスでだいたいつけへんよね。
マウスオーバーしてツールチップみたいな説明みたいのはあると思うけど、
無理矢理、多分海外サービスって俺様ルールを作るの上手いんやろうね。
ああ、なるほど。
これはもうこういうもんやからみたいな。
はいはいはい。確かに。
それもありですよね。強い意思があると思うんで。
うちのサービスはこういうものだからこれを理解して使ってくださいっていうことだと思うんで。
それは受け入れられるか拒否されるかっていうところで、
ミートとかも完全に受け入れられてますもんね。
そうだよなあ。
日本人とかいったらわかるように説明しすぎて、
検用機関のテキストとかめちゃくちゃ多いじゃないですか。
そうですね。そうなんですよ。
あれを一個のアイコンにしなさいって言われたらもう無理ですよみたいな話になるよね。
iOS設定画面のトグルボタンとまとめ
そうですね。自分も社内ツールのダッシュボードのデザインとか案件で関わったりもするんですけども、
ミゲーションの数とかすごく多くなったりして、
パッと画面開いたときの情報量がすごいんで、
場合によっては社内ツールっていうことは、
つまりこの社内の人にも認知してもらったら良いと思うんで、
このテキストを省いて、このアイコンはこういう意味ですよみたいなふうにしていくっていうのも、
さっきのCさんの話にもなるかもしれないですよね。
そうよね。
あと自分が色々アプリを触ったりしていて、
このアイコンボタンとはちょっと違うんですけども、
iOSの設定画面とかであるトークルボタンがあるじゃないですか、オンオフの。
通知をオンにするとか、そういうので設定する画面があると思うんですけども、
昔の画面のデザイン見てたら、
トークルのボタンの上にオンオフっていうテキストを持ってたんですよ。
そうかもしれない。
青く光ってるときはオンって書かれていて、
グレーの状態になったときはオフって書かれてたりしてたんですけども、
これも今はオンオフとかっていうテキストはなくて、
ビジュアルだけで表現してるんで、
これはもう完全にこれやったらどうなるのかっていうのはもうみんな認知したっていうことだと思うんで。
学習したとね。
学習したって省いてもOKっていうふうに判断したのかなと思います。
確かに。
面白いですよね。
面白い。勉強になるわ。今日の話は勉強になるわ。
はい。なのでちょっとまとめに入るんですけども、
アイコンボタンでテキストつけるべきか省いていいのかっていうところで迷うシーンはあると思うんですが、
省いていいと判断できる方法は2つあるなと思ってます。
1つはアイコンの意味が広く一般的に認知されている場合。
2つ目はサービス自体が何年もかけて築いてきたメンタルモデルがある場合。
こういう2つのパターンでアイコンだけでシンプルにしていいのかみたいなところが考えられるのかなと思ってます。
はい。いい話でした。
エンディングと編集後記
ということで今日はここで終わりましょう。
今日も聞いていただきましてありがとうございました。
ありがとうございました。
編集後期おつかれさまでした。
おつかれさまでした。
いい話だったなって言いたいところだけど、口が痛くて。
意識がベロの下に行ってます。
今日の収録がたぶん一番痛いときで、
次の原さんがゲストのときは2週間後ですよね、収録は。
そうですね。2週間後の収録のときには元気にしゃべりたいな。
終わってなかったらどうしましょう。
調整やめてると思います。
2週間後も変わってなかったら。
クーリングも効きませんみたいな。
そうですね。それも効きませんね。
そうですね。すみません、冗談ですけど。
確かにメンタルモデルな。
あんまり最近メンタルモデルとか意識してなかったな。
ああ、そうですか。確かにあんまり意識しないですよね、そんなに。
最近プロジェクト見るはするけど、ちょっと数おり減ってきたもんね。
なるほど。実際画面作るとかそういうのに関わる、そこに考えるみたいなのはすごい少ないですか。
うーん、今少ないね。今やっぱね、合流しての期間が終わって、そっちの管理系の仕事がめっちゃ増えましたもんね。
ああ、大変そうですよね、あれは。
言わんといて。
いろいろやることが変わって。
そう。やっぱり慣れないことをやると、自分の持ってるスキル、めっちゃ違うスキルを獲得せなあかんねんなって思わされるね。
なるほど。すごいポジティブシミング、いいですね。
まあ変化に対応ということで、俺の口も変化に対応していくでしょう。
そうですね。まとまったんですかね。
皆さん今週も元気にやっていきましょう。
では、ありがとうございました。
ありがとうございました。
