こんにちは、つしまです。
今週はwebサイトのデザイン案をいくつか作成しました。お客さんの希望する完成イメージがすごくシンプルなものだったのですが、簡単なようで仕上げるまでにすごく苦労して、シンプルなデザインの難しさを実感しました。
今回は、表現をリサーチしていく中で、「ミニマルデザイン」というものを初めて知ったので、備忘録も兼ねてまとめていこうと思います。
ミニマルデザインとは
「ミニマルデザイン(Minimal Design)」とは、構成する要素を必要最小限に絞って表現するスタイルのことをいいます。
シンプルなデザインを意識するという点ではどちらも同じですが、フラットデザインが立体感をなくすというスタイルに対し、ミニマルデザインは不要な機能や要素そのものをそぎ落としていくという考え方です。ユーザーが見る情報量がすっきりとまとまり、サイトがアピールしたいものがわかりやすくなるため、訴求力が高まるデザインとも言われています。
ミニマルは英語で「最小限の」「必要最低限」という意味。webサイトだけでなくファッションや建築物、家電家具などの身近な商品まで幅広い分野で取り入れらているスタイルです。ミニマルから派生したミニマリズム、ミニマリストといった言葉もよく耳にします。
ミニマルデザインの特徴
ミニマルデザインに厳密なルールが存在するわけではありませんが、ミニマルデザインの例として挙げられるケースがとても多い「無印良品」のwebサイトを参考に、他のデザインテイストとは違う表現方法だなと感じたポイントをピックアップします。
読みやすくインパクトのあるフォント
無印良品の家と暮らしの作り方に関するページです。白い空白を活かしてブランドイメージを効果的に伝えています。
画面の構成要素が少ない分、フォントがすごく目立ちます。ミニマルデザインを用いたwebサイトを見てみると、ファーストビューに印象的なタイポグラフィを置いているものが多いです。重要なメッセージを伝えやすいというメリットがあると思います。
すっきりとした無駄のないデザインである以上、人の目をひくフォント選びとフォントサイズが重要になってくるなと感じました。
また、メインビジュアルには写真や動画が前面に表示されるものが比較的多く、簡潔ではっきりとしたキャッチコピーが目をひきます。「無印良品」のサイトでは、中心にあるキャッチコピーに目が向き、ユーザーの視線をグッと引き寄せることができています。メッセージが明確で、シンプルの中に強さのあるデザインだと感じました。
色使いが最小限
ミニマルデザインでは最低限のカラーが使われています。
上記のサイトは商品の写真を除けばほぼ白(背景)・黒(文字)・ベージュ(アイコン)の3色だけしか使用されていません。余計なカラーを使わずに最小限のカラーで、フォントのサイズや太さを変えてアクセントを表現しています。
また、白と黒でコントラストがはっきりしているので伝えるべき要素を明確に打ち出すことができています。
情報が詰め込まれていない
必要最低限の要素に絞ると、自然に多くなるのが余白です。
コンテンツ幅いっぱいに複数の要素を詰め込まずに、余白を効果的に用いているレイアウトが印象的です。ミニマルなデザインは、空間の使い方が特徴的だと思いました。仕切り線を使う代わりに余白で表現してみる、文字間・行間を広げてみるなどの手法が取られています。
- 過度なエフェクトを使っていない(ドロップシャドウやグラデーション等)
- アイコンなどの装飾品の抽象度が高い(表現の構成要素が少ない)
さいごに
目立たせたい、伝えたい箇所をメリハリをつけて上手に表現するとシンプルかつ美しいデザインになることを学びました。
見た目がシンプルなデザインは簡単に作れるのではと思ってしまいがちですが、ただページを構成する内容を少なくするだけではチープなデザインになってしまうこともあるため、見た目以上にしっかりとデザインを行う必要性があります。
シンプルなデザインで洗練された雰囲気を出すことはすごく難しいですが、色や情報量で誤魔化さないデザインができるよう、精進したいと思いました。