LOADING

  • 2021/01/07

    マテリアルデザイン、やってますか?

      

    Category:DESIGN/WEB

    • 2021年
    • Google
    • マテリアルデザイン
    • 美しさも大事よね
    こんにちは、こんばんわ。
    株式会社ホロニックのブログです。

    今回はウェブのデザインに関するお話です。
    今更ながら、マテリアルデザインについて、
    まとめてみようと思います。
    • 003KZ1123FOTO_TP_V.jpg

    「マテリアルデザイン」とは?

    マテリアルデザインとは、Google社が2014年に考案したデザインに対する考え方とガイドラインです。
    Googleさん、デザインも定義しちゃうの、、という気もしますが。。
    現実世界のルール(奥行きや、影など、質量)を取り入れることで、
    感覚で操作することができるようなデザインという感じです。

    もう少し、専門的に分析してみましょう。

    マテリアルデザインは従来からあるデザイン概念である以下の3つを踏まえて
    生まれたデザイン手法といえます。
    シンプルさをできるだけ残しつつ、わかりやすさの表現を目指す、
    いわば、上記3つのいいとこ取りをした『進化系』のようなイメージです。

    <スキューモーフィズム>
    「すでに現実世界にあるもの」を用いるのが特徴です。
    デザインの立体感を強調し、リアリティの表現を重視します。
    下がサンプルですが、見た事ありますよね?
    • 01.jpg
    <フラットデザイン>
    スキューモーフィズムの過剰装飾を、できる限り抑えたデザイン手法で、
    シンプルさを強く意識しています。FaceBookとか、そうですね。

    <メトロデザイン>
    フラットデザインの一種で、「タイル」と呼ばれるパネルが並べられるのが大きな特徴です。
    マイクロソフトが作り出しました。Windows8のホーム画面とかがそうです。

    これらの3つのデザイン手法を進化させて生まれた、マテリアルデザイン。
    多くの色を使わず、平面でも3Dのように立体的に見せるために、「影」を活用し、
    距離感や高さを表現するようなデザインです。
    要は「マテリアル」=「物質的な」の言葉のとおり、
    画面上に、リアルな世界と同様な、重なりや厚みなどを再現することですね。
    公式では『紙』と『インク』のような考え方、とあります。
    サンプル貼っておきます。みなさんも良く目にしていると思います。
    • アートボード 1.png

    「マテリアルデザイン」をもう少し詳しく

    マテリアルデザインは大きく3つのパートに分かれています。
    ・Material System(目的や概念)
    ・Material Foundation(レイアウトや色、形、アニメーションなどのルール定義)
    ・Material Guidelines(どのようなところをカスタマイズできるのかなど)
    これらについては、以下のサイトに事細かに解説してあります。
    https://material.io/design

    英語ですし、翻訳したとしても、言い回しが難しく、理解するのは意外に大変でした。。

    では、デザイナーに(自分にも)役立つと思われる、
    Material Foundationから気になるモノを取り上げてみます。

    物理法則(標高)

    マテリアルデザインの標高は、デザイン内の要素間の距離として測定されます。
    要は各要素ごとの奥行き(深さ)が、dp値で定義されています。
    • アートボード 1.png
    上図は公式のものですが、私なりに訳して、理解してみました。
    デザイン内の要素も物理の法則に則り、『重なり』のルールを定義したものです。
    サイトを形成するボタンやメニューなど、パーツごとに標高位置が定められています。

    物理法則(光と影)

    公式サイトのサンプルを用いてみてみましょう。
    上図が正しいとされているもの。下図がよろしく無い例です。
    • スクリーンショット 2021-01-05 13.49.16.png
    • スクリーンショット 2021-01-05 13.49.30.png
    上図のように、重なったものが、Z軸(標高)で高い位置にあるときに、影が生まれるのが物理法則で、
    右のように、Z軸(標高)は変わらないのに、影が生まれるのは物理法則ではありえないという理屈ですね。
    普段、忘れがちですが、これぞ自然の摂理と言えます。

    他にも、「ガスのようには動作しません」とか
    「液体やゲルのようには動作しません」とか
    「UIの深さを超える方法でマテリアルが曲がったり、折りたたまれたりすることはありません」とか
    禅問答のような?ルールがあります。(和訳が変なのかも?)

    レイアウト(材料測定)

    マテリアルデザインのレイアウトは8dpグリッドに合わせて調整します。
    アイコンや文字などの小さなパーツは、4dpグリッドごとの調整になります。
    • unnamed.png
    『dp』という単位は(dipと呼ばれる場合もある)
    密度非依存ピクセルで、Androidアプリの開発の際などに使われていますね。
    簡単に言うならば、どの画面密度でも同じように表示できるピクセル単位ということなので、
    「解像度の異なる画面でも、同じようなサイズで表示できる単位」と覚えればいいかと。
    (厳密に同じサイズで表示されるわけではないです)

    カラー(テキストの読みやすさ)

    すべてのテキストは読みやすく、アクセシビリティ基準を満たしている必要があります。
    Webコンテンツアクセシビリティガイドライン(WCAG 2.0) レベルAAでは、
    通常のテキストの場合はテキストと背景の間に4.5:1の色のコントラストが必要であり、
    大きなテキストの場合は3:1の色のコントラストが必要です。
    この辺りは自治体系などの公共系サイトの制作でも求められますね。
    基本的に明るい背景には黒のテキストを使用し、
    暗い背景には白のテキストを使用することが基本になります。
    ん〜〜、改めてそうだよな〜ってなりますね。

    その他にも、タイポグラフィ、音、モーションなどなど、多岐にわたって定義がありますが、
    長くなるので、このあたりで。
    復習や発見がたくさんあるので、デザインに関わる方は一度、目を通しておくのが良いと思いますよ。

    「マテリアルデザイン」のまとめ

    2014年に登場した、マテリアルデザイン。
    登場してから結構経ちますが、2020年ごろから、取り入れられているウェブサイトも増えてきましたので、
    ぼちぼち、お客様からの口から「マテリアルデザインで」なんて声も聞こえてくるでしょう。

    なにより大事なのは、直感的に使いやすい、見やすいという根底を徹底しつつ
    『デザインの幅』としてもしっかり認識しつつ、自分なりに消化し、
    その中で、美しさや心地よさを追求することだと改めて思います。

    では、今回はこの辺で。
  • Category
    HOLONIC(7)
    DESIGN(6)
    WEB(10)
    SYSTEM(4)
    HOBBY(2)
    CULTURE(8)
    月別Arcive
    2021/01 (1)
    2020/12 (1)
    2020/11 (1)
    2020/10 (1)
    2020/09 (3)
    2020/08 (5)
    2020/07 (4)
    Tag list