ユーザービリティが良くなる!これからの時代ユーザーに喜ばれると思うウェブデザイン5つ

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

前回の記事では、ユーザービリティを悪くすると思うウェブデザインについてご紹介しました。今回はその逆で、今まさに人気上昇中の流行りのウェブデザインをご紹介します!

1. シングルページ

singleCORE 8 FITNESS

以下の記事によると、ユーザーはクリックよりもスクロールを好む傾向にあるそうです。

Scrolling is better than clicking: Olivian Breda

そのため縦に長い完結型シングルページが最近は人気です。クリックすればページ遷移が起こり、待つ時間が生じてしまいます。これまで個別ページで分けていたものをひとつのページにまとめてしまうほうが良い場合もあるでしょう。

2. 全面写真

fulimg太秦江戸酒場

背景に魅力的な全面写真を載せているウェブサイトは、最近人気のあるテクニックのひとつです。一度見ると忘れることのできない、インパクトが魅力です。

特に、背景写真に「ぼかし効果(ブラーエフェクト)」を取り入れているサイトが海外では増えてきました。

bokashiA day in Big Data

写真そのものの美しさよりも、ぼかすことで新たな美しさを表現したり、奥行き感や文字(タイポグラフィ)に読みやすさを与えることができます。などの効果を出しています。

3. 動画コンテンツ

videoシャルキュトリー

動画を使っているサイトもよく見るようになりました。特に、ウィンドウいっぱいの背景動画を活用したデザインが増えてきましたね。インパクトはかなり大きいです。

いまのトレンド!印象に残る背景動画を使ったサイト14選

サーバに直接動画を置くだけではなく、YouTubeやVimeo等の動画共有サービスを使っているケースも多いようです。

PCからサイトにアクセスする場合には、ある程度速い回線を確保できていることを前提に、背景動画を利用しているものと考えられます。モバイル端末から閲覧した場合には代替の静止画像が表示されるケースが多いです。多くのサイトではスマホ回線を無駄に利用しないよう配慮されていますね。

4. Webアイコンフォント、SVG

iconFont Awesome

スマホ、タブレットなどが登場したことで、どんなデバイスで見てもボケることがないWebアイコンフォントやSVG画像が使われることが多くなりました。

フォントベースのアイコンは、Bootstrapフレームワークなどでも採用されていますし、どんなフォントも自由にカスタマイズできるという点が人気を集めている理由でしょう。

最近は主要モダンブラウザがSVGファイルに対応したので、SVG画像も一気に広まりそうなトレンドのひとつ。どんなサイズでも、くっきりと表示するベクター形式のグラフィックは、CSS3アニメーションを使い、より効果的にスタイリングできるので非常に便利です。

5. ページ遷移なしの2ページ目以降表示

twTwitterより

AJAX機能を利用することで、ページ遷移なしで追加コンテンツを表示させる手法です。ツイッターなどで導入されており、最近どんどん増えています。

本来のページャー機能は、スマホのタッチパネルで操作する際には非常に不便です。画面上の小さな1点をクリックするのは煩わしいと感じます。また、ページ遷移の待ち時間を減らすという意味でも効果的な手法です。


流行っているウェブデザインには理由があります。閲覧デバイスの多様化、フラットデザインの登場など、様々なことが影響しているでしょう。時代の流れに合わせて最適なユーザービリティを提供していきたいですね!