MD-Blog_Web Creative

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

2013.07.21 Sun.

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

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

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