ポータルサイト向け！webデザインのトレンドを紹介【2024年最新版】

パソコンやスマートフォンでインターネットを見ていて、「一昔前に比べるとインパクトや動きのあるサイトが増えたなぁ…」と感じることはないでしょうか？

実はwebデザインにもファッション業界と同じように、毎年流行やトレンドといったものがあります。
それらは単に見栄え的な要素だけでなく新たなデバイスへの対応など、webサイトに欠かせない進化という側面もあるのです。

したがって、サイトを運営しているにも関わらず「流行とかトレンドとか別に興味ないし…」と無関心のままでいては時代の流れに対応できていないものと見なされて、ユーザーの目に留まらない可能性も否定できません。
webデザインの流行やトレンドにはそれぞれ取り入れるべき理由があるわけですから、一般的なサイト以上に流入が重要となるポータルサイトを運営している人はもちろん、制作を検討している人もチェックしておくべきだと言えるでしょう。

この記事では近年流行ったwebデザインをおさらいするとともに、トレンドのデザインを採用しているポータルサイトを紹介します。

一昔前までは画像やテキストで構成されていたwebサイトですが、2015年頃からデザインやコンテンツの一部に動画を採用する動きが活発になってきました。
何故なら動画は画像やテキストに比べて１度にたくさんの情報を伝達できるツールであり、映像化することでユーザーは会社のイメージや扱う商品・サービスをより理解しやすくなるからです。

こうした動画による訴求が拡大した背景には、スマホユーザーの増加とデバイスの進化が関係しています。
スマホの登場により、これまではPCでしか見られなかったネットが移動中や外出先などでも気軽に楽しめるようになりました。
今や国内の約６割がスマホを所有しており、「ネットはスマホで見る」という人は年々増加しています。

スマホの急速な普及に伴い大手検索エンジンのGoogleも「モバイルファースト」を提唱するなど、サイトを制作する上でスマホ対応はもはや必須となっています。
PCよりも画面サイズの小さいスマホでいかに多くの情報を伝えるかといった際に、最も効果を発揮するのが動画だというわけです。

また、デバイスの進化によりスマホなどで簡単に高画質の動画が撮影できるようになったことも、動画の拡大を飛躍させた１つの要因だと言えます。
動画はユーザーの興味を引くだけでなく、「記憶に残りやすい」「拡散性が高い」といったメリットもあります。
今後も動画を取り入れたデザインやコンテンツの採用は動画マーケティングの一環として、企業を中心に拡大の一途をたどることは間違いないでしょう。

参考：平成28年度通信利用動向調査｜総務省（PDF）

上記の項目で動画の採用が注目を集めていることについて取り上げましたが、そのほかにも多くのサイトが取り入れているさまざまなwebデザインがあります。
この項目ではここ数年で流行したwebデザインがどういうものであるかをいくつか紹介します。

近年の急速なスマホ普及に伴い、垂直方向へのスクロールを重視したインタフェース・デザインを取り入れるサイトが増加しています。
指で操作するスマホでは画面のスクロールに抵抗やストレスを感じることは少なく、むしろ表示されたサイトは下にスクロールするのが当たり前だと考えているユーザーがほとんどです。

こうした背景からPCで見ることを前提とした「ファーストビュー（webサイトを開いたときにスクロールなしで最初に見える範囲）」よりも「スクロールビュー」を意識したデザインを重視する傾向が強まっています。

また、スクロールビューを重視したデザインと併せて人気を集めているのが「パララックスデザイン」です。
「パララックスデザイン」はスクロールの動作に応じて異なる階層にある要素を表示し、画面に奥行きを出す視覚効果を用いた手法です。
スクロールするごとに画面が変化していく「パララックスデザイン」は、垂直方向に長いサイトでもユーザーを引き付ける効果があります。

採用することでページが重くなるという意見も出ているデザイン手法ではありますが人気は高く、垂直型のインタフェース・デザインとともに今後も増加傾向にあると考えられています。

「カード型デザイン」とはその名の通り、カードのような形をしたコンテンツを並べて表示するデザイン手法です。
ECサイトやポータルサイトでよく見かけるデザインの１つで、コンテンツを整然と配置できるため一覧性が高く、ページ内にたくさん並べても分かりやすいというメリットがあります。

画面を格子状に分割し、これらを組み合わせて要素を配置する「グリッドレイアウト」とともに使用されるカード型デザインは、PCの画面では横並びに、スマホの画面では１つのカードを縦並びにというように、画面サイズに合わせたレイアウトに適しています。

また、カード型デザインの「カード」部分は画像とテキストで構成されているため、ビジュアルを前面に押し出すことでユーザーの興味を引き、別階層に誘導することも可能です。
スマホ対応が必須となるサイト制作において、「カード型デザイン」の人気はますます高まると言えるでしょう。

「ヒーローヘッダー」とはサイトのファーストビューにフルスクリーンで画像を表示し、サイトのイメージを強く印象付けるデザイン手法であり、海外では2014年頃からトレンドになっていました。
フルスクリーンの画像にごくわずかなテキストという至ってシンプルなデザインにも関わらず、サイト内への誘導効果は高く、見て欲しいコンテンツが明確である場合には極めて有効な手法です。

なお、サイトへの動画採用の動きが活発化していることを受け、「ヒーローヘッダー」の主流も静止画からより関心を集めやすい動画へとシフトチェンジしています。

サイトを訪れたユーザーにインパクトと期待感を与えられる「ヒーローヘッダー」ですが、画像や動画のクオリティによってはサイト全体のイメージを損なう場合もあるなど、シンプル故にセンスが問われます。
イメージ重視のブランディングサイトをはじめ、今後も動画利用の１つの手段として普及するだろうwebデザインです。

「人は動くものを思わず見てしまう」という習性をうまく利用したwebデザインが「シネマグラフ」です。
もとは画像の１部分だけに動きを付けるGIFアニメーションのことを指していましたが、最近では静止画と動画を組み合わせた作品も「シネマグラフ」と呼ばれています。

動画と異なる点は、静止画の注目して欲しい・強調したい部分にだけ動きのある演出を加えるところです。
サイトのコンセプトとして伝えたい対象に「シネマグラフ」を使用すれば、ユーザーの目を自然とその箇所へ向けさせることができます。

また、動画に比べてファイルサイズが抑えられるため、サイトがスムーズに閲覧できるというメリットがあります。
静止画よりもインパクトがあり、動画よりもピンポイントで注目を集められる「シネマグラフ」は、サイトに動きをもたらす新たな手法としてさらに採用が拡大するwebデザインの1つだと言えるでしょう。

ここ数年で流行したこれらのwebデザインを見ても分かるように、動画の採用はもちろんのこと、スマホで閲覧することを意識した手法が目立ちます。
その背景にあるのは、先にも述べたようにGoogleが検索エンジンに用いた「モバイル・ファースト・インデックス」というアルゴリズムで、検索上位を狙うにはスマホに対応したwebデザインが欠かせないものとなっているからです。
今後もスマホでの表示を意識したwebデザインがトレンドに上がり続けることは間違いありません。

ちなみに2017年のトレンドとしては、上部だけにこだわらない「ナビゲーション・レイアウト」、画面の左右で要素を分割する「スプリットスクリーン」、ビビッドカラーによる「グラデーション」などのwebデザインが注目されているようです。

ポータルサイトは一般的なサイトに比べて扱うコンテンツや情報量が多いという特性があります。
そのため、サイトデザインを考える上で重要になるのは「いかにユーザーが必要な情報を簡単に探せるかどうか」という点です。

どんなに流行のデザインを取り入れてユーザーの興味を引いたとしても、必要な情報がどこにあるのかが分からないようなつくりではポータルサイトとは言えません。
使い勝手が悪いとなれば当然ユーザーは離脱しますし、別のポータルサイトで情報を集めようと考えます。
ポータルサイト本来の役割を果たすためにも、次に挙げる3つのポイントには最低限気を付けてデザインすべきだと言えます。

「グローバルメニュー」はサイトの案内板であり、ユーザーを迷子にしないために設置するものです。
特に幅広い情報を扱うポータルサイトでは重要な役割を担うため、サイトを訪れたユーザーが一目で分かる位置に配置するのが鉄則です。
「1-2. 近年流行したwebデザインと今後の予想」で取り上げた「カード型デザイン」や「ナビゲーション・レイアウト」といったトレンドからも分かるように、近年では必ずしもサイト上部に配置するものではなくなりつつあります。

次に情報を整理する際の有効な手段として用いられる「囲み枠」ですが、多用し過ぎるとかえってゴチャゴチャと入り組んだ印象を与えてしまいます。
「囲み枠」は重ねるごとに余白が必要となり、結果的に内側のコンテンツの文字が小さく見えづらくなる恐れがあります。
「囲み枠」を使用する際は多用し過ぎないことはもちろん、メインとなるコンテンツを邪魔しない線の太さや色にすることを心がけましょう。

また、たくさんのコンテンツを設けるポータルサイトでは、それぞれの要素に異なる色を用いてしまうと見ているだけで目が疲れてしまいます。
画像や動画、広告だけでもそれなりの色数があるわけですから、基本的にはベースカラーとサブカラー、アクセントカラーの３色に絞って構成することをおすすめします。

次の項目ではこれらの気を付けるべきデザインのポイントを押さえた上で、トレンドを上手に取り入れているポータルサイトを紹介します。

「Rin crossing」は、地域の隠れた逸品に注目し、作り手と売り手の架け橋となってモノづくりを支援するプロジェクトとして独立行政法人中小企業基盤整備機構（中小機構）が展開しているサイトです。

このサイトでは商品紹介をはじめ、インタビューやレポート、「作り手たちのStory」といった読み物コンテンツを「カード型デザイン」によって配置しています。

また、グローバルメニューを上部ではなく左側にレイアウトすることで、縦方向のスクロールでも見やすいサイトに仕上がっています。

「allhawaii」はその名の通りハワイの情報に特化した、ハワイ州観光局公認の総合ポータルサイトです。
宿泊や買い物、交通、公共施設など幅広いカテゴリを設け、ハワイに関するさまざまな情報を提供しています。

トップページには「カード型デザイン」で配置された各カテゴリの最新記事が並ぶほか、イラストの一部に「シネマグラフ」を採用したコンテンツなどもあります。
ハワイのスポットから最新情報がチェックできるこのコンテンツはイラストの一部だけでなく、円形の小さなスポット写真にもボールのように跳ねる動きが加えられているのがポイントです。

跳ねると同時にポップアップテキストが表示され、スクロール中でもついつい手を止めてしまうような効果があると言えるでしょう。

「B.Y」はEコマース（電子商取引）のバックヤードに注目し、そこで働く人たちのストーリーを伝える珍しいポータルサイトです。
サイトを開くと同時に動画を採用した「ヒーローヘッダー」が表示され、白抜きされたサイトタイトルと短いテキストが目を引きます。
バックヤードをイメージしてか、画面下部にあるマークをクリックすることで、スクリーンカーテンのように画面が切り替わる仕組みになっているのが印象的です。

このサイトでは画面を左右に分割した「スプリットスクリーン」というデザインを採用しており、左側にはカテゴリメニューを、右側には大きな人物画像を縦に並べて表示しています。
人物画像はオンマウスによって記事タイトルと動画が流れ、各記事も「スプリットスクリーン」で構成されています。

記事内の赤い箇所にカーソルを合わせると、ポップアップで動画や注釈が出てくるなど、全体的に動きのあるサイトデザインになっているため、落ち着いたカラーリングながらインパクトがあります。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

この記事では近年流行ったwebデザインをおさらいするとともに、トレンドのデザインを採用しているポータルサイトを紹介しました。

ユーザーが初めて訪問したサイトを見るかどうかの判断は、webデザインにかかっていると言っても過言ではありません。
webデザインは「どういうサイトであるか」をユーザーに印象付けるものですから、トレンドを上手に取り入れて、訪れたユーザーの記憶に残るポータルサイトを制作することが集客にもつながります。

とは言え、一般的なサイトよりも扱うコンテンツや情報量が多いポータルサイトは、トレンドばかりを重視したデザインだとインパクトはあるものの使い勝手の悪いつくりになってしまいます。
ポータルサイトはたくさんのコンテンツ・情報のなかからいかに必要な情報を探せるかが重要になるため、あくまでもユーザビリティを第一に考えたwebデザインにしなければなりません。

「流行のwebデザインとユーザビリティの両立なんてどう考えても無理でしょう！」とさじを投げる前に、ぜひ一度日本最大級の業者比較サイト「アイミツ」までご相談ください。
「アイミツ」ではwebデザインのトレンドとユーザビリティを取り入れたポータルサイトを制作してくれる会社を、無料でご紹介させていただきます。

あなたのポータルサイト制作を手助けしてくれる心強い制作会社がきっと見付かるはずですよ！