2014年後半戦!WEBサイトデザインとサイト設計の最新トレンドはこれだ!

1806717289_6e97fe91c9_b

はやくも7月に入って2014年も後半戦。
ムシムシの気温にだれ気味な自分に気合を入れなおすためにも、ここで2014年前半のWEBサイトデザイン最新トレンドやテクニックをまじめにまとめておこうじゃないかと。

あくまでも KUDOH@NIJILOG の独断と偏見で感じたままをかいているだけなので、ツッコミ無用でお願いします。ペコリ。

レスポンシブデザインの普及

メディアクエリーが本格的に実用化されてからマルチデバイス対応の王道になったレスポンシブデザインですが、すでに対応するのがあたり前になっています。

最近のトレンドとしては、レイアウトだけではなく画像や動画もレスポンシブにきっちり対応するサイトが増えてきています。
リキッドサイズに対応するためのスクリプトやプラグインもドンドン出てきているので要チェックです。

日本の独自文化だったガラケーが駆逐されて、これからもスマホやタブレットは増え続けるので、当分レスポンシブの流れはとまらなそうですね。

レスポンシブデザインの主要フレームワーク

Bootstrap
Foundation
Pure

レスポンシブデザインの参考WEBサイト

https://webflow.com/
webflow_com_(1)

https://devart.withgoogle.com/#/
DevArt(1)

フラットデザインの標準化

フラットデザインとは「シンプルな要素、直線・直角、エフェクトなし、マットカラー」だと個人的に定義しているんですが、その意味で一時のフラットデザインブームは落ち着いた感があります。
ただ、落ち着いたと言っても廃れたとか下火になったということじゃなくて、フラットデザインを下地にした次の段階に進んでいる印象です。

たとえばメニューやフォーム周り、アイコン関係なんかはフラットじゃないものを探すほうが難しいんですが、サイト全体でフラットデザインだけをつかうことはほとんどなくなってきています。

部分的なフラット要素とリッチなデザインを共存させて、いいとこ取りしたハイブリット型のデザインがこれからドンドン出てきそうです。

フラットデザインの主要フレームワーク

Bootflat
Foundation
Pure

次世代フラットデザインのWEBサイト

http://aino.com/
aino_com_

http://agencysurvivalkits.com/
agencysurvivalkits_com_(1)

ワンページ

つたえるメッセージや内容を厳選したシンプルな縦長ページもトレンドの一つです。
ひとつのページにコンテンツの概要をあつめることで、ユーザが短時間で全体像を把握できるところに大きなメリットがあります。

縦長ページというと、だらだらと長くて煽り文句ばかりの胡散臭いページを想像するかもしれませんが、最近は厳選したコンテンツとヘッドラインでコンパクトに概要をつたえるのがポイントですね。

ワンページ系のWEBサイト

https://prong.com/
prong_com_

http://fieldguide.is/
fieldguide_is_

パララックス

ワンページ系のなかでも、画面のスクロールで背景の画像を動かしたりアニメーションさせたりするパララックスサイト。
日本ではまだイマイチ導入事例がすくないですが、海外ではちょっとしたブームになるくらいアツイ状況となっております。

スタンダードなスクロールで背景がうごくパターン以外にも、イラストがストーリー仕立てでアニメーションしていく手の込んだサイトや、スクロールではなくマウスに追従するパララックスをつかったりと様々で面白いです。

それなりにセンスが求められるのでハードルは低くありませんが、出来上がりのインパクトは絶大なのでWEB製作者なら是非一度はお試しあれ。

パララックスをカンタンに導入できるJQueryライブラリ

Nikebetterworld Parallax Effect
Parallax-JS

パララックスサイト

http://sendabigidea.com/
Send a Big Idea - Salmat 2014-06-22 22-02-34

http://www.mathewsgrouponline.com/
www_mathewsgrouponline_com_

フルスクリーン写真・動画背景

巨大サイズの高解像度写真や動画を横幅一杯までつかった背景は間違いなくトレンドのひとつです。
効果的な写真や動画は、ながながと文章を書くよりも多くの情報をつたえられますし、なによりデザイン性が非常に高い。

余計な説明がいらない分、ページ全体や UI をシンプルにできるというところが大きいですね。

フルスクリーンサイトに役立つプラグイン

fullPage.js
Alternate Fixed & Scroll Backgrounds
Backstretch

フルスクリーン写真・動画背景をつかったサイト

http://www.autozone.com/duralast/
www_autozone_com_duralast_

http://www.lanificioricceri.it/
www_lanificioricceri_it_

アニメーション

HTML5/CSS3 や、かんたんな JQuery でアニメーションをつくるサイトがかなり増えています。

一昔前まではアニメーションといっても直線的な動きしかしないものばかりでしたが、SVG や animation がつかえるレベルになって一気に表現の幅が広がってます。
いままでのような静止画的なサイトよりも、見た目に動きのあるサイトのほうがユーザも楽しいですし、視線もコントロールできるので、これからのサイトは「動くことがあたり前」になっていくと思います。

いきなりアニメーションバリバリのサイトは難しいと思いますが、普通のWEBサイトでもちょっとしたアクセントにアニメーションをつかうと効果的に見せることができるのでオススメです。

いろんなアニメーションプラグイン

AniJS
WOW.js
Avgrund

アニメーションが印象的なサイト

http://disneymaleficent.tumblr.com/magicalworld
Evil Is The New Black 2014-06-22 22-01-29

http://nodo.cc/en
nodo_cc_en

スライダー

スペースを取らずに複数コンテンツを配置できるスライダーも欠かせない要素です。
スライダー自体は以前からよく見かけるパーツですが、最近はレスポンシブとアニメーションに対応したものがよく使われます。

アニメーション対応したスライダーは、一枚のスライドの中で次々とパーツを動かすことができるので、ちょっとした Flash のような表現ができるのでポイントが高いです。
また、スライダーのレスポンシブ対応はレイアウトがリキッドになるレスポンシブサイトでは必須の機能です。

いろいろできるスライダー

Fullscreen Slit Slider with jQuery and CSS3
Parallax Content Slider with CSS3 and jQuery

スライダーをつかったWEBサイト

http://shapebootstrap.net/demo/wordpress/flat_theme/
Flat Theme - Just another WordPress site 2014-06-07 18-57-36

スライドメニュー

メニューナビゲーションを画面外からスライドして表示するスライドメニューは、スマホサイトでよくつかうテクニックですが、デザイン性の高いサイトでは PC 向けサイトでもこれをつかうところが出てきています。

まあメニューを隠すことでデザイン性はあがるんですが、どうしてもユーザビリティを犠牲にするので、今後主流になるのは難しいかもしれませんが、ビジュアル重視のサイトではこれもアリでしょう。
結局は目的次第なので使い方を間違えないようにしたいですね。

イケてるスライドメニュープラグイン

Full Page Intro & Navigation
Sidr

イケてるスライドメニューをつかったイケてるサイト

http://www.frogsleap.com/
Frog’s Leap Winery 2014-06-18 16-45-33

http://www.tinquer.com/en/
www_tinquer_com_en_

固定ヘッダー

スクロールしてもついてくる固定ヘッダーも最近よく目にします。

最近はヘッダーがただ固定されているだけじゃなく、半透明にして背景の邪魔をしないようにしたり、スクロールするとフェードするもの、ヘッダーの中身のサイズを変えてコンパクトになるものなど、いろいろと工夫がされるようになりました。

固定ヘッダーを導入できるプラグイン

On Scroll Header Effects

固定ヘッダーをつかったサイト

http://demo.themeum.com/starter/
Responsive WordPress Themes Demo - Themeum 2014-06-07 18-55-48

 

【総論】これからのWEBサイト

WEBサイトデザインは一時期のフラットデザインブームによるシンプル一辺倒から、写真やイラストをつかった「シンプルかつリッチ」なデザインへとシフトしました。
ただ、リッチと言ってもゴチャゴチャしたものではなく、情報をあえて抑えたミニマルなものが好まれる印象です。

サイトの設計もページ毎にバラバラのストーリーではなく、サイト全体でひとつのメッセージを持たせる設計力が必要です。
パララックス系のサイトはその最たる例で、全体がストーリーになっていて、ページの一部分を見ただけで完結するような既存のつくり方は敬遠されます。
そのため、ホームページ(インデックスページ)が最も比重が重く、サブページはあくまでもその補足という構成が良く取られます。

ゴリゴリとセールスするようなページや、ブランディングイメージだけに特化したサイトではなく、もっとクリーンでインバウンドなコンテンツ作りが求められています。
今後のWEBサイトはいままで以上に洗練したコピーライティングの力と、意志を持ったコンテンツ力が求められていきそうですね。