menu

Web担当者なら知っておきたい、今注目の3つのWebデザイントレンド

リニューアル

Webデザインのトレンドは目まぐるしく移り変わるものですが、オウンドメディアなどの運営に携わるなら、やはり最低限の知識は持っておきたいもの。デザインの特徴・効果を知って入れば、リニューアルの際の打ち合わせもより本質的なディスカッションになりますし、コンテンツ作成のヒントを得ることもできるはずです。今注目を集めている3つのWebデザインをご紹介します。

・背景への動画埋め込み
ページを開くと自動的に動画が再生されるWebサイトはこれまでもありましたが、動画を使うと表示速度が遅くなりがちで、ユーザーのストレスにつながりやすいのが課題でした。それに対してHTML5のvideoタグやJQueryを使うことによって、表示速度を保ったままブラウザのバックグラウンドに動画を取り入れるWebサイトが増えてきています。

福岡県内をはじめとした九州・沖縄エリアのブライダル会場を紹介する「ブラなびプラス」では、トップページの背景としてテレビCMのような動画が使われており、ユーザーの目を惹きつける大きな効果を生んでいます。

参考:ブラなびプラス

・パララックスデザイン
「パララックス」とは、日本語に訳すと「視差効果」といった意味です。ページをスクロールすると、複数の画像のレイヤーがそれぞれ異なるスピードで表示され、奥行きのある視覚効果を与えるのがパララックスデザインです。下のWebサイトでは画像だけでなくキャッチコピーや数字といった複数の要素が時間差で表示され、雑誌のページをめくっているような感覚でコンテンツを楽しめます。

参考:enod Resto & Din Ap’

こうしたパララックスデザインは2013年頃からあったものの、当時はただやみくもにパララックスを取り入れただけのWebサイトも多く、ユーザーがページのどこにいるのか分からなくなったり、スクロールが遅くなったりするケースもありました。現在ではそうした課題も解消され、目的に沿った手法の1つとしてコーポレートサイトや採用サイトなどでも取り入れる企業が増えてきています。

・インタラクティブな表現
HTML5やJQueryの登場によって、マウスの動きやスクロールにあわせてさまざまな要素が表示されるインタラクティブな表現も一般的になりました。下のサイトでは、マウスポインタに連動して画像の色彩がアーティスティックに変化します。

参考:KAZ ARAHAMA FHOTOGRAPHER

リニューアルに関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクションサイト3選

カゴ落ちの理由の第1位は?WorldPay社のリサーチに見る原因と対策

関連記事

  1. KGIを因数分解することによって明確になるKPI設定

    Webサイトのリニューアルの目標(KGI)を達成するために欠かせないCSF(Critical Suc…

  2. ユーザー行動に隠されたストーリーを顕在化させるユーザビリティテス…

    「Google アナリティクス」やユーザーの行動を可視化するヒートマップなどを用いた分析はWebサイ…

  3. Webサイトにおけるエモーショナル・ブランディング。ユーザーの感…

    Webサイトの完成度を高めるうえでは機能や利便性も大切ですが、その一方でユーザーに与える感情や印象・…

  4. ペルソナ作成してますか?Webサイトリニューアル前の必須知識

    これからWebサイトリニューアルを控えている企画担当者の皆さん、「Webサイトのペルソナ作成していま…

  5. リニューアルをスムーズに進め、運用にもメリットをもたらすデッドラ…

    Webサイトのリニューアルは社内外問わず多くの人が携わるプロジェクトです。リニューアルの要件を制作会…

  6. LPやデバイスシェアからリニューアル要件を検討。「Google …

    KGIやKPIの設定とあわせて、リニューアルの事前準備として欠かせないのがWebサイトの現状把握&分…

  7. Webサイトの運用で起こりがちな3つのトラブル&対応方法について…

    Webサイトのデザインや機能はもちろん大切ですが、それ以上に大切なのが運用保守です。高い予算をかけて…

  8. リニューアルの意味・目的を数字に落とし込む「KGI設定」

    Webサイトをリニューアルするにあたってデッドラインの設定とあわせて必須となるのが、KGI(Key …

PICKUP

PAGE TOP