本文へジャンプ

Webデザインのトレンドをまとめてみた。

Posted by Yuji Ushida

Webデザインを生業にしているみなさん、こんにちは、MD-USHIDAです

スマホ、タブレット、そしてPCもOSや機種によって閲覧様式の多様化が進んでいる昨今、デザイン面で苦戦してたりしませんか?
iOS7ではデザインのフラット化が推進されていますが、次はロングテールデザイン?という噂が流れていたり、
「今、いったいどのようなデザインがトレンドで、カッコいいのか」
「より多くのユーザーが使いやすいのは、どんなデザイン?」
と日夜苦戦してることでしょう。そうでしょう。
そこで、最近のトレンドをまとめてみることにしました。

やはり、最近のトレンドで外せないのは「レスポンシブデザイン」。スマホ、タブレット、PCなど、あらゆるデバイスに最適化したWebサイトを単一のソースコードで実現するこの手法。スマホの普及によってあっという間に一般化しました。猫も杓子も(?)「レスポンシブ」です。
そこで今回は、「レスポンシブデザインを意識したサイト」を検証! 特に、画像やテキストなど多くの情報表示が必要とされるECサイトに注目して、いかにカッコ良く、レガシーではない印象に仕上げるべきか、代表的な手法をいくつかご紹介します。

レイアウトデザイン

Case #1 無限スクロールなグリッドレイアウト

Case #1

Windows8やPinterestのようなリキッドデザイン。見かけることが本当に増えてきました。
ビジュアル主体で、見た目にインパクトのあるデザインですね。
各ボックスがブラウザやデバイスのサイズによって再配置されるので、PCのデザインを最適に表示できますし、どんな環境で見ても見た目の印象はあまり変わりません。写真系のサイトに非常に相性が良いと思います。
小さい画面だとどうしてもページが縦長になってしまいますので、使いやすい設計が必要になりますが、スマホのUIをベースとするとことで対処できそうですね。

代表例 Pinterest

Case #2 レイアウトを保持するフレキシブルレイアウト フルードグリッド

Case #2

同じ要素で、横幅によってデザインがかわるメディアクエリデザイン!
こちらもグリッドレイアウトと同様に、ブラウザサイズにあまり影響されず、小さな閲覧環境でも横スクロールを表示すること無く情報を伝える事ができます。グリッドレイアウトよりも自由度が高いため、ビジュアル面で面白いサイトが構築できそうです。このデザインは、ECサイトでよく見ますね。ロングテールなデザインにすることで、商品の豊富さをアピールできますし、なによりSEOの視点からも有効と考えられます。

代表例 Amazon

UIデザイン

次に、上記のレイアウトデザインと相性の良いUIををご紹介します。

Case #1 強弱はっきり、ミニマルデザイン

ミニマルデザインはグリッドレイアウト、フレキシブルレイアウトともに相性が良いデザイン思考ですよね。使用する情報、色数をなるべく削ぎ落とし、シンプルで分かりやすい表情を持たせます。画像、テキスト、アイコンなどに強弱をつけて引き立たせることでスマホなどの小さな閲覧環境でも分かりやすさ抜群です。

レスポンシブなミニマルデザインの代表例 Lisi Design Bluegg

Case #2 モダンな雰囲気、フラットデザイン

グリッドレイアウトを使用するなら、まずはじめに試したい表現手法ですね。階調に変化をつけると、非常にポップなイメージになり、こちらもスマホのようなモバイルデバイスでも、直感的に使えるUIになります。

レスポンシブなフラットデザインの代表例
January Creative
United Pixelworkds

Case#1、Case#2ともい非常にシンプルなデザインであるため、デザイン着手前に情報の厳選が必要です。誰に何を伝えるかをしっかり明確にし、それに基づいた設計が求められますが、コレが難しい...。ただ、小さなディスプレイでの視認性や分かりやすさなど、さまざまなメリットがありますので、トライしてみる価値は十分にあります。

と、最近のトレンドデザインをまとめてみました。

大まかに要約+アルファすると

  • 各種デバイスも意識して、単一のソースでマルチデバイス対応!レスポンシブデザイン!
  • フラットデザインでよく見える、パキッとしたトンマナ!
  • 大画面でも格好良くデザイン、フルードグリッドデザイン!
  • メイングラフィックを目立たせる、文字の強弱!ミニマルデザイン!
  • 動きが想像できる、触りたくなるデザイン!
  • ページ遷移せず、表示する情報を切り替える!
  • タブレットでの閲覧も考慮する!

上記を意識したデザインが、もはやスタンダードになっていますよね。どれも特徴がありますので、サイトの特性にあったデザインを選びたいですね。
デザイナーのみなさん、がんばっていいものつくりましょう!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr