2016年4月18日

モバイルファースト時代を生き抜くための基礎知識

スマホの普及でどう変化した?現在主流の3つのWebデザイントレンドを解説

スマホの普及でどう変化した?現在主流の3つのWebデザイントレンドを解説

スマートフォンの普及は、Webデザインのトレンドにも大きく影響を与えています。
一部の企業向けサイトを除けば、スマートフォン対応はもはや必須といっても過言ではないでしょう。
 
今回は2016年現在のWebデザインのトレンドである、マテリアルデザイン、レスポンシブWebデザイン、そしてアダプティブWebデザインについて解説します。
モバイルファーストが叫ばれる今の時代、Webデザイナーならこれらのトレンドは押さえておく必要があります。
 


1.マテリアルデザイン

マテリアルデザインは、Googleが2014年6月に開催された開発者向けのイベント「Google I/O 2014」にて発表した新しいUXです。
「マテリアル(Material)」は「物質的な」という意味なので、直訳すると「物質的なデザイン」という意味になります。
 
Androidでは同イベントで発表された「Android 5.0 Lollipop」から採用されており、「Gmail」「Googleマップ」といったGoogleの製品・サービスでも導入されています。
iOS版「Google」アプリ、iOS版「Chrome」アプリでもマテリアルデザインが導入されており、iOSにも浸透しつつあります。
  

マテリアルデザインの目的

マテリアルデザインはPC、スマートフォン、タブレット、テレビ、腕時計など、どんなデバイスでも使いやすい統一感のあるデザインを目的としています。
 
統一感がないデザインだと、デバイスによってUIデザインが異なるため、ユーザーが操作に慣れるまでに時間がかかります。
その問題を解決するために、マテリアルデザインという「デザインの原則」を定め、デバイス間で異なる操作感の違いを軽減して統一感のあるユーザー体験を実現することを目指しているのです。
 
 

マテリアルデザインの概念


http://www.google.com/design/spec/material-design/introduction.html#introduction-principles
 
Googleが公表しているマテリアルデザインのガイドラインには、「Material is the metaphor(マテリアルはメタファー:隠喩)である」と書かれています。
マテリアルデザインは「紙」と「インク」をメタファーとしており、ヘッダー、ボタンなどの要素は「紙」、その「紙」の上に描かれているテキスト、アイコン、画像、動画などのコンテンツは「インク」の概念を軸として表現します。
 
実際に「紙」と「インク」を使用するわけではなく、UI上で「紙のようなもの」「インクのようなもの」を使ってデザインを表現するという概念です。
 
つまりは、現実世界における「紙」と「インク」のように、「紙」を重ねたり、「紙」の上に「インク」で文字を書いたりといった動作をUI上で表現しようというのがマテリアルデザインの基本的な概念となっています。
「紙」の重なりによる表現は、次項で解説するフラットデザインの欠点を解消するものとなります。
 
 

フラットデザインとの違い


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties
 
フラットデザインと大きく異なるのは、マテリアルデザインはX軸、Y軸、Z軸の三次元で表現される点です。
 
「紙」は1dpの厚みを持っており、形状は矩形(くけい:四辺形や長方形)か円形でのみで、三角形などの複雑なシェイプは用いません。
「紙」をX軸とY軸で変形させ、「紙」の厚みやZ軸の標高に応じてシャドウ(影)が変動します。
「紙」には1dpの厚みがあるため、複数の「紙」を重ねたときは現実世界と同じように影ができ、「紙」同士の重なり方によって影の具合が違ってきます。
 
ただし、現実と同じように「紙」を重ねることもできますが、「紙」が「紙」を通り抜けるといった現実でも不可能な動作をすることはできません。
 
フラットデザインでは装飾を省いた分、ボタンが周りのデザインと溶け込んでクリック、またはタップする場所がわかりにくいという欠点がありますが、マテリアルデザインは「紙」の重なり具合で影を表現することにより、ユーザーがボタンなどのアクションを起こすパーツを区別しやすいように工夫されています。
 
これらの概念はマテリアルデザインのほんの一部ですので、詳しくはGoogleが公表しているガイドラインをご参考ください。
 
 
参考URL:
マテリアルデザイン
http://www.slideshare.net/akioyonekura1/materialdesign-49393726
Google提唱! マテリアルデザインって何?
http://www.live-commerce.com/ecommerce-blog/material-design/#.VvWbpxKLRWM
今さら聞けない?! 5分でわかる!マテリアルデザイン入門
http://lab.sonicmoov.com/design/material-design/
よくわかるマテリアルデザインの設計コンセプト
http://fladdict.net/blog/2015/05/material-design.html
 


2.レスポンシブWebデザイン

レスポンシブWebデザインは単一のファイルで複数のデバイスに対応する手法を指します。
 
レスポンシブWebデザインの登場以前、PC、スマートフォン、タブレットなど、画面サイズが異なる複数のデバイスに対応するにはデバイスごとにテンプレートを用意する必要がありました。
デザインの変更や修正をする場合は各テンプレートを編集しなければならず、メンテナンスコストが高くなりがちです。
 
一方、レスポンシブWebデザインでは、用意するHTMLファイルがひとつです。
ひとつのHTMLファイルで画面サイズの異なる複数デバイスに対応できるため、メンテナンスコストを低減しやすくなります。
 
BootstrapなどのレスポンシブWebデザインに対応したCSSフレームワークや、さまざまなテクニックが共有されたことで、導入自体もかなりやりやすくなっていると思います。
 
 


3.アダプティブWebデザイン

「アダプティブ(Adaptive)」は「適応性の(ある)」という意味です。
アダプティブWebデザインは画面サイズによって画像やコンテンツを最適化する手法で、ブレイクポイントを指定してレイアウトを変更します。
この説明だけでは「レスポンシブWebデザインと同じでは?」と思ってしまいますが、両者には明確な違いがあります。
 
レスポンシブWebデザインは先に解説した通り、用意するHTMLファイルは1つで、CSSによって画面サイズに応じたレイアウト変更をする手法です。
 
それに対してアダプティブWebデザインでは、基本的にブレイクポイントごとにHTMLファイルを用意します。
設定するブレイクポイントはデバイスごとではなく、ピクセル単位で指定するため、デバイスによってはコンテンツが見切れてしまう場合があります。
 
「コンテンツが見切れてしまうのなら、レスポンシブWebデザインの方がよいのでは?」と思うかもしれません。
しかし、レスポンシブWebデザインには、ソース上は存在しているのにレイアウトの都合で非表示にしている要素が含まれるために重くなってしまったり、画面サイズごとに最適なデザインを作りこむのが難しかったりといった問題があります。
 
一方、アダプティブWebデザインならば、ブレイクポイントごとにHTMLを用意するので、不要な要素を外して軽量化したり、ある画面サイズに特化したデザインの作りこみが可能です。
HTMLを複数用意しなければならないため、制作工数は増えてしまいがちですが、パフォーマンスを重視するならばアダプティブWebデザインの方が優れているといえるでしょう。
 
 


まとめ

いかがでしたか?
Webデザインのトレンドの変化は速く、キャッチアップしていくのも大変ですが、だからといって無視をしていると時代遅れのデザインしかできなくなってしまうかもしれません。
最先端のトレンドを追い続ける必要はないと思いますが、一般に普及したときに乗り遅れないよう、アンテナを立てておくことをおすすめします。


クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

すべての案件を見る

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。