検索結果0件」

    【必修】Material Designの基礎【紙とインクの応用】

    2020/10/28
    【必修】Material Designの基礎【紙とインクの応用】

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    デザインに不慣れなデザイナーやエンジニアのポートフォリオを見ていると、統一感が無かったり、意味がないモーションが使われていたり、画面設計に意図が感じられなかったり、テキストが見辛かったりする
    それらは全て「Material Design」を知らないからだと思う
    まず上記を解説する記事を書きます😀

    こちらのツイートについて、深掘りして解説していこうと思います。


    Material Designとは?

    Material Designとは、Googleが提唱しているデザインシステムです。
    デザインシステムとは、サービス開発する上で必要なデザインを、一つの統一されたルールで言語化されたガイドラインのことです。

    つまりデザインシステムがあると、あらゆる画面で統一された見た目を提供できるということです。

    Webサービスやアプリは、画面が流動的に変わったり、LPやコーポレートサイトと比較して作る画面も桁違いに増えます。
    サービスとして提供したい意図を正しく伝え、画面毎に色やフォントを統一する為にも、共通のデザインのルールを設けることは非常に重要なことです。

    昨今はLPやコーポレートサイト、ブログなどにも、Material Designを応用します。
    WebやアプリのUIデザインだけでなく、Webデザインを行う際にも非常に重要な原則となっています。

    なぜならMaterial Designが作られた目的は、「統一された視覚言語を提供すること」だからです。
    つまり、Web・iOS・Android全てのデバイスで、統一された見た目を提供することが目的なのです。


    Material Designの原則

    Introductionの項目には、以下のように書かれています。

    Material is the metaphor
    Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.


    Bold, graphic, intentional
    Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.


    Motion provides meaning
    Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.

    初学者の方には難しいですね😅
    これをよりかんたんに分解すると、以下の2つになります。

    現実の物理法則を適用させる

    見た目と動きに意味を持たせる

    になります。
    以下に詳しく解説いたします。


    現実の物理法則を適用させる

    つまり、現実的にありえない動きや見た目のデザインを作っちゃダメですよということです😅
    例を挙げると、物体に以下のような挙動をさせてはいけません。
    (出典:Surfaces

    以下のような挙動はNGです

    物体がゲル状になる
    液体が注がれる
    物体がガス状になる

    見た目と動きに意味を持たせる

    具体的な例を挙げると、以下のような見た目と挙動になります。

    物体同士の高さの概念を表現するために、影を入れる
    (出典:Elevation
    遷移を表し、物体を画面全体に表示させ、メッセージを見やすくする
    (出典:Navigation transitions
    ボタンを押したらメニューを表示し、コンテンツを右にずらす
    (出典:Component behavior

    自己満足で意図がない見た目と動きは最悪

    かつて上記のような制作物が横行した時代がありました。
    iPhoneが発売される前の、Flash全盛期だった2007年代ぐらいの時代です。

    当時はSEOの事なんて全く考えなくて、Flashで動きがあるサイトを作ることが、価値とされていました。

    当時は意図がないコテコテの動き満載の制作物が数多く量産されました。
    Webサイトがまるで「芸術作品」「自己表現の場」と思われていた、忌まわしき悪しき時代です。

    Webサイトやアプリは芸術作品ではなく、「目的達成の為の手段の一つ」に過ぎません。
    Flash全盛期の時代は、まさに目的と手段の整理が出来ず、意味不明な制作物が大勢量産されました。

    そのような「統一感がないデザイン」をなくし、デザインに「意味」と「意図」を設けるために生まれたのが「Material Design」です。

    ですが、意味がない動きやパララックスを使っているサイトは未だにありますね。
    ぶっちゃけ「製作者のエゴ」でしかないですけど😅

    iPhone12のホームページみたいに、動きやアニメーションに明確な意図があるなら話は別ですけどね😊


    基本は紙とインクの応用

    Material Designの当初の設計思想でもあり、今でも受け継がれている思想が上記です。
    印刷物の技術を、デジタルの制作物にも応用しようという思想です。

    例えば上記のようなカード型のデザイン。
    Webやアプリでよく見かけますが、注意して見てみると「写真とテキストが印刷された紙」に見えませんか?

    Material Designは現実的で意図があるデザインを作ることを基本的な原則としています。
    なので最も現実的であり、あらゆる制作物の原点である「紙」から着想を得ています。


    ガイドライン丸暗記より、なぜガイドラインが作られたのかを考える

    これは、iOSのガイドラインでもあるiOS Human Interface Guidelinesにも言えます。
    ガイドラインが作られたからには、必ず「目的」があります。

    目的を理解せずにガイドラインを丸暗記しただけでは、応用力が養われず必要な時に知識を引き出しから出すことができません。
    テストの模範解答の丸暗記になってはいけないのです。


    まとめ

    • Material Designとは、Googleが提唱しているデザインガイドライン
    • 目的は、Web・iOS・Android全てのデバイスで、統一された見た目を提供する
    • 基本は「現実の物理法則の適用」と「見た目と動きに意味を持たせる」
    • 意図がない見た目と動きは最悪
    • 基本は紙とインクの応用

    以上になります。
    ではでは、またね〜🤗

    • 【必修】Material Designの基礎【紙とインクの応用】