UI/UXの本質11 / 16

細部にプロダクトの本性が現れる

神は細部に宿る

「神は細部に宿る」という言葉がある。

私は、プロダクトを作る仕事を続けるほど、この言葉は正しいと感じるようになった。

私たちが日常的に手にしている優れた製品は、あまりにも自然に使えるため、どれほど多くの判断が細部に込められているのかに気づきにくい。

手に触れたときの感触。

画面を開いたときの余白。

アイコンの形。

ボタンを押したときの反応。

操作を終えたことを伝える短い言葉。

一つひとつは小さく見えるが、思想を反映した判断がそこにある。

プロダクトの思想がコンセプトとなり、形、言葉、機能、動きへ行き渡った結果として、細部は存在している。

細部は、プロダクトの思想が、具体的で、正直な形となって現れる場所なのである。

角の曲線にも、製品の考え方が現れる

2007年に登場した初代iPhoneは、携帯電話、音楽プレーヤー、インターネット端末を、ハードウェアとソフトウェアがつながる一つの体験としてまとめた製品だった。

そのつながりは、大きな機能だけでなく、形の細部にも現れている。

たとえば、アプリアイコンの角である。

Appleは、直線から曲線へ滑らかにつながる角丸を、画面の設計に用いている。開発資料では「continuous corners(連続的な曲率をもつ角)」と呼ばれる形だ。

直線が終わったところで急に丸まり始める形と比べると、角へ向かう線の変化が穏やかである。

通常の角丸と連続的な角丸 同じ大きさの二つの図形を比較。左は直線から円弧へ切り替わる角丸。右は直線から曲線へ徐々につながる角丸の模式図。 通常の角丸 連続的な角丸 円弧へ切り替わる 曲率が徐々に変わる 直線と円弧で曲率が切り替わる 直線から曲線へ滑らかにつながる
通常の角丸と連続的な角丸 上は円弧の角丸。下は曲率が徐々に変わる連続的な角丸の模式図。 通常の角丸 円弧へ切り替わる 直線と円弧で曲率が切り替わる 連続的な角丸 曲率が徐々に変わる 直線から曲線へ滑らかにつながる

曲がり始めの部分を拡大すると、その違いがさらに分かりやすい。

直線から角へ、曲がり始め方の違い 左の通常の円弧では直線の終点で曲がりの強さが急に立ち上がる。右の連続的な角丸では細い線がゼロから徐々に長くなり、直線からなめらかに曲がる。線の長さはその場所での曲がりの強さを示す模式図。 細い線の長さが、その場所での「曲がりの強さ」を表す 通常の角丸 連続的な角丸 直線の終点から円弧へ 直線から少しずつ曲がる 曲がり始めに段差がある 曲がり方がなめらかにつながる 角の一部を拡大した模式図。製品の輪郭を実測したものではありません。
直線から角へ、曲がり始め方の違い 上の通常の円弧は直線の終点から急に曲がる。下の連続的な角丸は細い線が徐々に長くなり、なめらかに曲がる。細い線の長さは曲がりの強さを示す模式図。 細い線の長さ=曲がりの強さ 通常の角丸 直線の終点から円弧へ 曲がり始めに段差がある 連続的な角丸 直線から少しずつ曲がる なめらかにつながる 角の一部を拡大した模式図 製品の輪郭を実測したものではありません

Appleのアプリアイコンに関する設計指針では、iPhone、iPad、Macのアイコンの角を、画面内のほかの丸みや端末の外周と揃えることが示されている。

※ 出典:Apple Human Interface Guidelines「App icons」

正面から見たスマートフォンと、キーボードを備えたノートパソコンの写実的なイメージ。端末の外形、画面内のパネル、アプリアイコンに、滑らかにつながる角の形を用いている。実製品の寸法や曲率を測定した図ではない。

端末・OS・アプリアイコンを貫く角の設計

端末の外形、OSの画面要素、アプリアイコンまで、角の曲線を一つの考え方で揃える。角の寸法が異なっても、製品全体にまとまりが生まれる。

アプリアイコン、画面の部品、手に持つ端末の形を、一つの造形の考え方でつないでいるのである。

すべての角を同じ寸法にするという意味ではない。それぞれの大きさや役割に合う形にしながら、隣り合う要素が自然につながるように整える。

見て、触れて、操作するたびに出会う形が同じ方向を向いていると、製品全体にまとまりが生まれる。

私は、そうした細部まで考え抜く姿勢が、Apple製品に触れたときの心地よさを支える一つの理由だと考えている。

細部は、使う人への約束になる

角の形をはじめ、色、文字、余白が揃っていると、次の画面にも同じ丁寧さを期待する。

そこには、見た目の約束がある。

使い勝手にも約束がある。押せるように見えるボタンは押せる。十分な間隔を空けて並ぶ選択肢は、隣の項目に触れずに選べる。

申込みの確認画面なら、金額や条件を読み取りやすい大きさと間隔で示す。その配置は、重要なことを落ち着いて確かめられるという期待につながる。

さらに、機能にも約束がある。

「次へ」と書くのか、「申し込む」と書くのか、「購入を確定する」と書くのか。

ボタンの言葉は、押したあとに何が起きるかを約束している。

「購入を確定する」を押した直後には「処理中」と表示し、操作を受け付けたことを伝える。処理が完了したら、「購入が完了しました」と結果を示す。

ボタンの言葉から購入完了まで 左から順に、購入を確定するボタン、押した直後の処理中表示、購入が完了したという結果を示す。同じ操作の前、直後、完了後を比べる図。 押す前 購入を確定する 押すと購入が確定すると分かる 押した直後 処理中… 受け付けたことが分かる 処理が完了したら 購入が完了しました 約束した結果を確認できる
ボタンの言葉から購入完了まで 上から順に、購入を確定するボタン、押した直後の処理中表示、購入が完了したという結果を示す。同じ操作の前、直後、完了後を比べる図。 押す前 購入を確定する 押すと購入が確定すると分かる 押した直後 処理中… 受け付けたことが分かる 処理が完了したら 購入が完了しました 約束した結果を確認できる

形から抱く期待、言葉から予測する結果、実際の反応が揃うことで、ユーザーは安心して次の操作へ進める。

小さな約束を守ることが、信頼になる

押せるように見えるものは押せる。

保存したものは失われない。

同じ操作には同じ反応が返る。

問題が起きたときには、何が起き、次に何をすればよいのかが分かる。

ユーザーは、見た目から受けた印象と、実際に起きたことが一致するたびに、次の操作も安心して行えるようになる。

その積み重ねが、「このプロダクトなら大丈夫だ」という感覚につながっていく。

小さな約束が積み重なって信頼になる押せる、保存される、同じ操作に同じ反応がある、問題時に次の行動が分かるという約束の積み重ねが信頼を育てる。 押せるものは押せる 保存したものは残る 同じ操作には同じ反応 問題時に次が分かる 信頼
小さな約束が積み重なって信頼になる押せる、保存される、同じ操作に同じ反応がある、問題時に次の行動が分かるという約束の積み重ねが信頼を育てる。 押せるものは押せる 保存したものは残る 同じ操作には同じ反応 問題時に次が分かる 信頼

反対に、一つの小さな約束が破られると、その不安は次の場面へ持ち越される。

本当に保存されたのか。

次に押しても大丈夫なのか。

表示されている言葉を信じてよいのか。

その疑いが積み重なると、ユーザーはプロダクトから離れていく。

細部の積み重ねが、使い続けたい気持ちを支える

iPhoneが長く選ばれてきた背景には、機能、性能、ブランド、サービスのつながりなど、多くの要因がある。

その中でも私は、使うたびに小さな期待が守られ、製品の隅々まで同じ考え方が感じられることを、大切な理由の一つだと考えている。

日々使うアプリでも、読み込み中の表示や通知の届け方、操作を間違えたときの戻し方に、プロダクトの考え方が表れる。

そうした細部まで、使う人にとって自然につながっているかが、使い続けるときの安心感を左右する。

ユーザーは、日々使う中で、そのつながりを感じ取っている。

その安心が信頼へ変わり、次もこのプロダクトを使いたいという感情につながる。

プロダクトの本性は、大きな機能にも、日々触れる小さな細部にも現れる。

見落とされやすい細部にこそ、企業が何を大切にし、ユーザーとどのような関係を築こうとしているのかが現れる。

だから、細部まで神経を行き渡らせる。

小さな約束を、一つずつ守り続ける。

その積み重ねによって、思想は初めてユーザーへ届き、プロダクトは長く信頼されるものになるのである。