Webデザインは1年単位で流行が変わるため、常に最新のトレンドにキャッチアップし続けなければなりません。デザインに流行があるのは、技術やデバイスの進化や環境の変化が影響することも多く、ユーザビリティやUI/UXの観点からも最新のデザインを取り入れることはとても大切なことです。

今回は、2018年に流行するであろうWebデザインについて参考になるサイトと合わせてご紹介していきたいと思います。

スポンサーリンク

1. 鮮やかなグラデーション

Instagramのアイコンのように、鮮やかな配色で作られたグラデーションを用いるデザインが増えてきています。グラデーションを前面に押し出すデザインは一昔前に流行し、一度は廃れたデザイン手法ではあるのですが、デザインのトレンドが一周し、最近では改めてグラデーションを取り入れたデザインのWebサイトが増えてきています。

グラデーションはWebサイト全体の印象を大きく変える影響力を持っているため、使い所には気をつけないといけませんが、上手く取り入れることで魅力的なWebサイトを作ることができます。

成安造形大学

パララックスのアニメーションとともに表示されるコンテンツは、全体を通してグラデーションを取り入れたデザインとなっています。グラデーションを取り入れることによってサイトが魅力的な雰囲気に包まれています。ファーストビューのコンテンツにグラデーションを用いたデザインは多く見かけられますが、コンテンツ部分にグラデーションを取り入れている点が特徴的です。

Spotify

音楽ストリーミングサービスのSpotifyの公式サイトにも鮮やかな配色のグラデーションが使われています。新しい音楽を聴く時のワクワクする気持ちが表現されたようなデザインで、SpotifyのサービスイメージとぴったりのWebサイトとなっています。

Globekit

データを可視化するGlobekitというツールのウェブサイトです。固定された背景部分には紫色が印象的なグラデーションの上に地球をモチーフにしたアニメーションが表示されています。グラデーションを取り入れることによって、高級感や特別感が際立ったWebサイトになっていますね。

2. ミニマルデザイン

ミニマルデザインは、「less is more」という言葉に象徴されるように、余計なデザインを加えないことによって洗練されたデザインに仕上げるデザイン手法です。ここ数年ミニマルデザインが流行していますが、2018年もその流れはむしろ強くなるでしょう。

引続き多く取り入れられているフラットデザインと相性がいいという点もミニマルデザインが人気の理由の1つでしょう。

Makr

商品の画像と説明文が並べるだけというとてもシンプルなデザインですが、上品さや高級感が上手く演出されており、洗練されたデザインのWebサイトです。ミニマルデザインのWebサイトを作る場合、画像選びも重要な要素となります。落ち着いた雰囲気に合わせて背景画像を白くしたり、できるだけ余分な要素が写り込まないようにすると、全体のデザインに合った写真を撮ることができます。

KIDORI

こちらはECサイトにミニマルデザインが使われている例です。ECサイトというとたくさん情報を表示する必要があるため、ミニマルデザインが合わないと思う方もいるかもしれませんが、商品の高級感や贅沢感を演出するのにミニマルデザインはとても役立ちます。

Webサイトのファーストビュー部分では、あえて中央からずらして画像を表示し、空いている余白にテキストを表示することで、全体的なバランスが取られています。コンテンツ部分も余白が大きく取られており、全体的に優雅なデザインのページに仕上げられていますね。

関連記事

3. 余白を活かしたデザイン

ミニマルデザインのようなシンプルなWebサイトを中心に、余白を効果的に取り入れることによってデザインの一部とするようなWebサイトが増えてきています。

余白を大きく取ることで全体のデザインに余裕が生まれ、Webサイトに優雅で高級な雰囲気が生まれます。Webサイトのブランディングを効果的に行いたい場合は、余白を意識してデザインを行うと優れたデザインを作ることができるかもしれません。

CANLIS

画像やテキストなどの要素の区切りを、見出しや線、色などを用いて表現するのではなく、適切な空白を設けることによって表しています。余白を大きく取ったデザインは優雅さや上品さのあるWebデザインとすることができ、ブランディングに効果的です。

BAMBOO SHOOTS

BAMBOO SHOOTSというブランドのWebサイトです。全体的にページに対して余白が占める割合が大きく取られており、それぞれのアイテムの画像が引き立つようなデザインになっています。余白を大きく取る場合は、テキストサイズを小さめに設定することでバランスが取れたデザインになりますね。

スポンサーリンク

4. 非同期遷移

非同期遷移は、ページ移動時に新しいページに飛ぶのではなく、今表示されているページを変化させて次のページを表示するようなテクニックのことです。主にアニメーションとともに画面遷移が作られています。

ページ間の移動にアニメーションを用いることで、ページ同士の繋がりがより強く感じられるため、ユーザーエクスペリエンスの向上が期待できます。

Plus D

Plus Dという企業のコーポレートサイトです。ページの切り替えが非同期遷移で行われるため、ページとページの繋がりが切れず、ユーザー体験を遮ること無くWebサイト全体を表示することを実現しています。

ISC

こちらは海外のクラブハウスのWebサイトです。全体のデザインもとてもよくできているサイトですが、こちらもページの読み込みに非同期遷移が使われています。ページの表示時に読み込むファイルを減らすことができるので、読み込み速度を短くすることができるというメリットもありますね。

5. スプリットスクリーンレイアウト

スプリットスクリーンレイアウトは、画面を複数に分割してレイアウトを作成するデザイン手法です。画面を分割することによってコンテンツの区切りを明確にしたり、アイデア次第で様々な使い方ができます。

また、スプリットスクリーンはPC用ページでは横に並べている要素を、画面幅が狭いスマホ用ページでは縦に並べることができるなど、レスポンシブデザインとの相性も優れています。

The Feebles

画面を大きく2つに分け、左側にメニューを表示し、右側に画像を表示するようなデザインとなっています。スプリットスクリーンを使う場合は、どちらか片方にメニューを固定表示しておき、もう片方にコンテンツを表示してスクロールさせるようなデザインにすると、使いやすくてデザインも優れたページに仕上げることができますね。

Station

Stationという様々なツールを1つにまとめて管理することができるツールのプロダクトサイトです。ページの左側がコンテンツ部分となっていてスクロールすることができ、ページの右側はコンテンツ部分に合わせて画像が変化するような作りになっています。シンプルな作りですがプロダクトについて分かりやすく説明されており、優れたプロダクトサイトの1つです。

関連記事

6. 大胆な配色

ミニマルデザインのようなシンプルなデザインも人気がありますが、一方で主張の強い配色を行うことでユーザーにインパクトを与えるようなデザインも人気を集めています。

初心者が大胆な配色を行うとチープな印象になってしまう可能性がありますが、全体のバランスやデザイン、他の色との組み合わせを工夫することによって独創的で個性的なWebサイトを作ることができます。

DesignBetter.Co

ページのスクロールに合わせて、背景色が色々と変わるようなデザインです。1つのページに様々な色を取り入れるのは難しいと言われていますが、背景色をガラッと変えることによってそれぞれのコンテンツを目立たせることができていますね。

BIG OMAHA

全体的に赤色でメインカラーが統一されているデザインのWebページです。赤という色は印象的な色なのでデザインに使われる機会は多いですが、赤と白の組み合わせで作られているページは多くても黒色と組み合わせて作られているWebページはあまり多くないのではないでしょうか。

白背景に黒文字というこれまでの一般的なWebサイトとは違い、主張の強い色をあえて多めに使うことによってWebサイトの個性が引き立ち、他のデザインとの差別化を図ることができます。

7. タイポグラフィ

タイポグラフィとは、テキストのデザインのことです。デザイン性の高いテキストに仕上げる「文字を見せるタイポグラフィ」とテキストを読みやすくするための「文字を読ませるタイポグラフィ」の2つに分けられます。

テキストのデザイン性を高めることにより、インパクトを強めたり印象的なイメージを与えるようなタイポグラフィが近年より注目されています。

Pleasure to Burn

こちらのサイトのように、ヒーローヘッダーの背景画像の上に半透明でタイポグラフィを表示するようなデザインが増えています。単純にテキストを表示する場合と比べてデザインに一体感がうまれ、まとまった印象に仕上げることができますね。

funplex

こちらのサイトもタイポグラフィと背景画像が組み合わせたデザインとなっています。表示する要素はテキストと画像でとてもシンプルですが、それらを効果的に組み合わえてアニメーションを追加することにより、リッチなデザインのページとなっています。

8. 左右に配置されたナビゲーションメニュー

ナビゲーションメニューは一般的にページの最上部に表示されていますが、最近では画面の左右にナビゲーションメニューを配置するWebサイトが増えてきました。

画面の左右にナビゲーションを配置することで、スクロールしても固定したまま表示しておくことができたり、余白となる部分を活用することができるなどのメリットがあります。

TIARA inc.

日本のアパレルブランドのWebサイトです。画面の左側にサイドバーのような形でナビゲーションメニューを表示することにより、コンテンツの表示を縦方向に広く使うことができています。固定された位置にメニューが表示されていることによって、今表示しているページが分かりやすいというメリットもあります。

VANGUARD

こちらは海外のWebサイトですが、先ほどのサイトと同様にサイドバーにメニューが設置されています。一般的にWebサイトは縦方向にスクロールするため、コンテンツ部分とナビゲーション部分の区切りがはっきりとしているため、UI/UXの観点で使いやすさが魅力のレイアウトですね。

9. 美しいローディングアニメーション

ページサイズの大きなWebサイトは読み込みに時間がかかってしまいますが、読み込み中に美しいローディングアニメーションが増えています。読み込み時間が長くなるほどユーザーの離脱率は高まってしまいますが、アニメーションを上手く活用することによって離脱率を抑える効果が期待できます。

具体的には読み込みの進み具合をグラフィカルに表示することにより、ただローディングアニメーションをループさせる場合よりも離脱率が低くなるというデータが出ています。さらに、アニメーションに楽しさや面白さを加えることでさらに効果は高まるでしょう。

ALE Co., Ltd.

読み込み完了時に画面左部のサイドバーとなる部分が、ローディングのゲージとして使われているデザインです。読込状況をゲージという形で把握できるのはもちろん、ただ表示するだけではなくそれをサイドバーとして利用するという所がとてもおしゃれです。

the HOUSE

読み込み時のローディングアニメーションが、実はブランドのロゴだったという楽しさを取り入れたWebサイトです。コップにドリンクを注ぐ様子を再現した様なローディングアニメーション自体も面白いアイデアですね。

関連記事

10. モバイルファーストデザイン

モバイルファーストデザインというのは、PC用デザインをメインにしてモバイル用デザインを作るのではなく、モバイル用デザインをメインに考え、それに合わせてPC用デザインを作成するという考え方です。

どうしても後回しに考えてしまいがちなモバイル用デザインですが、スマホからのアクセスは年々増え続けています。アクセス解析ツールなどでユーザーが使用しているデバイスの割合を確認し、モバイル端末でのアクセスが多いようであればモバイルファーストデザインを用いてデザインを作成した方がいいかもしれません。

2018年はこれまで以上にモバイル(スマホ)表示した時のデザインが優れたWebサイトが増えるでしょう。

RaNa design associates, inc.

東京にあるデザイン会社の採用ページです。採用に関する情報をチャット形式で説明されていて、スマホでの表示を意識したデザインとなっています。退屈になってしまいがちな採用ページに遊びが取り入れられていて、楽しげな社風が伝わってきますね。

チャットのようにして極端にモバイルにデザインを寄せるのが正解というわけではありませんが、スマホ用デザインをベースにしてPCサイズのデザインも作るという流れが主流になってくるかもしれません。

11. マイクロインタラクションと高いユーザビリティ

マイクロインタラクションとは、ユーザーのアクションを促したり、アクションへのフィードバックを表現する「動き」のことを言います。

例えばボタンを押した時にボタンの表示が変わったり、リンクにマウスを合わせると色が変化したりすることで、ユーザーが直感的に使えるようになります。スマホは指で直接タップするためよりマイクロインタラクションが重要になるなど、2018年はユーザビリティの高いWebデザインが求められてくるでしょう。

まとめ

2017年から続いている流れですが、シンプルなサイトはよりシンプルに、そして難しいテクニックや技術が使われているWebサイトはより工夫を凝らしたWebサイトという形で、それぞれ異なる方向へ発展が進んでいるような印象を受けます。

アニメーションやパララックスも流行のテクニックですが、最適な形で取り入れないとページの読み込み速度が低下したり、スクロールがカクついてしまったりするなど、ユーザービリティの低下を招いてしまいますね。

改めて、Webデザインを行う際はページのコンセプトや目的、ターゲットなどを明確にし、デザインを行っていくことが重要です。

主要なデザイン手法については、下記のページでご紹介しているので気になる方はぜひご覧になってください。

おすすめの記事