ここ数年のあいだで、ソフトウェアやアプリのインターフェースデザインに大きな変化が訪れています。立体的な3Dデザインから、Appleが推奨したSkeuomorphicデザイン、そしてフラットデザイン。このトレンドはさらに細分化されていますが、今回はフラットデザインに至った理由や、インターフェースデザインに影響を与えた事柄について見ていきましょう。また後半では、フラット系ミニマルデザイン制作時のプロセスについても説明しています。
この記事は、海外デザインブログSmashing Magazineで公開されているエントリー「Flat and Thin are In」を意訳したものとなります。
なにが起こったのでしょう？
これまで使われていた、テクスチャやベベルエフェクト、ドロップシャドウを適用したデザインから、フラットな配色に、シンプルなタイポグラフィーを利用するデザインに移行していきましたが、なにが引き金となったのでしょう。多くの原因がありそうですが、いくつかの重要ポイントをまとめています。
あふれるニュースや情報
インターネットを利用することで、絶え間なく情報が流れ続けています。いくつかは重要なもので、そのままスルーされてしまう情報もたくさんあります。あらゆる情報を整理したり、フィルタリングしたり、コンテンツをまとめたりできますが、なかなか労力のいる作業となります。さらにそれらの情報を、スマートフォン端末の小さなスクリーンで閲覧すると、余計に情報が多すぎることに気が付きます。
ユーザーインターフェース（UI）デザインを見直し、表示アイテムを絞り込むことで、よりユーザーに分かりやすく伝えることができるようになりました。
シンプルが最高。
同じようなトレンドとして、ある一定の機能にだけ特化したウェブアプリやサービスが、数多くローンチされています。これらのソフト開発者は、限定的な機能に、魅力的なインターフェース、アニメーション豊かな操作性などを加えることで、販売金額に見合うように改善しています。これがアプリデザインをシンプル化した理由のひとつでもあります。シンプル機能のアプリということは、シンプルなインターフェースということです。
コンテンツの重要性
新しいデバイスやテクノロジーがマーケットに登場するとき、ユーザーはそれらの可能性や、インタラクティブで高度な反応にしばしば魅せられます。これは同時に、インターフェースデザインが、「コンテンツに集中する」ことで変わっていくことを示しています。ユーザーが求めているのは、テキストやオーディオ、ビデオデータに対応したインターフェースなのです。
テクノロジーへの対応力
スマートフォンやタブレット端末が、世界中へ爆発的に普及したことで、よりコントロール操作の正しい使い方を気にするようになりました。ボタンを見逃したら消すことのできない、複雑なポップオフ画面より、シンプルな操作性を望むようになっています。たとえばAndroid端末ブラウザChromeやWindows8では、注釈テキストのないタッチパネル操作となっています。
テクノロジーの影響
多くのソフトウェアは、動作環境やプラットフォームに制限されるでしょう。スクリーンサイズや解像度に関する問題は、ハードウェアを制限してしまいます。そのためスマートフォンに対応したインターフェースの設計は、限られたデザインパレットを必要とします。特にタイポグラフィーやバラエティーに富んだフォント達は、見た目も美しく、フラットデザインにおけるユーサビリティーも考慮されています。
今後もモバイル端末の画面サイズや解像度は、改善されていくことも検討しておきましょう。@font-faceを使った、Webフォントもミニマルな印象づくりにも最適です。
レスポンシブデザインの登場
あらゆるデバイス、スクリーンサイズに対応したページの増加により、UIはより流動的なデザインが必要となり、レスポンシブデザインが登場しました。特に決まったスタイルのないレスポンシブデザインでは、スタイリングも行いやすい、フラットUIについて議論されるようになりました。ミニマルデザインのメリットのひとつに、ページファイルサイズを縮小し、読み込み時間を改善してくれます。
今後のデザインプロセスについて
ここまでは、フラットデザインがどのように、世界的に普及していったのか、さまざまな角度から理由を検討しました。効果的なミニマルデザインの作成は、なかなかのチャレンジです。よく利用するUIテクニック（ドロップシャドウや、ベベル、質感などなど）を切り捨てることで、残されたいくつかのパーツがいかに大事なのか、すぐに気付くことになるでしょう。
デザインをはじめる前に
どんなプロジェクトをはじめる前にも、まずあなたの選んだスタイルが、プロジェクトにマッチしているか確認しましょう。 フラットデザインを作成するときには、ターゲットとなるユーザーの感性と、プロジェクトが一直線となっているかどうかが、重要なカギとなってきます。
デザインプロセス
以下はシンプル性を求めるときに、一緒に検討したいテクニックやチップをまとめています。どのようなスタイルを適用するにも大事なポイントとなります。
[list type=”star”] [li]ミニマルなインターフェースをデザインするときは、パソコンが普及する以前の時代を思い描きます。ミニマルデザインを得意とした、アーティストや芸術家の作品を見ることも、とてもよいエクササイズになります。 [/li]
[li]フラットデザインは、ニュアンスを大事にしたレイアウトです。たまには休憩をとり、散歩でもしてみませんか。リフレッシュした気持ちが、効果的なアイデアを与えてくれるかもしれません。[/li]
[li]試作品バージョンを並べて比較することも、よいかもしれません。たとえばラインを5pxずらして、20分後に見てみましょう。二つのバージョンを比較することで、良いオプションを自然と選択できるようになります。[/li]
[li]可能な限りたくさんのデバイス、ガジェットを使って、Webサイトの表示確認を行いましょう。後から気付くと、修正に膨大な時間が必要となります。[/li]
[li]デザインするときに、「このパーツは本当に必要？」と自分自身に尋ねながら行いましょう。[/li][/list]
グリッドを使おう。
インターフェースデザインに置いて、グリッドはきわめて重要な役割を担います。さまざまなデザインパーツを直感的にレイアウトするときに、このグリッドが役に立ちます。
[list type=”star”][li]グリッドは、ビジュアル面だけでなく、コンテンツや機能的なグループ分けに利用してみましょう。常にラインやボックスなどで、囲む必要はありません。余白スペースを利用するだけでも、インターフェース構造を理解する手助けとなります。[/li]
[li]重要なポイントや、注意を惹きたい部分は、通常のグリッドを壊してみましょう。基本的なレイアウトテクニックが、ビジュアル面における階層を作りあげます。[/li]
[li]自分好みにカスタマイズしたグリッドを研究しましょう。ビジュアルパレットを減らすことで、なぜレイアウトが散らかっているか明確になるかもしれません。[/li][/list]
カラーを意識しよう。
明らかに、配色はデザインにおいて、もっとも重要なアイテムです。ミニマルデザインのインターフェースでは、より顕著にその影響が現れます。
[list type=”star”][li]幅広いセレクションを検討しましょう。多くのひとが、限られた少ないパレットが、より機能的なインターフェースに、ふさわしいと考えているでしょう。しかし本当の意味合いはココにあります。ごく限られたデザインパーツつかうだけで、パレットの可能性を広げることができます。[/li]
[li]まずパレットを設定したら、選択した配色の色相と彩度を確認してみましょう。これで明るいバージョンや暗いバージョンの色調チェックを行っていきましょう。[/li]
[li]カラートーン別に確認してみるのも良いかもしれません。デザインの初期段階で、質感とハイ・コントラストがうまく表現されているか確認しておきましょう。[/li][/list]
タイポグラフィーの使い方。
フラットデザインを採用したWebサイトでは、タイポグラフィーデザインは、もっとも注目されるポイント、すなわち「ヒーロー」となります。
[list type=”star”][li]飾りのないサンセリフフォントは、より清潔感のあるクリーンな印象を与えます。[/li]
[li]さまざまなスタイルのフォントファミリーを探しましょう。全部使う必要もないですが、コンテンツ作成時の段落分けなど、さまざまな使い分けが可能です。同時に、あらゆる環境に応じたウェイトを見つけておくと良いでしょう。[/li]
[li]サイズやウェイトの全く異なるフォントを組み合わせることを恐れてはいけません。試しに巨大で、極細なフォントをヘッドラインに、小さなミディアム・ウェイトのフォントを全体に使用してみましょう。[/li]
[li]フォントの読みやすさにも注意しましょう。あらゆるデバイスで閲覧したときに、問題のない可読性が必要となります。[/li][/list]
たのしい仕掛けをつくろう。
フラットUIデザインにおいて、ユーザーを魅了するデザインパーツを実装するには、テクニックが必要になってきます。
[list type=”star”][li]コントラストがカギとなります。もしホワイトベースのデザインなら、仕掛けパーツに色を加えましょう。もしテキストを多用したサイトなら、アウトラインアイコンを利用してみましょう。アイデアは無限大ですよ。[/li]
[li]普段暮らしている習慣からも、ユーザーの動きについて学ぶことができます。トップへ戻るボタンの位置も、これにより決定することが可能です。[/li]
[li]多くの情報やコンテンツをページに表示する場合、どれも直感的に分かるようにする工夫が必要となります。間違った操作をしたときに、すぐに回復できるという点もポイントとなります。[/li]
[li]フラットデザインに、ドロップダウンメニューやモーダルウィンドウなどレイヤーを重ねるパーツの導入は、面倒でもあります。濃淡度を利用した、階層の作り方なども参考にしてみましょう。[/li][/list]
さいごに、、。
デザインにおけるルールは存在しないと考えます。デザイナーがそれぞれ作りあげ、オリジナル性を加えたインターフェースデザインは素晴らしいアイテムばかりです。フラットデザインから派生した、ロング・シャドウエフェクトなど誰が予想したでしょう。
ソーシャルメディアを軸としたつながりや、膨大な情報社会において、ミニマルデザインの広がりは、より重要になってくるかもしれません。すべてを解決する方法がある訳でありません。しかし、じっくりと検討し、ふさわしい場所に適用されたとき、使いやすくて、ワクワクしたデジタル体験を可能にしてくれるでしょう。
