2015年以降のUIデザイン展望

消えるハードとソフトの境界線

Apple Watch のドキュメンテーション には、以下のような言葉がデザインコンセプトとして記載されています。

Even the physical border of the Retina display has been considered, resulting in edge-to-edge UI design that effectively renders that border invisible. Thoughtful app design should contribute to this experience of hardware and software feeling indistinguishable.
物理的なオブジェクトとソフトウェアには境界線がなく、UI デザインにもそれが表れています。よく考えられたアプリデザインは、ハードウェアとソフトウェアのルック & フィールの区別がつかないものです

写真でしか確認できていませんが、Apple Watch の写真を見る限り、どこがスクリーンの端なのか分かりません。どこからスクリーンが始まっているのか分からない見た目なので、UI デザインがハードウェアの一部のように見えます。実際、ストーリーボードで Apple Watch のデザインをする際、スクリーンの端から要素を配置するように指示されており、ハードウェアとの境界線が文字通りギリギリまできています。

Apple Watch

境界線があやふやなのは、スクリーンの端だけに留まりません。デジタルクラウンを含めたハードウェアの形状は、アプリケーションのデザインにも大きな影響を及ぼしています。円形のアプリアイコンから、角丸の UI ボタンまで、ハードウェアのデザイン言語と UI デザインがマッチしているかのように見えます。

ハードウェアを見据えた UI デザイン

パソコン上での UI デザインは、マウスやキーボードをはじめとしたハードウェアの機能を考慮していたものの、ハードウェアとソフトウェアのデザインが互いに影響するということが少なかったように思えます(初代 iMacAqua デザイン の Mac OS X は若干そうでしたが)。

ハードウェアとソフトウェアの境界線があやふやになってきたと感じた例が 2 つあります。ひとつは iOS 7 で大きく変わった UI デザインと iPhone 5c の登場。カラフルなハードウェアは新しくなった iOS の見た目と相性が良い色彩でした。昨年登場した iPhone 6 の丸みを帯びた形状も、iOS のデザインに近づけたもののように見えますし、サイトに掲載されている iPhone の写真は Apple Watch と同様、スクリーンの端がどこか分からない見た目になっているのが印象的です。

iPhone 5 と iPhone 6 の形状比較ハードウェアとアイコンデザインの比較

Apple だけでなく、Nest のようにハードウェアからデザインしているプロダクトにも同様のことがいえます。利用者の立場からすれば、どこがハードウェアかソフトウェアなのかが分からない見た目です。

いずれの例を見ても、UI デザインがスクリーンの中でどう描くかを考えるだけでなく、ハードウェアの形状(デザイン)に大きく影響されているのが分かります。ハードウェアでの操作が、直接ソフトウェアに影響を及ぼす製品は、境界線を感じさせないデザインが重要視されるのでしょう。スクリーンというキャンバスの中だけを考える UI デザインは、利用者に違和感を与える要因になるかもしれません。

Nest

UI デザイナーがハードウェアのデザインまでする必要はないですが、アプリケーションがどのようなデバイスで使われて、そのデバイスがどのようなデザインをしているのかは強く意識したほうが良いと思います。マルチタッチというハードウェアの機能に留まるだけでなく、ハードウェアの見た目も注視することで、UI デザインの可能性がさらに広がるはずです。

ハードウェアの動向も注目

一方、ハードウェアとソフトウェアの境界線を強く感じるのが Material Design です。スクリーンというキャンバス上では統制がとれた素晴らしいデザインガイドラインですが、ハードウェアによって Material Design が居心地が悪くみえることがあります。それは恐らく、Material Design のもつ形状と色彩が、ハードウェアの形状に合っていないからかもしれません。

すべてのスクリーンで一定の利用体験を実現させようとしている Material Design は、ひとつの正しい戦略ですし期待もしています。ただ、ハードウェアとソフトウェアとの境界線があやふやになればなるほど、スクリーンだけで世界観が作られている Material Design は違和感になるかもしれません。近い将来、Material Design に影響を受けたハードウェアが登場することで、ハードウェアとソフトウェアの境界線がなくなる可能性も考えられます。

Boston Business Journal によれば、スマートフォンの成長率は今後低下すると予測されています。スマートフォンはピークに達しており、今後様々なデバイスが開発・出荷されていくでしょう。そのなかにウェアラブルがあると思いますし、デバイスによってはハードウェアとソフトウェアの境界線があやふやなものも存在します。

今後訪れる世界は、スクリーンの中だけを考える UI デザインではなく、ハードウェアの形状を意識したハードとソフトの境界線を感じさせない UI デザインが求められるでしょう。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。