allWeb制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】2020年2月21日ずっと使える、デザインの基本まとめました。Lisnyakより許可をもらい日本語抄訳しています。[/fancy_box]フラットデザインとマテリアルデザインの違いについて、しばしば討論されているのを耳にするようになっています。2つの似たデザインスタイルに、ひとつはもうひとつをベースにしています。片方は「人気沸騰中の新しいもの」となっており、もう片方はデザイントレンドが過ぎていると推測するひともいます。ひとつはデザイントレンドをのびのびと採用し、もうひとつはガイドラインに沿って意図的に作成されています。実際にこの2つのスタイルの本当の違いはなんでしょうか。性質的に片方がすぐれているのでしょうか。それとも特定のユーザーにとってのみ良いものなのでしょうか。実際に多くのデザイナーが、どのように違いがあるのか関心を持っています。Skeuomorphism)デザインについて見ていきましょう。Skeuomorphism)は、日常生活を反映されたデザインが特長です。本物そっくりに制作されたキーボードを採用したシンセサイザープログラムのような、リアルティーのあるデザインとなっています。一時期は多くのウェブサイトや、インターフェースデザインにも採用されていました。デジタル世界でのユーサビリティーを土台にせず作成されている点や、マウスやタッチスクリーンでどのようにうまく動作させるかも問題になっていました。Skeuomorphism)は、単純にライフスタイルの動き、見た目の部分のみを参考にしただけでした。レトロなデコレーションパーツなどを取り除き、ユーザビリティ一番に優先し、ページの読み込み速度を早くし、より効果的にユーザーがコンテンツに着目できる新しいデザインが考えられました。Skeuomorphism)のデジタルインターフェースを省いたことで、フラットデザインが誕生したのです。Design)は基本となるベーシックで、重要で最小の機能のみを備えています。ドロップシャドウやグラデーション、テクスチャなど立体感のあるスタイルを取り除き、よりアイコンやタイポグラフィー、配色に着目しています。これはデジタル・メディアを目的別に作成することができる、首尾一貫したはじめてのデザインスタイルのひとつです。インターネットのユニークな機能をうまく利用することで、ユーザーが迷わないシンプルなボタンや配色は、特定のデザイン要素やアイコンなどを素早く探すことが手助けをしてくれます。フラットデザインにおいてデザインは補助的なものと考えられ、より機能性にフォーカスしています。簡略化されたイラストや図解は、ウェブサイトのコンセプトを直感的にユーザーに伝えることができます。サイトの読み込み速度を改善させ、あらゆる解像度のスクリーンに対応し、より信頼性のあるユーザーエクスペリエンスを実現します。デザイナーとユーザー両方にメリットがあるといえるでしょう。メリットあらゆるスクリーン解像度に対応しています。デザインを合理化し、不要なグラフィックやアニメーション要素を排除し、読み込み速度を改善します。スキューモーフィズム系デザインを取り除き、よりユーザーがコンテンツを続けて閲覧しやすくなります。不要なデザイン要素を取り除くことで、より速いサイトデザインに仕上げます。フラットデザインで簡略されたサイトは、レスポンシブにもとても対応しやすくなります。デメリットシンプルな配色やシェイプ、図解を中心としたデザインに限定されます。他サイトに似たデザインになりやすい。いくつかのサイトやアプリでは、プロセスを通じてより複雑なビジュアルが必要となり、これがフラットデザインの落とし穴のひとつです。ドロップシャドウや立体感がないことで、ベクターグラフィックで作成されたボタンなどは、クリックできるのかわかりづらくなります。代わり映えのしないデザインは、ユニークでオリジナル性のあるサイトやアプリデザインには向いていません。関連事項として、フラとデザインは200年半ばに登場したスタイルで、やや時代遅れのデザインとなってしまう恐れがあります。Design)とは?フラットデザインは、本当は役立つスキューモーフィズム系デザインまで取り除いてしまったため、新しくマテリアルデザインが誕生しました。数えきれないイメージ写真を編集するエディターからヒントを得たレイヤーコンセプトで、ドロップシャドウやベベル、アニメーションを加えることで、各レイヤーを独立させています。自然な動きに近い、重要性に応じてレイヤーの重ね方が考慮されています。Design)をはじめてのひとに分かりやすく説明すると、Google社が開発したデザイン基準で、デザインガイドに基づいて作成されます。特長がありますが、その中でもZ軸の使い方はユニークです。基本的にはフラットデザインに、すこしだけスキューモーフィズムを加えることで、各要素に重なるエフェクトを実現しています。数枚の紙を想像してみると分かいやすいですが、このスタイルでは伸縮したり、コントラストを加えたり、形を変えることもできます。それらのページを上に重ねることで、各デザイン要素をそれぞれ表示します。これが、マテリアルデザインの本質的なコンセプトとなります。デザインスタイルガイドは細かく区別、記載されていますが、必ず守らなければいけないルールというわけでもありません。マテリアルデザインをフレームワークとして考え、今後のデザインプロジェクトのテンプレートに検討してみましょう。あらゆる端末サイズに対応するレスポンシブデザインで、Androidウエラブル端末にさえも対応しており、アプリデベロッパーが積極的に利用してもらえるよう推奨もしています。Andoridアプリデザインの基本でもあり、ウエラブル端末についても言及されています。iOSに利用するべきかどうかは、討論されているまっただ中で、Googleの見た目で統一されてしまうというひともいたり、他のオペレーティングシステムに影響を及ぼすという意見もあったりと、判断は自分自身となるでしょう。メリットドロップシャドウなどを利用した立体的な並びは、より分かりやすい操作性を実現します。フラットデザインと異なり、マテリアルデザインは具体的で明確なデザインガイドラインが設けられているので、悩まずに作業を進めることができます。ウェブサイトやアプリなど複数のプラットフォームを検討しているときは、ユーザーエクスペリエンスを統一し、ユーザーフレンドリーでブランドイメージ確立にも役立ちます。デザインにアニメーションを加えたり場合、マテリアルデザインはすでに考慮されているので、手動で導入することができます。デメリット好き嫌いによりますが、マテリアルデザインはGoogleと密接につながっています。オリジナル性の強いサイトやアプリの作成は、ガイドラインに沿って制作することでより難しくなるでしょう。すべてのシステムがフレームレートに役立ちわけではありません。どのように改善したら良いかも分かりにくいでしょう。アニメーションエフェクトは、モバイル端末のバッテリーを消費しやすい。ガイドラインを意識するあまりクリエイティブなデザインが抑制され、アニメーションの導入など開発速度も遅くなりがちです。マテリアルデザインは、フラットデザインからの新しいはじまりというわけではなく、どちらのスタイルもシンプルでミニマルさが特長です。基本的にマテリアルデザインは、フラットデザインの一部であると考えることができるでしょう。マテリアルデザインのアニメーションが広く賞賛されるようになっている今、デザインに煮詰まってしまったときにも、よりユーザーフレンドリーに仕上げてくれるでしょう。実際にフラットデザインを残したまま、マテリアルデザインでより新鮮なエフェクトを合体させてもよいでしょう。個人的な意見として、フラットデザインはより実践的な考え方です。たくさんのアニメーションや複雑なグラフィックを採用したウェブサイトより早くページ読み込みを行います。シンプルなウェブサイトを作成していて、すべての端末デバイスを対象にしたユーザーフレンドリーなサイトを作成したいときは、フラットデザインが適しているでしょう。アニメーションやモーショングラフィックなどに興味がなく、本質的なシンプルさとユーザビリティーを考慮する場合にも、フラットデザインを推奨します。ユニークなアニメーションなどをサイトに採用したい場合は、マテリアルデザインが適していると言えるでしょう。Earthから無料ダウンロードできる美しい壁紙1000枚がリリース!商用利用も可能に2020年2月17日300年以上前のイラスト画15万枚がパブリックドメイン公開中!無料ダウンロード、二次創作も可能に2020年2月13日おめでとうDCJ!2周年記念で人気素材集が99%オフの特別再販大セール中2020年2月12日ずっと使える、デザインの基本まとめました。【2019年版】パブリックドメインで無料!世界の名画500万枚をダウンロードできる美術館サイト16個まとめ"ウェブ考察"の最新記事はこちらずっと使える、デザインの基本まとめました。