UIデザインと守破離の精神

デザイン業務ではしばしば“奇抜さ”が求められることがあります。人間は常に新しい形や刺激的な表現を求めていて、誰もが思いつくようなものでは受け入れられないことも多々あります。そのことは十分に承知の上で、私は良いデザインとはどこか“普通の形”をしているものだと考えています。普通というとなんだかネガティブにも捉われがちですけれども、環境に融け込んでいて違和感がないという意味で、普通であることはデザインの目指すべき一つの姿なのではないかと思います。はじめ奇抜な形をしていたものが次第に社会に受け入れられていって、いつからか「普通」になっているようなこともあります。｢新しくあること」と「普通であること」は必ずしも二項対立の関係ではありませんが、どちらを取るべきかでしばしば頭を抱えてしまうデザイナーは私を含め多くいらっしゃるのではないでしょうか。

UIデザインの世界を見てみても、やはりどこか「普通ではないこと」が評価される風潮を感じられることがあります。もちろん表現の可能性は常に広い視野で捉えておきたい気持ちはあるのですが、すべてを「正解はないものだから良い」として受け入れてしまうと、そこには秩序というものが成り立ちにくくなってしまいます。GUIを前提としたときにUIデザインとはソフトウェアデザインの文脈でも捉えられるべきです。ソフトウェアデザインにはソフトウェアの仕組みと論理的に向き合わなければならない設計過程が存在します。コンピュータのロジックであるわけですから、究極は0と1で成り立つ世界です。ですから、ソフトウェアデザインの段階ごとにデザイナーの向き合い方を柔軟に変えていかなければなりません。

プロフェッショナルのUIデザイナーとして、｢UIデザイン」と呼ばれる世界とどのように向き合っていくと良いのか、どのような精神をもつと良いのか、今回は守破離の精神に準えながら考えてみることにします。

｢らしさ」の認識

デザインの基本姿勢は、環境に融け込む「形」を探り、それを磨いていくことであろうと考えています。UIデザインにおいても基本の原理原則にまずは忠実な姿勢をとり「普通の形」を目指しつつ、秩序が崩壊しない程度の型破りに挑戦してみたいものです。この「普通の形」は言い換えると「らしさ」とも表現できます。

では、｢らしさ」とは一体誰が決める価値観なのでしょうか？

「らしさ」｢普通」とはおそらく相対的または主観的であり、コンテクストに大きく依存する何かの基準なのだろうと思います。私にとっての「○○らしさ」とあなたにとっての「○○らしさ」はきっとどこか違っていて、似たような価値観を持っていたとしても完全一致するものではありません。

関東と関西の文化の違いについての話題はよく耳にしますが、この話は「らしさ」や「普通」の基準を考える上でも参考にしておきたいと考えています。例えば関東で育った私にとって肉じゃがは豚肉、雑煮は角餅、焼きそばはペヤング、ソースはブルドックが普通ですが、関西の人々は、肉じゃがは牛肉、雑煮は丸餅、焼きそばはUFO、ソースはオタフク、いやいや「どろ」ソースや、と言うかもしれません（笑）。地上波テレビのチャンネル（リモコン）番号をとってみても、1、2が公共放送、4が讀賣系列、5が朝日系列、6が毎日系列だと認識しているのは基本的に関東に在住経験のある人のみで、関西の人にとっては違和感が大きいことでしょう。

ある一つの視点から見える「形」と別の視点から見える「形」が必ずしも一致しているとは限りませんし、一致していないからこそ、多様な文化が育まれるのだと思います。そしてそれぞれに適した形があって、それぞれのデザインがあるのだと思います。

「らしさ」を「あるドメインにおける多数派の価値観」と定めると、デザインにおける「らしさ」を測る指標を立てやすくなります。どのアーキテクチャを採用し、どういった設計思想を持ってデザインと向き合うのか。そこではどういった形が「普通」だと言えるのか。デザインでは目当てとするイメージや価値観の共通認識を持つことが大切です。そしてその共通認識の中で「らしさ」のイメージが醸成されてゆくのだろうと思います。

守破離の精神

我が国では修行の段階を説く精神として「守破離（シュハリ）」の考え方がよく知られています。昔学校で習ったことがあるかもしれませんが、デザインの捉え方を考えるにあたり、改めてこの言葉の意味をおさらいしてみます。

守：師から習った流儀を忠実に守り、外れることなく身につける
→ 流儀を一人前にこなせる
破：流儀を身につけた後、一歩進めて自らの特性に合うように改良する
→ 身につけた流儀に独自の改善・改良を施せる
離：｢守」に捉われず、独自に新境地を拓いて一流を編み出す
→ 新たな流儀を開発できる

もとは茶道や武道における師弟関係やその修行の形式を表す精神のことで、千利休の時代から伝わる言葉だと言われています。

ではそろそろUIデザインらしい話をしましょうか。思いつく事例を参考に、それらを守破離の精神にあてて考えてみましょう。

守：原理原則に忠実な設計

UIデザインにおける「守」とは、よく知られたデザイン原則やアーキテクチャの原理原則に忠実になることです。

ノーマン、シュナイダーマン、ニールセン、Apple HIGなど、よく知られたデザイン原則を自らのデザインに導入し、一般的に良しとされるユーザビリティの基準を満たしつつ、すでに構築されているアーキテクチャに適合させるための「正しい形」を目指すことが大切です。「すでに構築されているアーキテクチャ」とは例えばOSが備えるインターフェイスの仕組みのことです。iOSならばUIKitを中心としたCocoa Touch、macOSならばAppKitを中心としたCocoaが挙げられます。

私はこのことを「インターフェイスアーキテクチャ」と呼んでいます。

UIデザインにおけるインターフェイスアーキテクトの役割

「『守』とは、師から習った流儀を忠実に守ること」とありましたが、ここでいう“師”とは、デザイン原則や先人の経験則、アーキテクチャの原理、あるいはそのガイドラインのことを指します。「まずはHIGを読んで基本を理解しろ」とよく言うのは、｢破る前にまず基本の流儀を身につけ、それから破っても成り立つ道を探れ」という意味になります。闇雲に型を破ることを模索するのではなく、守りを固めて型破りに挑むことがデザインの基本姿勢です。

もちろん、守りの構えをするのは半人前や一人前のデザイナーに限ったことではなく、師範級のデザイナーでも基本姿勢は怠らないものです。デザイナーが成長すれば原理原則は何でも破っても良いと捉えるような発想は大きな誤りです。

次に守りのためのデザインパターンの例を示します。

Master-Detailパターンの導入

詳細ページに至る動線には、要素の概要が並んだ一覧ページを経る形にすること。ナビゲーションの大まかな流れとしてドリルダウン形式にすること。

これはUIデザインの基本パターンですから、最小単位で守るべき事柄としてデザインに取り入れましょう。

Mac, PC, iPadのような大きなスクリーン向けのUIではマルチペイン構造を採用して、複数の“枠”でインターフェイスを区切ります。iPhoneやAndroidのような小さなスクリーン向けのUIでは1ペインをフルスクリーン表示にして、ドリルダウン形式の遷移を行えるようにします。

デスクトップとモバイルいずれにおいてもマスターペインから詳細ペインに向かって情報が展開する構造は同じです。

モードレスインタラクションの基本原則

OOUIのモードレスインタラクションの設計では、まず名詞にあたるオブジェクトを選び、次に動詞にあたるアクションを実行する形を基本とします。

これはUIデザインの基本パターンですから、最小単位で守るべき事柄としてデザインに取り入れましょう。

UIのデザインにおいて、まず最初に何か「機能」だとか「ユーザーがすること」あるいは「（サービスが）ユーザーにやらせたいこと」といった具合の発想をまず持ち始めてしまうと、そこで生まれる製品は「ユーザーに無理やり何かをやらせるための仕組み」を形にしたものに仕上がってしまう可能性があります。デザイナーの思想や考え方がそのまま製品のデザインに反映されるのです。そうではなく、ユーザーが取りうる可能性というものを探り、デザインの中で生まれる価値を大きく発展させられるような製品に仕上げていくことが大切です。モードレスインタラクションはUIの仕組みをユーザーに押し付けないための基本原理の一つです。

手のひらツールの基本設計

自由スクロールするための「手のひらツール」は、対象領域をスペースキーを押下しながらドラッグすることで使用することができます。カーソルインタラクションの観点では、カーソルが対象領域に侵入したところでスペースキーが押下されている間のみカーソルアイコンを「手のひら」に変化させ、ドラッグの最中にはカーソルアイコンは手を握ったような「つかみ」の形状に変化させることも考える必要があります。

このインタラクションはPhotoshopをはじめとしてデザインツール界では概ね一般的です。表現の多少の差異は見られますが、広く認知され普及しているデザインパターンには細かな振る舞いの単位でも基本に忠実になると良いでしょう。

データ読み込み中の表現方法とインタラクションの基本設計

データ読み込み処理中には、不要に画面全体をローディング表示で覆い隠すのではなく、データ読み込みが及んでいるビューの外側を操作可能としておきます。
画面全体を覆い隠す形でローディング表示を行なってしまうと、部分的読み込み処理のためだけにアプリケーション全体のインタラクションが行えない時間が生じてしまいますから、モーダルなインターフェイスへと近づいていきます。

非同期で遅延読み込みを行う仕組み（Lazy loading）をデザインし、インターフェイスもモードレスに振る舞える形を保つことが大切です。

ネイティブアプリケーションとして設計

アプリケーションの設計は、マルチプラットフォーム系のフレームワークやガワネイティブ（WebViewアプリケーション）にするのではなく、なるべくOSに適合するネイティブアプリケーションとしてデザインしましょう。そのためにHuman Interface Guidelinesに代表されるインターフェイス設計のためのガイドラインが公開されています。Webアプリケーションであればブラウザの標準的な挙動や標準仕様に忠実になる姿勢が大切です。

「画面の表示が行えればなんでも良い」という発想はUIデザインの視界からは捨てましょう。異なる技術で実装されたインターフェイスには「本物」とは異なる違和感が多く散らばっています。ちょっとしたアニメーションの動き方の違い、色味、書体、ぎこちなさ、ネイティブなら普通行えるはずのOS共通の操作ができない、普通ではない振る舞い方など、そういったインタラクションの小さな違和感が積み重なって「偽物感」を醸成し、その世界の秩序を崩壊させてゆくのです。アクセシビリティの観点でもこのことはよく考える必要があります。

もしも、OSの仕組みで提供されるアプリケーション間のドラッグ&ドロップによる対話の仕組みが“ある”アプリケーションのみでは機能しないとしたならば、それは実質的な「障害」とみなすこともできるでしょう。それはアプリケーションデザインがOSのインターフェイスアーキテクチャに対し「守」の姿勢を取らなかったことでもたらしたユーザーに降りかかる不幸であることは明らかです。非ネイティブアプリケーションではこのようなことが往々にしてあります。

予算や技術的制約からマルチプラットフォーム対応を謳うアーキテクチャを採用し、iOSやAndroidのアプリケーションを「1ソース」で同時に開発することも実際ありますけれども、1ソースにまつわるプロコンはあくまで開発者側の都合によるものであって、ユーザーが求めている／求めたことではないのです。

破：守からの発展、応用の設計

UIデザインにおける「破」とは、守るべきデザイン原則を取り入れつつ、そこに幾らかの応用を盛り込んで目当てのものを形づくることです。「守」の精神を身に付けたデザイナーは、原理原則やデザインガイドラインと大きく矛盾しない範囲での「型破り」なデザインに挑んでみましょう。そのように作られた「形」は、生まれた当初は原理主義的には異端のように見えることもあるかもしれませんが、デザインのアーキテクチャが基本的に守られ、コンテクストが大きく変化しなければ、次にその「異形」は新たなデザインパターンとして定着することがあります。

いわゆる「型にとらわれない大胆なデザイン」などと評されるものは、このことを指すのかもしれません。あるいは、今あるよく知られたデザインパターンの多くは、もとは「破」のアイディアから生じた形なのかもしれません。

｢型破り」とは、まず型（パターン）があってそれを承知の上であえて破ることをいうのであって、型を知らない人間が型を否定することは「形無し」（または型無し）といいます。守りも知らない半人前の者が「HIGなんてわざわざ読まなくてもアプリのデザインはできる」などと述べる言動は、まさに「形無し」の振る舞いなのです。ソフトウェアデザインとはすでにある形を取り込んで応用を繰り返していくことでもありますから、デザイナーの個人的な趣向や思想によりすべてを1から作り上げることはまずありません。

例えばアプリケーションとは「応用ソフトウェア」ともいいますが、この言葉が表すようにOSが備える基本原理の上に成り立つソフトウェアであることを認識しておかなければなりません。もしも、あるプラットフォームの世界ですでに備わっている仕組みを崩す「形無し」が現れると、アプリケーション間の一貫性や整合性といった秩序が失われる懸念が高まります。たとえ特定のアプリケーションの内側だけで整合性が取れていても、アプリケーションの外側でそういった仕組みが保てていないとプラットフォーム全体のデザインを壊してしまうことにつながりますし、結果不幸になるのはユーザーです。ですから、デザイナーの「型破り」はそれだけ責任が伴う振る舞いでもあることを忘れないようにしましょう。

「守」の精神を備えてからの「破」の精神であるということです。

UIデザインを含むソフトウェアデザインを学ぶ者は、まずはプラットフォームやそのアーキテクチャの基本的な原理原則を理解してから「型破り」に挑戦してみることです。破りは一歩間違えれば「形無し」にも化けるので、よく注意しながら挑みましょう。

次に、破りから生まれたであろうデザインパターンの例を示します。

Pull-to-refresh（引っ張って更新）

iOSのUIScrollViewが備えるバウンスバック効果を活用し、端に位置するビューを指でさらに引っ張って離した際の挙動をトリガーにして更新処理を実行するパターンです。
Twitterクライアント“Tweetie”の作者 Loren Brichter 氏が発明。Twitter社がこのアプリケーションを買収し、現在の“Twitter” iOS appになりました。Twitter社は特許権を防衛手段にのみ行使すると宣言したため、Pull-to-refreshパターンが広く普及しました。iPhone後に現れた「もっとも重要なデザインパターンの一つ」と考えられます。

関連：

• Twitter、特許に関する新方針を発表–防衛手段としてのみ特許を使用 – CNET Japan
• Introducing the Innovator’s Patent Agreement – Twitter
• Brewing our first IPA patent, and new adopters – Twitter

自動更新

通信技術（回線速度）の進歩とUIの様々なパターンが広まったことで、更新ボタンやPull-to-refreshジェスチャで手動更新をする操作方法から、システムがいい頃合いに自動更新を行ってくれる仕組みが一般化しました。このパターンの定着によって、「更新ボタン」を見かける機会は少なくなりました。
Pull-to-refreshと同様に、UI表現のブレークスルーが起きるきっかけとなった重要なデザインパターンの一つと考えられます。

テーブルビューセルの横スワイプアクション

テーブルビュー（リスト型ビュー）のセルをスワイプしてアクションを実行できる仕組み。このアイディア自体は元から知られていましたが、Clearの実装はのちのiOS 7以降のデザインにも影響を与えたのではないでしょうか。

Clear – App Store

ハンバーガーメニュー（ドロワーメニュー）

主にモバイルWebにおいてタブバーの代わりに用いられるようになったナビゲーションパターン。Webページの構造的に、ネイティブアプリケーションのようなグローバルなタブバーと入れ子構造のビューを個別に状態遷移させるような実装が難しいことが、このデザインパターンが広まった要因の一つと考えられると思います。またあるいは、既知のMaster-Detailのパターンを応用した「ページの上位階層の一覧ビューをドロワー形式で呼び出す仕組み」が一般化したのかもしれません。
いずれにせよ、iPhone（ネイティブインターフェイス）では一般的な下タブバーのナビゲーション表現がモバイルWebとは相性が良くなかったことが大きいかと思います。

モバイルのネイティブアプリケーションの世界ではハンバーガーメニュー（ドロワー）は既存のUI構造との矛盾が多く生じやすいため、積極的に取り入れるべきパターンではありません。iOS HIGでは一切の言及はなく推奨されません。Material Designではパターンの一つとして定義されていますが、昨今のAndroidではBottom Navigationを採用する事例が増えているので、あえてハンバーガーメニュー（ドロワー）を積極的に使う意義はあまりないでしょう。

apple.comのスマートフォン向けサイズクラスではハンバーガーメニューのようなインターフェイスを採用しています。Appleのネイティブアプリケーションではこのパターンは基本非推奨扱いですが、彼らはWebにおいては異なる解釈をしています。

この事例でわかることは、プラットフォーム（iOS, Android, モバイルWeb）それぞれの特性に合ったデザインパターンが求められ、そして既存のパターンを応用しながら個別に発展していくことがある、そういった適性の違いです。デザインパターンはプラットフォームに深く依存することがあるため、たとえ特定の領域ではそれが最適な表現だったとしても、その他の領域では適さない場合もあり得ます。プラットフォームを跨いだUIデザインに際しては、それぞれの世界の「慣し」を脅かさないような配慮が必要です。すなわち、どこを守るべきで、どこを破っても許されるのか、その絶妙な区別をするための嗅覚を備えることです。

Things 3 (iOS)

ThingsはToDoリストを管理できるiOSアプリケーションです。macOS版もありますが、ここで言及するのはiOS版のみであることに注意してください。

ThingsのUIの様子を観察すると、iOSの標準的なコンポーネントに深く依存せず、独自の表現を多く盛り込んでいることが見て取れますが、その「破り方」は適度にバランスが保たれているようにも見えます。基本の部分ではiOSらしさを残しつつ、Things独自の表現を程よい具合に盛り込んでうまく同居させているアプリケーションのように思います。

iOS HIGは実のところそれほど縛りのきついガイドラインではなく、表現方法にはある程度の「ゆとり」があります。審査が厳しいAppleのイメージがあるので意外かもしれませんが、HIGで何かを強いるところはそれほど多くはない印象です。禁止事項として挙げられている項目も読んでみれば割と当たり前のことを言っていたりしていて、それは受け入れられない“きつい”ルールではないことがほとんどです。それで言うとGoogleのMaterial Designの方が厳密なdp値指定などが多く、ガイドラインレベルでは縛りが“きつい”印象があります。

ThingsのUI表現は、iOS HIGやUIKitの「ゆとり」にうまく入り込み、独自の表現方法を発展させた好例であると私は考えています。破り方としては理想的な事例です。

※あくまで筆者個人の印象ですので絶対的な評価ではありません。

離：新たなインターフェイスアーキテクチャ

守破離の「離」とは、新たな流儀を開発し独自の境地を拓くことを言ったのでした。UIデザインにおいては、特定のプラットフォームに依存するのではなく一からプラットフォームを興し、その世界の秩序を形作るための礎からデザインすることです。将来プラットフォームになり得るデザインとも言えそうです。

Mac OS Xから派生したiOSやWindows OSから派生したWindows Phoneがこれに当たるかもしれません。リモコン型インターフェイスを取り入れたWiiも事例として数えられるかもしれません。

これは新しいインターフェイスのアーキテクチャを形作るデザインですから、よほど大きなプロジェクトでもない限りはデザイナーがこの姿勢を取ることはないであろうと思います。ただ、新しいとはいえ、基礎の部分では以前から存在したデザインを踏襲することもあり得るものです。いくらスマートフォンがそれまでのPCとは画一的だったとしても、それを使う人間の思考・姿・形は大きく変化しませんし、基本的なデザイン原則は普遍的なものですから、根底の部分では守りの姿勢であるべきでしょう。

UIと「イディオム」の形成

守破離の精神と合わせて理解しておきたい設計の考え方があります。「イディオム」とは直訳すると「慣用」です。使い慣れていること、慣習、一般的、普通であることを言います。UIの表現や操作方法のデザインでは、それらをどのようにして習得するのかを考えることも大切です。どのような仕組みであれユーザーはまず学習をする必要がありますが、優れたイディオムは、一度学習すればすぐに身につけることができ、応用しやすいものだと言われます。

UIのイディオムは様々な原始的要素が組み合わさって出来上がっています。小さな単位ですと「クリック」だとか「文字の描画」のような単純な仕組みから考えることができます。もう少し複雑になってくると、「クリック」を組み合わせた「ダブルクリック」や「ドラッグ&ドロップ」などが検討できるでしょう。ユーザーはコンピュータ（GUI）を扱うのにマウスの操作方法やクリックなどの基本動作の意味を理解しておく必要がありますが、それらさえ知っていれば、原始的要素をベースとした複雑な操作や表現の習得にもさほど時間がかからないのです。

Design is How it Works

UIデザインを守破離の精神で捉える試みをしました。特にソフトウェアデザインとしてでは、すでにある仕組みを如何にして踏襲し、改良し、機能させるかを考えることが求められます。スティーブ・ジョブズの言葉を借りると、デザインとは「どのように機能するか」を考えてゆく営みですから、環境に適合する“普通の形”をまずは探っていく姿勢が必要でしょう。そのようにして、壊してはいけない部分と壊しても良い部分との見分けを付けられるようにするのです。一方で表現方法というのは絶対的な正解、唯一の表現はないものですから、そこは画一的な思考とはならずに型破りに挑戦していく姿勢も併せ持っておきたいものです。ただし、正解を探すことではなく、間違えずに挑むことだと思います。

何事もバランスをとることが大切ですから、原理主義に凝り固まらず、他方「形無し」の滑稽さを演じることがないよう鍛錬を繰り返し、｢良き形」を編み出せるUIデザインのプロフェッショナルを目指したいと思います。