収入UPの転職を目指す方へ

見た目重視?それとも効果重視? いまWebデザインに取り入れたいトレンドとは

  • 2016/07/13
見た目重視?それとも効果重視? いまWebデザインに取り入れたいトレンドとは

Webデザインは、使われる技術もトレンドもどんどん変化します。数年前の流行が更に洗練され、新たなトレンドが作り出されることもあります。
Webデザインのセンスを磨くために、良質なデザインのWebサイトを数多く閲覧して、「何故、このデザインが注目を浴びているのか?」を考えてみましょう。
本日は、いま、Webデザインで取り入れたいトレンドをご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

高画質の写真・動画を背景に

高品質の写真や、見栄えのいい動画をホームページの背景に表示したデザインは、最近では珍しくなくなりました。 通信速度の向上やモバイル機器の発達、そしてInstagramの普及など、よりクリアで高画質の写真や動画を表示する環境が整ったことと、それを求めるユーザーの傾向が強まっていることが要因として挙げられます。
また、質の高いグラフィックを採用することで、注目度を高め、文章で説明せずとも分かりやすくイメージを伝達することができ、印象に残りやすいというメリットがあります。
注意すべきは、むやみに画質の高い画像を貼りつけてしまうと、読み込み速度が遅くなり、SEOやユーザビリティが悪くなる可能性がありますので、画像の適切な処理(最適化)を行うことが大切です。

デザイン例:http://www.gustavecafe.fr/

フラットデザイン

トレンドのデザイン手法の一つに、フラットデザインがあります。 このデザインは、ドイツ・ヴァイマルの「バウハウス」というデザイン学校に端を発します。 シンプルで伝わりやすく、無駄を廃したデザインとして、AppleやGoogle、Microsoftといった大手OSメーカーが積極的にフラットデザインを採用しています。

フラットデザインにおいては、いくつかポイントがありますので、ご紹介したいと思います。

1.起伏を作らず、平面的に表現する

ボタンに立体感を持たせるためのドロップシャドウや押し出しベベルなどの加工をしません。また、要素の配色を少なくすることで、よりシンプルに見せることがポイントです。

2.グリッドで設計する

グリッドはマス目状のガイドラインのことで、紙媒体のレイアウトで使われることが多くありました。グリッドを意識したレイアウトを行うことで、情報がより整理され、理解しやすくなります。

3.テキストを読みやすく

見出しの重要性に応じて大きさを分け、テキストの情報を整理し、簡潔に読みやすくしましょう。文字にも加工は不要。シンプルに、フォントそのもののデザインを魅せる使い方をすることが大切です。

フラットデザインは2013年頃に登場したデザインですので、しばらくはスタンタードなデザインとして流行が続くでしょう。 可読性が良く、またデザインがシンプルなため、CSSのオブジェクトとして生成が可能です。 その結果、サイトの表示スピードが速くなり、ユーザーが快適に閲覧をすることができるのもメリットです。

ゴーストボタン

フラットデザインと相性が良い、背景を透過したデザインのボタンです。 背景が透けて見えるという特徴から、ゴーストボタンと呼ばれています。
アウトライン(枠線)とテキストのみという、必要最小限の要素で形成されることが多いため、デザインの邪魔をせず、かつ高画質写真や動画の上に乗せることができ、使い勝手も良いのが特徴です。

デザイン例:http://www.iuvo.si/

タブレット・スマートフォンを重視

近年、タブレット端末やスマートフォンでインターネットのサイトを閲覧する機会が増えてきています。 サイトのデザインもこれに対応して、レスポンシブデザインに対応しやすいデザインや、スマートフォン・タブレット端末からの閲覧を意識したデザインが増えています。

・カードレイアウト

タイルレイアウトとも呼ばれています。 イメージ画像と見出しの文字数行がカードやタイルのように規則的に並んでいます。 レスポンシブデザインでもレイアウトをきれいに保ちやすいという特徴があり、最近良く見かけます。

デザイン例:https://jp.pinterest.com/

・スクロールビューの重視

以前はファーストビューを重視し、複数ページにコンテンツを分けるのが一般的でしたが、今はタブレット端末やスマートフォンを意識して、縦方向にスクロールすることにより1ページでコンテンツを完結させるサイトも増えてきています。

デザイン例:http://pixelfable.com/

まとめ

最近のWebデザインの主流としては、高画質な画像や動画の使用により、訪問者の視覚に訴えるデザインが注目される一方、シンプルで可読性が高く、表示速度も高いフラットデザインが流行しています。 また、これら二つの手法を巧みに融合させたゴーストボタンといったデザインも見られるようになってきました。 また、スマートフォンの普及により、レスポンシブデザインを意識したデザインをすることも大切です。 どうせなら、これらの流行のデザインを取り入れ、来訪者から「かっこいい」「洗練されている」と思われるような、クオリティの高いWebデザインを制作しましよう。