PCサイトにおける2015年トレンドデザインの背景

pcsite-trend-design-2015

スマートフォンの普及により、サイトの情報設計もスマートフォン、タブレットなどのマルチデバイスを考慮することで変化が生まれてきました。PCサイトのデザインはある程度のノウハウは固定化されていると思われてきましたが、マルチデバイスの普及により、今も変化し続けています。

流行りのトレンドに合わせればいい、というわけではないですが、ユーザの動向、環境に合わせたWebサイトの作り方を知っておかなければなりません。今回は、PCサイトにおける2015年のトレンドデザインの動向の背景を主観的に推測してまとめました。

ファーストビューよりスクロールを重視するデザインに

スマートフォンの普及により、Webサイトの閲覧の進化をもたらしたものの1つとして、スクロールの安易さであるでのはないでしょうか。通勤、通学、ベットの上など「twitterやFacebookのタイムライン」「LINEのチャット」などスルスルとスクロールし続けていることが当たり前にはなっていないでしょうか。心地のよい動作、描画スピートの向上、アニメーションを用いたデザインによって、スクロールすることに抵抗感がほとんどなくなったと言ってもいいのではないでしょうか。

2015 trend desing 00

以前のWebサイトの情報設計の基本は「ファーストビューに必要な情報を詰め込む」ということが基本でした。ファーストビューに、必要な情報がないと感じたユーザーは、サイトを離脱してしまうと言われてきました。もちろんいまでもファーストビューを無視するようなことはできませんが、スクロールに対して抵抗感なくなりつつある今、「ファーストビューは絶対的」ではなくなりつつあるのではないでしょうか。

2015 trend desing 01

【左】TOYOTA

【右】JR東日本

TOYOTA のサイトでは、最近トレンドに合わせたロングページになっているのに比べ、JR東日本のサイトでは、ファーストビューを意識したサイトになっていることがわかる。

ファーストビューが絶対的ではなくなった今、ファーストビューより下に情報があることに気づくデザインにすることも重要になってくる。メインの画像を大きくしすぎると下にコンテンツが続いているとわかりづくなってしまうため、メイン画像の高さをある程度に抑え、文章などを置くことによってページが続いていると気づかせるような工夫も必要になってくる。また各セクションごとに背景色を変える、ボーダーを加えるなど、ページの続きがあると気づかせる有効な手法である。

シングルカラムレイアウト

上記のファーストビューよりスクロールを重視するデザインにすることによって、生まれたレイアウトの1つが「シングルカラムレイアウト」ではないでしょうか。

2015 trend desing 02

シングルカラムレイアウトとは、文字通り1つのカラムを縦に並べていくレイアウトであります。このレイアウトの利点としては、PC、タブレット、スマートフォンとのマルチデバイスで幅広く利用できるところである。また、シングルカラムによって、視線移動が縦方向にしかないため、1つのセクションにフォーカスを当てることで、他のコンテンツの不必要な情報を取り払うことができ、ユーザーからすると、1つのコンテンツを読みやすくすることができる。

しかし、シングルカラムも万能に見えるが、デメリットもある。

タブレット、スマートフォンではこのようなレイアウトはとても効果的に使えるが、表示幅の広いPCでは、間延びして見えてしまうこともあります。写真やイメージを大きく利用するなどの工夫が必要になってきます。

また、サイドカラムにローカルメニューを取り払ってしまうことによって、多階層化したWebサイトをユーザーに迷わせてしまうことがあるため、メニューをできるだけ、少なくするなど、サイト全体的の設計を考えなおす必要があります。

2015 trend desing 03

【左】Smile navi

【右】淡路交通株式会社

シングルカラムを取り入れた両デザインは、ローカルメニューはヘッダーの下に配置ある。メニュー数も多くなくできるだけ少なくしているのではないでしょうか。


Fixedナビゲーション

スクロール量が多くなるシングルレイアウトでは、ページを下へ下へ読み進めていき、いざ次のコンテンツ・ページに移動したい時にページの先頭に戻らなければならないためとても不便である。そこで最近採用されているのは、ヘッダーに表示位置を固定したFixedナビゲーションが採用さている。

2015 trend desing 04

しかし、Fixedナビゲーションにすることにより問題がでてくる。常時表示しているため、必要がないときにも表示しているため、コンテンツ閲覧の邪魔になってしまうことがある。そのため、極力、ヘッダーは薄くしたい。そのため、多段式の厚みのあるヘッダーなどはスクロールするタイミングで、ヘッダーをサイズを変更したりする工夫が必要になってくる。


動画を取り入れたデザイン

静止画やテキストに比べ、動画には情報量が多くの訴求力を持っています。また近年、HTMLなどの技術向上により動画を取り入れることができるようになりました。使い方は様々ではありますが、動画を取り入れたサイトが増えてきました。その背景には、FLASH全盛期ではダイナミックの動きがあるサイトが主流でしたが、FLASHが後退している今、動きのあるサイトが少なくなってため動画を取り入れたのではないでしょうか。

2015 trend desing 05

【左】PRPL

【右】早稲田大学

上記のサイトの、PRPLのサイトではメインビジュアル、早稲田大学では背景に動画を取り入れたデザインになっています。このようにフルスクリーンで動画を使うことによって、見るものを一瞬で引きこむ訴求力があり、自分もその場にいるような擬似体験をできるようになります。

訴求力が強くなり、インパクトあるサイトになる一方で、動画データを取り扱うため、データサイズにも気をつけるようにしなければなりません。


まとめ

いくつかのトレンドをご紹介をしましたが、他にもまだまだたくさんのデザイントレンドがあります。そしてこれからもたくさん増えてくるかと思います。
しかし「ただトレンドだからやってみよう」というだけではなく、そのトレンドになっている背景やユーザの動向なども考えて、取り入れてるかどうか見極めていきたいですね。