スマホサイトだけチェックしていませんか？BtoB領域なら無視できないPCサイトのデザイントレンド17選

最近はスマートフォン（以下、スマホ）が一気に普及したことで、スマホ向けサイトばかりが注目を集めている印象があります。
しかし、まだまだビジネスにおいてはPCサイトが重要な領域もあり、注力したいところです。

そんなPCサイトもスマホサイトの一般化やデバイスが多様化したことなど、時代の変化を受けて以前と比べるとUIデザインも変わってきています。
スマホ対応に追われている企業も多く、PCサイトはおざなりになりがちですが、環境変化やトレンドに合わせてデザインも変化させていきたいものです。

そこで今回は、PCサイトのデザインで知っておくべき注目のUIデザイントレンドをご紹介します。
PCサイトを現在運営している方はもちろん、これからPCサイトを作ろうと考えている方も参考にしてみてください。
　　

PCサイトに活用したい注目のUIデザイントレンドまとめ

1. レスポンシブデザインがスタンダードに

http://www.domore.co.jp/mobilelab/responsive/what_is_responsive_web_design

スマホの普及をきっかけに一気に関心が高まったレスポンシブデザインは、今ではスタンダードなWebデザインの形として認識されはじめています。
そもそもレスポンシブデザインとは何なのかというと、スマホやタブレットといったPC以外のデバイスの表示サイズを考慮してレイアウトデザインを調整することです。
主なメリットは1つのHTMLファイルだけで管理できるためメンテナンスが容易になるという点です。
PCサイトはまだまだ重要なものの、やはりスマホ対応は欠かせないという流れになりつつあります。

参考：
レスポンシブデザインとは｜今更きけない基礎知識とメリット・デメリット｜ferret
　　

2. マテリアルデザインが拡大

https://material.io/

2014年にGoogleが発表したマテリアルデザインの利用も拡大しており、新たなトレンドになりつつあります。
マテリアルデザインは2次元をマテリアルとして3次元で捉えたデザインのことで、ユーザーにとってわかりやすいことを基本としています。
ホームページはただ閲覧するだけのものではなくなってきている状況ですので、今後ますますマテリアルデザインが拡大していくに違いありません。

参考：
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選｜ferret
　　

3. Big UI / Low Density / Long Pageがスタンダードに

https://baigie.me/sogitani/2015/02/pc-site-trend-2015/

従来のホームページはたくさんの要素をページに盛り込んだ設計が定番でしたが、最近ではUIパーツが大きく、密度が低く、ページが長くなるデザインが定番化してきました。
元々は海外のホームページデザインでよく見る設計でしたが、近年日本にも浸透し、ここ数年でリニューアルしたホームページの多くがBig UI / Low Density / Long Pageを意識したつくりになっています。

見た目が新しい印象があるだけではなく、わかりやすくスマホでも閲覧しやすい、レスポンシブ対応がしやすい設計です。
　　

4. 垂直方向へのスクロール操作

http://www.mita-is.ed.jp/

従来は「ファーストビュー重視」だった傾向が、「スクロールビュー重視」に変わりつつあります。
スマホからホームページを閲覧するユーザーが増えた影響もあってか、PCサイトもサクサク見やすい垂直方向へのスクロールを意識したものが増加しました。
また、以前に比べて画面スクロールをすることに抵抗がなくなっていることも普及している理由の一つといえます。
　　

5. カードスタイル

https://jp.pinterest.com/

フラットデザインの定着化からよりコンテンツは見やすくシンプルになり、結果として「カードスタイル」のデザインが増えてきました。

カードスタイルを利用していることで有名なサービスといえばPinterestです。
その名のとおりカードを並べたようなデザインで、コンテンツがわかりやすくレスポンシブデザインとの相性もいいメリットがあります。
　　

6. フラットデザインの変化

http://www.slideshare.net/hico_horiuchi/20css

数年前に平面のフラットデザインが登場し一気に普及しましたが、今ではすっかりスタンダードになりました。

現在は、2013年以降にリニューアルしたPCサイトの多くがフラットデザインを採用している状況です。
その一方で、立体表現がなく、わかりづらいなどフラットデザインが持つ問題も浮き彫りになり、最近では再び立体感を取り入れたデザインも増え始めています。

以前のフラットデザインとは違う少しシャドウが入ったもの、奥行きがあるものは「セミ-フラットデザイン」「フラットデザイン2.0」とも呼ばれています。
　　

7. フォントの重要視とWebフォントの普及

http://hawkandhen.com/

シンプルなデザインとの相性が良いこと、美しく使いやすいWebフォントが登場したことで、フォントを重視する傾向やタイポグラフィを活用したホームページが増えました。
Googleが日本語Webフォントの提供を開始したこともあって、さらにWebフォントを使ったホームページが増えてくることが考えられます。

8. ヒーローヘッダー＋動画など動画使用の拡大

https://prottapp.com/ja/

少し前に流行したFlashの人気が衰えて以降一時は動画のないデザインが主流でしたが、再びヒーローヘッダー、背景に動画を使用するケースが増えてきている傾向があります。
この流れは、近年シンプルなホームページが増えたことやスマホで動画視聴・撮影を楽しむのが一般化しているからではないかと考えられます。
PCサイトの場合、動画利用による回線速度低下をあまり考える必要はないので、積極的に活用したいところです。
　　

9. シネマグラフの普及

http://www.dentsu-crx.co.jp/

シネマグラフとは写真の一部が動くgif画像のことで、最近企業のホームページでよく活用されている手法です。
SNSで動画投稿ができる環境が整ったこと、動画よりも軽いコンテンツで新たな動画マーケティングになるという期待感からか、2015年頃から段々と浸透してきました。
ある部分だけが動くことについ注目してしまうため、商品・サービスの紹介やバナーなどに効果的です。

10. 画面遷移の多様化

http://www.archetyp.jp/

ユニークな動きのJQueryプラグインが登場したことで、アプリのような動きをする画面遷移がホームページでも取り入れられるようになりました。
参考事例では、奥からフェードインしたりグルっと回転したりと、ページごとに異なる個性的な画面遷移を採用しており見応えのあるデザインとなっています。
　　

11. スクロールにあわせた視差効果

http://www.lixus.co.jp/#!/

縦長のホームページが増えてきた流れで、スクロールにあわせたユニークな視差効果も増えてきました。
少し前に流行ったものよりもやや控えめでちょっとした仕掛けになっているのがここ最近のトレンドです。

参考URLの株式会社リクサスのホームページでは、ページの上から下に向かって道路が配置してあり、スクロールするとトラックが走っていきます。
　　

12. 大胆な色づかい

http://materialuicolors.co/

フラットデザインが普及してきた流れで、相性のいい大胆な色使いのデザインもまた増えてきました。

2015年はシンプルなモノトーンカラーが主流でしたが、1980年代を感じさせるような鮮やかな配色が今のトレンドです。
　　

13. SVGファイルの普及

https://www.starbucks.com/

従来、Webデザインに用いる画像はpng、jpeg、gifが一般的でしたが、最近SVG形式の画像を利用するケースが増えています。
スターバックスの公式ホームページでは、ブランドロゴにSVGファイルを利用しています。

SVGのメリットはベクター形式のためサイズに関わらず綺麗に表示ができることと、サイズが軽いという点です。
イラストなどの単純な描画には特に適しているため、今後イラストを使用したデザインも増えてくることが考えられます。
　　

14. 写真スライダー

https://tympanus.net/Development/Slicebox/

大きな写真スライダーがついたホームページをよく見かけるようになりました。
写真スライダーを設置するとたくさんのコンテンツを表示できる上、前後のコンテンツに直感的に移動することができます。
　　

15. インフォグラフィック

http://econte.co.jp/resource/item/cmig2015/

インフォグラフィックとはデータを視覚化したもので、情報をわかりやすく表現したい時に用いられる手法です。
従来、標識・報道・地図・文章と様々なシーンで活用されていましたが、ここ最近はWebデザインにおいても注目を集めています。

静止画だけではなく、アニメーションを用いたものまで多種多様なデザインが登場している状況です。
　　

16. ストーリーテリング手法

http://everylastdrop.co.uk/

ホームページがまるで一つのストーリーのようになっている構成をストーリーテリングといいます。
物語を読み進めるようなこの構成は、ユーザーを惹き込みながらわかりやすく情報を伝えることができるというメリットがあります。
ストーリー仕立てになっているからこそ頭に入りやすいのがポイントです。

近年流行しているシングルページデザイン、バックグラウンドムービーとも相性のいい手法です。
　　

17. クロムなし

http://www.br-time.jp/

コンテンツ周囲のことを「クロム(Chrome)」と呼ぶことがあり、このクロムがないデザインが増えています。
クロムをなくすと見た目がシンプルかつスタイリッシュになり、余計な要素がないためコンテンツの伝えたい部分を強調することができます。

また、不要なdiv要素を省くことができることからコーディング上も楽になるメリットがあります。