2019年 ウェブデザインのトレンドはどうなる？

　2010年代の最後の年、2019年がいよいよ始まりました。大きな節目にあたる本年最初の「WiLL Cloudマーケティングブログ」は、2019年に押さえておきたいWebデザインのトレンドのまとめです。本記事が皆さまの販促活動やCRM活動にお役立ていただければ幸いです。

ミニマリズム

引用元：Tinker Watches

　情報が大量に溢れるインターネットでは、クリアでピンポイントな情報が求められます。多くの要素が積み重なったウェブサイトは、ユーザーが希望する情報に到達するのを妨げるだけでなく、彼らをサイトから離脱させることにも繋がりかねません。逆にウェブサイト上の要素やコンテンツが少なければ少ないほど、ユーザーは考える必要がなくなります。ウェブサイトがこのように正しく設計されている場合、ユーザーは自分が探しているものを正確に表示します。こうした背景からミニマリズムは2019年もウェブデザインを引き続き支配するでしょう。

シングルページデザイン

引用元：The Art Of Texture

　上述のミニマリズムを最も反映したのがシングルページデザインです。シングルページデザインとは、複数のサービスページや投稿ページを持たず単一ページのみで構成されたウェブサイトです。シングルページデザイン最大の利点は、読み込み速度が早くブラウジングしやすいため、ユーザーエクスペリエンスが向上することです。ミニマリズムを究極的に追求したシングルページデザインはユーザーの注意も惹きやすく、効果的でインパクトのあるWebデザインとして2019年にもトップトレンドとなるでしょう。

　ただし、SEOの視点で捉えるとシングルページデザインには欠点が存在します。一般的なウェブサイト（マルチページデザインのサイト）は、ページごとに流入キーワードとターゲットを想定できますが、シングルページデザインは単一のページをひとつのコンセプトによって設計しているため、複数のキーワードを考慮したページ設計が行えません。

　よって、もし新規ユーザーの流入をGoogleのオーガニック検索に依存している場合は、シングルページデザインの採用は控えた方が良いかもしれません。それ以外の別の流入口や新規獲得方法がある場合、シングルページデザインはビジネスに貢献するでしょう。

CSS3アニメーション

引用元：Access-IS

　ウェブの表現にスタイル（フォント、色、間隔など）を簡単に追加できるCSSの最新版CSS3では、アニメーションも簡単に実装できるようになりました。CSSアニメーションを使用することで、サイトにクリエイティビティと個性をもたらし、複雑な情報を迅速かつシンプルに説明し、ユーザーの行動を促すことができます。

　CSSアニメーションは、多くのプロセッサやメモリを必要とするJavaScriptやFlashを使わずに特定のHTML要素のアニメーション化を実現できます。変更可能なCSSプロパティの数や頻度に制限はありません。

　そしてアニメーションを用いた表現はユーザーを魅了するだけでなく、ウェブサイトにエッジィでモダンな外観を与えてくれます。消費者が利用するウェブのプラットフォームやデバイスがほぼ海外製となりつつある昨今、一般消費者が受け取る情報や表現の質は海外の最新のものと等しくなりつつあります。技術や最新の表現に精通しつつあるユーザーを、視覚的に魅力的なウェブサイトで迎えてあげましょう。

　アムステルダムに拠点を置くUXスタジオWonderland.が手がけたFournierのサイトでは、鳥がバナー内を横切るアニメーションが採用されています。

　このように、アニメーションといっても派手な商業アニメのような大げさな動きが要求されるわけではありません。米国のモーション・アーティストVincenzo Lodigianiは、現代のウェブアニメーションの指標としてウォルト・ディズニー・スタジオが1930年代に制定した『アニメーションの12の基本原則』を要約した動画を作成しており、多くのデザイナーが参考しています。

動画コンテンツ

引用元：A Mesmerizing Look at Hummingbirds in Flight – National Geographic

　動画コンテンツの消費量は今年も増えるでしょう。その消費量や消費形態はGoogle、YouTubeそしてInstagramそれぞれの仕様によって左右されていくことが予想されます。

検索結果と動画

　Googleは、動画をますます好む傾向になりつつあります。近年、Googleは検索結果ページに動画コンテンツも表示し始めました。SEOに最適化された動画コンテンツは、テキスト記事よりも検索結果1ページ目に表示される可能性が50 倍も高くなったという調査結果があります。1ページ目に表示されるそれらの動画の8割以上はYouTubeに投稿されたものです。また動画を含むランディングページは、そうでないページよりも2.6倍もユーザーの滞在時間が高いという報告もあります。

背景動画

　動画コンテンツの使い方として、ただ埋め込むだけではなくヘッダーや背景として用いるケースも引き続きトレンドとして生き残るでしょう。先に述べた通り、全体としてはシンプルなデザインの傾向になっているにもかかわらず、背景動画は根強い人気があります。SEO的視点では、動画による表示速度の悪化は考慮すべき重要な事項ですが、背景動画を用いたランディングページが、そうでないものよりもコンバージョンを69%改善させたことも示されています。

縦型動画

　スマートフォンが普及し始めた2010年代の前半、縦に動画を撮影する人が現れました。当時彼らは侮蔑の意味を込めて「Vertical Video Syndrome（VVS）（縦型動画症候群）」と呼ばれ、皮肉の対象となっていました。しかし2010年代後半にさしかかった現在では、世界全体がVVSに感染しているともいえる程に縦型動画が消費される自体となりました。

　このトレンドをより確固たるものにするのが2018年6月にInstagramがローンチした『IGTV』でしょう。

IGTV

引用元：Welcome to IGTV

　IGTVは、スマートフォン閲覧用に作られた縦型動画向けのアプリケーションです。Instagramと大きく異なる点はユーザーが投稿できる動画の尺です。一般ユーザーは最大10分間、最大650MB、認証アカウントもしくは有名アカウントの場合は最大60分間、最大3.6GBの縦型動画をアップロードできます。

　ソーシャルメディアのキャンペーンツールを提供するPlanable社の創設者Vlad Callusは「この3〜5年以内でIGTVは新たなYouTubeになるだろう」と語っています。モバイル端末でのYouTube閲覧時間は年々増えており、2017年時点で1セッションあたりの閲覧時間は40分にも及ぶと言われています。Instagram、FacebookのIGTVローンチの狙いは、Youtubeクリエイターに縦型動画を作成しやすい環境を与え、Youtube視聴者の接触時間を奪うことでしょう。

　既にIGTVは広告媒体として活用されており、ウェブデザインの領域にも影響を与える可能性は高いといえます。

レスポンシブ・デザイン

　モバイル版のウェブサイトを別に設置する時代はとっくに終わりました。あらゆる画面解像度、デバイスで柔軟性に表示方法を最適化できるレスポンシブ・デザインは、すべてのウェブサイトのトレンドの中で最も重要なアプローチであり続けるでしょう。レスポンシブ・デザインを採用することで、訪問したユーザーはどんなデバイス上でもウェブサイトをシームレスに操作・閲覧できます。

　レスポンシブ・デザインは優れたユーザーエクスペリエンスを生み出し、費用対効果も高いだけでなく、Googleからも推奨されています。 またWebサイトにはデバイスに関係なく、URLとHTMLが1つあるため、管理が非常に簡単です。これにより、ユーザーは提供されたリンクを簡単に共有したり操作したりすることができます。

アシンメトリー・レイアウト

引用元：IKB Ike Kligerman Barkley New York San Francisco

　ミニマリズムを考慮したデザインを採用すると、どうしても既視感のあるウェブサイトになりがちです。そこで近年シンプルでもユーザーを惹きつける手法として、アシンメトリー（非対称）・レイアウト、ブロークン・グリッド・レイアウトが用いられています。

　一見整っていないように見えるレイアウトは、ユーザーの気を散らせゴールまで辿り着かせることができないと考えられてきましたが、シンプルなページが溢れる今日においては、その制約の中でアシンメトリーやブロークン・グリッドが、他のウェブサイトのデザインと異なる要素を作り出す役割を担い、ますます人気が高まっています。

　目立つことでユーザーとのエンゲージメントが高めることができるこれらのレイアウトは、2019年もウェブデザインのトレンドとして残り続けるでしょう。

　ただしレイアウトを構成するグリッドパターンをやみくもにではなく慎重に計算して壊していかなければなりません。色の配置やテクスチャの重ね合わせ、不規則なパターンの繰り返し、空白の使用、タイポグラフィを創造的に用いれば、グリッドベースのレイアウトでは通常見られない奥行き感を作り出すことができます。こうしたレイアウトによって、サイトを印象付けるだけでなく見てほしいコンテンツやCTAにユーザーの関心を引き付けることができます。

カードレイアウト

　モバイル端末でのウェブ閲覧の割合が増えるとともに、小さい画面上に溢れる情報をユーザーにわかりやすく提示する手段として、カード型のレイアウトが定着しつつあります。カード型のレイアウトを用いると、関連性の高い情報ごとに整理して簡潔に提示できるため、大量の文字よりも情報をスキャンしやすくなります。

　また、カードレイアウトを採用するとカードごとにコンテンツの拡大・縮小が容易に行えるため、レスポンシブ・デザインに非常に適しています。デザインの一貫性を複数のデバイスを跨いで保つことが可能になり、ユーザーにもサイトに対して一貫した印象を持たせることができます。

　Facebookは以前からカードレイアウトを活用しています。ユーザーごとにパーソナライズされた情報を提示しなければならないソーシャルメディアは、以前からカードレイアウトを採用していました。

引用元：The Clymb

　Eコマースの領域でもカードレイアウトは採用され始めています。Eコマースでは、顧客にクリックをさせることに注力するのが最も重要です。The Clymb.comはカードレイアウトを用いることでシンプルでわかりやすく、クリックさせやすいデザインを実現しています。

マイクロアニメーション

引用元：dribbble

　マイクロアニメーション（マイクロインタラクションとも言います）も、2019年において引き続きトレンドとなるでしょう。マイクロアニメーションとは、ウェブやアプリ上でユーザーが行なったアクションをアニメーションで視覚化させるものです。自分のアクション結果がうまく視覚化されれば、日々大量に消費する情報の中から、自社のウェブサイトのブランドイメージを強く長期間記憶させることにも役立ちます。

　どんなに小さなアニメーションであっても、ユーザーの注意を向けさせてサイトをナビゲーションさせる役目を期待できます。たとえばフォームの入力進捗状況を表すプログレス・バーは、きちんと進んでいることをユーザーに知らせることに役立ちます。また、フォーム入力が完了し送信ボタンを押した後に、完了をわかりやすく表現するのも、ユーザーに対して自身のアクションが正しく動作したことを伝えられます。

　調査によると、ユーザーの40％以上が2秒以内にウェブページやアプリを読み込むことを期待しており、4秒以上かかると不満を募らせ、8秒かかると離脱することがわかっています。サイトのスピードを1秒遅らせることで、顧客のコンバージョンを7％削減するとも言われています。読み込み時間中に優れたアニメーションを用いることで、数秒/ミリ秒単位でユーザーを維持させる可能性があります。

カスタムイラスト

引用元：slack

　上述したアシンメトリー・レイアウト同様、全体のトレンドがシンプルでミニマルなデザインに向かう中、ユーザーにブランドを識別させて、エンゲージメントを高める役割を担うのはイメージ・画像であることは言うまでもありません。近年はイラスト（カスタムイラストとも呼ばれます）を効果的に用いる企業も登場しています。

クラウド・ストレージ・サービスの最大手drop boxはイラストを自社ブランドにおける重要な要素に位置付け、他のストレージサービスとは一線を画しています。またUberもブランドを構成する9つの要素のひとつとしてイラストレーションを挙げています。

　このように、自社のウェブサイトにカスタムイラストを採用することで、ユーザーに対して好意的な印象を与え、独自のブランドアイデンティティで市場の他の競合他社との差別化を図ることができます。

　「情報化社会の究極の起業家」とも称される米国のマーケター、セス・ゴーディンは以下のように語っています。

　イラストは、企業が伝えたい複雑なメッセージを簡素化し、消費者とのコミュニケーションをより深く、より個人的に感じさせることができます。イラストを用いることは、物語や魔法をより具現化できる可能性を秘めているのです。

まとめ

　2019年もシンプル・ミニマルといったトレンドが続くと言われています。そしてGoogleが、検索順位の優先度としての観点で推奨するモバイル・フレンドリーやモバイル・ファーストといった概念は、デザイン面、ユーザーエクスペリエンスの面においてもますます欠かせないポイントになりつつあります。

　そしてモバイルユーザーへの配慮の背景にはモバイル利用率の上昇があり、それを促進させている要因のひとつは間違いなく動画視聴で、その消費形態は2019年において縦型の割合が強くなっていき、それらがウェブキャンペーン、ウェブデザインに大きな影響を与える可能性があるといえるでしょう。

　私たちも自身のマーケティングや自社サービスにおいてもこれらのトレンドを意識していきたいと考えています。最後までお読みいただきありがとうございました。