おすすめの一品の写真、営業時間、お店へのアクセス方法や連絡先、お客様の声……せっかく自社のウェブサイトを作るなら、できるだけ多くの人の目にとまり、必要な情報をわかりやすく伝えられるウェブサイトを作りたいと考える経営者は多いでしょう。
スマートフォンやタブレットが普及したことにより、ウェブデザインのトレンドは変化しました。また、年齢や身体的な条件に関わらずインターネット上で提供される情報にアクセスできるウェブアクセシビリティーへの取り組みも、多くの企業で進められています。
今回は、数あるウェブデザインの中でも近年、多くのウェブサイトで採用されているフラットデザインとマテリアルデザインについて解説します。
フラットデザインとは
フラットデザインとは、立体感を出すための影やグラデーションなどを使わず、直線や色のコントラストを生かしたデザインを指します。メニューやアイコンといった視覚的要素をシンプルかつ平面的にするデザインの一つで、近年はオペレーションシステムやウェブサイト、アプリケーションソフトなどに広く採用されています。
シンプルで平面的なデザインを用いることで、見る人が情報に集中できる、伝えたいメッセージがストレートに伝わりやすくなるなどの効果が期待されます。
フラットデザインの対極にあるのが、リッチデザインです。リッチデザインでは、影やテクスチャをつけて奥行きや立体感を表現します。立体感や奥行き、質感などを表現した装飾的なデザインとしては、スキュアモーフィックデザインとも似ています。
フラットデザインの歴史
2012年にマイクロソフト社が発表したWindows8、2013年にアップル社が公開したiOS7で使用されたことをきっかけに、フラットデザインは広く知られるようになりました。それまで主流だった「本物らしさ」をウェブ上で実現することを目指していたリッチデザインやスキュアモーフィックデザインに代わり、オペレーションシステムやゲーム機などにもフラットデザインが導入されるようになりました。
マテリアルデザインとは
フラットデザインに似ているデザインとして、マテリアルデザインがあげられます。2014年にGoogleが発表したフレームワークで、スマートフォンやタブレット、パソコンなどあらゆるスクリーンサイズに向けたデザインです。フラットデザインは平面的でシンプルな分、どこにボタンがあるか分からないなどユーザーにとって使いにくい点がデメリットでした。マテリアルデザインでは、現実世界における人間の行動を参考に、ユーザーを第一に考えたデザインになっています。リッチデザインのような装飾性を排除しつつも、影や奥行きを表現することで現実世界の物質（マテリアル）をスクリーン上に再現し、直感的な操作を実現します。
Googleによるガイドラインでは、明確にかつ効率よく情報を伝え、ユーザーが必要な情報に集中できるように、フォントや色などの使い方、余白の取り方、アイコンの縦横比などが細かく指示されています。フラットデザインでは用いられない影や奥行きなども、ユーザーのわかりやすさや見やすさを考慮して使われます。
参考：マテリアルデザイン導入のステップ
Squareなら今すぐキャッシュレス決済導入できる
カード決済、タッチ決済、電子マネー決済、QRコード決済が簡単に始められます
多くの人にとって使いやすいウェブデザインとは
スマートフォンやタブレットなどが普及したことで、さまざまなバックグラウンドをもつ人がインターネット上で検索を行ったり、ウェブサイトを訪問したりするようになりました。自治体などのウェブサイトでも、誰にとっても使いやすいユニバーサルメニューが取り入れられています。政府も、2020年の東京大会に向け、障がいの有無や性別、年齢に関係なく人権や尊厳を大切にし支え合う共生社会を実現するため「ユニバーサルデザイン2020行動計画」を決定し、インターネットも含めた社会のバリアフリーやユニバーサルデザイン化を推進しています。
参考：
ユニバーサルメニューの概要（一般社団法人 ユニバーサルメニュー普及協会）
ユニバーサルデザインの推進について（首相官邸）
たとえば、視覚に障がいをもつ人にとっては、ウェブサイトの背景の色と文字の色のコントラストが弱い場合、読みづらくなってしまいます。高齢で視力が低下してきた人にとっても、装飾的なフォントよりもシンプルなフォントのほうが読みやすいでしょうし、フォントの大きさも、小さすぎても大きすぎても読みづらいかもしれません。シンプルさや分かりやすさを追求したフラットデザインやマテリアルデザインの考え方は、多くの人にとって使いやすいサイトを作成する際に活用できます。
ウェブサイトを自分で作る場合でも、デザイナーに依頼する場合でも、ブランドイメージに合ったデザインを選ぶと同時に、自社のターゲット層にとって使いやすく、見やすいデザインについても考えてみると良いかもしれません。
関連記事：
・知っているようで知らないバリアフリー。飲食店でできる対応とは
・魅力あふれるECサイト作りを！小売店向けWix活用のススメ
執筆は2019年5月28日時点の情報を参照しています。
当ウェブサイトからリンクした外部のウェブサイトの内容については、Squareは責任を負いません。
Photography provided by, Unsplash
