スマホサイトだけチェックしていませんか?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. マテリアルデザインが拡大
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. 垂直方向へのスクロール操作
従来は「ファーストビュー重視」だった傾向が、「スクロールビュー重視」に変わりつつあります。
スマホからホームページを閲覧するユーザーが増えた影響もあってか、PCサイトもサクサク見やすい垂直方向へのスクロールを意識したものが増加しました。
また、以前に比べて画面スクロールをすることに抵抗がなくなっていることも普及している理由の一つといえます。
5. カードスタイル
フラットデザインの定着化からよりコンテンツは見やすくシンプルになり、結果として「カードスタイル」のデザインが増えてきました。
カードスタイルを利用していることで有名なサービスといえばPinterestです。
その名のとおりカードを並べたようなデザインで、コンテンツがわかりやすくレスポンシブデザインとの相性もいいメリットがあります。
6. フラットデザインの変化
http://www.slideshare.net/hico_horiuchi/20css
数年前に平面のフラットデザインが登場し一気に普及しましたが、今ではすっかりスタンダードになりました。
現在は、2013年以降にリニューアルしたPCサイトの多くがフラットデザインを採用している状況です。
その一方で、立体表現がなく、わかりづらいなどフラットデザインが持つ問題も浮き彫りになり、最近では再び立体感を取り入れたデザインも増え始めています。
以前のフラットデザインとは違う少しシャドウが入ったもの、奥行きがあるものは「セミ-フラットデザイン」「フラットデザイン2.0」とも呼ばれています。
7. フォントの重要視とWebフォントの普及
シンプルなデザインとの相性が良いこと、美しく使いやすいWebフォントが登場したことで、フォントを重視する傾向やタイポグラフィを活用したホームページが増えました。
Googleが日本語Webフォントの提供を開始したこともあって、さらにWebフォントを使ったホームページが増えてくることが考えられます。
8. ヒーローヘッダー+動画など動画使用の拡大
少し前に流行したFlashの人気が衰えて以降一時は動画のないデザインが主流でしたが、再びヒーローヘッダー、背景に動画を使用するケースが増えてきている傾向があります。
この流れは、近年シンプルなホームページが増えたことやスマホで動画視聴・撮影を楽しむのが一般化しているからではないかと考えられます。
PCサイトの場合、動画利用による回線速度低下をあまり考える必要はないので、積極的に活用したいところです。
9. シネマグラフの普及
シネマグラフとは写真の一部が動くgif画像のことで、最近企業のホームページでよく活用されている手法です。
SNSで動画投稿ができる環境が整ったこと、動画よりも軽いコンテンツで新たな動画マーケティングになるという期待感からか、2015年頃から段々と浸透してきました。
ある部分だけが動くことについ注目してしまうため、商品・サービスの紹介やバナーなどに効果的です。
10. 画面遷移の多様化
ユニークな動きのJQueryプラグインが登場したことで、アプリのような動きをする画面遷移がホームページでも取り入れられるようになりました。
参考事例では、奥からフェードインしたりグルっと回転したりと、ページごとに異なる個性的な画面遷移を採用しており見応えのあるデザインとなっています。
11. スクロールにあわせた視差効果
縦長のホームページが増えてきた流れで、スクロールにあわせたユニークな視差効果も増えてきました。
少し前に流行ったものよりもやや控えめでちょっとした仕掛けになっているのがここ最近のトレンドです。
参考URLの株式会社リクサスのホームページでは、ページの上から下に向かって道路が配置してあり、スクロールするとトラックが走っていきます。
12. 大胆な色づかい
フラットデザインが普及してきた流れで、相性のいい大胆な色使いのデザインもまた増えてきました。
2015年はシンプルなモノトーンカラーが主流でしたが、1980年代を感じさせるような鮮やかな配色が今のトレンドです。
13. SVGファイルの普及
従来、Webデザインに用いる画像はpng、jpeg、gifが一般的でしたが、最近SVG形式の画像を利用するケースが増えています。
スターバックスの公式ホームページでは、ブランドロゴにSVGファイルを利用しています。
SVGのメリットはベクター形式のためサイズに関わらず綺麗に表示ができることと、サイズが軽いという点です。
イラストなどの単純な描画には特に適しているため、今後イラストを使用したデザインも増えてくることが考えられます。
14. 写真スライダー
https://tympanus.net/Development/Slicebox/
大きな写真スライダーがついたホームページをよく見かけるようになりました。
写真スライダーを設置するとたくさんのコンテンツを表示できる上、前後のコンテンツに直感的に移動することができます。
15. インフォグラフィック
http://econte.co.jp/resource/item/cmig2015/
インフォグラフィックとはデータを視覚化したもので、情報をわかりやすく表現したい時に用いられる手法です。
従来、標識・報道・地図・文章と様々なシーンで活用されていましたが、ここ最近はWebデザインにおいても注目を集めています。
静止画だけではなく、アニメーションを用いたものまで多種多様なデザインが登場している状況です。
16. ストーリーテリング手法
ホームページがまるで一つのストーリーのようになっている構成をストーリーテリングといいます。
物語を読み進めるようなこの構成は、ユーザーを惹き込みながらわかりやすく情報を伝えることができるというメリットがあります。
ストーリー仕立てになっているからこそ頭に入りやすいのがポイントです。
近年流行しているシングルページデザイン、バックグラウンドムービーとも相性のいい手法です。
17. クロムなし
コンテンツ周囲のことを「クロム(Chrome)」と呼ぶことがあり、このクロムがないデザインが増えています。
クロムをなくすと見た目がシンプルかつスタイリッシュになり、余計な要素がないためコンテンツの伝えたい部分を強調することができます。
また、不要なdiv要素を省くことができることからコーディング上も楽になるメリットがあります。
まとめ
以上、最近登場しているUIデザインのトレンドをまとめてご紹介しました。
いかがでしたでしょうか。
ご覧いただければわかるとおり、あまりノウハウの変化がないイメージがあるPCサイトも実際には時代に沿ってデザインが大きく変化しています。
トレンドを採用すれば必ずしも良くなるとはいえませんが、どのような変化があるのかユーザーの動向や要因を把握しておくためにもトレンドを知ることは重要です。
進化を続けるWebデザインの動向を知り選択肢を増やすためにも、トレンドをしっかりと押さえておきましょう。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ファーストビュー
- ファーストビューとは、ユーザーがホームページを訪問した際、スクロールせずに表示される範囲のことです。ディスプレイのサイズや解像度によって、ファーストビューは異なります。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。1998年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Flash
- Flashは米アドビ社が提供するAdobe Flashという作成アプリと、その作品を再生するブラウザ追加プログラムのFlashプレイヤーで構成される技術をいいます。データサイズが小さくより高速に転送される特徴を持ち、またゲームなどの高度なプログラミングも可能なことから多くのホームページ表現で利用されています。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング