ご無沙汰しています。

この会社の代表です。

マーケティングやUIに関してご提案を行うことが非常に増えてきました。
やはり、WEBは運用に力が入れられてきているんだなあと感じます。

どんなに良いものを作ったとしても、ビジネスであれば、成果につながらなければいけないと思います。

今回はフラットデザイン2.0についての簡単な所感についての話です。

 

従来のデザイン課題

スマートフォンやiPadなどのデバイスが普及することによって、よりマルチなデバイスで表示するためのデザインが必要になりました。

多様なデバイスが普及する以前は、もちろんPC上に表示されるUIのみに主眼が置かれていましたが、PCとそのほかのデバイスでは表示される画面領域が異なります。

そのため、多様化するデバイスに合わせたUIが必要とされています。多様化するUIに適したデザイン手法として注目を集めたのがフラットデザインです。

PCを中心として考えられていた時代に主に採用されていたUIはスキューモーフィズムと呼ばれていて、ユーザーが画面上で直感的にどのようなwebサイトか感じられることを重視していました。

結構リアルな感じになるテイストですね。
もちろんわかりやすいので今でも使われます。

(こういったデザインの変遷はAppleを元にするとわかりやすいですね!)

しかし、スキューモーフィズムは細かいデザインの調整が必要となるため、設定したものと違うデバイスで表示したときにデザインがずれてしまうという問題があったりしました。

そこで人気を博したのが、シンプルなデザイン性でマルチデザインにも容易に対応できるフラットデザインです。

 

柔軟なフラットデザイン

最近ではこのスタイルを覚えていらっしゃる方が多いのではないでしょうか。
iphoneにフラットデザインが反映された頃です。

フラットデザインの特徴は、非常にシンプルなUIだと言えます。
無駄なデザインを省略することで、画面の見えやすさを意識したわけですね。

 

しかし、従来型のフラットデザインにも課題が少しありました。
フラットデザインには「シンプル過ぎてユーザビリティに支障がある」という声がありました。
たとえば「背景とボタンの区別がつきにくい」「リンクの位置がわからない」というものです。

フラットデザインの長所のはずであったシンプルなデザインが、かえってユーザビリティという面では短所になってしまったと言えます。
そこで…最近では「フラットデザイン2.0」という言葉を使って、これらの課題を解決した最新技術としてUIに用いられるようになっています。

 

フラットデザイン2.0の特徴と実際の活用例

フラットデザイン2.0は、従来のフラットデザインの長所である「シンプルで見やすいUI」を活かしつつ、ボタンなどの重要な部分には工夫を凝らすことで課題を解決しました。

簡単に言うと従来のフラットデザインとスキューモーフィズムの長所を合わせたようなデザインだと言えるでしょう。

そのため、従来のものよりもアニメーションや装飾といった要素がデザインに多く取り入れられています。

積極的に採用されている代表的なデザインとしては、ドロップシャドウやグラデーションなどがあります。

たとえば、従来のフラットデザインのボタンは図形に文字が書かれているだけのものだったので「どこにあるかわからない」という課題がありました。

しかし、フラットデザイン2.0ではボタンにドロップシャドウをつけることで、この課題を解決しています。
そのほかにも、グラデーションやマイクロインタラクションをデザインに取り入れることで立体感が増して、ユーザーインタラクティブの向上に貢献しているのです。

そのため、静的な表現ではなく、動的表現としてフラットデザインを活用することも2.0といって過言ではありません!

 

少しマテリアルデザインに通じるものがあるかもしれません。

マテリアルデザインとは切り口が違いますが、洗練されたデザインという点でUIに気を使っている部分では、双方は似た印象を持ちます。

 

最近のAppStore

また、フラットデザイン2.0では、AppStoreのiOS11からは拡散型シャドウやマイクロインタラクションといった技術が採用されています。

画面の背景にあるシャドウによって、操作するボタンが立体的に見える効果があります。
これにより、平面的であったデザインよりも操作性が向上します。

また、特徴的なのはボタンをタップした際に画面上で少し縮小する仕掛けを施したことです。
この仕掛けにより、タップしたことを視覚に訴える効果を期待でき、ユーザーインタラクティブが向上しています。

このように、日々進化しているということですね。

こんな微妙な変化ですが、実はユーザーに与える影響はかなり大きいです。

テキストだって、一文字買えるだけで販売数が大きく変わります。
UIだって、一要素変わるだけで使い方が大きく変わりますよね。

 

使いやすく、ストレスのないデザインが蔓延する社会になればいいですね!

おわり。

まとめ

RECOMMENDED POSTこの記事もおすすめ!