KOBITブログ

優れたUI設計のために知っておきたい4種類のデザイン手法

この記事は約 6分 で読めます。

responsive web design concept in flat screen TV, tablet, smart phone and laptop

UI/UXについて理解を深め、優れたUI/UXを持ったWebサイトを構築するためにお送りする本連載。
前回記事では、UIに優れたサイトを構築するにあたり必要な概念として、レイアウト・配色・フォントの原則を紹介しました。

今回も、引き続きデザインに関する方法論として、フラットデザインやレスポンシブデザイン等の流行のデザイン手法を紹介していきます。

「UI/UXを知り、優れたWebサイトを構築する」連載一覧

1.UI/UXの基本(全三回)

第一回:良いUI/UXとは何か?Amazonと楽天に見るユーザー体験の違い

2.UXに優れたサイトを構築するために検討するべき事項(全四回)

第四回:優れたUXを設計するための戦略:ペルソナ法とストーリーボード

3.UIの要素や方法論の解説

第八回:優れたUI設計のためのレイアウト・配色・フォントの原則

デザイン方法論

UIデザインは、技術の進化やWebサイトの利用方法に合わせて新たな手法が提案されてきました。特に、モバイルの普及がUIに大きな影響を与えており、画面へのタッチを前提とした小さな画面でも使いやすいデザインが好まれるようになっています。

最近はWebサイトへ訪問する半数以上がスマートフォンやタブレットが占めているとも言われ、モバイル対応が行われたWebサイトは検索エンジンからの評価が高くなる場合もあります。

見栄えに関する手法

フラットデザイン

見栄えに関する手法は、詳細まで作りこんだ「リッチ」な方法論と無駄をそぎ落とした「シンプル」な方法論の間を流行が行ったり来たりしています。

グラフィック技術の向上によって増加していたリッチな手法に対する反動として2012年頃から注目を集めたのが「フラットデザイン」です。フラットデザインでは、ボタンや色使いなどを簡素化し、影やグラデーションを排除することで平面的(フラット)に見せる技術です。

極限までUI要素を単純化しているので、掲載される情報が多かったり、画面が小さかったりした場合でも可読性を損ないません。

instagramフラットデザインの例。Instagram(https://www.instagram.com/?hl=ja) 

マテリアルデザイン

前述のフラットデザインが流行する中で、あまりに簡素化が進みすぎてしまう弊害が現れてきました。中でも特に聞かれたのが、ボタンやリンクなどの場所が分かりにくく、どのような操作をすればよいかが分からないという指摘です。

そこで注目を集めてきたのが「マテリアルデザイン」です。
フラットデザインの単純さを維持しながら「触感」にこだわります。

ボタンであればデザインに奥行きをつけて“押せる”感覚をユーザーに与えるのがマテリアルデザインの考え方になります。Googleはマテリアルデザインに積極的で、AndroidやYouTubeなどに、その影響が見られます。android

マテリアルデザインの例。Android(https://www.android.com/intl/ja_jp/) 

レイアウトに関する手法

レスポンシブデザイン

2013年頃から広まった方法論としてレスポンシブデザインがあります。レスポンシブデザインとは表示する画面のサイズに合わせて、柔軟に画面デザインが変形する手法です。

例えば、画面が大きい際には横3列に並んでいた段組が、小さい画面では縦一列に並ぶといった変更を、一つのページ内で対応できるようになります。文字サイズや画像・動画の大きさも柔軟に変更されるため、利用者がストレスなく利用できるのが利点です。

一つのページで、デスクトップコンピューターにもスマートフォンにも対応できるため、開発者にとっては、管理・修正の工数を削減できるメリットがあります。

pinterestレスポンシブデザインの例。Pinterest(https://jp.pinterest.com/

アダプティブデザイン

レスポンシブデザインと似た方法論としてアダプティブデザインが提唱されてきました。アダプティブデザインとは、ユーザーが使用する環境に応じて、レイアウトだけでなくコンテンツも柔軟に変更する方法です。

例えば、PCから訪問した際には会社概要が表示される一方で、モバイルからアクセスした場合、アプリのインストール画面が表示されるといった変化が考えられます。ニュースサイト等では、画面サイズが大きい場合、ニュース全文が表示されるのに対し、画面が小さい場合には要約と「続きを読む」ボタンのみが表示される事例もあります。

%e6%97%a5%e6%9c%ac%e7%b5%8c%e6%b8%88%e6%96%b0%e8%81%9e%e9%9b%bb%e5%ad%90%e7%89%88

アダプティブデザインの例。日本経済新聞電子版、モバイル向け
出典「ミャンマー与党、熱狂は薄れる 補選で1議席失う」
http://www.nikkei.com/article/DGXLASGM02H0J_S7A400C1FF8000/?dg=1) 

アダプティブデザインの場合、UXあるいは利用者の文脈・環境を意識した情報を掲載できるため、ユーザーへ伝えたいメッセージを最適化するランディングページなどでの利用に適しています。

しかし、レスポンシブデザインよりも設計・開発・維持に手間がかかるので、適用する範囲を限定するようと良いでしょう。

まとめ

見栄えに関するデザイン手法には、極限までUI要素を簡素化した「フラットデザイン」や触感にこだわった「マテリアルデザイン」等があり、レイアウトに関するデザイン手法には、画面デザインが柔軟に変化する「レスポンシブデザイン」やコンテンツも変化する「アダプティブデザイン」等があります。

どれも素晴らしいデザイン手法ですが、長所があれば短所もあり、それぞれ利用に適した場面は異なります。サービスやコストに見合ったデザインを採用するように心がけましょう。

 

次の記事カラフルなのにシンプル。UI/UXに優れた海外のWebサービスサイト3選

カラフルなのにシンプル。UI/UXに優れた海外のWebサービスサイト3選


CATEGORY:

さあ、KOBITをスタートしよう。