ケータイ用語の基礎知識

第631回:フラットデザイン とは

 「フラットデザイン」とは、画面に表示するボタンやメニューといった要素を、平面的な見た目にデザインすることです。

 これまでよく使われていた、アイコンに陰影を付け、テクスチャやディテール、奥行きを意識した「リッチデザイン」と相対する言葉(対義語)の関係にあります。最近、特にWebサイトやモバイルユーザー向けインターフェイスデザインを中心に活用されています。

 たとえば、パソコンやタブレット用のOSである「Windows 8」、スマートフォン用OSである「Windows Phone」のユーザーインターフェイス(UI)デザインや、AndroidスマートフォンのアプリケーションストアであるGoogle Playストアなどにも採用されています。

 また、米アップルのiPhone、iPad、iPod touch向けOS「iOS 7」にも新たに採用されています。これまでのiOSでは、現実の物を画面上で再現する「スキューモーフィズム」と呼ばれる考え方が多く盛り込まれていました。たとえばiPhoneでは、iOS 6以前ではカメラで写したデータが入っている「写真」は、リアルなひまわりの絵が用いられていましたが、「iOS 7」では抽象的な模様に変わりました。カメラ機能を呼び出す「カメラ」のアイコンもリアルなカメラの画像から平面的なアイコンに代わっています。

フラットデザインを採り入れたとされる「iOS 7」の画面。これまでよりも抽象的なアイコンや操作画面となった

UIを支配していた「メタファー」からの脱却

 以前、UIの分野では、立体的だったり写実的だったりする凝ったデザインが全盛でした。そんな風潮に対するアンチテーゼとしてフラットデザインが流行になってきたと言われています。つまり、フラットデザインはより新しく、より洗練されて見えるということが言えます。

 フラットデザインのUIには、アイコンの陰影などの立体的な表現が消えることにより、タッチすべき場所が分かりづらくなるという懸念もありますが、リッチデザインのゴテゴテし感に飽きてきた既存ユーザーを中心に好評を得ているようです。

 流行とは関わりなく、スマートフォンのUIにおけるフラットデザインは、時代に合わせたものであるという主張もあります。

 もともと、スマートフォンでのアイコンなどのUIは、パソコンのGUI(グラフィカルユーザーインターフェイス)を由来とするものでした。パソコンでは「メタファー」が重要視されています。メタファーとは「比喩」のことで、パソコンの場合、端末上の操作を、現実にある事柄をもとに、UIへ採用しています。たとえば、パソコンの画面のことを“机の上”を意味する「デスクトップ」と呼んだり、ファイルを破棄するときには“ゴミ箱”のアイコンにドラッグアンドドロップしたりします。

 個人向けのコンピュータがまだ一般的でなかったころには、コンピュータの技術を説明するために、現実世界の比喩を使うのがわかりやすかったため、初期の「パーソナルな」コンピュータのコンセプトに用いられました。その後、一般的に使われるコンピュータとして販売されたMacやWindowsにも採用されたのです。そして先述したようにこれまでの「iOS」もそうした要素を採り入れていました。

 しかし現在では、さほどコンピューターテクノロジーに詳しくない一般のユーザーにも、メールはメール、カメラロールならカメラロールと、携帯電話の機能としてそのまま理解されています。ですから、わざわざ現実世界と似せてアイコンを作る必要はなく、「これはメール機能」とわかるような、シンプルなアイコンが現在のユーザーにはマッチするのだ、という説があるわけです。

大和 哲

1968年生まれ東京都出身。88年8月、Oh!X(日本ソフトバンク)にて「我ら電脳遊戯民」を執筆。以来、パソコン誌にて初歩のプログラミング、HTML、CGI、インターネットプロトコルなどの解説記事、インターネット関連のQ&A、ゲーム分析記事などを書く。兼業テクニカルライター。ホームページはこちら
(イラスト : 高橋哲史)