効果的なミニマルデザインと退屈なデザインの境界線
ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。
ミニマルデザインとは
そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると
ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。
とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるために、見せたいものや伝えたいことの中から引き算をしていき、最小限度におさえたデザインをミニマルデザインと呼んでいます。余分なものをそぎ落とすことで、ユーザーにより明確にメッセージを伝えることが可能です。
効果的なミニマルデザインに挑戦！
ではどうすれば効果的なミニマルデザインに仕上げることができるのでしょう？そのポイント紹介します。
何を目立たせるかを明確にする
「あれも見て欲しい」「これも見て欲しい」とたくさんのものを打ち出すのではなく、ユーザーに見て欲しい１つのものにフォーカスを当てます。
Less is bore
色をおさえてシンプルにしているつもりでも、表示する要素が多いのでシンプルになりきれてません。これはこれで問題ないと思いますが、ミニマルにするにはもう少しけずってみましょう。
Less is more
思い切って商品画像と商品名、値段のみを表示しました。商品画像がより目立たされ、スッキリとまとまりました。
メリハリをつける
ミニマルデザインと退屈なデザインの一番の違いはここだと思っています。一口にメリハリ…といってもその方法は様々ですが、ここではテキストを使って違いをみてみましょう。
Less is bore
文章が同じサイズで羅列されています。パッと見て何が言いたいのかわかりにくですね。
Less is more
見出しを大きく打ち出しました。テキストでメリハリを付けるひとつの手段として、ジャンプ率を高くする方法があります。ジャンプ率とは本文と見出しの文字サイズの比率のことです。サイズの大小の比率が大きいほどジャンプ率は高くなり、比率が小さいとジャンプ率は低くなります。ジャンプ率が高ければ高いほどメリハリがついて印象的なデザインになります。
余白のバランスに気をつける
余白があるとミニマル？いいえ、そうとは限りません。下の画像を見たらきっと納得するはずです。
Less is bore
上の画像では余白のバランスが悪く、これはわざと作った余白なのか、ただの余った空欄なのかがわかりません。余白があるのに美しくない。なぜか？その答えは余白のバランス＝余白同士の距離にあります。
Less is more
２つの要素を真ん中にまとめました。上下の余白と左右の余白を同じ値にするとバランスがとれて美しく配置されます。ただしWebの場合は特に下の値がブラウザーサイズによって異なりますよね。
そこで第二案。画面左・画面上からの距離を同じにしました。また２つの要素の間の距離は画面上・左の距離の半分くらいです。他にも配置の仕方はいろいろあるので、いろんなデザインを見てバランスのとり方を研究するとつかめてくると思います。
色をおさえる
多くの「ミニマルデザイン」と呼ばれるWebサイトは無彩色（白・グレイ・黒）を使っています。その理由はコントラストをつけやすいく、色味がない分シンプルにまとめられるからです。
Less is bore
例えばこのデザインでは、配置の仕方など、とってもシンプルなのに色を使いすぎています。
Less is more
モノクロ＋１色でまとめてみました。「今すぐ注文する」をクリックしてほしいというのがひと目でわかりますね。このモノクロ＋１色という配色はミニマルではないデザインでもよく使われる、簡単にアクセントをつけることのできる配色のひとつです。
細部にこだわる
ただ目立たせたいものをドカーンと置いただけでは、ミニマルデザイン特有の高級感や上品さは演出しきれません。「少しの手間で大きく変わる、細部にこだわったWebデザインを」の記事でも書いたとおり、わずかなテクスチャを加えたり、1pxにこだわったりして細部を作り込むことで、より洗練されたデザインが完成します。
Less is bore
商品詳細ページの例です。悪くはないかもしれませんが、なにか物足りなさを感じませんか？
Less is more
背景に白〜グレイのグラデーション、商品を反射させたように見せ、CTAボタンにもグラデーションを入れてみました。少しの違いですが、より完成度の高いデザインに仕上がりました。このようにわずかに効果をつけるだけで変わってきます。
ミニマルデザインの問題点
上品にまとめることができるミニマルデザインデザインですが、いいことばかりではありません。主に以下の問題点があげられると思います。
なんのWebサイトかわからない
そのサイトをパッと見た瞬間になんのサイトなのかがわからない。一番ありがちな問題点だと思います。一般的にページを開いた５秒間の内に、それがなんのWebサイトなのかがわかるかどうかはとても重要とされています。すぐにわからないサイトは直帰率の低下にも繋がるため、簡素すぎて目的がわからないサイトは避けるべきです。
どれがクリックできるかわからない
テキストリンクのうち、デフォルト設定である下線＋青色のテキストが一番リンクだと認識されやすいようです。しかし、中には装飾をそぎ落としすぎてテキストリンクの装飾も一切排除しているサイトも…。マウスオーバーするまでそれがリンクなのかわからない、なんてテキストはユーザビリティを無視しすぎです。引き算のしすぎに注意しましょう。
「でもクライアントにアレコレ詰めろって言われるんだよねー」
これ、デザインをしていたらよくあると思いますｗ そんな時は「可読性の向上」「シンプルな美しさ」「訴求力の高さ」を合言葉にミニマルデザインのよさを熱弁すると何か変わるかもしれません。また、「もしマイクロソフトがiPodのパッケージをデザインしたら･･･」で紹介されていたこの動画はかなり説得力があると思いますｗ
効果的なミニマルデザインの例
ミニマルといえばアップル！注目してほしい要素以外を極力そぎ落とし、洗練されたデザインを作り続けています。
他の要素を極力小さくすることで、フルスクリーンで見せている背景画像がさらに引き立っています。
大きなキャッチコピーがパッと目にとまります。色もおさえてありメリハリがついてます。
ミニマルデザインといってもモノクロだけではありません。このサイトはビビッドな一色を背景色に使い、飾りもほとんどないデザインです。装飾をしなくとも色が派手なのでインパクトがあります。※Flash
メニュー名をどーんと表示させているだけですが、それでどんな内容のサイトなのかわかります。
アイコンデザインを専門にしているデザイン会社のWebサイト。アイコンにフォーカスするよう余計な情報を一切載せていません。
グラデーションやシャドウの入れ方が上手で、全体的にとってもエレガント。
フォトグラファーさんのWebサイト。写真以外の要素はほぼ装飾なしです。
グリッドが特徴のサイト。モノクロで統一し、グリッドに合わせてカチッとデザインしている分、手描き風の青いラインが目立ちます。
色も表示する要素も抑えて全体の動きに注目するようにデザインされています。※Flash
流行っているからといってどのサイトでもミニマルデザインが取り入れられるかといったら、そういうわけではありません。デザイナーの自己満足な「作品」にならないよう、取り入れていきたいですね。
毎回とても為になる記事をありがとうございます。
「色をおさえる」の例は、自分だと Less is bore のデザインをしてしまうだろうな…。
洗練された雰囲気を出すのって難しいですね。
色や情報量でごまかさないデザインができるよう精進したいと思いました。
こんにちわ。
いつも為になる記事をありがとうございます。
ミニマルデザインってシンプルに思えて、実は奥が深くて難しいですよね。とても参考になりました。
お仕事しながらだと更新も大変かと思いますが、これからも頑張って下さい。
初めまして。いつも参考にさせていただいおります。
シンプルなものほど細部にこだわらないといけない・・・奥が深いですね。
今回の記事も非常に参考になりました。
ありがとうございます。
ミニマルデザインの定義を全く理解されていないようで悲しくなりました
デザインの基礎と何が違うのでしょうか。
サンプルが雑というか、合わせているネタが悪い気がします。
ミニマルデザインと Less is more は僕は別物だと考えます。このエントリーで挙げられているサンプルでは、ミニマル縲怩 Less～も全然説明ができていません。情報の一覧製、メリハリ、ホワイトスペース、色情報の扱いなどは、ミニマルデザインや Less is more を語るアプローチとしてはややピント外れに思います。
[…] […]
[…] […]
[…] […]
とても参考になりました。
憧れのミニマルデザイン。。。
動画を見たら、自分のつくったものと重なって胸がいたくなりました（笑
洗練されたデザインができるようになりたいなあ。
[…] 効果的なミニマルデザインと退屈なデザインの境界線 […]
ひさびさの書き込みです。
私みたいな初心者には、分かりやすく助かっています。
私はネットショップばかり作っていたのでミニマルデザインにはうとい所があり、参考になりました。
より良いショップサイト作りに活かせればと思います。
コメントに愛のムチがビシビシありますが、『ミニマルデザインの定義』や『雑ではないサンプル』などをご存知の上級者の方々には、ぜひその内容が分かるサイトなどの紹介などいただければありがたいです。
ごちゃごちゃしてるとどこを見たらいいかわからないし、シンプルすぎると確かに何のサイトかわからないしパッとしないと言うのはありますね…＾＾；
空間を上手く使うように、と言うのは先生から教わりました。無駄に使うんじゃなくて、意味を持って空白を開ける、と。
うーん。
この程度の知識というか間違った解釈で堂々と講釈をたれるのはどうなんでしょうか？
制作例もはやりに乗っ取っているだけで全くミニマルデザインでもLess is moreでもないかと。
そして上の方もコメントされてますが、Less is moreの解釈が間違っていると思いますよ。
もっと勉強と経験を積んでくださいませ。
[…] 効果的なミニマルデザインと退屈なデザインの境界線 […]
[…] […]
[…] […]