BanbaYa備忘録 新しいUIデザインスタイル「モダンミニマル」の使い方基本ガイド
参照元 PhotoshopVIP
新しいUIデザインスタイル「モダンミニマル」の使い方基本ガイド
参照URL http://photoshopvip.net/129253
機能的で読みやすい、そして洗練された魅力的な見た目が特長の新しいUIスタイル「モダンミニマル（英: Modern Minimal）」の特長や、具体的な使い方を今回はご紹介します。
これまでにも似たようなデザインスタイルは数多くありました。それらのインターフェースは人目を引き、読みやすく、かつ親しみやすく、やりすぎにならないとても優れたものでした。見た目の美しさとバランスが絶妙でした。
なぜなら、デザイントレンドの最大の問題点は、見た目は魅力的でも、それらを使って機能的に完璧なデザインを作ることはできないためです。（ニューモーフィズムやグラスモーフィズムは普段づかいにはあまり適していません。）
新しいUIスタイル「モダンミニマル」は、他のデザインスタイルに比べてよりミニマルでありながら、マテリアルデザインやフラットスタイルのような退屈なデザインではなく、他のスタイルから多くのインスピレーションを受けたスタイルとなります。
UIスタイル「モダンミニマル」の特徴
モダンミニマルスタイルを採用したスマホ画面を参考に、モダンミニマルの重要なデザインのポイントを確認しましょう。一般的に以下のような特徴があります。
- 明るい背景と余白スペース
- UI要素に少しだけの丸み
- 大きくて読みやすい見出し
- リアルな写真
- 考え抜かれた色使い
- コントラストにこだわる
- エフェクトの限定的な使用
- 細かいディテールの表現（イラスト多め）
モダンミニマルスタイルそれぞれの特徴について、実際にはどのように活用したら良いのか、具体的なサンプル例と一緒に見ていきましょう。
「モダンミニマル」スタイルで取り入れたいポイント
1. 明るい背景と余白スペース
モダンミニマル・スタイルでは、余白スペースの使い方が鍵となります。インターフェースのコンテンツ全体は、多くのケースで白またはとても明るい色の背景が表示されます。たっぷりの余白スペースを活用することで、インターフェースをスッキリと新鮮な見た目とし、デザイン全体を美しく表現できます。
2. UI要素に少しだけの丸み
モダンミニマルスタイルのUI要素は、ほんの少しだけ丸みを帯びており、これによってインターフェースがよりナチュラルで親しみやすい雰囲気になります。
角ばったシャープなデザインよりも目に優しいところも気に入っている点のひとつ。ポイントとしては、あまり丸くしすぎず、ボタンやカードなど特定の要素にのみ使用することです。
3. 大きくて読みやすい見出し
大きくて読みやすい見出しは、インターフェースをよりモダンに見せることができます。サンセリフ書体かセリフ書体か選ぶことができますが、GiloryやSofia Pro、Lufga、Circularといった人気の高い幾何学サンセリフがおすすめです。
またPulp、Gordita，Visby、Konnect、Geliat，Galano、+Jakartaなどもチェックしてみると良いでしょう。
https://ift.tt/3cF73KI
https://ift.tt/2SAx0nL
https://ift.tt/3fyf5qu
4. リアルな写真表現
平面的な人物イラストや手書きの落書きデザインなどに、誰もが少しずつうんざりしてきているのですから、リアルな写真表現の人気は必然と言えるかもしれません。
リアルな写真の大きな利点は、単純に「本物っぽく」見えることで、デジタル製品にリアイリティさを生み出します。
著者が携わったプロジェクトの調査でも、ユーザーはイラストよりも写真を好むことが明らかになっており、写真はより真剣、真面目（Serious）に見え、感情的なレベルで実体験にユーザーと関連することが主な理由です。
https://ift.tt/2ZGncbV
5. 考え抜かれた色の使い方
モダンミニマル・スタイルにおいて、色に関してはとてもシンプルで、1色ないし2色に限定した配色が多く見受けられます。サイトやアプリの重要なアクションや要素のアクセントとして使うようにすると良いでしょう。
こうすることでユーザーの注意を喚起するような多色カラーの色使いではなくなり、見ていて楽しいインターフェースを表現できます。
https://ift.tt/35kidk6
https://ift.tt/2I64XqM
https://ift.tt/2P1UbFV
6. コントラストに注目
モダンミニマル・スタイルの優れた点のひとつが、使いやすさにこだわったアクセシビリティで、多くのデザインスタイルが苦手とする点でもあります。
十分なコントラストを作成することで、背景とデザイン要素を瞬時に区別することができ、視覚的な階層を理解し、使い勝手の良いインタフェースに仕上げることができるでしょう。
https://ift.tt/3iSiPFF
https://ift.tt/35iea7N
7. 限定的なエフェクトの使用
モダンミニマルは、さまざまなスタイルやデザイン効果から影響を受けています。淡いカラフルなドロップシャドウ影や、ぼやけたグラデーションの背景、エンボス加工、透けたガラスのようなグラスモーフィズムなど、程よくたしなむ程度で利用するのが特長。そのおかげでUIデザインは読みやすく、視覚的にもすっきりしたイメージに。
https://ift.tt/3quEIee
8. 細かなディテール、図解イラスト多め
モダンミニマル・スタイルの特長、最後のひとつが細部へのこだわりです。シンプルなデザインながら、アイコンや絵文字などの小さな要素にも親しみやすさを加えたり、リアルな写真とイラストをミックスしたコラージュのようなグラフィック要素に注目してみましょう。
わたしたちが普段使い慣れているグラフィック要素を利用することで、インターフェースをより快適で楽しみものにしてくれるでしょう。
https://ift.tt/3yAfJLG
https://ift.tt/3wyqDQf
https://ift.tt/3isQL9o
要約すると
機能的でありながら親しみやすいインターフェースデザインを実現するために、あらゆるデザイン要素を取り入れた「モダンミニマル」。使いやすさを損ねることもなく、日常的に利用できるスタイルです。
インターフェースはできるだけミニマルにすることで、使いやすさを重視するユーサビビリティが向上します。また、見た目の美しさによって、あらゆる種類のポジティブな感情を誘発します。モダンミニマルは、その両方を兼ね備えたスタイルと言えるでしょう。
この記事が、なにか新しいプロジェクトに挑戦するきっかけになればと思います。では、デザインを楽しんで！
https://ift.tt/39IM0UE
https://ift.tt/3t4dz2X
参照元リンク : A Guide to the Modern Minimal UI Style by Diana Malewics – UX Collective
新しいUIデザインスタイル「モダンミニマル」の使い方基本ガイドはPhotoshopVIPで公開された投稿です。
@Design
webデザイン,Favorite SITE
https://ift.tt/3vnbAbg
June 7, 2021 at 12:45PM
