Web制作者なら知っておきたい！2015年に流行ったWebデザイン
Web制作者なら知っておきたい！2015年に流行ったWebデザイン
2015年12月25日
TEXT：編集部
TEXT：編集部
デザインには流行り廃りがある。Webデザインの世界においても同様だ。流行したデザインが必ずしも良いとは限らないが、デザインのトレンドを知っておくことで足並みをそろえることができるし、そこに新たな発見があるかもしれない。また、場合によってはWeb制作にうまく盛り込むことにより、効果的なサイトにできる可能性も高い。進化の進むWeb業界においては、トレンドを知っておくことは重要なことなのだ。今回は、2015年において多く取り入れられたWebデザインをいくつかピックアップしてみた。
■スクロールさせるデザイン
スクロール型とボタン型を取り入れたハイブリッドなサイト。会社紹介がサックと読める使用になっている。数年前から取り入れられてきた手法であるが、まだまだ縦スクロール型のWebサイトは衰えを見せない。ページの設定には、主にボタンでページを移動して閲覧させる方法と、スクロールさせて1ページにまとめる方法とに分けられる。
1ページにまとめた縦スクロールの場合、サイトの全体像をさくっと見ることができて、ページ移動によるストレス負荷は少ない。さらに、Twitterなどのソーシャルネットワークを思い浮かべていただきたい。
TwitterなどのSNSもスクロール型になっており、つい情報が気になって下へ下へと思わずスクロールしてしまう方も少なくないと思う。そういったユーザーの心理とスマホでの最適化を考えてこうしたスクロール型のサイトが取り入れられることが多い。
1ページにまとめた縦スクロールの場合、サイトの全体像をさくっと見ることができて、ページ移動によるストレス負荷は少ない。さらに、Twitterなどのソーシャルネットワークを思い浮かべていただきたい。
TwitterなどのSNSもスクロール型になっており、つい情報が気になって下へ下へと思わずスクロールしてしまう方も少なくないと思う。そういったユーザーの心理とスマホでの最適化を考えてこうしたスクロール型のサイトが取り入れられることが多い。
■洗練されたフラットデザイン
リンク部分にはよりシンプルなフォントを、画面上部にはシンプルなカラーを取り入れており、画面中央のデザインを効果的に表現している。
特に2015年、多く取り入れられるようになったデザインがフラットデザインだ。フラットデザインは、よりシンプルなデザインのこと。少し前までは、立体感やグラデーションを使ったデザインや凝ったフォントを取り入れるデザインも多かった。
しかし、装飾が多いとごちゃごちゃした印象になってしまうし、サイト自体にも負荷がかかってしまう。フラットデザインでは、より原色カラーに近いカラーを使ったり、メイリオやArialなどのユーザーになじみやすいフォントを使ったり、余白をうまく利用することによってシンプルながらもより洗練されたデザインが可能なのだ。また、無駄な動作が少ないため、サイト閲覧の動作も軽いというメリットもある。
特に2015年、多く取り入れられるようになったデザインがフラットデザインだ。フラットデザインは、よりシンプルなデザインのこと。少し前までは、立体感やグラデーションを使ったデザインや凝ったフォントを取り入れるデザインも多かった。
しかし、装飾が多いとごちゃごちゃした印象になってしまうし、サイト自体にも負荷がかかってしまう。フラットデザインでは、より原色カラーに近いカラーを使ったり、メイリオやArialなどのユーザーになじみやすいフォントを使ったり、余白をうまく利用することによってシンプルながらもより洗練されたデザインが可能なのだ。また、無駄な動作が少ないため、サイト閲覧の動作も軽いというメリットもある。
■カードのようなデザイン
某デザイン会社の作品をカード型で紹介したもの。視覚的なアプローチでどのような作品をつくってきたかが分かりやすい。
カード型デザインは、Web上にカードのようにイメージをいくつも並べたデザインである。SNSであるInstagramなどを思い浮かべると想像しやすいだろう。イメージが並べられることによって、より視覚的になりイメージがつきやすい。そのため、商品を紹介するためのECサイトだったり、記事などを掲載しているサイトだったり、長く滞在してもらいたいサイトには効果的な手法なのだ。
また、カード型に分割することによって、スマートフォンなどでも構築しやすくなった。ただし、一気に画面にカード型のイメージが表示されてしまうと、ユーザーに使いにくいというイメージを持たれてしまうことも確かだ。
大きさや組み合わせなど、サイトに合わせてうまく取り入れることが大切である。
カード型デザインは、Web上にカードのようにイメージをいくつも並べたデザインである。SNSであるInstagramなどを思い浮かべると想像しやすいだろう。イメージが並べられることによって、より視覚的になりイメージがつきやすい。そのため、商品を紹介するためのECサイトだったり、記事などを掲載しているサイトだったり、長く滞在してもらいたいサイトには効果的な手法なのだ。
また、カード型に分割することによって、スマートフォンなどでも構築しやすくなった。ただし、一気に画面にカード型のイメージが表示されてしまうと、ユーザーに使いにくいというイメージを持たれてしまうことも確かだ。
大きさや組み合わせなど、サイトに合わせてうまく取り入れることが大切である。
■背景に合ったゴーストボタン
画面中央のボタンに注目。ゴーストボタンを取り入れ、風景を活かしたデザインになっている。矢印を入れてボタンという認識もしやすい。
ゴーストボタンとは背景が透過されたボタンのこと。背景のデザインを邪魔しないフォントとシンプルなボタンで、背景を活かしたデザインができる。特に最近良く使用されるようになったフルスクリーンのデザインなどでは、背景を邪魔せずに設置できるという点がポイントだ。ただ、透過してしまうことでボタンだという認識をしにくくなってしまったのも問題。
ボタンであることを分かりやすくするために、四角で囲ったうえに、「→」などをつけて分かりやすくする工夫を行っているデザインのものもある。
ゴーストボタンとは背景が透過されたボタンのこと。背景のデザインを邪魔しないフォントとシンプルなボタンで、背景を活かしたデザインができる。特に最近良く使用されるようになったフルスクリーンのデザインなどでは、背景を邪魔せずに設置できるという点がポイントだ。ただ、透過してしまうことでボタンだという認識をしにくくなってしまったのも問題。
ボタンであることを分かりやすくするために、四角で囲ったうえに、「→」などをつけて分かりやすくする工夫を行っているデザインのものもある。
■より視覚的なパララックスエフェクト
画面をスクロースしていくと、スクロールなどのアニメーション効果で視覚的に楽しめる仕様になっている。2015年のトレンドと言えば、パララックスデザインも見逃せない。
パララックスデザインとは、よく使用されるようになったスクロール型のデザインとアニメーションのような動きのあるデザインを組み合わせたもの。画面をスクロールすることで、アニメーションが効果的に動き、ひとつのストーリーを生み出す。
動画を用いたアプローチも実際にはあるが、動画とは違うのが、ユーザーの動きに合わせて物語が進んでいくということだ。まるで自分が実際に体験したかのような効果は、ユーザーに大きなインパクトを残す。ただ、モーションが多くサイトが重くなってしまうため、長いスクロールよりも短めで簡潔に紹介できるデザイン向けだ。
パララックスデザインとは、よく使用されるようになったスクロール型のデザインとアニメーションのような動きのあるデザインを組み合わせたもの。画面をスクロールすることで、アニメーションが効果的に動き、ひとつのストーリーを生み出す。
動画を用いたアプローチも実際にはあるが、動画とは違うのが、ユーザーの動きに合わせて物語が進んでいくということだ。まるで自分が実際に体験したかのような効果は、ユーザーに大きなインパクトを残す。ただ、モーションが多くサイトが重くなってしまうため、長いスクロールよりも短めで簡潔に紹介できるデザイン向けだ。
■まとめ2015年のWebデザインのトレンドを紹介した。紹介したものの中には、これからも長期的に使用が考えられるものもある。単なるトレンドと考えずに、中長期的な利用を考えた時、どのような効果があればより魅力的なデザインになるか、サイト作成の際にどのような効果を取り入れたら魅力的か、ぜひ参考にしていただきたい。