ネット上には「デザインが洗練されている」と言われるWebサイトがありますが、
Webサイトのデザインを洗練するには余計な装飾を省くことが重要です。
では余計な装飾を省くとはどういうことなのか、余計な装飾を省くことで
Webサイトにどういった効果がもたらされるのかなどを詳しく見ていきましょう。
Webデザインにおける余計な装飾とは
Webデザインにおける余計な装飾とは、
閲覧者に情報を伝える上で不要な装飾のことです。
具体的にはテキストだけで伝わる部分に貼り付けられた画像、多く使われている色数、
文字が点滅したり横流れたりするエフェクトなどを指します。
装飾が多い方がインパクトが強くて閲覧者の印象に残りやすいと考えがちですが、
実は逆です。
余計な装飾はごちゃごちゃした印象を与えるだけで、
本当に伝えたかったことは閲覧者の印象には残りません。
テキストも画像も色もエフェクトもWebサイトを見る側にとっては全て「情報」で、
その情報を詰め込み過ぎていると伝えたいことが伝わらなくなるのです。
説明書とカレンダー
余計な装飾が施された代表的な物として挙げられるのが「説明書」です。
説明書には製品を使用する上で必要なことが全て書かれており、分かりやすくするのに
画像も使われていますし、重要な部分には色を付けて目立つようにしています。
その「分かりやすく」や「目立つ」ことを目的に施した装飾が
かえって説明書を読みにくいものにしてしまっているわけです。
実際に最初は説明書を読まずに、使い方で分からないことが出てきた時に
必要な部分だけ説明書で確認するという人がほとんどです。
対して余計な装飾をできるだけ省いてシンプルにしている物の代表が「カレンダー」です。
カレンダーに掲載されているのは月・日・曜日、
後はせいぜい○○日とか大安や仏滅といった六曜の情報だけとなっています。
色も平日は黒、土曜日は青、日曜・祝日は赤の3色しか使われていません。
余計な装飾を省いて必要な情報を最低限の色数で掲載することで、
伝えたい情報が見ている人にダイレクトに伝わるわけです。
実際にカレンダーをチラッと見るだけで今が何月なのか分かりますし、
今月は休日が何日あるのかも分かります。
説明書とカレンダーは極端な例ですが、
余計な装飾を省くと情報が伝わりやすくなるということが分かってもらえたと思います。
Webデザインには必要な無駄もある
Webデザインにとって余計な装飾は「無駄」ですが、
同じ無駄でも情報を伝える上で必要な無駄もあります。
情報を伝える上でWebデザインに求められる無駄は「余白」です。
余白部分には何の情報もありませんから、
情報を伝える目的のWebデザインには余白は本来無駄な物です。
しかし情報を持たない余白をあえて作ることで、
伝えたいメッセージや使ってほしいコンテンツが強調されます。
強調することで訴求力も強くなりますから、
余計な装飾を施すよりも余白を上手く使った方が閲覧者の印象に残りやすいのです。
余白を上手く使っているWebデザインの代表が「Google」のトップページです。
GoogleのトップページはGoogleのロゴと検索ボックス、
検索ボタンだけで構成されています。
ページのほとんどが余白ながら、
見る人の大多数が「何をするためのページなのか」が理解できるデザインなのです。
余白だけで情報のグループ化ができる
余白を上手く使えば、
枠線で区切ったり背景色を変えたりしなくても情報をグループ化できます。
例えばクリスピークリームドーナツの
メニューページ（https://krispykreme.jp/menu/cat/doughnuts/）を見てください。
ドーナツの画像と商品名が枠線や背景色で区切られていませんが、
それぞれがしっかりとグループ化できています。
画像の間に適度な余白を作ることで、
余計な装飾を施さずに1つ1つのドーナツをグループ化しているのです。
特にクリスピークリームドーナツのドーナツはカラフルなものも多いので、
枠線や背景色で区切ると情報が過多になってしまいます。
枠線や背景色といった余計な装飾を省いて余白を上手く使うことで、
メイン商品であるドーナツがしっかり強調しているわけです。
Webサイトのコンセプトを余白でアピール
何も情報を持たないはずの余白がWebサイトのコンセプトをアピールする材料にも
なります。
「wasou」（https://kyo-wakon.wasou.salon/）という和婚式をプロデュースするブランドの
サイトを見てください。
スクロールやカーソルを当てることで画像が動くエフェクトが用いられていますが、
画像とテキストのシンプルな構成で余白を多く取っています。
余計な装飾を施さずとも結婚式プロデュースの「清潔さ」、和婚式の「荘厳さ」、
実際はリーズナブルですが「高級感」が余白だけで伝わってきます。
余白は情報を持ちませんが、
Webデザインでは上手く使うことでテキストや画像よりも情報を伝えられるのです。
Webデザインにとって情報を持たない余白は無駄なものですが、
紹介した3つのサイトは余白を必要な無駄として上手く使っています。
余計な装飾を省くメリット
Webデザインで余計な装飾を省くメリットとしてまず挙げられるのが
「情報が伝わりやすくなること」です。
カレンダーの例や先に紹介した3つのWebサイトを見ても分かる通り、
余計な装飾を省くと必要な情報が残ります。
必要な情報はサイト側にとっては伝えたいことですし、閲覧者側は求めていることです。
余計な装飾を省いてシンプルにすることで伝えたいことが明確になり、
閲覧者も求めていることが見つけやすくなります。
求めている情報を見つけやすいと閲覧者はストレスを感じませんし、
余計な装飾を省いたWebデザインはユーザビリティということにもなるのです。
飽きられにくい
余計な装飾を省いたシンプルなWebデザインのメリットとして「飽きられにくい」ことも
挙げられます。
ファッションと同じようにWebデザインにもトレンドがあり、
その時々で「流行っている」「ウケる」デザインがあります。
しかしトレンドは一過性のもので、その時は大きな注目を集めても時間が経てば
「時代遅れ」「ダサい」デザインとなってしまうのです。
余計な装飾を省いたデザインは大きな注目を集めることはないものの、
ある程度時間が経過しても時代遅れにはなりません。
飽きられにくいので大幅なリニューアルを頻繁に行う必要がありません。
いつも使っているWebサイトで大幅なリニューアルが行われると、
閲覧者はまた一から必要な情報を探さないといけなくなります。
飽きられにくいシンプルなWebデザインは長く使えますから、
見るたびにデザインが変わっていて閲覧者が困惑するといったことがないのです。
また大幅なリニューアルの回数が少なくて済むとWebサイトにかける費用も
節約できるので、運営者にとっては一石二鳥です。
洗練されたイメージ
余計な装飾を省いてデザインをシンプルにすることで、
閲覧者に「洗練されたイメージ」を与えられます。
子供をターゲットにしたサイトは、
多くの装飾を施すことで飽きさせない作りになっていますが洗練さは感じられません。
装飾を省いたシンプルデザインのサイトは、
スタイリッシュでセンスが良くて洗練されていると感じます。
洗練されたイメージがマイナスになることはありませんから、
余計な装飾を省くことがサイトや運営者のイメージアップにも繋がるのです。
間口を広くする
シンプルなWebデザインには「間口を広くする」という効果もあります。
たくさんの装飾を施したデザインは楽しいので子供にはウケますが、
大人はごちゃごちゃした印象しか残りません。
余計な装飾をそぎ落としたシンプルなデザインは、
大人はもちろん少し背伸びしたローティーンにも受け入れられます。
特定のターゲットにアピールしたい場合はプラスになりませんが、
老若男女幅広い世代にアピールしたい場合にはシンプルなデザインは有効なのです。
余計な装飾を省いたWebデザインで注意すべきこと
余計な装飾を省いたシンプルなWebデザインを作る際に
最も注意しないといけないのは「シンプルになりすぎないこと」です。
シンプルを求めるあまりにシンプルになりすぎると、
何の面白みも引っ掛かりも無いWebデザインになってしまいます。
白バックに黒テキストで必要な情報を掲載しただけのデザインは確かにシンプルですが、
このデザインのサイトを何度も見たいと思いますか？
Webデザインに求められるシンプルさは、
デザインを作る側にとってのシンプルではなく見る側にとってのシンプルです。
必要な情報が伝わるように色々な仕掛けを施しながらもシンプルに見えるデザインを
作ることが重要なのです。
余計なのは見た目の装飾であり、
裏側の閲覧者に見えない装飾は省いてはいけません。
色数を抑える
シンプルなWebデザインを作るには「色数を抑える」ことも意識した方が良いでしょう。
色も立派な情報であり、色数を多く使うと構成自体はシンプルでも
ごちゃごちゃした印象のデザインになってしまいます。
Webデザインで使う色は
・メインカラー
・ベースカラー
・アクセントカラー
の3つが基本です。
メインカラーはブランド名やロゴなど一番伝えたい部分に使う色で、
Webデザインの主役となる色です。
ベースカラーはWebデザインで一番多くの面積を占める色で、
背景や余白部分に使います。
アクセントカラーは閲覧者の目を引く役割を持つ色で、
購入や申し込みのボタンなど閲覧者を特定の行動に誘導するのに使います。
メイン25%、ベース70%、アクセント5%の割合にすると、ごちゃごちゃしていないけど
シンプル過ぎないバランスの良いWebデザインになるのです。
まとめ
余計な装飾を省くことで、ユーザビリティが高くて飽きのこないWebデザインとなります。
ただし余計な装飾を省くことは手を抜くことではなく、
閲覧者に見えない裏側にはしっかいと装飾を施さないといけません。
手間をかけてユーザビリティが高くて印象に残りやすいシンプルなWebデザイン作りを
目指してください。